@kinetixui/ui 0.23.3 → 0.24.0

package/src/stories/Card.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input } from "@kinetixui/ui";
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Label, Switch } from "@kinetixui/ui";
 
 const Demo = () => (
     <Card className="w-[320px]">
@@ -31,3 +31,83 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const Grouped: StoryObj<typeof meta> = { render: () => (
+    <section aria-labelledby="card-grouped-heading" className="w-[36rem] max-w-full rounded-xl bg-surface-grouped p-4 sm:p-6">
+      <h2 id="card-grouped-heading" className="mb-4 text-title-md text-foreground">Workspace settings</h2>
+      <div className="grid gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>Choose what reaches your inbox.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between gap-4">
+              <Label htmlFor="card-grouped-digest">Weekly digest</Label>
+              <Switch id="card-grouped-digest" defaultChecked />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Danger zone</CardTitle>
+            <CardDescription>Archiving hides the workspace from every member.</CardDescription>
+          </CardHeader>
+          <CardFooter>
+            <Button variant="Outline" size="sm">Archive workspace</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </section>
+  ) };
+
+export const Dense: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[40rem] max-w-full gap-3 sm:grid-cols-3">
+      {[
+        ["Revenue", "$45,231", "+12.5% this month"],
+        ["Active users", "2,420", "+8.1% this month"],
+        ["Churn", "1.2%", "−0.3% this month"],
+      ].map(([label, value, change]) => (
+        <Card key={label}>
+          <CardContent className="flex flex-col gap-1 p-4">
+            <span className="text-body-sm text-muted-foreground">{label}</span>
+            <span className="text-headline-sm font-medium tabular-nums">{value}</span>
+            <span className="text-body-sm text-muted-foreground">{change}</span>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  ) };
+
+export const Interactive: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[40rem] max-w-full gap-4 sm:grid-cols-2">
+      <Card asChild>
+        <a href="#reports-q3">
+          <CardHeader>
+            <CardTitle>Q3 report</CardTitle>
+            <CardDescription>Revenue, churn and cohort retention.</CardDescription>
+          </CardHeader>
+        </a>
+      </Card>
+      <Card asChild>
+        <a href="#reports-q4" aria-current="page">
+          <CardHeader>
+            <CardTitle>Q4 report</CardTitle>
+            <CardDescription>The report you are viewing.</CardDescription>
+          </CardHeader>
+        </a>
+      </Card>
+      <Card asChild>
+        <button type="button" aria-pressed="true" className="p-6">
+          <span className="block font-semibold leading-none tracking-tight">Daily backups</span>
+          <span className="mt-1.5 block text-sm text-muted-foreground">Included in this plan.</span>
+        </button>
+      </Card>
+      <Card asChild>
+        <button type="button" aria-pressed="false" className="p-6">
+          <span className="block font-semibold leading-none tracking-tight">Audit log</span>
+          <span className="mt-1.5 block text-sm text-muted-foreground">Add to this plan.</span>
+        </button>
+      </Card>
+    </div>
+  ) };

package/src/stories/Checkbox.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Checkbox, Label } from "@kinetixui/ui";
+import { Card, CardContent, Checkbox, Label, Select } from "@kinetixui/ui";
 
 const Demo = () => (
     <div className="flex items-center gap-2">
@@ -27,3 +27,25 @@ export default meta;
 export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox aria-label="Accept terms" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const States: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-4 p-6">
+        {([
+          ["unchecked", "Email me about product updates", {}],
+          ["checked", "Email me about security alerts", { defaultChecked: true }],
+          ["mixed", "Select all regions", { checked: "indeterminate" }],
+          ["invalid", "I accept the terms of service", { "aria-invalid": true, "aria-describedby": "cb-terms-error" }],
+          ["invalid-checked", "I accept the data processing terms", { "aria-invalid": true, defaultChecked: true }],
+          ["disabled", "Archive automatically (admins only)", { disabled: true }],
+          ["disabled-checked", "Keep an audit log (always on)", { disabled: true, defaultChecked: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="flex items-center gap-3">
+            <Checkbox id={`cb-${key}`} data-kx-case={key} {...props} />
+            <Label htmlFor={`cb-${key}`}>{label}</Label>
+          </div>
+        ))}
+        <p id="cb-terms-error" className="text-body-sm text-destructive">Accept the terms to continue.</p>
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/ContextMenu.stories.tsx

@@ -6,7 +6,7 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
 
 const Demo = () => (
     <ContextMenu>
-      <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-md border border-dashed text-sm">
+      <ContextMenuTrigger className="flex h-32 w-full max-w-64 items-center justify-center rounded-md border border-dashed text-sm">
         Right-click here
       </ContextMenuTrigger>
       <ContextMenuContent className="w-52">

package/src/stories/Input.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Input } from "../components/input";
+import { Card, CardContent } from "../components/card";
+import { Label } from "../components/label";
 
 const STATES = ["Default", "Focus", "Error", "Disabled"] as const;
 
@@ -48,6 +50,38 @@ export const States: Story = {
 };
 
 /** reproduces the full Figma field: label + control + helper, colour tracks state */
+/**
+ * The text-entry state contract (TOKENS.md, "Text entry and navigation") as a real form produces it: empty
+ * with a placeholder, filled, invalid with its error text, read-only and disabled, side by side in a raised
+ * Card. Real states, not the `state` prop's pinned ones — `check:entry-visual` drives hover and focus on
+ * these with a real pointer and keyboard, and both axe passes read them.
+ */
+export const EntryStates: Story = {
+  render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Display name", { placeholder: "e.g. Ada Lovelace" }],
+          ["filled", "Email", { type: "email", defaultValue: "ada@example.com" }],
+          ["invalid", "Username", { defaultValue: "ada lovelace", "aria-invalid": true, "aria-describedby": "in-invalid-error" }],
+          ["readonly", "Account ID", { readOnly: true, defaultValue: "acct_7Q2X9" }],
+          ["disabled", "Organisation", { disabled: true, defaultValue: "Managed by your admin" }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`in-${key}`}>{label}</Label>
+            <Input id={`in-${key}`} data-kx-case={key} {...props} />
+            {key === "invalid" ? (
+              <p id="in-invalid-error" className="text-body-sm text-destructive">
+                Use letters, numbers and dashes only.
+              </p>
+            ) : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ),
+};
+
 export const WithFieldChrome: Story = {
   render: (args) => (
     <div className="flex flex-col gap-6">

package/src/stories/InputGroup.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@kinetixui/ui";
+import { Card, CardContent, CardHeader, CardTitle, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSlot, Label, MultiSelect, NumberInput, PasswordInput } from "@kinetixui/ui";
 import { Search } from "lucide-react";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const Demo = () => (
 const meta = {
   title: "Form Inputs/InputGroup",
   parameters: {
-    layout: "centered",
+    layout: "padded",
     docs: { source: { code: "<InputGroup>\\n  <InputGroupText>https://</InputGroupText>\\n  <InputGroupInput placeholder=\"kinetixui.com\" />\\n</InputGroup>\\n\\n<InputGroup>\\n  <InputGroupAddon align=\"start\">$</InputGroupAddon>\\n  <InputGroupInput placeholder=\"0.00\" />\\n  <InputGroupText>USD</InputGroupText>\\n</InputGroup>", language: "tsx" } },
   },
 } satisfies Meta;
@@ -34,3 +34,97 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Website", {}],
+          ["filled", "Docs site", { defaultValue: "docs.kinetixui.com" }],
+          ["invalid", "Status page", { defaultValue: "status page", "aria-invalid": true, "aria-describedby": "ig-invalid-error" }],
+          ["readonly", "Workspace URL", { defaultValue: "acme.kinetixui.com", readOnly: true }],
+          ["disabled", "Custom domain (Pro)", { defaultValue: "app.acme.com", disabled: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`ig-${key}`}>{label}</Label>
+            <InputGroup data-kx-case={key}>
+              <InputGroupText>https://</InputGroupText>
+              <InputGroupInput id={`ig-${key}`} placeholder="example.com" {...props} />
+            </InputGroup>
+            {key === "invalid" ? <p id="ig-invalid-error" className="text-body-sm text-destructive">Use a domain, like status.example.com.</p> : null}
+          </div>
+        ))}
+        <div className="grid gap-2">
+          <Label htmlFor="ig-button">Invite link</Label>
+          <InputGroup data-kx-case="with-button">
+            <InputGroupInput id="ig-button" defaultValue="kx.link/j/7Q2X9" readOnly />
+            <InputGroupButton data-kx-part="button">Copy</InputGroupButton>
+          </InputGroup>
+        </div>
+      </CardContent>
+    </Card>
+  ) };
+
+export const Compositions: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[40rem] max-w-[calc(100vw-4rem)] gap-6">
+      <Card data-kx-composition="account">
+        <CardHeader><CardTitle>Create your account</CardTitle></CardHeader>
+        <CardContent className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="cmp-site">Website</Label>
+            <InputGroup>
+              <InputGroupText>https://</InputGroupText>
+              <InputGroupInput id="cmp-site" placeholder="example.com" />
+            </InputGroup>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cmp-password">Password</Label>
+            <PasswordInput id="cmp-password" />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cmp-code">Verification code</Label>
+            <InputOTP id="cmp-code" maxLength={6} aria-describedby="cmp-code-hint">
+              <InputOTPGroup>
+                {[0, 1, 2, 3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}
+              </InputOTPGroup>
+            </InputOTP>
+            <p id="cmp-code-hint" className="text-body-sm text-muted-foreground">We sent six digits to ada@example.com.</p>
+          </div>
+        </CardContent>
+      </Card>
+      <div data-kx-composition="filter" role="search" aria-label="Filter orders" className="flex flex-wrap items-end gap-3 rounded-md bg-surface-grouped p-3">
+        <div className="grid min-w-[12rem] flex-1 gap-1.5">
+          <Label htmlFor="cmp-search">Search</Label>
+          <InputGroup>
+            <InputGroupAddon><Search aria-hidden="true" /></InputGroupAddon>
+            <InputGroupInput id="cmp-search" placeholder="Order, customer or SKU" />
+          </InputGroup>
+        </div>
+        <div className="grid min-w-[12rem] flex-1 gap-1.5">
+          <Label id="cmp-status-label">Status</Label>
+          <MultiSelect aria-labelledby="cmp-status-label" defaultValue={["paid", "shipped"]} options={[{ value: "paid", label: "Paid" }, { value: "shipped", label: "Shipped" }, { value: "refunded", label: "Refunded" }]} />
+        </div>
+        <div className="grid gap-1.5">
+          <Label id="cmp-min-label">Min. items</Label>
+          <NumberInput aria-labelledby="cmp-min-label" defaultValue={1} min={0} className="w-32" />
+        </div>
+      </div>
+      <Card data-kx-composition="settings">
+        <CardHeader><CardTitle>Workspace limits</CardTitle></CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-2">
+          <div className="grid gap-2">
+            <Label id="cmp-seats-label">Seats</Label>
+            <NumberInput aria-labelledby="cmp-seats-label" defaultValue={12} min={1} max={500} />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cmp-domain">Sign-in domain</Label>
+            <InputGroup>
+              <InputGroupText>@</InputGroupText>
+              <InputGroupInput id="cmp-domain" defaultValue="acme.com" aria-invalid aria-describedby="cmp-domain-error" />
+            </InputGroup>
+            <p id="cmp-domain-error" className="text-body-sm text-destructive">Verify this domain before limiting sign-in to it.</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ) };

package/src/stories/InputOTP.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "@kinetixui/ui";
+import { Card, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, Label } from "@kinetixui/ui";
 
 const Demo = () => (
     <InputOTP maxLength={6} aria-label="One-time code">
@@ -25,3 +25,26 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Verification code", {}],
+          ["filled", "Backup code", { defaultValue: "482913" }],
+          ["invalid", "Authenticator code", { defaultValue: "000000", "aria-invalid": true, "aria-describedby": "otp-invalid-error" }],
+          ["disabled", "Recovery code (used)", { defaultValue: "771204", disabled: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`otp-${key}`}>{label}</Label>
+            <InputOTP id={`otp-${key}`} data-kx-case={key} maxLength={6} {...props}>
+              <InputOTPGroup>
+                {[0, 1, 2, 3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}
+              </InputOTPGroup>
+            </InputOTP>
+            {key === "invalid" ? <p id="otp-invalid-error" className="text-body-sm text-destructive">That code has expired. Request a new one.</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/MultiSelect.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { MultiSelect, Select } from "@kinetixui/ui";
+import { Card, CardContent, Label, MultiSelect, Select } from "@kinetixui/ui";
 
 const Demo = () => {
     const [value, setValue] = React.useState(["react", "swiftui"]);
@@ -34,3 +34,27 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Labels", {}],
+          ["filled", "Teams", { defaultValue: ["design", "web"] }],
+          ["invalid", "Reviewers", { "aria-invalid": true, "aria-describedby": "ms-invalid-error" }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label id={`ms-${key}-label`}>{label}</Label>
+            <MultiSelect
+              data-kx-case={key}
+              aria-labelledby={`ms-${key}-label`}
+              placeholder="Choose some"
+              options={[{ value: "design", label: "Design" }, { value: "web", label: "Web" }, { value: "mobile", label: "Mobile" }]}
+              {...props}
+            />
+            {key === "invalid" ? <p id="ms-invalid-error" className="text-body-sm text-destructive">Pick at least one reviewer.</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/NativeSelect.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { NativeSelect, NativeSelectOptGroup, NativeSelectOption, Select } from "@kinetixui/ui";
+import { Card, CardContent, Label, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Select } from "@kinetixui/ui";
 
 const Demo = () => (
     <NativeSelect aria-label="Fruit" className="max-w-xs" defaultValue="">
@@ -31,3 +31,26 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Country", { defaultValue: "" }],
+          ["filled", "Time zone", { defaultValue: "utc" }],
+          ["invalid", "Plan", { defaultValue: "", "aria-invalid": true, "aria-describedby": "nsel-invalid-error" }],
+          ["disabled", "Data region (locked)", { defaultValue: "utc", disabled: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`nsel-${key}`}>{label}</Label>
+            <NativeSelect id={`nsel-${key}`} data-kx-case={key} {...props}>
+              <NativeSelectOption value="" disabled>Choose one</NativeSelectOption>
+              <NativeSelectOption value="utc">UTC</NativeSelectOption>
+              <NativeSelectOption value="cet">Central European Time</NativeSelectOption>
+            </NativeSelect>
+            {key === "invalid" ? <p id="nsel-invalid-error" className="text-body-sm text-destructive">Choose a plan to continue.</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/NumberInput.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { NumberInput } from "@kinetixui/ui";
+import { Card, CardContent, Label, NumberInput } from "@kinetixui/ui";
 
 const Demo = () => {
     const [v, setV] = React.useState(2);
@@ -27,3 +27,22 @@ export default meta;
 export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput aria-label="Quantity" {...args} className="w-32" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Seats", { defaultValue: 4, min: 1 }],
+          ["invalid", "Guests", { defaultValue: 12, "aria-invalid": true, "aria-describedby": "ni-invalid-error" }],
+          ["readonly", "Plan seats", { defaultValue: 25, readOnly: true }],
+          ["disabled", "Admins (locked)", { defaultValue: 2, disabled: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label id={`ni-${key}-label`}>{label}</Label>
+            <NumberInput data-kx-case={key} aria-labelledby={`ni-${key}-label`} {...props} />
+            {key === "invalid" ? <p id="ni-invalid-error" className="text-body-sm text-destructive">This room holds 10 people at most.</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/Progress.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
   args: { value: 66 },
   argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
   parameters: {
-    layout: "centered",
+    layout: "padded",
     docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} aria-label=\\\"Upload progress\\\" />", language: "tsx" } },
   },
 } satisfies Meta;

package/src/stories/RadioGroup.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label, RadioGroup, RadioGroupItem } from "@kinetixui/ui";
+import { Card, CardContent, Label, RadioGroup, RadioGroupItem } from "@kinetixui/ui";
 
 const Demo = () => (
     <RadioGroup defaultValue="comfortable">
@@ -43,3 +43,35 @@ export const Playground: StoryObj<typeof meta> = { render: (args) => (
   ) };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const States: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-6 p-6">
+        <RadioGroup defaultValue="weekly" aria-label="Digest frequency">
+          {([["daily", "Daily"], ["weekly", "Weekly"], ["never", "Never"]] as const).map(([v, label]) => (
+            <div key={v} className="flex items-center gap-3">
+              <RadioGroupItem value={v} id={`rg-${v}`} data-kx-case={v === "weekly" ? "checked" : v === "daily" ? "unchecked" : undefined} />
+              <Label htmlFor={`rg-${v}`}>{label}</Label>
+            </div>
+          ))}
+        </RadioGroup>
+        <RadioGroup aria-label="Billing plan" aria-describedby="rg-plan-error">
+          {([["starter", "Starter"], ["team", "Team"]] as const).map(([v, label]) => (
+            <div key={v} className="flex items-center gap-3">
+              <RadioGroupItem value={v} id={`rg-${v}`} aria-invalid data-kx-case={v === "starter" ? "invalid" : undefined} />
+              <Label htmlFor={`rg-${v}`}>{label}</Label>
+            </div>
+          ))}
+          <p id="rg-plan-error" className="text-body-sm text-destructive">Choose a plan to continue.</p>
+        </RadioGroup>
+        <RadioGroup defaultValue="eu" disabled aria-label="Data region (locked)">
+          {([["eu", "EU"], ["us", "US"]] as const).map(([v, label]) => (
+            <div key={v} className="flex items-center gap-3">
+              <RadioGroupItem value={v} id={`rg-${v}`} data-kx-case={v === "us" ? "disabled" : "disabled-checked"} />
+              <Label htmlFor={`rg-${v}`}>{label}</Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/SegmentedControl.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { List, SegmentedControl, SegmentedControlItem } from "@kinetixui/ui";
+import { Card, CardContent, List, SegmentedControl, SegmentedControlItem } from "@kinetixui/ui";
 
 const Demo = () => (
     <SegmentedControl defaultValue="grid" className="w-full max-w-xs">
@@ -23,3 +23,23 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const States: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[24rem] max-w-full gap-6">
+      <SegmentedControl defaultValue="week" aria-label="Range" data-kx-case="page">
+        <SegmentedControlItem value="day">Day</SegmentedControlItem>
+        <SegmentedControlItem value="week">Week</SegmentedControlItem>
+        <SegmentedControlItem value="month">Month</SegmentedControlItem>
+        <SegmentedControlItem value="year" disabled>Year</SegmentedControlItem>
+      </SegmentedControl>
+      <Card>
+        <CardContent className="p-4">
+          <SegmentedControl defaultValue="grid" aria-label="Layout" data-kx-case="card" className="w-full">
+            <SegmentedControlItem value="list">List</SegmentedControlItem>
+            <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+            <SegmentedControlItem value="board">Board</SegmentedControlItem>
+          </SegmentedControl>
+        </CardContent>
+      </Card>
+    </div>
+  ) };

package/src/stories/Select.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kinetixui/ui";
+import { Card, CardContent, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kinetixui/ui";
 
 const Demo = () => (
     <Select>
@@ -44,3 +44,30 @@ export const Playground: StoryObj<typeof meta> = { render: (args) => (
   ) };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const EntryStates: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Country", {}, {}],
+          ["filled", "Time zone", { defaultValue: "utc" }, {}],
+          ["invalid", "Plan", {}, { "aria-invalid": true, "aria-describedby": "sel-invalid-error" }],
+          ["disabled", "Data region (locked)", { defaultValue: "utc", disabled: true }, {}],
+        ] as const).map(([key, label, root, trigger]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`sel-${key}`}>{label}</Label>
+            <Select {...root}>
+              <SelectTrigger id={`sel-${key}`} data-kx-case={key} {...trigger}>
+                <SelectValue placeholder="Choose one" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="utc">UTC</SelectItem>
+                <SelectItem value="cet">Central European Time</SelectItem>
+              </SelectContent>
+            </Select>
+            {key === "invalid" ? <p id="sel-invalid-error" className="text-body-sm text-destructive">Choose a plan to continue.</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };

package/src/stories/Slider.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   args: { disabled: false },
   argTypes: { disabled: { control: "boolean" } },
   parameters: {
-    layout: "centered",
+    layout: "padded",
     docs: { source: { code: "<Slider aria-label=\"Volume\" defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
   },
 } satisfies Meta;

package/src/stories/Switch.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label, Switch } from "@kinetixui/ui";
+import { Card, CardContent, Label, Switch } from "@kinetixui/ui";
 
 const Demo = () => (
     <div className="flex items-center gap-2">
@@ -27,3 +27,39 @@ export default meta;
 export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch aria-label="Airplane mode" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const States: StoryObj<typeof meta> = { render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-4 p-6">
+        {([
+          ["off", "Push notifications", {}],
+          ["on", "Weekly digest", { defaultChecked: true }],
+          ["disabled", "SMS alerts (add a phone first)", { disabled: true }],
+          ["disabled-on", "Security emails (required)", { disabled: true, defaultChecked: true }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="flex items-center justify-between gap-4">
+            <Label htmlFor={`sw-${key}`}>{label}</Label>
+            <Switch id={`sw-${key}`} data-kx-case={key} {...props} />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ) };
+
+export const Direction: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[22rem] max-w-full gap-4">
+      {([
+        ["inherit", undefined, "Follows the page"],
+        ["ltr", "ltr", "Left-to-right section"],
+        ["rtl", "rtl", "Right-to-left section"],
+      ] as const).map(([key, dir, label]) => (
+        <div key={key} dir={dir} data-kx-dir={key} className="flex items-center justify-between gap-4">
+          <Label htmlFor={`sw-dir-${key}`}>{label}</Label>
+          <div className="flex items-center gap-3">
+            <Switch id={`sw-dir-${key}`} data-kx-case={`${key}-off`} />
+            <Switch aria-label={`${label}, on`} data-kx-case={`${key}-on`} defaultChecked />
+          </div>
+        </div>
+      ))}
+    </div>
+  ) };