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,58 @@
+import { forwardRef } from "react";
+
+import { cn } from "../lib/cn";
+import { cva, type VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+const skeletonVariants = cva(
+  [
+    "relative overflow-hidden rounded-[var(--radius-sm)] bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
+    "before:absolute before:inset-0 before:bg-[linear-gradient(110deg,transparent_0%,rgba(255,255,255,0.48)_42%,transparent_72%)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]"
+  ],
+  {
+    variants: {
+      shape: {
+        line: "h-4 w-full",
+        block: "h-24 w-full rounded-[var(--radius-md)]",
+        pill: "h-10 w-32 rounded-[var(--radius-full)]",
+        avatar: "size-12 rounded-[var(--radius-full)]"
+      },
+      tone: {
+        default:
+          "bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
+        muted: "bg-[var(--color-muted)]"
+      }
+    },
+    defaultVariants: {
+      shape: "line",
+      tone: "default"
+    }
+  }
+);
+
+export type SkeletonProps = React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof skeletonVariants>;
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  {
+    className,
+    shape = "line",
+    tone = "default",
+    ...props
+  },
+  ref
+) {
+  return (
+    <div
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({
+        shape,
+        tone
+      })}
+      aria-hidden="true"
+      className={cn(skeletonVariants({ shape, tone }), className)}
+      ref={ref}
+    />
+  );
+});