feat: add core UI components and baseline tests

2026-03-19 16:56:27 +08:00
parent 12642e0a92
commit 063179933c
73 changed files with 5756 additions and 2 deletions
@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+
+import { cn } from "../lib/cn";
+import { cva, type VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+const spinnerVariants = cva(
+  [
+    "inline-block rounded-full border-current border-r-transparent align-middle",
+    "animate-spin"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3 border-[1.5px]",
+        md: "size-4 border-2",
+        lg: "size-5 border-2"
+      },
+      tone: {
+        default: "text-[var(--color-muted-foreground)]",
+        current: "text-current",
+        primary: "text-[var(--color-primary)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "current"
+    }
+  }
+);
+
+export type SpinnerProps = React.ComponentPropsWithoutRef<"span"> &
+  VariantProps<typeof spinnerVariants>;
+
+export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(
+  {
+    className,
+    size = "md",
+    tone = "current",
+    ...props
+  },
+  ref
+) {
+  return (
+    <span
+      {...props}
+      {...createSlot("icon")}
+      {...createDataAttributes({
+        size,
+        tone
+      })}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      className={cn(spinnerVariants({ size, tone }), className)}
+      ref={ref}
+    />
+  );
+});