feat: add core UI components and baseline tests

packages/ui/src/components/radio-group.variants.ts

@@ -0,0 +1,30 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const radioGroupVariants = cva(["grid gap-3"], {
+  variants: {
+    orientation: {
+      horizontal: "sm:grid-flow-col sm:auto-cols-fr",
+      vertical: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+
+export const radioGroupItemVariants = cva(
+  [
+    "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-[var(--color-border-strong)] bg-[var(--color-card)] shadow-[var(--shadow-xs)] outline-none",
+    "text-[var(--color-primary)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+    "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
+    "data-[state=checked]:border-[var(--color-primary)]",
+    "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
+    getMotionRecipeClassNames("ring")
+  ]
+);
+
+export const radioGroupIndicatorVariants = cva([
+  "flex size-full items-center justify-center after:block after:size-2 after:rounded-full after:bg-current after:content-['']"
+]);