feat: add core UI components and baseline tests

packages/ui/src/components/input.variants.ts

@@ -0,0 +1,28 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const inputVariants = cva(
+  [
+    "flex w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)]",
+    "text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
+    "placeholder:text-[var(--color-muted-foreground)]",
+    "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
+    "disabled:cursor-not-allowed disabled:bg-[var(--color-surface)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
+    "read-only:bg-[var(--color-surface)] read-only:text-[var(--color-muted-foreground)]",
+    "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
+    "aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
+    getMotionRecipeClassNames("ring")
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-10 px-3 text-sm",
+        md: "h-11 px-4 text-sm",
+        lg: "h-12 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);