From 063179933c25175b32244cb2b1fd0d8acfc19b22 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 19 Mar 2026 16:56:27 +0800
Subject: [PATCH] feat: add core UI components and baseline tests

---
 apps/docs/src/components/checkbox.stories.tsx |   57 +
 apps/docs/src/components/dialog.stories.tsx   |   46 +
 .../src/components/dropdown-menu.stories.tsx  |   66 +
 apps/docs/src/components/field.stories.tsx    |   50 +
 apps/docs/src/components/input.stories.tsx    |   71 +
 apps/docs/src/components/label.stories.tsx    |   43 +
 apps/docs/src/components/popover.stories.tsx  |   32 +
 .../src/components/radio-group.stories.tsx    |   53 +
 apps/docs/src/components/select.stories.tsx   |   66 +
 .../docs/src/components/separator.stories.tsx |   81 +
 apps/docs/src/components/skeleton.stories.tsx |   50 +
 apps/docs/src/components/spinner.stories.tsx  |   49 +
 apps/docs/src/components/switch.stories.tsx   |   57 +
 apps/docs/src/components/tabs.stories.tsx     |   36 +
 apps/docs/src/components/textarea.stories.tsx |   71 +
 apps/docs/src/components/toast.stories.tsx    |   46 +
 apps/docs/src/components/tooltip.stories.tsx  |   31 +
 apps/docs/src/preview.css                     |    1 +
 package.json                                  |    9 +-
 packages/tokens/src/motion.css                |   10 +
 packages/ui/package.json                      |   20 +-
 packages/ui/src/components/button.test.tsx    |   52 +
 packages/ui/src/components/checkbox.test.tsx  |   52 +
 packages/ui/src/components/checkbox.tsx       |   37 +
 .../ui/src/components/checkbox.variants.ts    |   18 +
 packages/ui/src/components/dialog.test.tsx    |  108 ++
 packages/ui/src/components/dialog.tsx         |  111 ++
 packages/ui/src/components/dialog.variants.ts |   33 +
 .../ui/src/components/dropdown-menu.test.tsx  |   91 +
 packages/ui/src/components/dropdown-menu.tsx  |  231 +++
 .../src/components/dropdown-menu.variants.ts  |   68 +
 packages/ui/src/components/field.test.tsx     |   50 +
 packages/ui/src/components/field.tsx          |  174 ++
 packages/ui/src/components/input.test.tsx     |   55 +
 packages/ui/src/components/input.tsx          |   66 +
 packages/ui/src/components/input.variants.ts  |   28 +
 packages/ui/src/components/label.test.tsx     |   42 +
 packages/ui/src/components/label.tsx          |   56 +
 packages/ui/src/components/popover.test.tsx   |   57 +
 packages/ui/src/components/popover.tsx        |   51 +
 .../ui/src/components/popover.variants.ts     |   21 +
 .../ui/src/components/radio-group.test.tsx    |   65 +
 packages/ui/src/components/radio-group.tsx    |   60 +
 .../ui/src/components/radio-group.variants.ts |   30 +
 packages/ui/src/components/select.test.tsx    |  131 ++
 packages/ui/src/components/select.tsx         |  141 ++
 packages/ui/src/components/select.variants.ts |   38 +
 packages/ui/src/components/separator.test.tsx |   28 +
 packages/ui/src/components/separator.tsx      |   38 +
 .../ui/src/components/separator.variants.ts   |   18 +
 packages/ui/src/components/skeleton.test.tsx  |   26 +
 packages/ui/src/components/skeleton.tsx       |   58 +
 packages/ui/src/components/spinner.test.tsx   |   23 +
 packages/ui/src/components/spinner.tsx        |   57 +
 packages/ui/src/components/switch.test.tsx    |   70 +
 packages/ui/src/components/switch.tsx         |   35 +
 packages/ui/src/components/switch.variants.ts |   19 +
 packages/ui/src/components/tabs.test.tsx      |   54 +
 packages/ui/src/components/tabs.tsx           |   66 +
 packages/ui/src/components/tabs.variants.ts   |   20 +
 packages/ui/src/components/textarea.test.tsx  |   54 +
 packages/ui/src/components/textarea.tsx       |   66 +
 .../ui/src/components/textarea.variants.ts    |   28 +
 packages/ui/src/components/toast.test.tsx     |   69 +
 packages/ui/src/components/toast.tsx          |  104 ++
 packages/ui/src/components/toast.variants.ts  |   42 +
 packages/ui/src/components/tooltip.test.tsx   |   62 +
 packages/ui/src/components/tooltip.tsx        |   50 +
 .../ui/src/components/tooltip.variants.ts     |   21 +
 packages/ui/src/index.ts                      |  156 ++
 packages/ui/src/test/setup.ts                 |   64 +
 pnpm-lock.yaml                                | 1663 +++++++++++++++++
 vitest.config.ts                              |   56 +
 73 files changed, 5756 insertions(+), 2 deletions(-)
 create mode 100644 apps/docs/src/components/checkbox.stories.tsx
 create mode 100644 apps/docs/src/components/dialog.stories.tsx
 create mode 100644 apps/docs/src/components/dropdown-menu.stories.tsx
 create mode 100644 apps/docs/src/components/field.stories.tsx
 create mode 100644 apps/docs/src/components/input.stories.tsx
 create mode 100644 apps/docs/src/components/label.stories.tsx
 create mode 100644 apps/docs/src/components/popover.stories.tsx
 create mode 100644 apps/docs/src/components/radio-group.stories.tsx
 create mode 100644 apps/docs/src/components/select.stories.tsx
 create mode 100644 apps/docs/src/components/separator.stories.tsx
 create mode 100644 apps/docs/src/components/skeleton.stories.tsx
 create mode 100644 apps/docs/src/components/spinner.stories.tsx
 create mode 100644 apps/docs/src/components/switch.stories.tsx
 create mode 100644 apps/docs/src/components/tabs.stories.tsx
 create mode 100644 apps/docs/src/components/textarea.stories.tsx
 create mode 100644 apps/docs/src/components/toast.stories.tsx
 create mode 100644 apps/docs/src/components/tooltip.stories.tsx
 create mode 100644 packages/ui/src/components/button.test.tsx
 create mode 100644 packages/ui/src/components/checkbox.test.tsx
 create mode 100644 packages/ui/src/components/checkbox.tsx
 create mode 100644 packages/ui/src/components/checkbox.variants.ts
 create mode 100644 packages/ui/src/components/dialog.test.tsx
 create mode 100644 packages/ui/src/components/dialog.tsx
 create mode 100644 packages/ui/src/components/dialog.variants.ts
 create mode 100644 packages/ui/src/components/dropdown-menu.test.tsx
 create mode 100644 packages/ui/src/components/dropdown-menu.tsx
 create mode 100644 packages/ui/src/components/dropdown-menu.variants.ts
 create mode 100644 packages/ui/src/components/field.test.tsx
 create mode 100644 packages/ui/src/components/field.tsx
 create mode 100644 packages/ui/src/components/input.test.tsx
 create mode 100644 packages/ui/src/components/input.tsx
 create mode 100644 packages/ui/src/components/input.variants.ts
 create mode 100644 packages/ui/src/components/label.test.tsx
 create mode 100644 packages/ui/src/components/label.tsx
 create mode 100644 packages/ui/src/components/popover.test.tsx
 create mode 100644 packages/ui/src/components/popover.tsx
 create mode 100644 packages/ui/src/components/popover.variants.ts
 create mode 100644 packages/ui/src/components/radio-group.test.tsx
 create mode 100644 packages/ui/src/components/radio-group.tsx
 create mode 100644 packages/ui/src/components/radio-group.variants.ts
 create mode 100644 packages/ui/src/components/select.test.tsx
 create mode 100644 packages/ui/src/components/select.tsx
 create mode 100644 packages/ui/src/components/select.variants.ts
 create mode 100644 packages/ui/src/components/separator.test.tsx
 create mode 100644 packages/ui/src/components/separator.tsx
 create mode 100644 packages/ui/src/components/separator.variants.ts
 create mode 100644 packages/ui/src/components/skeleton.test.tsx
 create mode 100644 packages/ui/src/components/skeleton.tsx
 create mode 100644 packages/ui/src/components/spinner.test.tsx
 create mode 100644 packages/ui/src/components/spinner.tsx
 create mode 100644 packages/ui/src/components/switch.test.tsx
 create mode 100644 packages/ui/src/components/switch.tsx
 create mode 100644 packages/ui/src/components/switch.variants.ts
 create mode 100644 packages/ui/src/components/tabs.test.tsx
 create mode 100644 packages/ui/src/components/tabs.tsx
 create mode 100644 packages/ui/src/components/tabs.variants.ts
 create mode 100644 packages/ui/src/components/textarea.test.tsx
 create mode 100644 packages/ui/src/components/textarea.tsx
 create mode 100644 packages/ui/src/components/textarea.variants.ts
 create mode 100644 packages/ui/src/components/toast.test.tsx
 create mode 100644 packages/ui/src/components/toast.tsx
 create mode 100644 packages/ui/src/components/toast.variants.ts
 create mode 100644 packages/ui/src/components/tooltip.test.tsx
 create mode 100644 packages/ui/src/components/tooltip.tsx
 create mode 100644 packages/ui/src/components/tooltip.variants.ts
 create mode 100644 packages/ui/src/test/setup.ts
 create mode 100644 vitest.config.ts

diff --git a/apps/docs/src/components/checkbox.stories.tsx b/apps/docs/src/components/checkbox.stories.tsx
new file mode 100644
index 0000000..c9a4f65
--- /dev/null
+++ b/apps/docs/src/components/checkbox.stories.tsx
@@ -0,0 +1,57 @@
+import { Checkbox, Label } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  args: {
+    defaultChecked: true
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    defaultChecked: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    invalid: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid gap-4">
+      <div className="flex items-center gap-3">
+        <Checkbox defaultChecked id="checkbox-default" />
+        <Label htmlFor="checkbox-default">Default checked</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Checkbox id="checkbox-unchecked" />
+        <Label htmlFor="checkbox-unchecked">Unchecked</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Checkbox disabled id="checkbox-disabled" />
+        <Label htmlFor="checkbox-disabled">Disabled</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Checkbox id="checkbox-invalid" invalid />
+        <Label htmlFor="checkbox-invalid">Invalid state</Label>
+      </div>
+    </div>
+  )
+};
diff --git a/apps/docs/src/components/dialog.stories.tsx b/apps/docs/src/components/dialog.stories.tsx
new file mode 100644
index 0000000..d0947d9
--- /dev/null
+++ b/apps/docs/src/components/dialog.stories.tsx
@@ -0,0 +1,46 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open approval dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Launch this release?</DialogTitle>
+          <DialogDescription>
+            This will notify the routing team and publish the release note to the activity feed.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost">Cancel</Button>
+          <Button>Confirm launch</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+};
diff --git a/apps/docs/src/components/dropdown-menu.stories.tsx b/apps/docs/src/components/dropdown-menu.stories.tsx
new file mode 100644
index 0000000..6d59028
--- /dev/null
+++ b/apps/docs/src/components/dropdown-menu.stories.tsx
@@ -0,0 +1,66 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary">Open menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Launch actions</DropdownMenuLabel>
+        <DropdownMenuItem>
+          Review summary
+          <DropdownMenuShortcut>R</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          Share preview
+          <DropdownMenuShortcut>S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked>Notify stakeholders</DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value="staged">
+          <DropdownMenuRadioItem value="staged">Staged rollout</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="global">Global rollout</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger inset>More actions</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Duplicate release</DropdownMenuItem>
+            <DropdownMenuItem variant="destructive">Archive release</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+};
diff --git a/apps/docs/src/components/field.stories.tsx b/apps/docs/src/components/field.stories.tsx
new file mode 100644
index 0000000..4474128
--- /dev/null
+++ b/apps/docs/src/components/field.stories.tsx
@@ -0,0 +1,50 @@
+import { Field, FieldControl, FieldDescription, FieldError, Input, Label, Textarea } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+function FieldExamples() {
+  return (
+    <div className="grid w-[720px] gap-6">
+      <Field required>
+        <Label requiredIndicator>Project name</Label>
+        <FieldControl>
+          <Input placeholder="Cadence launch" />
+          <FieldDescription>
+            This appears in your internal release log and changelog.
+          </FieldDescription>
+        </FieldControl>
+      </Field>
+
+      <Field invalid>
+        <Label requiredIndicator>Slug</Label>
+        <FieldControl>
+          <Input defaultValue="launch party!" />
+          <FieldDescription>Use lowercase letters, numbers, and hyphens only.</FieldDescription>
+          <FieldError>Slug cannot contain spaces or punctuation.</FieldError>
+        </FieldControl>
+      </Field>
+
+      <Field orientation="horizontal" readOnly>
+        <Label>Internal note</Label>
+        <FieldControl>
+          <Textarea defaultValue="Read-only example for system generated notes." />
+          <FieldDescription>Horizontal layout is useful for denser settings forms.</FieldDescription>
+        </FieldControl>
+      </Field>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Components/Field",
+  component: FieldExamples,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof FieldExamples>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const States: Story = {};
diff --git a/apps/docs/src/components/input.stories.tsx b/apps/docs/src/components/input.stories.tsx
new file mode 100644
index 0000000..3953884
--- /dev/null
+++ b/apps/docs/src/components/input.stories.tsx
@@ -0,0 +1,71 @@
+import { Field, FieldControl, FieldDescription, FieldError, Input, Label } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  args: {
+    placeholder: "name@company.com",
+    size: "md"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    disabled: {
+      control: "boolean"
+    },
+    invalid: {
+      control: "boolean"
+    },
+    placeholder: {
+      control: "text"
+    },
+    readOnly: {
+      control: "boolean"
+    },
+    required: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => <Input {...args} className="w-[320px]" />
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid w-[720px] gap-4 sm:grid-cols-2">
+      <Input defaultValue="studio@cadence.dev" />
+      <Input disabled defaultValue="Disabled value" />
+      <Input invalid defaultValue="launch!" />
+      <Input readOnly defaultValue="Read only value" />
+    </div>
+  )
+};
+
+export const WithField: Story = {
+  render: () => (
+    <Field invalid className="w-[420px]">
+      <Label requiredIndicator>Email address</Label>
+      <FieldControl>
+        <Input defaultValue="studio" required />
+        <FieldDescription>Use your company email so teammates can identify you.</FieldDescription>
+        <FieldError>Please enter a valid email address.</FieldError>
+      </FieldControl>
+    </Field>
+  )
+};
diff --git a/apps/docs/src/components/label.stories.tsx b/apps/docs/src/components/label.stories.tsx
new file mode 100644
index 0000000..6eeff7d
--- /dev/null
+++ b/apps/docs/src/components/label.stories.tsx
@@ -0,0 +1,43 @@
+import { Label } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Label",
+  component: Label,
+  args: {
+    children: "Email address"
+  },
+  argTypes: {
+    children: {
+      control: "text"
+    },
+    className: {
+      control: false
+    },
+    requiredIndicator: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Required: Story = {
+  args: {
+    requiredIndicator: true
+  }
+};
+
+export const Invalid: Story = {
+  args: {
+    "aria-invalid": true
+  }
+};
diff --git a/apps/docs/src/components/popover.stories.tsx b/apps/docs/src/components/popover.stories.tsx
new file mode 100644
index 0000000..ef8374c
--- /dev/null
+++ b/apps/docs/src/components/popover.stories.tsx
@@ -0,0 +1,32 @@
+import { Button, Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">Inspect summary</Button>
+      </PopoverTrigger>
+      <PopoverContent className="grid gap-3">
+        <p className="text-sm font-medium">Release health</p>
+        <p className="text-sm leading-6 text-[var(--color-muted-foreground)]">
+          12 checks passed, 2 reviewers pending, and rollout is limited to 10% of traffic.
+        </p>
+        <PopoverArrow />
+      </PopoverContent>
+    </Popover>
+  )
+};
diff --git a/apps/docs/src/components/radio-group.stories.tsx b/apps/docs/src/components/radio-group.stories.tsx
new file mode 100644
index 0000000..a051bb5
--- /dev/null
+++ b/apps/docs/src/components/radio-group.stories.tsx
@@ -0,0 +1,53 @@
+import { Label, RadioGroup, RadioGroupItem } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+function RadioGroupExamples() {
+  return (
+    <div className="grid w-[720px] gap-6">
+      <RadioGroup defaultValue="startup">
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-startup" value="startup" />
+          <Label htmlFor="mode-startup">Startup review</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-scale" value="scale" />
+          <Label htmlFor="mode-scale">Scale review</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-enterprise" value="enterprise" />
+          <Label htmlFor="mode-enterprise">Enterprise review</Label>
+        </div>
+      </RadioGroup>
+
+      <RadioGroup defaultValue="email" orientation="horizontal">
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-email" value="email" />
+          <Label htmlFor="channel-email">Email</Label>
+        </div>
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-slack" value="slack" />
+          <Label htmlFor="channel-slack">Slack</Label>
+        </div>
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-push" value="push" />
+          <Label htmlFor="channel-push">Push</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Components/RadioGroup",
+  component: RadioGroupExamples,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof RadioGroupExamples>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const States: Story = {};
diff --git a/apps/docs/src/components/select.stories.tsx b/apps/docs/src/components/select.stories.tsx
new file mode 100644
index 0000000..3c14c30
--- /dev/null
+++ b/apps/docs/src/components/select.stories.tsx
@@ -0,0 +1,66 @@
+import { Field, FieldControl, FieldDescription, FieldError, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Select defaultValue="editorial">
+        <SelectTrigger>
+          <SelectValue placeholder="Choose a review lane" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Review lane</SelectLabel>
+            <SelectItem value="editorial">Editorial review</SelectItem>
+            <SelectItem value="design">Design review</SelectItem>
+            <SelectItem value="legal">Legal review</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+};
+
+export const WithField: Story = {
+  render: () => (
+    <Field invalid className="w-[420px]">
+      <Label requiredIndicator>Routing team</Label>
+      <FieldControl>
+        <Select>
+          <SelectTrigger invalid>
+            <SelectValue placeholder="Choose a team" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Primary owners</SelectLabel>
+              <SelectItem value="product">Product</SelectItem>
+              <SelectItem value="design">Design</SelectItem>
+              <SelectItem value="engineering">Engineering</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Support teams</SelectLabel>
+              <SelectItem value="ops">Operations</SelectItem>
+              <SelectItem value="marketing">Marketing</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldDescription>The routing team receives launch and rollout notifications.</FieldDescription>
+        <FieldError>Select a primary owning team before publishing.</FieldError>
+      </FieldControl>
+    </Field>
+  )
+};
diff --git a/apps/docs/src/components/separator.stories.tsx b/apps/docs/src/components/separator.stories.tsx
new file mode 100644
index 0000000..63a8e59
--- /dev/null
+++ b/apps/docs/src/components/separator.stories.tsx
@@ -0,0 +1,81 @@
+import { Separator } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  args: {
+    orientation: "horizontal",
+    tone: "subtle"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    decorative: {
+      control: "boolean"
+    },
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"]
+    },
+    tone: {
+      control: "radio",
+      options: ["subtle", "strong"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <Separator {...args} />
+    </div>
+  )
+};
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-[420px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-sm)]">
+      <div className="space-y-3">
+        <div>
+          <h3 className="m-0 text-base font-semibold">Workspace</h3>
+          <p className="m-0 text-sm text-[var(--color-muted-foreground)]">
+            Project status and recent activity
+          </p>
+        </div>
+        <Separator />
+        <div className="grid gap-2 text-sm text-[var(--color-muted-foreground)]">
+          <div className="flex items-center justify-between">
+            <span>Tokens</span>
+            <span className="text-[var(--color-foreground)]">Stable</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Components</span>
+            <span className="text-[var(--color-foreground)]">In progress</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-16 items-center gap-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] px-5 shadow-[var(--shadow-xs)]">
+      <span className="text-sm text-[var(--color-muted-foreground)]">Overview</span>
+      <Separator className="h-8" orientation="vertical" />
+      <span className="text-sm text-[var(--color-muted-foreground)]">Metrics</span>
+      <Separator className="h-8" orientation="vertical" tone="strong" />
+      <span className="text-sm text-[var(--color-muted-foreground)]">Activity</span>
+    </div>
+  )
+};
diff --git a/apps/docs/src/components/skeleton.stories.tsx b/apps/docs/src/components/skeleton.stories.tsx
new file mode 100644
index 0000000..d707e49
--- /dev/null
+++ b/apps/docs/src/components/skeleton.stories.tsx
@@ -0,0 +1,50 @@
+import { Skeleton } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  args: {
+    shape: "line",
+    tone: "default"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    shape: {
+      control: "select",
+      options: ["line", "block", "pill", "avatar"]
+    },
+    tone: {
+      control: "radio",
+      options: ["default", "muted"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const ContentPlaceholder: Story = {
+  render: () => (
+    <div className="w-[420px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-sm)]">
+      <div className="flex items-start gap-4">
+        <Skeleton shape="avatar" />
+        <div className="min-w-0 flex-1 space-y-3">
+          <Skeleton className="w-1/3" />
+          <Skeleton className="w-full" />
+          <Skeleton className="w-5/6" tone="muted" />
+          <Skeleton shape="pill" />
+        </div>
+      </div>
+    </div>
+  )
+};
diff --git a/apps/docs/src/components/spinner.stories.tsx b/apps/docs/src/components/spinner.stories.tsx
new file mode 100644
index 0000000..a13d23b
--- /dev/null
+++ b/apps/docs/src/components/spinner.stories.tsx
@@ -0,0 +1,49 @@
+import { Spinner } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Spinner",
+  component: Spinner,
+  args: {
+    size: "md",
+    tone: "primary"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    size: {
+      control: "radio",
+      options: ["sm", "md", "lg"]
+    },
+    tone: {
+      control: "radio",
+      options: ["default", "current", "primary"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const InButtons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <div className="inline-flex items-center gap-2 rounded-[var(--radius-full)] bg-[var(--color-primary)] px-4 py-2 text-sm font-medium text-[var(--color-primary-foreground)]">
+        <Spinner size="sm" />
+        Saving
+      </div>
+      <div className="inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-[var(--color-border-strong)] px-4 py-2 text-sm font-medium">
+        <Spinner tone="default" />
+        Syncing
+      </div>
+    </div>
+  )
+};
diff --git a/apps/docs/src/components/switch.stories.tsx b/apps/docs/src/components/switch.stories.tsx
new file mode 100644
index 0000000..817f1f0
--- /dev/null
+++ b/apps/docs/src/components/switch.stories.tsx
@@ -0,0 +1,57 @@
+import { Label, Switch } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  args: {
+    defaultChecked: true
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    defaultChecked: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    invalid: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid gap-4">
+      <div className="flex items-center gap-3">
+        <Switch defaultChecked id="switch-live" />
+        <Label htmlFor="switch-live">Live publishing</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Switch id="switch-draft" />
+        <Label htmlFor="switch-draft">Draft only</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Switch disabled id="switch-disabled" />
+        <Label htmlFor="switch-disabled">Disabled</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <Switch id="switch-invalid" invalid />
+        <Label htmlFor="switch-invalid">Invalid state</Label>
+      </div>
+    </div>
+  )
+};
diff --git a/apps/docs/src/components/tabs.stories.tsx b/apps/docs/src/components/tabs.stories.tsx
new file mode 100644
index 0000000..3aa6330
--- /dev/null
+++ b/apps/docs/src/components/tabs.stories.tsx
@@ -0,0 +1,36 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <Tabs className="w-[720px]" defaultValue="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="timeline">Timeline</TabsTrigger>
+        <TabsTrigger value="audience">Audience</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        High-level release summary, current risk score, and owners.
+      </TabsContent>
+      <TabsContent value="timeline">
+        Rollout checkpoints, notification windows, and approval milestones.
+      </TabsContent>
+      <TabsContent value="audience">
+        Impacted customer groups, internal reviewers, and communication channels.
+      </TabsContent>
+    </Tabs>
+  )
+};
diff --git a/apps/docs/src/components/textarea.stories.tsx b/apps/docs/src/components/textarea.stories.tsx
new file mode 100644
index 0000000..e7210ea
--- /dev/null
+++ b/apps/docs/src/components/textarea.stories.tsx
@@ -0,0 +1,71 @@
+import { Field, FieldControl, FieldDescription, FieldError, Label, Textarea } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  args: {
+    placeholder: "Add release notes or supporting context",
+    size: "md"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    disabled: {
+      control: "boolean"
+    },
+    invalid: {
+      control: "boolean"
+    },
+    placeholder: {
+      control: "text"
+    },
+    readOnly: {
+      control: "boolean"
+    },
+    required: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => <Textarea {...args} className="w-[420px]" />
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid w-[760px] gap-4 sm:grid-cols-2">
+      <Textarea defaultValue="Default note with enough content to show the surface." />
+      <Textarea disabled defaultValue="Disabled note content." />
+      <Textarea invalid defaultValue="This content has a validation error." />
+      <Textarea readOnly defaultValue="Read-only generated notes stay muted." />
+    </div>
+  )
+};
+
+export const WithField: Story = {
+  render: () => (
+    <Field invalid className="w-[480px]">
+      <Label requiredIndicator>Launch summary</Label>
+      <FieldControl>
+        <Textarea required />
+        <FieldDescription>Keep it short enough for the changelog card.</FieldDescription>
+        <FieldError>Summary needs at least 24 characters.</FieldError>
+      </FieldControl>
+    </Field>
+  )
+};
diff --git a/apps/docs/src/components/toast.stories.tsx b/apps/docs/src/components/toast.stories.tsx
new file mode 100644
index 0000000..5f15bfa
--- /dev/null
+++ b/apps/docs/src/components/toast.stories.tsx
@@ -0,0 +1,46 @@
+import {
+  Button,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+function ToastDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ToastProvider swipeDirection="right">
+      <Button onClick={() => setOpen(true)}>Show toast</Button>
+      <Toast onOpenChange={setOpen} open={open} variant="success">
+        <ToastTitle>Release queued</ToastTitle>
+        <ToastDescription>
+          The rollout has been scheduled and reviewers were notified.
+        </ToastDescription>
+        <ToastAction altText="Open rollout">Open rollout</ToastAction>
+        <ToastClose />
+      </Toast>
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
+
+const meta = {
+  title: "Components/Toast",
+  component: ToastDemo,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof ToastDemo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
diff --git a/apps/docs/src/components/tooltip.stories.tsx b/apps/docs/src/components/tooltip.stories.tsx
new file mode 100644
index 0000000..fbd5ea4
--- /dev/null
+++ b/apps/docs/src/components/tooltip.stories.tsx
@@ -0,0 +1,31 @@
+import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost">Hover for note</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Inline notes stay terse and avoid blocking the main flow.
+          <TooltipArrow />
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+};
diff --git a/apps/docs/src/preview.css b/apps/docs/src/preview.css
index 51ebf5f..bdbd419 100644
--- a/apps/docs/src/preview.css
+++ b/apps/docs/src/preview.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@ai-ui/tokens/styles.css";
+@source "../../../packages/ui/src";
 
 :root {
   background: var(--color-background);
diff --git a/package.json b/package.json
index a8debfc..9d5239a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "build:docs": "pnpm --filter @ai-ui/docs build-storybook",
     "dev:docs": "pnpm --filter @ai-ui/docs storybook",
     "lint": "eslint .",
+    "test": "pnpm --filter @ai-ui/ui test",
+    "test:watch": "pnpm --filter @ai-ui/ui test:watch",
     "typecheck": "pnpm -r typecheck"
   },
   "devDependencies": {
@@ -21,6 +23,9 @@
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.5.0",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
@@ -28,11 +33,13 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "jsdom": "^29.0.0",
     "storybook": "^8.6.14",
     "tailwindcss": "^4.2.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.1",
-    "vite": "^6.4.1"
+    "vite": "^6.4.1",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/packages/tokens/src/motion.css b/packages/tokens/src/motion.css
index a2e3d4e..2a5a718 100644
--- a/packages/tokens/src/motion.css
+++ b/packages/tokens/src/motion.css
@@ -108,6 +108,16 @@
   }
 }
 
+@keyframes aiui-skeleton-shimmer {
+  from {
+    transform: translateX(-120%);
+  }
+
+  to {
+    transform: translateX(120%);
+  }
+}
+
 .motion-transition {
   transition-duration: var(--dur-base);
   transition-property: color, background-color, border-color, box-shadow, opacity,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7200d90..6c0a9eb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,19 +12,37 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --clean --dts --format esm,cjs",
+    "test": "vitest run --config ../../vitest.config.ts",
+    "test:watch": "vitest --config ../../vitest.config.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "@ai-ui/tokens": "workspace:*",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.38.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "jsdom": "^29.0.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",
diff --git a/packages/ui/src/components/button.test.tsx b/packages/ui/src/components/button.test.tsx
new file mode 100644
index 0000000..f389ed1
--- /dev/null
+++ b/packages/ui/src/components/button.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders a native button with root and label slots", () => {
+    render(<Button variant="secondary">Save changes</Button>);
+
+    const button = screen.getByRole("button", { name: "Save changes" });
+
+    expect(button).toHaveAttribute("data-slot", "root");
+    expect(button).toHaveAttribute("data-variant", "secondary");
+    expect(button).toHaveAttribute("type", "button");
+    expect(screen.getByText("Save changes")).toHaveAttribute("data-slot", "label");
+  });
+
+  it("disables interaction and exposes loading hooks when loading", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    render(
+      <Button loading onClick={onClick}>
+        Saving
+      </Button>
+    );
+
+    const button = screen.getByRole("button", { name: "Saving" });
+
+    await user.click(button);
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("data-loading", "");
+    expect(button.querySelector('[data-slot="icon"]')).toBeInTheDocument();
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("supports asChild rendering without forcing button semantics", () => {
+    render(
+      <Button asChild variant="ghost">
+        <a href="/release-notes">Release notes</a>
+      </Button>
+    );
+
+    const link = screen.getByRole("link", { name: "Release notes" });
+
+    expect(link).toHaveAttribute("data-slot", "root");
+    expect(link).toHaveAttribute("data-variant", "ghost");
+    expect(link).not.toHaveAttribute("type");
+  });
+});
diff --git a/packages/ui/src/components/checkbox.test.tsx b/packages/ui/src/components/checkbox.test.tsx
new file mode 100644
index 0000000..74a62a1
--- /dev/null
+++ b/packages/ui/src/components/checkbox.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("renders with root and icon slots and toggles by click", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+
+    render(<Checkbox aria-label="Accept terms" onCheckedChange={onCheckedChange} />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    expect(checkbox).toHaveAttribute("data-slot", "root");
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+    await user.click(checkbox);
+
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(screen.getByText("✓")).toHaveAttribute("data-slot", "icon");
+  });
+
+  it("supports keyboard interaction", async () => {
+    const user = userEvent.setup();
+
+    render(<Checkbox aria-label="Keyboard checkbox" />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Keyboard checkbox" });
+
+    await user.tab();
+    expect(checkbox).toHaveFocus();
+
+    await user.keyboard(" ");
+
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it("exposes disabled and invalid state hooks", () => {
+    render(<Checkbox aria-label="Disabled checkbox" disabled invalid />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Disabled checkbox" });
+
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute("aria-invalid", "true");
+    expect(checkbox).toHaveAttribute("data-disabled", "");
+  });
+});
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
new file mode 100644
index 0000000..763890f
--- /dev/null
+++ b/packages/ui/src/components/checkbox.tsx
@@ -0,0 +1,37 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { checkboxIndicatorVariants, checkboxVariants } from "./checkbox.variants";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+  invalid?: boolean;
+};
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(function Checkbox({ className, disabled, invalid, ...props }, ref) {
+  return (
+    <CheckboxPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({
+        disabled,
+        invalid
+      })}
+      aria-invalid={invalid || undefined}
+      className={cn(checkboxVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    >
+      <CheckboxPrimitive.Indicator
+        {...createSlot("icon")}
+        className={checkboxIndicatorVariants()}
+      >
+        ✓
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
diff --git a/packages/ui/src/components/checkbox.variants.ts b/packages/ui/src/components/checkbox.variants.ts
new file mode 100644
index 0000000..967aa01
--- /dev/null
+++ b/packages/ui/src/components/checkbox.variants.ts
@@ -0,0 +1,18 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const checkboxVariants = cva(
+  [
+    "inline-flex size-5 shrink-0 items-center justify-center rounded-[calc(var(--radius-sm)-4px)] border border-[var(--color-border-strong)] bg-[var(--color-card)] shadow-[var(--shadow-xs)] outline-none",
+    "text-[var(--color-primary-foreground)] 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-[state=checked]:border-[var(--color-primary)] data-[state=checked]:bg-[var(--color-primary)]",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
+    "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
+    getMotionRecipeClassNames("ring")
+  ]
+);
+
+export const checkboxIndicatorVariants = cva([
+  "inline-flex items-center justify-center text-[0.8rem] leading-none"
+]);
diff --git a/packages/ui/src/components/dialog.test.tsx b/packages/ui/src/components/dialog.test.tsx
new file mode 100644
index 0000000..86a2ecc
--- /dev/null
+++ b/packages/ui/src/components/dialog.test.tsx
@@ -0,0 +1,108 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./dialog";
+
+describe("Dialog", () => {
+  it("opens from the trigger and closes from the close control", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open dialog</DialogTrigger>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>Review launch</DialogTitle>
+            <DialogDescription>Check the launch checklist before shipping.</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose>Done</DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Open dialog" }));
+
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveAttribute("data-slot", "content");
+    expect(dialog).toHaveAttribute("data-size", "lg");
+    expect(screen.getByText("Review launch")).toHaveAttribute("data-slot", "label");
+    expect(screen.getByText("Check the launch checklist before shipping.")).toHaveAttribute(
+      "data-slot",
+      "description"
+    );
+    expect(document.querySelector('[data-slot="overlay"]')).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Close dialog" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("notifies controlled open state changes from trigger and Escape", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    render(
+      <Dialog open={false} onOpenChange={onOpenChange}>
+        <DialogTrigger>Launch dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Controlled</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Launch dialog" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    render(
+      <Dialog open onOpenChange={onOpenChange}>
+        <DialogTrigger>Launch dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Controlled</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    );
+
+    await user.keyboard("{Escape}");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("renders header and footer slots when provided", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open summary</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Summary</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose>Close</DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open summary" }));
+
+    const dialog = await screen.findByRole("dialog");
+    expect(within(dialog).getByText("Summary").closest('[data-slot="header"]')).toBeInTheDocument();
+    expect(within(dialog).getByRole("button", { name: "Close" }).closest('[data-slot="footer"]')).toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
new file mode 100644
index 0000000..e80ed09
--- /dev/null
+++ b/packages/ui/src/components/dialog.tsx
@@ -0,0 +1,111 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants } from "./dialog.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogOverlay = forwardRef<
+  ElementRef<typeof DialogPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(function DialogOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      {...props}
+      {...createSlot("overlay")}
+      className={cn(dialogOverlayVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  VariantProps<typeof dialogContentVariants>;
+
+export const DialogContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(function DialogContent({ children, className, size, ...props }, ref) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        {...props}
+        {...createSlot("content")}
+        {...createDataAttributes({ size })}
+        className={cn(dialogContentVariants({ size }), className)}
+        ref={ref}
+      >
+        {children}
+        <DialogPrimitive.Close
+          aria-label="Close dialog"
+          className="absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)] outline-none transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+        >
+          <span aria-hidden="true" className="text-lg leading-none">
+            ×
+          </span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+
+export function DialogHeader({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      {...createSlot("header")}
+      className={cn(dialogHeaderVariants(), className)}
+    />
+  );
+}
+
+export function DialogFooter({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      {...createSlot("footer")}
+      className={cn(dialogFooterVariants(), className)}
+    />
+  );
+}
+
+export const DialogTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      {...props}
+      {...createSlot("label")}
+      className={cn("pr-10 text-xl font-semibold tracking-tight", className)}
+      ref={ref}
+    />
+  );
+});
+
+export const DialogDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      {...props}
+      {...createSlot("description")}
+      className={cn("text-sm leading-6 text-[var(--color-muted-foreground)]", className)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/ui/src/components/dialog.variants.ts b/packages/ui/src/components/dialog.variants.ts
new file mode 100644
index 0000000..e5e5373
--- /dev/null
+++ b/packages/ui/src/components/dialog.variants.ts
@@ -0,0 +1,33 @@
+import { cva } from "../lib/cva";
+
+export const dialogOverlayVariants = cva([
+  "fixed inset-0 z-50 bg-[var(--color-overlay)] backdrop-blur-[2px]",
+  "data-[state=open]:motion-overlay-enter data-[state=closed]:motion-overlay-exit"
+]);
+
+export const dialogContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-5",
+    "w-[min(calc(100vw-2rem),40rem)] max-h-[calc(100vh-2rem)] overflow-y-auto",
+    "rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[min(calc(100vw-2rem),30rem)]",
+        md: "w-[min(calc(100vw-2rem),40rem)]",
+        lg: "w-[min(calc(100vw-2rem),52rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export const dialogHeaderVariants = cva(["flex flex-col gap-2 text-left"]);
+
+export const dialogFooterVariants = cva([
+  "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+]);
diff --git a/packages/ui/src/components/dropdown-menu.test.tsx b/packages/ui/src/components/dropdown-menu.test.tsx
new file mode 100644
index 0000000..34bb693
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger
+} from "./dropdown-menu";
+
+describe("DropdownMenu", () => {
+  it("opens from the trigger and renders label, items, and shortcuts", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+        <DropdownMenuContent size="lg">
+          <DropdownMenuLabel inset>Launch actions</DropdownMenuLabel>
+          <DropdownMenuItem inset onSelect={onSelect}>
+            Publish
+            <DropdownMenuShortcut>P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem checked>Require review</DropdownMenuCheckboxItem>
+          <DropdownMenuRadioGroup value="design">
+            <DropdownMenuRadioItem value="design">Design</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open menu" }));
+
+    const menu = await screen.findByRole("menu");
+    expect(menu).toHaveAttribute("data-slot", "content");
+    expect(menu).toHaveAttribute("data-size", "lg");
+    expect(screen.getByText("Launch actions")).toHaveAttribute("data-slot", "label");
+    expect(screen.getByText("Publish").closest('[data-slot="item"]')).toHaveAttribute(
+      "data-inset",
+      ""
+    );
+    expect(screen.getByText("P")).toHaveAttribute("data-slot", "shortcut");
+    expect(screen.getByText("Require review").closest('[data-slot="item"]')).toHaveAttribute(
+      "data-checked",
+      ""
+    );
+
+    await user.click(screen.getByText("Publish"));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes on Escape and supports controlled opening", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    render(
+      <DropdownMenu open={false} onOpenChange={onOpenChange}>
+        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Open</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open menu" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    render(
+      <DropdownMenu open onOpenChange={onOpenChange}>
+        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Open</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+});
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
new file mode 100644
index 0000000..604e913
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -0,0 +1,231 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes
+} from "react";
+
+import {
+  dropdownMenuContentVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuLabelVariants,
+  dropdownMenuSeparatorVariants
+} from "./dropdown-menu.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export type DropdownMenuContentProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
+    VariantProps<typeof dropdownMenuContentVariants>;
+
+export const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(function DropdownMenuContent(
+  { className, sideOffset = 8, size, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPortal>
+      <DropdownMenuPrimitive.Content
+        {...props}
+        {...createSlot("content")}
+        {...createDataAttributes({ size })}
+        className={cn(dropdownMenuContentVariants({ size }), className)}
+        ref={ref}
+        sideOffset={sideOffset}
+      />
+    </DropdownMenuPortal>
+  );
+});
+
+export type DropdownMenuSubContentProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> &
+    VariantProps<typeof dropdownMenuContentVariants>;
+
+export const DropdownMenuSubContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  DropdownMenuSubContentProps
+>(function DropdownMenuSubContent(
+  { className, sideOffset = 10, size, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPortal>
+      <DropdownMenuPrimitive.SubContent
+        {...props}
+        {...createSlot("content")}
+        {...createDataAttributes({ size })}
+        className={cn(dropdownMenuContentVariants({ size }), className)}
+        ref={ref}
+        sideOffset={sideOffset}
+      />
+    </DropdownMenuPortal>
+  );
+});
+
+export type DropdownMenuItemProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> &
+    VariantProps<typeof dropdownMenuItemVariants>;
+
+export const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemProps
+>(function DropdownMenuItem(
+  { className, inset, variant, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPrimitive.Item
+      {...props}
+      {...createSlot("item")}
+      {...createDataAttributes({ inset, variant })}
+      className={cn(dropdownMenuItemVariants({ inset, variant }), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type DropdownMenuCheckboxItemProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> &
+    VariantProps<typeof dropdownMenuItemVariants>;
+
+export const DropdownMenuCheckboxItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  DropdownMenuCheckboxItemProps
+>(function DropdownMenuCheckboxItem(
+  { checked, children, className, inset = true, variant, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      {...props}
+      checked={checked}
+      {...createSlot("item")}
+      {...createDataAttributes({ checked: checked === true, inset, variant })}
+      className={cn(dropdownMenuItemVariants({ inset, variant }), className)}
+      ref={ref}
+    >
+      <span
+        {...createSlot("icon")}
+        className="absolute left-2.5 inline-flex size-4 items-center justify-center text-xs"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>✓</DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});
+
+export type DropdownMenuRadioItemProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> &
+    VariantProps<typeof dropdownMenuItemVariants>;
+
+export const DropdownMenuRadioItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  DropdownMenuRadioItemProps
+>(function DropdownMenuRadioItem(
+  { children, className, inset = true, variant, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      {...props}
+      {...createSlot("item")}
+      {...createDataAttributes({ inset, variant })}
+      className={cn(dropdownMenuItemVariants({ inset, variant }), className)}
+      ref={ref}
+    >
+      <span
+        {...createSlot("icon")}
+        className="absolute left-2.5 inline-flex size-4 items-center justify-center text-xs"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>•</DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
+
+export type DropdownMenuLabelProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> &
+    VariantProps<typeof dropdownMenuLabelVariants>;
+
+export const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  DropdownMenuLabelProps
+>(function DropdownMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Label
+      {...props}
+      {...createSlot("label")}
+      {...createDataAttributes({ inset })}
+      className={cn(dropdownMenuLabelVariants({ inset }), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      {...props}
+      {...createSlot("separator")}
+      className={cn(dropdownMenuSeparatorVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type DropdownMenuSubTriggerProps =
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> &
+    VariantProps<typeof dropdownMenuItemVariants>;
+
+export const DropdownMenuSubTrigger = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  DropdownMenuSubTriggerProps
+>(function DropdownMenuSubTrigger(
+  { children, className, inset, variant, ...props },
+  ref
+) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      {...props}
+      {...createSlot("trigger")}
+      {...createDataAttributes({ inset, variant })}
+      className={cn(dropdownMenuItemVariants({ inset, variant }), className)}
+      ref={ref}
+    >
+      {children}
+      <span className="ml-auto text-xs text-[var(--color-muted-foreground)]">›</span>
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+});
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      {...props}
+      {...createSlot("shortcut")}
+      className={cn(
+        "ml-auto text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]",
+        className
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/dropdown-menu.variants.ts b/packages/ui/src/components/dropdown-menu.variants.ts
new file mode 100644
index 0000000..83fcf45
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu.variants.ts
@@ -0,0 +1,68 @@
+import { cva } from "../lib/cva";
+
+export const dropdownMenuContentVariants = cva(
+  [
+    "z-50 min-w-[12rem] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
+    "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-w-[11rem]",
+        md: "min-w-[13rem]",
+        lg: "min-w-[15rem]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export const dropdownMenuItemVariants = cva(
+  [
+    "relative flex cursor-default select-none items-center gap-2 rounded-[calc(var(--radius-sm)-4px)] px-2.5 py-2 text-sm outline-none",
+    "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+    "focus:bg-[var(--color-surface)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--color-surface)] data-[highlighted]:text-[var(--color-foreground)]",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
+  ],
+  {
+    variants: {
+      inset: {
+        false: "",
+        true: "pl-8"
+      },
+      variant: {
+        default: "",
+        destructive:
+          "text-[var(--color-destructive)] data-[highlighted]:bg-[color-mix(in_oklch,var(--color-destructive)_12%,var(--color-card))] data-[highlighted]:text-[var(--color-destructive)]"
+      }
+    },
+    defaultVariants: {
+      inset: false,
+      variant: "default"
+    }
+  }
+);
+
+export const dropdownMenuLabelVariants = cva(
+  [
+    "px-2.5 py-2 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
+  ],
+  {
+    variants: {
+      inset: {
+        false: "",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      inset: false
+    }
+  }
+);
+
+export const dropdownMenuSeparatorVariants = cva([
+  "-mx-1 my-1 h-px bg-[var(--color-border)]"
+]);
diff --git a/packages/ui/src/components/field.test.tsx b/packages/ui/src/components/field.test.tsx
new file mode 100644
index 0000000..65f630e
--- /dev/null
+++ b/packages/ui/src/components/field.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "./field";
+import { Input } from "./input";
+
+describe("Field", () => {
+  it("links the label, control, description and error content through context", () => {
+    render(
+      <Field invalid required>
+        <FieldLabel requiredIndicator>Email address</FieldLabel>
+        <FieldControl>
+          <Input />
+          <FieldDescription>Use your company email.</FieldDescription>
+          <FieldError>Please enter a valid email address.</FieldError>
+        </FieldControl>
+      </Field>
+    );
+
+    const input = screen.getByRole("textbox", { name: "Email address" });
+    const label = screen.getByText("Email address").closest("label");
+    const description = screen.getByText("Use your company email.");
+    const error = screen.getByText("Please enter a valid email address.");
+    const control = input.closest("[data-slot='control']");
+
+    expect(label).toHaveAttribute("for", input.getAttribute("id"));
+    expect(input).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(control).toHaveAttribute("data-invalid", "");
+    expect(control).toHaveAttribute("data-required", "");
+  });
+
+  it("exposes root state attributes including horizontal orientation", () => {
+    render(
+      <Field disabled orientation="horizontal" readOnly required>
+        <FieldLabel>Internal note</FieldLabel>
+        <FieldControl>
+          <Input />
+        </FieldControl>
+      </Field>
+    );
+
+    const field = screen.getByText("Internal note").closest("[data-slot='root']");
+
+    expect(field).toHaveAttribute("data-orientation", "horizontal");
+    expect(field).toHaveAttribute("data-disabled", "");
+    expect(field).toHaveAttribute("data-readonly", "");
+    expect(field).toHaveAttribute("data-required", "");
+  });
+});
diff --git a/packages/ui/src/components/field.tsx b/packages/ui/src/components/field.tsx
new file mode 100644
index 0000000..48c056d
--- /dev/null
+++ b/packages/ui/src/components/field.tsx
@@ -0,0 +1,174 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  type ComponentPropsWithoutRef
+} from "react";
+
+import { Label } from "./label";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot, type FieldStateProps } from "../lib/contracts";
+
+type FieldContextValue = {
+  descriptionId: string;
+  disabled: boolean;
+  errorId: string;
+  inputId: string;
+  invalid: boolean;
+  readOnly: boolean;
+  required: boolean;
+};
+
+export type FieldRenderProps = FieldContextValue;
+
+const FieldContext = createContext<FieldContextValue | null>(null);
+
+export function useFieldContext() {
+  return useContext(FieldContext);
+}
+
+export type FieldProps = ComponentPropsWithoutRef<"div"> &
+  FieldStateProps & {
+    orientation?: "horizontal" | "vertical";
+  };
+
+export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
+  {
+    children,
+    className,
+    disabled = false,
+    id,
+    invalid = false,
+    orientation = "vertical",
+    readOnly = false,
+    required = false,
+    ...props
+  },
+  ref
+) {
+  const reactId = useId();
+  const baseId = id ?? `field-${reactId.replace(/:/g, "")}`;
+  const value: FieldContextValue = {
+    descriptionId: `${baseId}-description`,
+    disabled,
+    errorId: `${baseId}-error`,
+    inputId: `${baseId}-control`,
+    invalid,
+    readOnly,
+    required
+  };
+
+  return (
+    <FieldContext.Provider value={value}>
+      <div
+        {...props}
+        {...createSlot("root")}
+        {...createDataAttributes({
+          disabled,
+          invalid,
+          orientation,
+          readonly: readOnly,
+          required
+        })}
+        className={cn(
+          "grid gap-2.5",
+          orientation === "horizontal" && "gap-3 sm:grid-cols-[minmax(10rem,12rem)_minmax(0,1fr)] sm:items-start",
+          className
+        )}
+        id={id}
+        ref={ref}
+      >
+        {children}
+      </div>
+    </FieldContext.Provider>
+  );
+});
+
+export const FormItem = Field;
+export const FieldLabel = Label;
+
+export type FieldDescriptionProps = ComponentPropsWithoutRef<"p">;
+
+export const FieldDescription = forwardRef<
+  HTMLParagraphElement,
+  FieldDescriptionProps
+>(function FieldDescription({ className, id, ...props }, ref) {
+  const field = useFieldContext();
+
+  return (
+    <p
+      {...props}
+      {...createSlot("description")}
+      className={cn(
+        "text-sm leading-6 text-[var(--color-muted-foreground)]",
+        className
+      )}
+      id={id ?? field?.descriptionId}
+      ref={ref}
+    />
+  );
+});
+
+export type FieldErrorProps = ComponentPropsWithoutRef<"p">;
+
+export const FieldError = forwardRef<
+  HTMLParagraphElement,
+  FieldErrorProps
+>(function FieldError({ children, className, id, ...props }, ref) {
+  const field = useFieldContext();
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <p
+      {...props}
+      {...createSlot("description")}
+      className={cn(
+        "text-sm font-medium leading-6 text-[var(--color-destructive)]",
+        className
+      )}
+      id={id ?? field?.errorId}
+      ref={ref}
+      role="alert"
+    >
+      {children}
+    </p>
+  );
+});
+
+export type FieldControlProps = ComponentPropsWithoutRef<"div">;
+
+export const FieldControl = forwardRef<
+  HTMLDivElement,
+  FieldControlProps
+>(function FieldControl({ className, ...props }, ref) {
+  const field = useFieldContext();
+
+  return (
+    <div
+      {...props}
+      {...createSlot("control")}
+      {...createDataAttributes({
+        disabled: field?.disabled,
+        invalid: field?.invalid,
+        readonly: field?.readOnly,
+        required: field?.required
+      })}
+      className={cn("grid gap-2", className)}
+      ref={ref}
+    />
+  );
+});
+
+export function useFieldIds() {
+  const field = useFieldContext();
+
+  if (!field) {
+    throw new Error("useFieldIds must be used within <Field>.");
+  }
+
+  return field;
+}
diff --git a/packages/ui/src/components/input.test.tsx b/packages/ui/src/components/input.test.tsx
new file mode 100644
index 0000000..2153cc6
--- /dev/null
+++ b/packages/ui/src/components/input.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Field, FieldControl, FieldDescription, FieldError } from "./field";
+import { Input } from "./input";
+import { Label } from "./label";
+
+describe("Input", () => {
+  it("renders the input slot and reflects explicit state props", () => {
+    render(
+      <Input
+        aria-label="Project slug"
+        disabled
+        invalid
+        readOnly
+        required
+        size="lg"
+      />
+    );
+
+    const input = screen.getByRole("textbox", { name: "Project slug" });
+
+    expect(input).toHaveAttribute("data-slot", "input");
+    expect(input).toHaveAttribute("data-disabled", "");
+    expect(input).toHaveAttribute("data-invalid", "");
+    expect(input).toHaveAttribute("data-readonly", "");
+    expect(input).toHaveAttribute("data-required", "");
+    expect(input).toHaveAttribute("data-size", "lg");
+    expect(input).toBeDisabled();
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAttribute("readonly");
+    expect(input).toBeRequired();
+  });
+
+  it("inherits ids and described-by wiring from the surrounding field", () => {
+    render(
+      <Field invalid required>
+        <Label requiredIndicator>Slug</Label>
+        <FieldControl>
+          <Input />
+          <FieldDescription>Use lowercase letters and hyphens.</FieldDescription>
+          <FieldError>Slug is required.</FieldError>
+        </FieldControl>
+      </Field>
+    );
+
+    const input = screen.getByRole("textbox", { name: "Slug" });
+    const description = screen.getByText("Use lowercase letters and hyphens.");
+    const error = screen.getByText("Slug is required.");
+
+    expect(input).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toBeRequired();
+  });
+});
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
new file mode 100644
index 0000000..94573a8
--- /dev/null
+++ b/packages/ui/src/components/input.tsx
@@ -0,0 +1,66 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef
+} from "react";
+
+import { inputVariants } from "./input.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import type { FieldStateProps } from "../lib/contracts";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+import { useFieldContext } from "./field";
+
+function mergeIds(...ids: Array<string | undefined>) {
+  const value = ids.filter(Boolean).join(" ").trim();
+  return value.length > 0 ? value : undefined;
+}
+
+export type InputProps = Omit<ComponentPropsWithoutRef<"input">, "size"> &
+  FieldStateProps &
+  VariantProps<typeof inputVariants>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    className,
+    disabled,
+    id,
+    invalid,
+    readOnly,
+    required,
+    size,
+    ...props
+  },
+  ref
+) {
+  const field = useFieldContext();
+  const resolvedDisabled = disabled ?? field?.disabled ?? false;
+  const resolvedInvalid = invalid ?? field?.invalid ?? false;
+  const resolvedReadOnly = readOnly ?? field?.readOnly ?? false;
+  const resolvedRequired = required ?? field?.required ?? false;
+
+  return (
+    <input
+      {...props}
+      {...createSlot("input")}
+      {...createDataAttributes({
+        disabled: resolvedDisabled,
+        invalid: resolvedInvalid,
+        readonly: resolvedReadOnly,
+        required: resolvedRequired,
+        size
+      })}
+      aria-describedby={mergeIds(
+        props["aria-describedby"],
+        field?.descriptionId,
+        resolvedInvalid ? field?.errorId : undefined
+      )}
+      aria-invalid={resolvedInvalid || undefined}
+      className={cn(inputVariants({ size }), className)}
+      disabled={resolvedDisabled}
+      id={id ?? field?.inputId}
+      readOnly={resolvedReadOnly}
+      ref={ref}
+      required={resolvedRequired}
+    />
+  );
+});
diff --git a/packages/ui/src/components/input.variants.ts b/packages/ui/src/components/input.variants.ts
new file mode 100644
index 0000000..b486b90
--- /dev/null
+++ b/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"
+    }
+  }
+);
diff --git a/packages/ui/src/components/label.test.tsx b/packages/ui/src/components/label.test.tsx
new file mode 100644
index 0000000..e0a6a25
--- /dev/null
+++ b/packages/ui/src/components/label.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Field } from "./field";
+import { Label } from "./label";
+
+describe("Label", () => {
+  it("renders a standalone label with its slot hook", () => {
+    render(<Label htmlFor="email">Email address</Label>);
+
+    const label = screen.getByText("Email address").closest("label");
+
+    expect(label).toHaveAttribute("data-slot", "label");
+    expect(label).toHaveAttribute("for", "email");
+  });
+
+  it("shows the required indicator when requested inside a required field", () => {
+    render(
+      <Field required>
+        <Label requiredIndicator>Project name</Label>
+      </Field>
+    );
+
+    const label = screen.getByText("Project name").closest("label");
+
+    expect(label).toHaveAttribute("data-required", "");
+    expect(screen.getByText("*")).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("inherits disabled and invalid state from the field context", () => {
+    render(
+      <Field disabled invalid>
+        <Label>Email</Label>
+      </Field>
+    );
+
+    const label = screen.getByText("Email").closest("label");
+
+    expect(label).toHaveAttribute("data-disabled", "");
+    expect(label).toHaveAttribute("data-invalid", "");
+  });
+});
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
new file mode 100644
index 0000000..d625e91
--- /dev/null
+++ b/packages/ui/src/components/label.tsx
@@ -0,0 +1,56 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+import { useFieldContext } from "./field";
+
+export type LabelProps = ComponentPropsWithoutRef<"label"> & {
+  requiredIndicator?: boolean;
+};
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  {
+    children,
+    className,
+    htmlFor,
+    requiredIndicator = false,
+    ...props
+  },
+  ref
+) {
+  const field = useFieldContext();
+  const disabled = props["aria-disabled"] === true || field?.disabled === true;
+  const invalid = props["aria-invalid"] === true || field?.invalid === true;
+  const required = props["aria-required"] === true || field?.required === true;
+
+  return (
+    <label
+      {...props}
+      {...createSlot("label")}
+      {...createDataAttributes({
+        disabled,
+        invalid,
+        required
+      })}
+      className={cn(
+        "inline-flex items-center gap-2 text-sm font-medium leading-none text-[var(--color-foreground)]",
+        "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--color-muted-foreground)]",
+        "data-[invalid]:text-[color-mix(in_oklch,var(--color-destructive)_82%,var(--color-foreground))]",
+        className
+      )}
+      htmlFor={htmlFor ?? field?.inputId}
+      ref={ref}
+    >
+      <span>{children}</span>
+      {requiredIndicator && required ? (
+        <span
+          aria-hidden="true"
+          className="text-[var(--color-destructive)]"
+        >
+          *
+        </span>
+      ) : null}
+    </label>
+  );
+});
diff --git a/packages/ui/src/components/popover.test.tsx b/packages/ui/src/components/popover.test.tsx
new file mode 100644
index 0000000..dd9a3d4
--- /dev/null
+++ b/packages/ui/src/components/popover.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Popover,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger
+} from "./popover";
+
+describe("Popover", () => {
+  it("opens from the trigger and closes from the close control", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Popover>
+        <PopoverTrigger>Open details</PopoverTrigger>
+        <PopoverContent size="sm">
+          <p>Editorial details</p>
+          <PopoverArrow />
+          <PopoverClose>Dismiss</PopoverClose>
+        </PopoverContent>
+      </Popover>
+    );
+
+    expect(screen.queryByText("Editorial details")).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Open details" }));
+
+    const content = await screen.findByText("Editorial details");
+    expect(content.closest('[data-slot="content"]')).toHaveAttribute("data-size", "sm");
+    expect(document.querySelector('[data-slot="arrow"]')).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Dismiss" }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Editorial details")).not.toBeInTheDocument();
+    });
+  });
+
+  it("reports controlled open changes from the trigger", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    render(
+      <Popover open={false} onOpenChange={onOpenChange}>
+        <PopoverTrigger>Open details</PopoverTrigger>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open details" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
new file mode 100644
index 0000000..d7dd794
--- /dev/null
+++ b/packages/ui/src/components/popover.tsx
@@ -0,0 +1,51 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { popoverContentVariants } from "./popover.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverPortal = PopoverPrimitive.Portal;
+export const PopoverClose = PopoverPrimitive.Close;
+
+export type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+  VariantProps<typeof popoverContentVariants>;
+
+export const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(function PopoverContent(
+  { className, sideOffset = 10, size, ...props },
+  ref
+) {
+  return (
+    <PopoverPortal>
+      <PopoverPrimitive.Content
+        {...props}
+        {...createSlot("content")}
+        {...createDataAttributes({ size })}
+        className={cn(popoverContentVariants({ size }), className)}
+        ref={ref}
+        sideOffset={sideOffset}
+      />
+    </PopoverPortal>
+  );
+});
+
+export const PopoverArrow = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Arrow>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(function PopoverArrow({ className, ...props }, ref) {
+  return (
+    <PopoverPrimitive.Arrow
+      {...props}
+      {...createSlot("arrow")}
+      className={cn("fill-[var(--color-card)]", className)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/ui/src/components/popover.variants.ts b/packages/ui/src/components/popover.variants.ts
new file mode 100644
index 0000000..8cda490
--- /dev/null
+++ b/packages/ui/src/components/popover.variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "../lib/cva";
+
+export const popoverContentVariants = cva(
+  [
+    "z-50 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-4 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
+    "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-64",
+        md: "w-80",
+        lg: "w-[24rem]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
diff --git a/packages/ui/src/components/radio-group.test.tsx b/packages/ui/src/components/radio-group.test.tsx
new file mode 100644
index 0000000..051ba61
--- /dev/null
+++ b/packages/ui/src/components/radio-group.test.tsx
@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+describe("RadioGroup", () => {
+  it("renders orientation and default value state", () => {
+    render(
+      <RadioGroup aria-label="Review lane" defaultValue="design" orientation="horizontal">
+        <RadioGroupItem aria-label="Editorial" value="editorial" />
+        <RadioGroupItem aria-label="Design" value="design" />
+      </RadioGroup>
+    );
+
+    const group = screen.getByRole("radiogroup", { name: "Review lane" });
+    const design = screen.getByRole("radio", { name: "Design" });
+
+    expect(group).toHaveAttribute("data-slot", "root");
+    expect(group).toHaveAttribute("data-orientation", "horizontal");
+    expect(design).toBeChecked();
+    expect(design).toHaveAttribute("data-slot", "control");
+    expect(design).toHaveAttribute("data-state", "checked");
+  });
+
+  it("supports value change callbacks when a new option is selected", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <RadioGroup aria-label="Priority" defaultValue="low" onValueChange={onValueChange}>
+        <RadioGroupItem aria-label="Low" value="low" />
+        <RadioGroupItem aria-label="Medium" value="medium" />
+        <RadioGroupItem aria-label="High" value="high" />
+      </RadioGroup>
+    );
+
+    const medium = screen.getByRole("radio", { name: "Medium" });
+
+    await user.click(medium);
+
+    expect(medium).toBeChecked();
+    expect(onValueChange).toHaveBeenLastCalledWith("medium");
+  });
+
+  it("exposes disabled and invalid item state", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <RadioGroup aria-label="Status">
+        <RadioGroupItem aria-label="Ready" value="ready" />
+        <RadioGroupItem aria-label="Blocked" disabled invalid value="blocked" />
+      </RadioGroup>
+    );
+
+    const blocked = screen.getByRole("radio", { name: "Blocked" });
+
+    expect(blocked).toBeDisabled();
+    expect(blocked).toHaveAttribute("aria-invalid", "true");
+    expect(blocked).toHaveAttribute("data-disabled", "");
+
+    await user.click(blocked);
+    expect(blocked).not.toBeChecked();
+  });
+});
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
new file mode 100644
index 0000000..ec621bf
--- /dev/null
+++ b/packages/ui/src/components/radio-group.tsx
@@ -0,0 +1,60 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import {
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupVariants
+} from "./radio-group.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export type RadioGroupProps = ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> &
+  VariantProps<typeof radioGroupVariants>;
+
+export function RadioGroup({
+  className,
+  orientation = "vertical",
+  ...props
+}: RadioGroupProps) {
+  return (
+    <RadioGroupPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({ orientation })}
+      className={cn(radioGroupVariants({ orientation }), className)}
+      orientation={orientation}
+    />
+  );
+}
+
+export type RadioGroupItemProps =
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    invalid?: boolean;
+  };
+
+export const RadioGroupItem = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(function RadioGroupItem({ className, disabled, invalid, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Item
+      {...props}
+      {...createSlot("control")}
+      {...createDataAttributes({
+        disabled,
+        invalid
+      })}
+      aria-invalid={invalid || undefined}
+      className={cn(radioGroupItemVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    >
+      <RadioGroupPrimitive.Indicator
+        {...createSlot("icon")}
+        className={radioGroupIndicatorVariants()}
+      />
+    </RadioGroupPrimitive.Item>
+  );
+});
diff --git a/packages/ui/src/components/radio-group.variants.ts b/packages/ui/src/components/radio-group.variants.ts
new file mode 100644
index 0000000..1cc349e
--- /dev/null
+++ b/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-['']"
+]);
diff --git a/packages/ui/src/components/select.test.tsx b/packages/ui/src/components/select.test.tsx
new file mode 100644
index 0000000..f6c4b85
--- /dev/null
+++ b/packages/ui/src/components/select.test.tsx
@@ -0,0 +1,131 @@
+import { useState } from "react";
+
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Field, FieldDescription, FieldError } from "./field";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+} from "./select";
+
+function ReviewLaneSelect(props?: React.ComponentProps<typeof Select>) {
+  return (
+    <Select {...props}>
+      <SelectTrigger aria-label="Review lane">
+        <SelectValue placeholder="Choose a review lane" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Review lane</SelectLabel>
+          <SelectItem value="editorial">Editorial review</SelectItem>
+          <SelectItem value="design">Design review</SelectItem>
+          <SelectSeparator />
+          <SelectItem value="legal">Legal review</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+describe("Select", () => {
+  it("renders default value and opens selectable content", async () => {
+    const user = userEvent.setup();
+
+    render(<ReviewLaneSelect defaultValue="design" />);
+
+    const trigger = screen.getByRole("combobox", { name: "Review lane" });
+
+    expect(trigger).toHaveTextContent("Design review");
+    expect(trigger).toHaveAttribute("data-slot", "trigger");
+
+    await user.click(trigger);
+
+    const listbox = await screen.findByRole("listbox");
+    const designOption = within(listbox).getByRole("option", { name: "Design review" });
+
+    expect(listbox).toHaveAttribute("data-slot", "content");
+    expect(designOption).toHaveAttribute("data-slot", "item");
+  });
+
+  it("updates controlled value after selecting an option", async () => {
+    const user = userEvent.setup();
+
+    function ControlledSelect() {
+      const [value, setValue] = useState("editorial");
+
+      return <ReviewLaneSelect value={value} onValueChange={setValue} />;
+    }
+
+    render(<ControlledSelect />);
+
+    const trigger = screen.getByRole("combobox", { name: "Review lane" });
+    expect(trigger).toHaveTextContent("Editorial review");
+
+    await user.click(trigger);
+    await user.click(await screen.findByRole("option", { name: "Legal review" }));
+
+    expect(trigger).toHaveTextContent("Legal review");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("supports field invalid state and described-by wiring", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Field id="routing" invalid>
+        <Select>
+          <SelectTrigger aria-label="Routing team">
+            <SelectValue placeholder="Choose a team" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="product">Product</SelectItem>
+            <SelectItem value="design">Design</SelectItem>
+          </SelectContent>
+        </Select>
+        <FieldDescription>Choose the primary owner.</FieldDescription>
+        <FieldError>Select a team before publishing.</FieldError>
+      </Field>
+    );
+
+    const trigger = screen.getByRole("combobox", { name: "Routing team" });
+
+    expect(trigger).toHaveAttribute("aria-invalid", "true");
+    expect(trigger).toHaveAttribute(
+      "aria-describedby",
+      expect.stringContaining("routing-description")
+    );
+    expect(trigger).toHaveAttribute(
+      "aria-describedby",
+      expect.stringContaining("routing-error")
+    );
+
+    await user.click(trigger);
+    expect(await screen.findByRole("option", { name: "Product" })).toBeInTheDocument();
+  });
+
+  it("exposes disabled state on the trigger", () => {
+    render(
+      <Select disabled>
+        <SelectTrigger aria-label="Disabled select">
+          <SelectValue placeholder="Disabled" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="one">One</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    const trigger = screen.getByRole("combobox", { name: "Disabled select" });
+
+    expect(trigger).toBeDisabled();
+    expect(trigger).toHaveAttribute("data-disabled", "");
+  });
+});
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
new file mode 100644
index 0000000..431947f
--- /dev/null
+++ b/packages/ui/src/components/select.tsx
@@ -0,0 +1,141 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import {
+  selectContentVariants,
+  selectItemVariants,
+  selectLabelVariants,
+  selectSeparatorVariants,
+  selectTriggerVariants,
+  selectViewportVariants
+} from "./select.variants";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+import { useFieldContext } from "./field";
+
+function mergeIds(...ids: Array<string | undefined>) {
+  const value = ids.filter(Boolean).join(" ").trim();
+  return value.length > 0 ? value : undefined;
+}
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export type SelectTriggerProps =
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    invalid?: boolean;
+  };
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(function SelectTrigger({ children, className, disabled, invalid, ...props }, ref) {
+  const field = useFieldContext();
+  const resolvedInvalid = invalid ?? field?.invalid ?? false;
+
+  return (
+    <SelectPrimitive.Trigger
+      {...props}
+      {...createSlot("trigger")}
+      {...createDataAttributes({
+        disabled,
+        invalid: resolvedInvalid
+      })}
+      aria-describedby={mergeIds(
+        props["aria-describedby"],
+        field?.descriptionId,
+        resolvedInvalid ? field?.errorId : undefined
+      )}
+      aria-invalid={resolvedInvalid || undefined}
+      className={cn(selectTriggerVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        {...createSlot("icon")}
+        className="text-[var(--color-muted-foreground)]"
+      >
+        ▾
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent(
+  { children, className, position = "popper", ...props },
+  ref
+) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        {...props}
+        {...createSlot("content")}
+        className={cn(selectContentVariants(), className)}
+        position={position}
+        ref={ref}
+      >
+        <SelectPrimitive.Viewport
+          {...createSlot("content")}
+          className={selectViewportVariants()}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Label
+      {...props}
+      {...createSlot("label")}
+      className={cn(selectLabelVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(function SelectItem({ children, className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      {...props}
+      {...createSlot("item")}
+      className={cn(selectItemVariants(), className)}
+      ref={ref}
+    >
+      <span
+        {...createSlot("icon")}
+        className="absolute left-2.5 inline-flex size-4 items-center justify-center text-xs"
+      >
+        <SelectPrimitive.ItemIndicator>✓</SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(function SelectSeparator({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Separator
+      {...props}
+      {...createSlot("separator")}
+      className={cn(selectSeparatorVariants(), className)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/ui/src/components/select.variants.ts b/packages/ui/src/components/select.variants.ts
new file mode 100644
index 0000000..80e5b91
--- /dev/null
+++ b/packages/ui/src/components/select.variants.ts
@@ -0,0 +1,38 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const selectTriggerVariants = cva(
+  [
+    "inline-flex h-11 w-full items-center justify-between gap-3 rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)] px-4 text-left text-sm 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)]",
+    "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-surface)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100",
+    "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")
+  ]
+);
+
+export const selectContentVariants = cva([
+  "relative z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+  "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
+]);
+
+export const selectViewportVariants = cva([
+  "max-h-[16rem] overflow-y-auto p-0.5"
+]);
+
+export const selectItemVariants = cva([
+  "relative flex w-full cursor-default select-none items-center gap-2 rounded-[calc(var(--radius-sm)-4px)] px-8 py-2 text-sm text-[var(--color-foreground)] outline-none",
+  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+  "focus:bg-[var(--color-surface)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--color-surface)] data-[highlighted]:text-[var(--color-foreground)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
+]);
+
+export const selectLabelVariants = cva([
+  "px-2.5 py-2 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
+]);
+
+export const selectSeparatorVariants = cva([
+  "-mx-1 my-1 h-px bg-[var(--color-border)]"
+]);
diff --git a/packages/ui/src/components/separator.test.tsx b/packages/ui/src/components/separator.test.tsx
new file mode 100644
index 0000000..dda5378
--- /dev/null
+++ b/packages/ui/src/components/separator.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Separator } from "./separator";
+
+describe("Separator", () => {
+  it("renders a decorative separator by default", () => {
+    render(<Separator data-testid="separator" />);
+
+    const separator = screen.getByTestId("separator");
+
+    expect(separator).toHaveAttribute("data-slot", "root");
+    expect(separator).toHaveAttribute("data-orientation", "horizontal");
+    expect(separator).toHaveAttribute("role", "presentation");
+    expect(separator).not.toHaveAttribute("aria-orientation");
+  });
+
+  it("renders semantic separator attributes when decorative is false", () => {
+    render(<Separator data-testid="separator" decorative={false} orientation="vertical" tone="strong" />);
+
+    const separator = screen.getByTestId("separator");
+
+    expect(separator).toHaveAttribute("role", "separator");
+    expect(separator).toHaveAttribute("aria-orientation", "vertical");
+    expect(separator).toHaveAttribute("data-orientation", "vertical");
+    expect(separator).toHaveAttribute("data-tone", "strong");
+  });
+});
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
new file mode 100644
index 0000000..809814d
--- /dev/null
+++ b/packages/ui/src/components/separator.tsx
@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+import { separatorVariants } from "./separator.variants";
+
+export type SeparatorProps = React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof separatorVariants> & {
+    decorative?: boolean;
+  };
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function Separator(
+  {
+    className,
+    decorative = true,
+    orientation = "horizontal",
+    role,
+    tone,
+    ...props
+  },
+  ref
+) {
+  return (
+    <div
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({
+        orientation,
+        tone
+      })}
+      aria-orientation={decorative ? undefined : orientation ?? undefined}
+      className={cn(separatorVariants({ orientation, tone }), className)}
+      ref={ref}
+      role={decorative ? "presentation" : role ?? "separator"}
+    />
+  );
+});
diff --git a/packages/ui/src/components/separator.variants.ts b/packages/ui/src/components/separator.variants.ts
new file mode 100644
index 0000000..fcfb48c
--- /dev/null
+++ b/packages/ui/src/components/separator.variants.ts
@@ -0,0 +1,18 @@
+import { cva } from "../lib/cva";
+
+export const separatorVariants = cva("shrink-0 bg-[var(--color-border)]", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full min-h-4 w-px"
+    },
+    tone: {
+      subtle: "bg-[color-mix(in_oklch,var(--color-border)_72%,transparent)]",
+      strong: "bg-[var(--color-border-strong)]"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    tone: "subtle"
+  }
+});
diff --git a/packages/ui/src/components/skeleton.test.tsx b/packages/ui/src/components/skeleton.test.tsx
new file mode 100644
index 0000000..9063664
--- /dev/null
+++ b/packages/ui/src/components/skeleton.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton", () => {
+  it("renders as an aria-hidden placeholder with root slot", () => {
+    render(<Skeleton data-testid="skeleton" />);
+
+    const skeleton = screen.getByTestId("skeleton");
+
+    expect(skeleton).toHaveAttribute("data-slot", "root");
+    expect(skeleton).toHaveAttribute("data-shape", "line");
+    expect(skeleton).toHaveAttribute("data-tone", "default");
+    expect(skeleton).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("supports alternate shape and tone hooks", () => {
+    render(<Skeleton data-testid="skeleton" shape="avatar" tone="muted" />);
+
+    const skeleton = screen.getByTestId("skeleton");
+
+    expect(skeleton).toHaveAttribute("data-shape", "avatar");
+    expect(skeleton).toHaveAttribute("data-tone", "muted");
+  });
+});
diff --git a/packages/ui/src/components/skeleton.tsx b/packages/ui/src/components/skeleton.tsx
new file mode 100644
index 0000000..30864a5
--- /dev/null
+++ b/packages/ui/src/components/skeleton.tsx
@@ -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}
+    />
+  );
+});
diff --git a/packages/ui/src/components/spinner.test.tsx b/packages/ui/src/components/spinner.test.tsx
new file mode 100644
index 0000000..f2674d6
--- /dev/null
+++ b/packages/ui/src/components/spinner.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+  it("renders with icon slot and default aria-hidden semantics", () => {
+    render(<Spinner data-testid="spinner" size="lg" tone="primary" />);
+
+    const spinner = screen.getByTestId("spinner");
+
+    expect(spinner).toHaveAttribute("data-slot", "icon");
+    expect(spinner).toHaveAttribute("data-size", "lg");
+    expect(spinner).toHaveAttribute("data-tone", "primary");
+    expect(spinner).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("keeps an accessible label when one is provided", () => {
+    render(<Spinner aria-label="Loading releases" />);
+
+    expect(screen.getByLabelText("Loading releases")).not.toHaveAttribute("aria-hidden");
+  });
+});
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
new file mode 100644
index 0000000..e0ef3b4
--- /dev/null
+++ b/packages/ui/src/components/spinner.tsx
@@ -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}
+    />
+  );
+});
diff --git a/packages/ui/src/components/switch.test.tsx b/packages/ui/src/components/switch.test.tsx
new file mode 100644
index 0000000..7077110
--- /dev/null
+++ b/packages/ui/src/components/switch.test.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Switch } from "./switch";
+
+describe("Switch", () => {
+  it("toggles by click and exposes slot/state hooks", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+
+    render(<Switch aria-label="Email alerts" onCheckedChange={onCheckedChange} />);
+
+    const control = screen.getByRole("switch", { name: "Email alerts" });
+
+    expect(control).toHaveAttribute("data-slot", "root");
+    expect(control).toHaveAttribute("data-state", "unchecked");
+    expect(control.querySelector('[data-slot="control"]')).not.toBeNull();
+
+    await user.click(control);
+
+    expect(control).toBeChecked();
+    expect(control).toHaveAttribute("data-state", "checked");
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("supports controlled state updates", async () => {
+    const user = userEvent.setup();
+
+    function ControlledSwitch() {
+      const [checked, setChecked] = useState(false);
+      return <Switch aria-label="Controlled switch" checked={checked} onCheckedChange={setChecked} />;
+    }
+
+    render(<ControlledSwitch />);
+
+    const control = screen.getByRole("switch", { name: "Controlled switch" });
+    expect(control).not.toBeChecked();
+
+    await user.click(control);
+
+    expect(control).toBeChecked();
+  });
+
+  it("supports keyboard interaction and disabled/invalid states", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <>
+        <Switch aria-label="Keyboard switch" />
+        <Switch aria-label="Disabled switch" disabled invalid />
+      </>
+    );
+
+    const keyboardSwitch = screen.getByRole("switch", { name: "Keyboard switch" });
+    const disabledSwitch = screen.getByRole("switch", { name: "Disabled switch" });
+
+    await user.tab();
+    expect(keyboardSwitch).toHaveFocus();
+
+    await user.keyboard(" ");
+    expect(keyboardSwitch).toBeChecked();
+
+    expect(disabledSwitch).toBeDisabled();
+    expect(disabledSwitch).toHaveAttribute("aria-invalid", "true");
+    expect(disabledSwitch).toHaveAttribute("data-disabled", "");
+  });
+});
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
new file mode 100644
index 0000000..9812fe4
--- /dev/null
+++ b/packages/ui/src/components/switch.tsx
@@ -0,0 +1,35 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { switchThumbVariants, switchVariants } from "./switch.variants";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
+  invalid?: boolean;
+};
+
+export const Switch = forwardRef<
+  ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(function Switch({ className, disabled, invalid, ...props }, ref) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({
+        disabled,
+        invalid
+      })}
+      aria-invalid={invalid || undefined}
+      className={cn(switchVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        {...createSlot("control")}
+        className={switchThumbVariants()}
+      />
+    </SwitchPrimitive.Root>
+  );
+});
diff --git a/packages/ui/src/components/switch.variants.ts b/packages/ui/src/components/switch.variants.ts
new file mode 100644
index 0000000..a925103
--- /dev/null
+++ b/packages/ui/src/components/switch.variants.ts
@@ -0,0 +1,19 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const switchVariants = cva(
+  [
+    "inline-flex h-7 w-12 shrink-0 items-center rounded-full border border-transparent bg-[var(--color-border)] shadow-[var(--shadow-xs)] outline-none",
+    "transition-[background-color,box-shadow] 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-[state=checked]:bg-[var(--color-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
+    "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
+    getMotionRecipeClassNames("ring")
+  ]
+);
+
+export const switchThumbVariants = cva([
+  "pointer-events-none block size-5 rounded-full bg-white shadow-[var(--shadow-xs)]",
+  "translate-x-0.5 transition-transform duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+  "data-[state=checked]:translate-x-[1.55rem]"
+]);
diff --git a/packages/ui/src/components/tabs.test.tsx b/packages/ui/src/components/tabs.test.tsx
new file mode 100644
index 0000000..c863ad3
--- /dev/null
+++ b/packages/ui/src/components/tabs.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("switches content when a trigger is selected", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tabs defaultValue="overview">
+        <TabsList aria-label="Sections">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Overview panel</TabsContent>
+        <TabsContent value="activity">Activity panel</TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText("Overview panel")).toHaveAttribute("data-slot", "content");
+    expect(screen.queryByText("Activity panel")).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("tab", { name: "Activity" }));
+
+    expect(screen.getByText("Activity panel")).toBeInTheDocument();
+    expect(screen.queryByText("Overview panel")).not.toBeInTheDocument();
+  });
+
+  it("preserves disabled triggers and root/list slots", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tabs defaultValue="overview" orientation="vertical">
+        <TabsList aria-label="Sections">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger disabled value="activity">
+            Activity
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Overview panel</TabsContent>
+        <TabsContent value="activity">Activity panel</TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByRole("tablist")).toHaveAttribute("data-slot", "list");
+    expect(screen.getByRole("tablist").parentElement).toHaveAttribute("data-orientation", "vertical");
+
+    await user.click(screen.getByRole("tab", { name: "Activity" }));
+    expect(screen.getByText("Overview panel")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Activity" })).toHaveAttribute("data-disabled", "");
+  });
+});
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
new file mode 100644
index 0000000..1d856db
--- /dev/null
+++ b/packages/ui/src/components/tabs.tsx
@@ -0,0 +1,66 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.variants";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({ orientation })}
+      className={cn("flex flex-col", className)}
+      orientation={orientation}
+    />
+  );
+}
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      {...props}
+      {...createSlot("list")}
+      className={cn(tabsListVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, disabled, ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      {...props}
+      {...createSlot("trigger")}
+      {...createDataAttributes({ disabled })}
+      className={cn(tabsTriggerVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    />
+  );
+});
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      {...props}
+      {...createSlot("content")}
+      className={cn(tabsContentVariants(), className)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/ui/src/components/tabs.variants.ts b/packages/ui/src/components/tabs.variants.ts
new file mode 100644
index 0000000..633d8f9
--- /dev/null
+++ b/packages/ui/src/components/tabs.variants.ts
@@ -0,0 +1,20 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const tabsListVariants = cva([
+  "inline-flex h-12 items-center gap-1 rounded-[var(--radius-full)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-[var(--shadow-xs)]"
+]);
+
+export const tabsTriggerVariants = cva([
+  "inline-flex min-w-[7rem] items-center justify-center rounded-[var(--radius-full)] px-4 py-2.5 text-sm font-medium outline-none",
+  "text-[var(--color-muted-foreground)] transition-[color,background-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]:pointer-events-none data-[disabled]:opacity-45",
+  "data-[state=active]:bg-[var(--color-card)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-[var(--shadow-xs)]",
+  getMotionRecipeClassNames("ring")
+]);
+
+export const tabsContentVariants = cva([
+  "mt-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 text-[var(--color-card-foreground)] shadow-[var(--shadow-sm)] outline-none",
+  "data-[state=active]:motion-enter-rise"
+]);
diff --git a/packages/ui/src/components/textarea.test.tsx b/packages/ui/src/components/textarea.test.tsx
new file mode 100644
index 0000000..944853a
--- /dev/null
+++ b/packages/ui/src/components/textarea.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Field, FieldControl, FieldDescription, FieldError } from "./field";
+import { Label } from "./label";
+import { Textarea } from "./textarea";
+
+describe("Textarea", () => {
+  it("renders the input slot and reflects explicit field state props", () => {
+    render(
+      <Textarea
+        aria-label="Release summary"
+        disabled
+        invalid
+        readOnly
+        required
+        size="sm"
+      />
+    );
+
+    const textarea = screen.getByRole("textbox", { name: "Release summary" });
+
+    expect(textarea).toHaveAttribute("data-slot", "input");
+    expect(textarea).toHaveAttribute("data-disabled", "");
+    expect(textarea).toHaveAttribute("data-invalid", "");
+    expect(textarea).toHaveAttribute("data-readonly", "");
+    expect(textarea).toHaveAttribute("data-required", "");
+    expect(textarea).toHaveAttribute("data-size", "sm");
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+    expect(textarea).toHaveAttribute("readonly");
+  });
+
+  it("inherits context wiring inside a field", () => {
+    render(
+      <Field invalid readOnly>
+        <Label>Launch summary</Label>
+        <FieldControl>
+          <Textarea />
+          <FieldDescription>Keep it concise for the changelog card.</FieldDescription>
+          <FieldError>Summary needs more detail.</FieldError>
+        </FieldControl>
+      </Field>
+    );
+
+    const textarea = screen.getByRole("textbox", { name: "Launch summary" });
+    const description = screen.getByText("Keep it concise for the changelog card.");
+    const error = screen.getByText("Summary needs more detail.");
+
+    expect(textarea).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+    expect(textarea).toHaveAttribute("readonly");
+  });
+});
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
new file mode 100644
index 0000000..324e8fd
--- /dev/null
+++ b/packages/ui/src/components/textarea.tsx
@@ -0,0 +1,66 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef
+} from "react";
+
+import { textareaVariants } from "./textarea.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import type { FieldStateProps } from "../lib/contracts";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+import { useFieldContext } from "./field";
+
+function mergeIds(...ids: Array<string | undefined>) {
+  const value = ids.filter(Boolean).join(" ").trim();
+  return value.length > 0 ? value : undefined;
+}
+
+export type TextareaProps = ComponentPropsWithoutRef<"textarea"> &
+  FieldStateProps &
+  VariantProps<typeof textareaVariants>;
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  {
+    className,
+    disabled,
+    id,
+    invalid,
+    readOnly,
+    required,
+    size,
+    ...props
+  },
+  ref
+) {
+  const field = useFieldContext();
+  const resolvedDisabled = disabled ?? field?.disabled ?? false;
+  const resolvedInvalid = invalid ?? field?.invalid ?? false;
+  const resolvedReadOnly = readOnly ?? field?.readOnly ?? false;
+  const resolvedRequired = required ?? field?.required ?? false;
+
+  return (
+    <textarea
+      {...props}
+      {...createSlot("input")}
+      {...createDataAttributes({
+        disabled: resolvedDisabled,
+        invalid: resolvedInvalid,
+        readonly: resolvedReadOnly,
+        required: resolvedRequired,
+        size
+      })}
+      aria-describedby={mergeIds(
+        props["aria-describedby"],
+        field?.descriptionId,
+        resolvedInvalid ? field?.errorId : undefined
+      )}
+      aria-invalid={resolvedInvalid || undefined}
+      className={cn(textareaVariants({ size }), className)}
+      disabled={resolvedDisabled}
+      id={id ?? field?.inputId}
+      readOnly={resolvedReadOnly}
+      ref={ref}
+      required={resolvedRequired}
+    />
+  );
+});
diff --git a/packages/ui/src/components/textarea.variants.ts b/packages/ui/src/components/textarea.variants.ts
new file mode 100644
index 0000000..af7c950
--- /dev/null
+++ b/packages/ui/src/components/textarea.variants.ts
@@ -0,0 +1,28 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const textareaVariants = cva(
+  [
+    "flex min-h-[8.75rem] w-full min-w-0 resize-y rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)] px-4 py-3",
+    "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: "min-h-[7.5rem] px-3 py-2.5 text-sm",
+        md: "min-h-[8.75rem] px-4 py-3 text-sm",
+        lg: "min-h-[10.5rem] px-4 py-3.5 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
diff --git a/packages/ui/src/components/toast.test.tsx b/packages/ui/src/components/toast.test.tsx
new file mode 100644
index 0000000..2615c96
--- /dev/null
+++ b/packages/ui/src/components/toast.test.tsx
@@ -0,0 +1,69 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "./toast";
+
+function StatefulToast() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <ToastProvider>
+      <Toast open={open} onOpenChange={setOpen}>
+        <ToastTitle>Saved</ToastTitle>
+        <ToastDescription>Launch details were updated.</ToastDescription>
+        <ToastAction altText="Undo changes">Undo</ToastAction>
+        <ToastClose />
+      </Toast>
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
+
+describe("Toast", () => {
+  it("renders viewport, title, description, action, and variant hooks", () => {
+    render(
+      <ToastProvider>
+        <Toast open variant="destructive">
+          <ToastTitle>Delete failed</ToastTitle>
+          <ToastDescription>Try again in a moment.</ToastDescription>
+          <ToastAction altText="Retry delete">Retry</ToastAction>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    );
+
+    expect(screen.getByText("Delete failed").closest('[data-slot="label"]')).toBeInTheDocument();
+    expect(screen.getByText("Try again in a moment.").closest('[data-slot="description"]')).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Retry" })).toHaveAttribute("data-slot", "action");
+    expect(document.querySelector('[data-slot="root"]')).toHaveAttribute("data-variant", "destructive");
+    expect(document.querySelector('[data-slot="viewport"]')).toBeInTheDocument();
+  });
+
+  it("closes through the close control", async () => {
+    const user = userEvent.setup();
+
+    render(<StatefulToast />);
+
+    expect(screen.getByText("Saved")).toBeInTheDocument();
+
+    const closeButton = document.querySelector('[data-slot="close"]');
+
+    expect(closeButton).toBeInstanceOf(HTMLButtonElement);
+    await user.click(closeButton as HTMLButtonElement);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Saved")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
new file mode 100644
index 0000000..105b61c
--- /dev/null
+++ b/packages/ui/src/components/toast.tsx
@@ -0,0 +1,104 @@
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { toastActionVariants, toastCloseVariants, toastVariants, toastViewportVariants } from "./toast.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export const ToastProvider = ToastPrimitive.Provider;
+
+export const ToastViewport = forwardRef<
+  ElementRef<typeof ToastPrimitive.Viewport>,
+  ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>
+>(function ToastViewport({ className, ...props }, ref) {
+  return (
+    <ToastPrimitive.Viewport
+      {...props}
+      {...createSlot("viewport")}
+      className={cn(toastViewportVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> &
+  VariantProps<typeof toastVariants>;
+
+export const Toast = forwardRef<
+  ElementRef<typeof ToastPrimitive.Root>,
+  ToastProps
+>(function Toast({ className, variant, ...props }, ref) {
+  return (
+    <ToastPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({ variant })}
+      className={cn(toastVariants({ variant }), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const ToastTitle = forwardRef<
+  ElementRef<typeof ToastPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof ToastPrimitive.Title>
+>(function ToastTitle({ className, ...props }, ref) {
+  return (
+    <ToastPrimitive.Title
+      {...props}
+      {...createSlot("label")}
+      className={cn("col-start-1 row-start-1 text-sm font-semibold", className)}
+      ref={ref}
+    />
+  );
+});
+
+export const ToastDescription = forwardRef<
+  ElementRef<typeof ToastPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof ToastPrimitive.Description>
+>(function ToastDescription({ className, ...props }, ref) {
+  return (
+    <ToastPrimitive.Description
+      {...props}
+      {...createSlot("description")}
+      className={cn("col-start-1 row-start-2 text-sm leading-6 text-[var(--color-muted-foreground)]", className)}
+      ref={ref}
+    />
+  );
+});
+
+export const ToastAction = forwardRef<
+  ElementRef<typeof ToastPrimitive.Action>,
+  ComponentPropsWithoutRef<typeof ToastPrimitive.Action>
+>(function ToastAction({ className, ...props }, ref) {
+  return (
+    <ToastPrimitive.Action
+      {...props}
+      {...createSlot("action")}
+      className={cn(toastActionVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const ToastClose = forwardRef<
+  ElementRef<typeof ToastPrimitive.Close>,
+  ComponentPropsWithoutRef<typeof ToastPrimitive.Close>
+>(function ToastClose({ children, className, ...props }, ref) {
+  return (
+    <ToastPrimitive.Close
+      {...props}
+      aria-label={props["aria-label"] ?? "Close notification"}
+      {...createSlot("close")}
+      className={cn(toastCloseVariants(), className)}
+      ref={ref}
+    >
+      {children ?? (
+        <span aria-hidden="true" className="text-lg leading-none">
+          ×
+        </span>
+      )}
+    </ToastPrimitive.Close>
+  );
+});
diff --git a/packages/ui/src/components/toast.variants.ts b/packages/ui/src/components/toast.variants.ts
new file mode 100644
index 0000000..129d94c
--- /dev/null
+++ b/packages/ui/src/components/toast.variants.ts
@@ -0,0 +1,42 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const toastViewportVariants = cva([
+  "fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:bottom-4 sm:right-4 sm:max-w-[28rem]"
+]);
+
+export const toastVariants = cva(
+  [
+    "group pointer-events-auto relative grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-2 overflow-hidden rounded-[var(--radius-lg)] border p-4 pr-12 shadow-[var(--shadow-md)]",
+    "bg-[var(--color-card)] text-[var(--color-card-foreground)]",
+    "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
+    "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform] data-[swipe=cancel]:duration-[var(--dur-fast)]",
+    "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=end]:opacity-0",
+    getMotionRecipeClassNames("ring")
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-[var(--color-border)]",
+        success:
+          "border-[color-mix(in_oklch,var(--color-success)_32%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--color-card))]",
+        destructive:
+          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--color-card))]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+export const toastActionVariants = cva([
+  "col-start-2 row-span-2 row-start-1 inline-flex h-9 shrink-0 items-center justify-center self-start rounded-[var(--radius-full)] border border-[var(--color-border-strong)] px-3 text-sm font-medium text-[var(--color-foreground)]",
+  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+]);
+
+export const toastCloseVariants = cva([
+  "absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)] outline-none",
+  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+]);
diff --git a/packages/ui/src/components/tooltip.test.tsx b/packages/ui/src/components/tooltip.test.tsx
new file mode 100644
index 0000000..658f6a8
--- /dev/null
+++ b/packages/ui/src/components/tooltip.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip";
+
+describe("Tooltip", () => {
+  it("shows and hides tooltip content around hover", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <TooltipProvider delayDuration={0} disableHoverableContent>
+        <Tooltip>
+          <TooltipTrigger>Help</TooltipTrigger>
+          <TooltipContent size="lg">
+            Helpful context
+            <TooltipArrow />
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Help" }));
+
+    const tooltip = await screen.findByRole("tooltip");
+    const content = tooltip.closest('[data-slot="content"]');
+
+    expect(content).toHaveAttribute("data-size", "lg");
+    expect(document.querySelector('[data-slot="arrow"]')).toBeInTheDocument();
+
+    await user.unhover(screen.getByRole("button", { name: "Help" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    });
+  });
+
+  it("reports controlled open changes from the trigger", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip open={false} onOpenChange={onOpenChange}>
+          <TooltipTrigger>Help</TooltipTrigger>
+          <TooltipContent>Helpful context</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    await user.hover(screen.getByRole("button", { name: "Help" }));
+
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  });
+});
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
new file mode 100644
index 0000000..36501cd
--- /dev/null
+++ b/packages/ui/src/components/tooltip.tsx
@@ -0,0 +1,50 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { tooltipContentVariants } from "./tooltip.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipPortal = TooltipPrimitive.Portal;
+
+export type TooltipContentProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants>;
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(function TooltipContent(
+  { className, sideOffset = 8, size, ...props },
+  ref
+) {
+  return (
+    <TooltipPortal>
+      <TooltipPrimitive.Content
+        {...props}
+        {...createSlot("content")}
+        {...createDataAttributes({ size })}
+        className={cn(tooltipContentVariants({ size }), className)}
+        ref={ref}
+        sideOffset={sideOffset}
+      />
+    </TooltipPortal>
+  );
+});
+
+export const TooltipArrow = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Arrow>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(function TooltipArrow({ className, ...props }, ref) {
+  return (
+    <TooltipPrimitive.Arrow
+      {...props}
+      {...createSlot("arrow")}
+      className={cn("fill-[var(--color-surface-contrast)]", className)}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/ui/src/components/tooltip.variants.ts b/packages/ui/src/components/tooltip.variants.ts
new file mode 100644
index 0000000..a1a80ef
--- /dev/null
+++ b/packages/ui/src/components/tooltip.variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "../lib/cva";
+
+export const tooltipContentVariants = cva(
+  [
+    "z-50 max-w-xs rounded-[var(--radius-sm)] bg-[var(--color-surface-contrast)] px-3 py-2 text-sm text-[var(--color-background)] shadow-[var(--shadow-sm)] outline-none",
+    "data-[state=delayed-open]:motion-enter-fade data-[state=instant-open]:motion-enter-fade data-[state=closed]:motion-exit-fade",
+    "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-[12rem]",
+        md: "max-w-[16rem]",
+        lg: "max-w-[20rem]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 45a48e9..9cb8886 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,5 +1,161 @@
 export { Button, type ButtonProps } from "./components/button";
 export { buttonVariants } from "./components/button.variants";
+export { Checkbox, type CheckboxProps } from "./components/checkbox";
+export { checkboxVariants } from "./components/checkbox.variants";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  type DialogContentProps
+} from "./components/dialog";
+export {
+  dialogContentVariants,
+  dialogFooterVariants,
+  dialogHeaderVariants,
+  dialogOverlayVariants
+} from "./components/dialog.variants";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuSubContentProps,
+  type DropdownMenuSubTriggerProps
+} from "./components/dropdown-menu";
+export {
+  dropdownMenuContentVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuLabelVariants,
+  dropdownMenuSeparatorVariants
+} from "./components/dropdown-menu.variants";
+export {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FormItem,
+  useFieldIds,
+  type FieldControlProps,
+  type FieldDescriptionProps,
+  type FieldErrorProps,
+  type FieldProps,
+  type FieldRenderProps
+} from "./components/field";
+export { Input, type InputProps } from "./components/input";
+export { inputVariants } from "./components/input.variants";
+export { Label, type LabelProps } from "./components/label";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+  type PopoverContentProps
+} from "./components/popover";
+export { popoverContentVariants } from "./components/popover.variants";
+export {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  type RadioGroupProps
+} from "./components/radio-group";
+export {
+  radioGroupItemVariants,
+  radioGroupVariants
+} from "./components/radio-group.variants";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type SelectTriggerProps
+} from "./components/select";
+export {
+  selectContentVariants,
+  selectItemVariants,
+  selectLabelVariants,
+  selectSeparatorVariants,
+  selectTriggerVariants,
+  selectViewportVariants
+} from "./components/select.variants";
+export { Separator, type SeparatorProps } from "./components/separator";
+export { separatorVariants } from "./components/separator.variants";
+export { Skeleton, type SkeletonProps } from "./components/skeleton";
+export { Spinner, type SpinnerProps } from "./components/spinner";
+export { Switch, type SwitchProps } from "./components/switch";
+export {
+  switchThumbVariants,
+  switchVariants
+} from "./components/switch.variants";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./components/tabs";
+export {
+  tabsContentVariants,
+  tabsListVariants,
+  tabsTriggerVariants
+} from "./components/tabs.variants";
+export { Textarea, type TextareaProps } from "./components/textarea";
+export { textareaVariants } from "./components/textarea.variants";
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  type ToastProps
+} from "./components/toast";
+export {
+  toastActionVariants,
+  toastCloseVariants,
+  toastVariants,
+  toastViewportVariants
+} from "./components/toast.variants";
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+  type TooltipContentProps
+} from "./components/tooltip";
+export { tooltipContentVariants } from "./components/tooltip.variants";
 export { cn } from "./lib/cn";
 export { cva, cx, type VariantProps } from "./lib/cva";
 export {
diff --git a/packages/ui/src/test/setup.ts b/packages/ui/src/test/setup.ts
new file mode 100644
index 0000000..b84dec5
--- /dev/null
+++ b/packages/ui/src/test/setup.ts
@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+class PointerEventMock extends MouseEvent {
+  constructor(type: string, props: PointerEventInit = {}) {
+    super(type, props);
+  }
+}
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+});
+
+Object.defineProperty(window, "ResizeObserver", {
+  writable: true,
+  value: ResizeObserverMock
+});
+
+Object.defineProperty(window, "PointerEvent", {
+  writable: true,
+  value: PointerEventMock
+});
+
+Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+  configurable: true,
+  value: vi.fn()
+});
+
+Object.defineProperty(window.HTMLElement.prototype, "hasPointerCapture", {
+  configurable: true,
+  value: vi.fn(() => false)
+});
+
+Object.defineProperty(window.HTMLElement.prototype, "releasePointerCapture", {
+  configurable: true,
+  value: vi.fn()
+});
+
+Object.defineProperty(window.HTMLElement.prototype, "setPointerCapture", {
+  configurable: true,
+  value: vi.fn()
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index feb75f2..fb32ffc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,15 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.2.2
         version: 4.2.2(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0))
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.0)
       '@types/node':
         specifier: ^25.5.0
         version: 25.5.0
@@ -50,6 +59,9 @@ importers:
       globals:
         specifier: ^17.4.0
         version: 17.4.0
+      jsdom:
+        specifier: ^29.0.0
+        version: 29.0.0
       storybook:
         specifier: ^8.6.14
         version: 8.6.14
@@ -68,6 +80,9 @@ importers:
       vite:
         specifier: ^6.4.1
         version: 6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)
+      vitest:
+        specifier: ^4.1.0
+        version: 4.1.0(@types/node@25.5.0)(jsdom@29.0.0)(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0))
 
   apps/docs:
     dependencies:
@@ -91,9 +106,42 @@ importers:
       '@ai-ui/tokens':
         specifier: workspace:*
         version: link:../tokens
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.3.8
+        version: 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: ^1.2.6
+        version: 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.15
+        version: 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -107,18 +155,44 @@ importers:
         specifier: ^3.5.0
         version: 3.5.0
     devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.0)
+      jsdom:
+        specifier: ^29.0.0
+        version: 29.0.0
       react:
         specifier: ^18.3.1
         version: 18.3.1
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      vitest:
+        specifier: ^4.1.0
+        version: 4.1.0(@types/node@25.5.0)(jsdom@29.0.0)(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0))
 
 packages:
 
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
+  '@asamuzakjp/css-color@5.0.1':
+    resolution: {integrity: sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.0.3':
+    resolution: {integrity: sha512-Q6mU0Z6bfj6YvnX2k9n0JxiIwrCFN59x/nWmYQnAqP000ruX/yV+5bp/GRcF5T8ncvfwJQ7fgfP74DlpKExILA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -190,6 +264,46 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
+  '@csstools/color-helpers@6.0.2':
+    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.1.1':
+    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.0.2':
+    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.1':
+    resolution: {integrity: sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -540,6 +654,30 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@exodus/bytes@1.15.0':
+    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -595,6 +733,51 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -604,6 +787,246 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.2.4':
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
@@ -613,6 +1036,146 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.15':
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@rollup/pluginutils@5.3.0':
     resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
     engines: {node: '>=14.0.0'}
@@ -747,6 +1310,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@storybook/addon-a11y@8.6.14':
     resolution: {integrity: sha512-fozv6enO9IgpWq2U8qqS8MZ21Nt+MVHiRQe3CjnCpBOejTyo/ATm690PeYYRVHVG6M/15TVePb0h3ngKQbrrzQ==}
     peerDependencies:
@@ -1011,12 +1577,37 @@ packages:
     resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@testing-library/user-event@14.5.2':
     resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -1032,6 +1623,12 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
@@ -1126,21 +1723,50 @@ packages:
   '@vitest/expect@2.0.5':
     resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
 
+  '@vitest/expect@4.1.0':
+    resolution: {integrity: sha512-EIxG7k4wlWweuCLG9Y5InKFwpMEOyrMb6ZJ1ihYu02LVj/bzUwn2VMU+13PinsjRW75XnITeFrQBMH5+dLvCDA==}
+
+  '@vitest/mocker@4.1.0':
+    resolution: {integrity: sha512-evxREh+Hork43+Y4IOhTo+h5lGmVRyjqI739Rz4RlUPqwrkFFDF6EMvOOYjTx4E8Tl6gyCLRL8Mu7Ry12a13Tw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
   '@vitest/pretty-format@2.0.5':
     resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
 
   '@vitest/pretty-format@2.1.9':
     resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
+  '@vitest/pretty-format@4.1.0':
+    resolution: {integrity: sha512-3RZLZlh88Ib0J7NQTRATfc/3ZPOnSUn2uDBUoGNn5T36+bALixmzphN26OUD3LRXWkJu4H0s5vvUeqBiw+kS0A==}
+
+  '@vitest/runner@4.1.0':
+    resolution: {integrity: sha512-Duvx2OzQ7d6OjchL+trw+aSrb9idh7pnNfxrklo14p3zmNL4qPCDeIJAK+eBKYjkIwG96Bc6vYuxhqDXQOWpoQ==}
+
+  '@vitest/snapshot@4.1.0':
+    resolution: {integrity: sha512-0Vy9euT1kgsnj1CHttwi9i9o+4rRLEaPRSOJ5gyv579GJkNpgJK+B4HSv/rAWixx2wdAFci1X4CEPjiu2bXIMg==}
+
   '@vitest/spy@2.0.5':
     resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
 
+  '@vitest/spy@4.1.0':
+    resolution: {integrity: sha512-pz77k+PgNpyMDv2FV6qmk5ZVau6c3R8HC8v342T2xlFxQKTrSeYw9waIJG8KgV9fFwAtTu4ceRzMivPTH6wSxw==}
+
   '@vitest/utils@2.0.5':
     resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
 
   '@vitest/utils@2.1.9':
     resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
+  '@vitest/utils@4.1.0':
+    resolution: {integrity: sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1180,6 +1806,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -1219,6 +1849,9 @@ packages:
     resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
     engines: {node: '>=12.0.0'}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -1270,6 +1903,10 @@ packages:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chalk@3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
     engines: {node: '>=8'}
@@ -1321,12 +1958,20 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1336,6 +1981,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -1359,6 +2007,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -1389,6 +2040,10 @@ packages:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1397,6 +2052,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -1492,6 +2150,10 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1570,6 +2232,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -1623,6 +2289,10 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1679,6 +2349,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -1716,6 +2389,15 @@ packages:
     resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
     engines: {node: '>=12.0.0'}
 
+  jsdom@29.0.0:
+    resolution: {integrity: sha512-9FshNB6OepopZ08unmmGpsF7/qCjxGPbo3NbgfJAnPeHXnsODE9WWffXZtRFRFe0ntzaAOcSKNJFz8wiyvF1jQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -1843,6 +2525,10 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@11.2.7:
+    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1864,6 +2550,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
@@ -1933,6 +2622,9 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -1956,6 +2648,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2060,6 +2755,36 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -2080,6 +2805,10 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2102,6 +2831,10 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -2129,6 +2862,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2145,6 +2881,12 @@ packages:
     resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
     engines: {node: '>= 12'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@4.0.0:
+    resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
+
   storybook@8.6.14:
     resolution: {integrity: sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==}
     hasBin: true
@@ -2199,6 +2941,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -2219,9 +2964,16 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyexec@1.0.4:
+    resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -2230,10 +2982,29 @@ packages:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
 
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
   tinyspy@3.0.2:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@7.0.26:
+    resolution: {integrity: sha512-5WJ2SqFsv4G2Dwi7ZFVRnz6b2H1od39QME1lc2y5Ew3eWiZMAeqOAfWpRP9jHvhUl881406QtZTODvjttJs+ew==}
+
+  tldts@7.0.26:
+    resolution: {integrity: sha512-WiGwQjr0qYdNNG8KpMKlSvpxz652lqa3Rd+/hSaDcY4Uo6SKWZq2LAF+hsAhUewTtYhXlorBKgNF3Kk8hnjGoQ==}
+    hasBin: true
+
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -2299,6 +3070,10 @@ packages:
   undici-types@7.18.2:
     resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
+  undici@7.24.4:
+    resolution: {integrity: sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==}
+    engines: {node: '>=20.18.1'}
+
   unplugin@1.16.1:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
@@ -2312,6 +3087,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
 
@@ -2359,9 +3154,60 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.0:
+    resolution: {integrity: sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.0
+      '@vitest/browser-preview': 4.1.0
+      '@vitest/browser-webdriverio': 4.1.0
+      '@vitest/ui': 4.1.0
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   which-typed-array@1.1.20:
     resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==}
     engines: {node: '>= 0.4'}
@@ -2371,6 +3217,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -2395,6 +3246,13 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -2415,6 +3273,24 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
+  '@asamuzakjp/css-color@5.0.1':
+    dependencies:
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      lru-cache: 11.2.7
+
+  '@asamuzakjp/dom-selector@7.0.3':
+    dependencies:
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.7
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -2517,6 +3393,34 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
+  '@csstools/color-helpers@6.0.2': {}
+
+  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.1(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
@@ -2719,6 +3623,25 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@exodus/bytes@1.15.0': {}
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/utils@0.2.11': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -2776,12 +3699,324 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.28)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   '@radix-ui/react-slot@1.2.4(@types/react@18.3.28)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -2789,6 +4024,142 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@rollup/pluginutils@5.3.0(rollup@4.59.0)':
     dependencies:
       '@types/estree': 1.0.8
@@ -2872,6 +4243,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.59.0':
     optional: true
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@storybook/addon-a11y@8.6.14(storybook@8.6.14)':
     dependencies:
       '@storybook/addon-highlight': 8.6.14(storybook@8.6.14)
@@ -3186,10 +4559,43 @@ snapshots:
       lodash: 4.17.23
       redent: 3.0.0
 
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.0
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
       '@testing-library/dom': 10.4.0
 
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -3213,6 +4619,13 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
   '@types/doctrine@0.0.9': {}
 
   '@types/estree@1.0.8': {}
@@ -3338,6 +4751,23 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 1.2.0
 
+  '@vitest/expect@4.1.0':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.0
+      '@vitest/utils': 4.1.0
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.0(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0))':
+    dependencies:
+      '@vitest/spy': 4.1.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)
+
   '@vitest/pretty-format@2.0.5':
     dependencies:
       tinyrainbow: 1.2.0
@@ -3346,10 +4776,28 @@ snapshots:
     dependencies:
       tinyrainbow: 1.2.0
 
+  '@vitest/pretty-format@4.1.0':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.0':
+    dependencies:
+      '@vitest/utils': 4.1.0
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.0':
+    dependencies:
+      '@vitest/pretty-format': 4.1.0
+      '@vitest/utils': 4.1.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
   '@vitest/spy@2.0.5':
     dependencies:
       tinyspy: 3.0.2
 
+  '@vitest/spy@4.1.0': {}
+
   '@vitest/utils@2.0.5':
     dependencies:
       '@vitest/pretty-format': 2.0.5
@@ -3363,6 +4811,12 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 1.2.0
 
+  '@vitest/utils@4.1.0':
+    dependencies:
+      '@vitest/pretty-format': 4.1.0
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -3392,6 +4846,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -3420,6 +4878,10 @@ snapshots:
     dependencies:
       open: 8.4.2
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -3479,6 +4941,8 @@ snapshots:
       loupe: 3.2.1
       pathval: 2.0.1
 
+  chai@6.2.2: {}
+
   chalk@3.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -3523,14 +4987,28 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
   css.escape@1.5.1: {}
 
   csstype@3.2.3: {}
 
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.6.0: {}
+
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
@@ -3547,6 +5025,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -3574,10 +5054,14 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@6.0.1: {}
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@2.0.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -3744,6 +5228,8 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  expect-type@1.3.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-json-stable-stringify@2.1.0: {}
@@ -3816,6 +5302,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -3864,6 +5352,12 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -3908,6 +5402,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -3943,6 +5439,32 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.8.0: {}
 
+  jsdom@29.0.0:
+    dependencies:
+      '@asamuzakjp/css-color': 5.0.1
+      '@asamuzakjp/dom-selector': 7.0.3
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.1(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.0
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.7
+      parse5: 8.0.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.1
+      undici: 7.24.4
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -4033,6 +5555,8 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@11.2.7: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -4051,6 +5575,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdn-data@2.27.1: {}
+
   memoizerific@1.11.3:
     dependencies:
       map-or-similar: 1.5.0
@@ -4110,6 +5636,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
+  obug@2.1.1: {}
+
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -4139,6 +5667,10 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -4229,6 +5761,33 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  react-remove-scroll@2.7.2(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.28)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.28)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  react-style-singleton@2.2.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4250,6 +5809,8 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  require-from-string@2.0.2: {}
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -4297,6 +5858,10 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -4322,6 +5887,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   source-map-js@1.2.1: {}
@@ -4330,6 +5897,10 @@ snapshots:
 
   source-map@0.7.6: {}
 
+  stackback@0.0.2: {}
+
+  std-env@4.0.0: {}
+
   storybook@8.6.14:
     dependencies:
       '@storybook/core': 8.6.14(storybook@8.6.14)
@@ -4384,6 +5955,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  symbol-tree@3.2.4: {}
+
   tailwind-merge@3.5.0: {}
 
   tailwindcss@4.2.2: {}
@@ -4400,8 +5973,12 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinybench@2.9.0: {}
+
   tinyexec@0.3.2: {}
 
+  tinyexec@1.0.4: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
@@ -4409,8 +5986,24 @@ snapshots:
 
   tinyrainbow@1.2.0: {}
 
+  tinyrainbow@3.1.0: {}
+
   tinyspy@3.0.2: {}
 
+  tldts-core@7.0.26: {}
+
+  tldts@7.0.26:
+    dependencies:
+      tldts-core: 7.0.26
+
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.0.26
+
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   ts-api-utils@2.5.0(typescript@5.9.3):
@@ -4478,6 +6071,8 @@ snapshots:
 
   undici-types@7.18.2: {}
 
+  undici@7.24.4: {}
+
   unplugin@1.16.1:
     dependencies:
       acorn: 8.16.0
@@ -4493,6 +6088,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  use-sidecar@1.1.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   util@0.12.5:
     dependencies:
       inherits: 2.0.4
@@ -4517,8 +6127,52 @@ snapshots:
       jiti: 2.6.1
       lightningcss: 1.32.0
 
+  vitest@4.1.0(@types/node@25.5.0)(jsdom@29.0.0)(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)):
+    dependencies:
+      '@vitest/expect': 4.1.0
+      '@vitest/mocker': 4.1.0(vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0))
+      '@vitest/pretty-format': 4.1.0
+      '@vitest/runner': 4.1.0
+      '@vitest/snapshot': 4.1.0
+      '@vitest/spy': 4.1.0
+      '@vitest/utils': 4.1.0
+      es-module-lexer: 2.0.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 4.0.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.4
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.1.0
+      vite: 6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.5.0
+      jsdom: 29.0.0
+    transitivePeerDependencies:
+      - msw
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@8.0.1: {}
+
   webpack-virtual-modules@0.6.2: {}
 
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   which-typed-array@1.1.20:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -4533,6 +6187,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
@@ -4549,6 +6208,10 @@ snapshots:
 
   ws@8.19.0: {}
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   yallist@3.1.1: {}
 
   yocto-queue@0.1.0: {}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..23b8a94
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,56 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+
+import { defineConfig } from "vitest/config";
+
+const rootDir = path.resolve(__dirname);
+const uiRequire = createRequire(path.resolve(rootDir, "packages/ui/package.json"));
+const reactDir = path.dirname(uiRequire.resolve("react/package.json"));
+const reactDomDir = path.dirname(uiRequire.resolve("react-dom/package.json"));
+
+export default defineConfig({
+  root: rootDir,
+  resolve: {
+    alias: [
+      {
+        find: "@ai-ui/ui",
+        replacement: path.resolve(rootDir, "packages/ui/src/index.ts")
+      },
+      {
+        find: "@ai-ui/tokens",
+        replacement: path.resolve(rootDir, "packages/tokens/src/index.ts")
+      },
+      {
+        find: "react/jsx-dev-runtime",
+        replacement: path.resolve(reactDir, "jsx-dev-runtime.js")
+      },
+      {
+        find: "react/jsx-runtime",
+        replacement: path.resolve(reactDir, "jsx-runtime.js")
+      },
+      {
+        find: "react-dom/test-utils",
+        replacement: path.resolve(reactDomDir, "test-utils.js")
+      },
+      {
+        find: "react-dom/client",
+        replacement: path.resolve(reactDomDir, "client.js")
+      },
+      {
+        find: "react-dom",
+        replacement: reactDomDir
+      },
+      {
+        find: "react",
+        replacement: reactDir
+      }
+    ]
+  },
+  test: {
+    clearMocks: true,
+    environment: "jsdom",
+    include: ["packages/ui/src/**/*.test.{ts,tsx}"],
+    restoreMocks: true,
+    setupFiles: [path.resolve(rootDir, "packages/ui/src/test/setup.ts")]
+  }
+});