From fabd3ae412e7874d86035e3d95b1b9057793c744 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Mon, 4 May 2026 20:13:51 -0700
Subject: [PATCH 1/7] feat(storybook): add Textarea story

Cover Default, Sizes (`md|sm`), HasError (`true|false`), WithoutPlaceholder, WithHelperText, and Disabled. Title hierarchy `UI / Primitives / Textarea` per #18121.

Helper text is rendered as a sibling element with neutral or error tone since `Textarea` does not bundle it natively.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/Textarea.stories.tsx       | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 src/components/ui/__stories__/Textarea.stories.tsx

diff --git a/src/components/ui/__stories__/Textarea.stories.tsx b/src/components/ui/__stories__/Textarea.stories.tsx
new file mode 100644
index 00000000000..6d16be31cdf
--- /dev/null
+++ b/src/components/ui/__stories__/Textarea.stories.tsx
@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/nextjs"
+
+import { VStack } from "../flex"
+import { Textarea } from "../textarea"
+
+const meta = {
+  title: "UI / Primitives / Textarea",
+  component: Textarea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Multi-line text input. Mirrors `Input` variants: `size: md|sm` and `hasError: true|false`. Pair with a sibling helper text element to communicate validation or guidance.",
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Tell us what you think",
+  },
+  render: (args) => (
+    <div className="w-[320px]">
+      <Textarea {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  args: {
+    placeholder: "Type here",
+  },
+  render: (args) => (
+    <VStack className="w-[320px] gap-4">
+      <Textarea {...args} size="md" />
+      <Textarea {...args} size="sm" />
+    </VStack>
+  ),
+}
+
+export const HasError: Story = {
+  args: {
+    placeholder: "Type here",
+  },
+  render: (args) => (
+    <VStack className="w-[320px] gap-4">
+      <Textarea {...args} hasError={false} />
+      <Textarea {...args} hasError />
+    </VStack>
+  ),
+}
+
+export const WithoutPlaceholder: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Textarea defaultValue="Pre-filled content. No placeholder needed when a default value is provided." />
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`Textarea` does not bundle helper text; pair it with a sibling element. Use a neutral tone for guidance and the error tone when paired with `hasError`.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[320px] gap-6">
+      <div className="space-y-1">
+        <Textarea placeholder="Describe the issue" />
+        <p className="text-xs text-body-medium">
+          Include steps to reproduce. Markdown is supported.
+        </p>
+      </div>
+      <div className="space-y-1">
+        <Textarea hasError placeholder="Required" />
+        <p className="text-xs text-error">This field is required.</p>
+      </div>
+    </VStack>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Textarea
+        disabled
+        defaultValue="Disabled textarea content cannot be edited."
+      />
+    </div>
+  ),
+}

From e9a5ae4fc6e78a8810e0a33eaf57d7aeded8efc0 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Mon, 4 May 2026 20:14:25 -0700
Subject: [PATCH 2/7] feat(storybook): expand Input story coverage

Retitle to `UI / Primitives / Input`. Add HasError, Disabled (with and without value), AutoFocus, and WithHelperText stories. Keep Sizes story focused on the size axis only.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/Input.stories.tsx          | 77 ++++++++++++++++---
 1 file changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/__stories__/Input.stories.tsx b/src/components/ui/__stories__/Input.stories.tsx
index 4fa955589bb..897cce5fda0 100644
--- a/src/components/ui/__stories__/Input.stories.tsx
+++ b/src/components/ui/__stories__/Input.stories.tsx
@@ -4,34 +4,89 @@ import { VStack } from "../flex"
 import Input from "../input"
 
 const meta = {
-  title: "Atoms / Form / Input",
+  title: "UI / Primitives / Input",
   component: Input,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-line text input. Variants: `size: md|sm` and `hasError: true|false`. Pair with a sibling helper text element when validation guidance is needed.",
+      },
+    },
+  },
 } satisfies Meta<typeof Input>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Sizes: Story = {
-  args: {
-    placeholder: "Search",
-  },
+export const Default: Story = {
+  args: { placeholder: "Search" },
   render: (args) => (
-    <VStack className="w-[154px]">
+    <div className="w-[258px]">
       <Input {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  args: { placeholder: "Search" },
+  render: (args) => (
+    <VStack className="w-[258px] gap-4">
+      <Input {...args} size="md" />
       <Input {...args} size="sm" />
     </VStack>
   ),
 }
 
-export const ElementVariations: Story = {
-  args: {
-    placeholder: "input text",
-  },
+export const HasError: Story = {
+  args: { placeholder: "Required" },
+  render: (args) => (
+    <VStack className="w-[258px] gap-4">
+      <Input {...args} hasError={false} />
+      <Input {...args} hasError />
+    </VStack>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { placeholder: "Cannot edit" },
   render: (args) => (
     <VStack className="w-[258px] gap-4">
-      <Input {...args} autoFocus />
       <Input {...args} disabled />
+      <Input {...args} disabled defaultValue="Pre-filled" />
+    </VStack>
+  ),
+}
+
+export const AutoFocus: Story = {
+  args: { placeholder: "Focused on mount", autoFocus: true },
+  render: (args) => (
+    <div className="w-[258px]">
+      <Input {...args} />
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Helper text and error text are rendered as sibling elements. The error tone pairs with `hasError`.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[258px] gap-6">
+      <div className="space-y-1">
+        <Input placeholder="username" />
+        <p className="text-xs text-body-medium">3 to 16 characters.</p>
+      </div>
+      <div className="space-y-1">
+        <Input hasError placeholder="username" />
+        <p className="text-xs text-error">Username is already taken.</p>
+      </div>
     </VStack>
   ),
 }

From 531eee674b37a2e34785a3f15ae61471fa4085d4 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Mon, 4 May 2026 20:15:15 -0700
Subject: [PATCH 3/7] feat(storybook): expand Checkbox story coverage

Retitle to `UI / Primitives / Checkbox`. Split the existing kitchen-sink story into focused stories per state: Default, Checked, Indeterminate (new), Disabled, Invalid, and AsGroup composition. Indeterminate addresses the gap called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/Checkbox.stories.tsx       | 137 ++++++++++++------
 1 file changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/components/ui/__stories__/Checkbox.stories.tsx b/src/components/ui/__stories__/Checkbox.stories.tsx
index 75f7c49145b..79fae47c214 100644
--- a/src/components/ui/__stories__/Checkbox.stories.tsx
+++ b/src/components/ui/__stories__/Checkbox.stories.tsx
@@ -1,59 +1,108 @@
 import type { Meta, StoryObj } from "@storybook/nextjs"
 
-import CheckboxComponent, { type CheckboxProps } from "../checkbox"
+import Checkbox, { type CheckboxProps } from "../checkbox"
 import { HStack, VStack } from "../flex"
 
 const meta = {
-  title: "Atoms / Form / Checkbox",
-  component: CheckboxComponent,
-} satisfies Meta<typeof CheckboxComponent>
+  title: "UI / Primitives / Checkbox",
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single binary toggle built on Radix Checkbox. Supports `checked`, `disabled`, `aria-invalid` for error styling, and tri-state via `checked='indeterminate'`. Pair with a `<label>` so clicks on the label toggle the control.",
+      },
+    },
+  },
+} satisfies Meta<typeof Checkbox>
 
 export default meta
 
-const checkboxDataSet: (CheckboxProps & { label: string })[] = [
-  {
-    id: "default",
-    value: "default",
-    label: "default",
-  },
-  {
-    id: "checked",
-    value: "checked",
-    label: "checked",
-    checked: true,
-  },
-  {
-    id: "disabled",
-    value: "disabled",
-    label: "disabled",
-    disabled: true,
-  },
-  {
-    id: "disabled-checked",
-    value: "disabled-checked",
-    label: "disabled-checked",
-    disabled: true,
-    checked: true,
+type Story = StoryObj<typeof meta>
+
+const LabeledCheckbox = ({
+  label,
+  ...props
+}: CheckboxProps & { label: string }) => (
+  <HStack asChild>
+    <label>
+      <Checkbox {...props} />
+      {label}
+    </label>
+  </HStack>
+)
+
+export const Default: Story = {
+  render: () => <LabeledCheckbox id="default" label="Subscribe to updates" />,
+}
+
+export const Checked: Story = {
+  render: () => (
+    <LabeledCheckbox id="checked" label="Already subscribed" defaultChecked />
+  ),
+}
+
+export const Indeterminate: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`checked='indeterminate'` represents a mixed state, typically used as a parent controlling a group where some (but not all) children are checked.",
+      },
+    },
   },
-  {
-    id: "invalid",
-    value: "invalid",
-    label: "invalid",
-    "aria-invalid": true,
+  render: () => (
+    <LabeledCheckbox
+      id="indeterminate"
+      label="Some items selected"
+      checked="indeterminate"
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <VStack className="items-start gap-3">
+      <LabeledCheckbox id="disabled" label="Disabled" disabled />
+      <LabeledCheckbox
+        id="disabled-checked"
+        label="Disabled and checked"
+        disabled
+        defaultChecked
+      />
+    </VStack>
+  ),
+}
+
+export const Invalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Apply `aria-invalid` to surface error styling defined by `commonControlClasses`.",
+      },
+    },
   },
-]
+  render: () => (
+    <LabeledCheckbox id="invalid" label="Required field" aria-invalid="true" />
+  ),
+}
 
-export const Checkbox: StoryObj<typeof meta> = {
+export const AsGroup: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Multiple checkboxes form an unordered group. For mutually exclusive options, use `RadioGroup` instead.",
+      },
+    },
+  },
   render: () => (
-    <VStack className="items-start gap-4">
-      {checkboxDataSet.map(({ label, ...props }) => (
-        <HStack key={props.id} asChild>
-          <label>
-            <CheckboxComponent {...props} />
-            {label}
-          </label>
-        </HStack>
-      ))}
+    <VStack className="items-start gap-3">
+      <LabeledCheckbox id="group-eth" label="Ethereum" defaultChecked />
+      <LabeledCheckbox id="group-arb" label="Arbitrum" />
+      <LabeledCheckbox id="group-base" label="Base" defaultChecked />
+      <LabeledCheckbox id="group-op" label="OP Mainnet" />
     </VStack>
   ),
 }

From 8495b692d90265e3625afc090620dcce35b69f25 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Mon, 4 May 2026 20:15:55 -0700
Subject: [PATCH 4/7] feat(storybook): expand Switch story coverage

Retitle to `UI / Primitives / Switch`. Split into focused stories: Off, On, Disabled (off and on), Invalid, WithLabel, and a SettingsList composition. WithLabel and on/off coverage address the gaps called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/Switch.stories.tsx         | 122 +++++++++++++++---
 1 file changed, 105 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/__stories__/Switch.stories.tsx b/src/components/ui/__stories__/Switch.stories.tsx
index d75b07aa3cc..2b3474aae5f 100644
--- a/src/components/ui/__stories__/Switch.stories.tsx
+++ b/src/components/ui/__stories__/Switch.stories.tsx
@@ -1,29 +1,117 @@
-import * as React from "react"
-import { Meta, type StoryObj } from "@storybook/nextjs"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
-import SwitchComponent from "../switch"
+import { HStack, VStack } from "../flex"
+import Switch from "../switch"
 
 const meta = {
-  title: "Atoms / Form / Switch",
-  component: SwitchComponent,
-} satisfies Meta<typeof SwitchComponent>
+  title: "UI / Primitives / Switch",
+  component: Switch,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Binary on/off control built on Radix Switch. Shares styling tokens with `Checkbox` and `RadioGroup` via `commonControlClasses`, including `aria-invalid` error styling. For multi-state choices, use `Checkbox` (indeterminate) or `RadioGroup`.",
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>
 
 export default meta
 
-export const Switch: StoryObj = {
+type Story = StoryObj<typeof meta>
+
+export const Off: Story = {
+  render: () => <Switch id="off" />,
+}
+
+export const On: Story = {
+  render: () => <Switch id="on" defaultChecked />,
+}
+
+export const Disabled: Story = {
   render: () => (
-    <div className="grid grid-cols-2 items-center gap-x-1 lg:grid-cols-4">
-      <span>default:</span>
-      <SwitchComponent id="default" />
+    <HStack className="gap-6">
+      <Switch id="disabled-off" disabled />
+      <Switch id="disabled-on" disabled defaultChecked />
+    </HStack>
+  ),
+}
 
-      <span>checked:</span>
-      <SwitchComponent id="checked" checked />
+export const Invalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Apply `aria-invalid` for error styling shared with `Checkbox` and `RadioGroup`.",
+      },
+    },
+  },
+  render: () => <Switch id="invalid" aria-invalid="true" />,
+}
 
-      <span>disabled:</span>
-      <SwitchComponent id="disabled" disabled />
+export const WithLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Wrap `Switch` in a `<label>` so clicks on the label text toggle the control. The `htmlFor` attribute is not needed when nesting the control inside the label.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="items-start gap-3">
+      <HStack asChild>
+        <label>
+          <Switch id="notif-email" />
+          Email notifications
+        </label>
+      </HStack>
+      <HStack asChild>
+        <label>
+          <Switch id="notif-push" defaultChecked />
+          Push notifications
+        </label>
+      </HStack>
+    </VStack>
+  ),
+}
 
-      <span>disabled and checked:</span>
-      <SwitchComponent id="disabled-checked" disabled defaultChecked />
-    </div>
+export const SettingsList: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Realistic settings panel grouping multiple labeled switches. Title and helper text are rendered as siblings.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[320px] items-stretch gap-4">
+      <h3 className="font-semibold">Privacy</h3>
+      <VStack className="gap-3">
+        <HStack className="justify-between" asChild>
+          <label>
+            <span>
+              <span className="block">Analytics</span>
+              <span className="block text-xs text-body-medium">
+                Anonymous usage data
+              </span>
+            </span>
+            <Switch id="settings-analytics" defaultChecked />
+          </label>
+        </HStack>
+        <HStack className="justify-between" asChild>
+          <label>
+            <span>
+              <span className="block">Marketing</span>
+              <span className="block text-xs text-body-medium">
+                Product update emails
+              </span>
+            </span>
+            <Switch id="settings-marketing" />
+          </label>
+        </HStack>
+      </VStack>
+    </VStack>
   ),
 }

From 8cccb5b695033b4be8e5fd9bb52fdfa20763ee5f Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Mon, 4 May 2026 20:16:40 -0700
Subject: [PATCH 5/7] feat(storybook): expand RadioGroup story coverage

Retitle to `UI / Primitives / RadioGroup`. Split into focused stories: Default, Disabled (group-wide and per-item), Invalid, TwoItems, FiveItems, and WithDescriptions composition. Item-count variants address the gap called out in #18121.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/RadioGroup.stories.tsx     | 180 +++++++++++++-----
 1 file changed, 130 insertions(+), 50 deletions(-)

diff --git a/src/components/ui/__stories__/RadioGroup.stories.tsx b/src/components/ui/__stories__/RadioGroup.stories.tsx
index f682ee66326..2fddc93bacd 100644
--- a/src/components/ui/__stories__/RadioGroup.stories.tsx
+++ b/src/components/ui/__stories__/RadioGroup.stories.tsx
@@ -1,68 +1,148 @@
 import type { Meta, StoryObj } from "@storybook/nextjs"
 
-import { HStack } from "../flex"
-import {
-  RadioGroup,
-  RadioGroupItem,
-  type RadioGroupItemProps,
-} from "../radio-group"
+import { HStack, VStack } from "../flex"
+import { RadioGroup, RadioGroupItem } from "../radio-group"
 
 const meta = {
-  title: "Atoms / Form / Radio",
+  title: "UI / Primitives / RadioGroup",
   component: RadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Set of mutually exclusive options built on Radix RadioGroup. Items share styling tokens with `Checkbox` and `Switch` via `commonControlClasses`, including `aria-invalid` error styling.",
+      },
+    },
+  },
 } satisfies Meta<typeof RadioGroup>
 
 export default meta
 
-const DEFAULT_CHECKED = "checked"
+type Story = StoryObj<typeof meta>
 
-const radioSet: Array<RadioGroupItemProps & { label: string }> = [
-  {
-    id: "default",
-    value: "default",
-    label: "default",
-  },
-  {
-    id: DEFAULT_CHECKED,
-    value: DEFAULT_CHECKED,
-    label: DEFAULT_CHECKED,
-  },
-  {
-    id: "disabled",
-    value: "disabled",
-    disabled: true,
-    label: "disabled",
-  },
-  {
-    id: "disabled-checked",
-    value: "disabled-checked",
-    disabled: true,
-    checked: true,
-    label: "disabled-checked",
-  },
-  {
-    id: "invalid",
-    value: "invalid",
-    "aria-invalid": true,
-    label: "invalid",
+const LabeledRadio = ({
+  label,
+  value,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupItem> & {
+  label: string
+  value: string
+}) => (
+  <HStack asChild>
+    <label>
+      <RadioGroupItem value={value} {...props} />
+      {label}
+    </label>
+  </HStack>
+)
+
+export const Default: Story = {
+  args: { defaultValue: "eth", className: "gap-3" },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <LabeledRadio value="eth" label="Ethereum" />
+      <LabeledRadio value="arb" label="Arbitrum" />
+      <LabeledRadio value="base" label="Base" />
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Disable the entire group via `disabled` on `RadioGroup`, or disable individual items.",
+      },
+    },
   },
-]
+  render: () => (
+    <VStack className="items-start gap-6">
+      <RadioGroup defaultValue="eth" disabled className="gap-3">
+        <LabeledRadio value="eth" label="Whole group disabled (selected)" />
+        <LabeledRadio value="arb" label="Whole group disabled" />
+      </RadioGroup>
+      <RadioGroup defaultValue="eth" className="gap-3">
+        <LabeledRadio value="eth" label="Selectable" />
+        <LabeledRadio value="arb" label="Disabled item" disabled />
+        <LabeledRadio value="base" label="Selectable" />
+      </RadioGroup>
+    </VStack>
+  ),
+}
 
-export const Radio: StoryObj<typeof meta> = {
-  args: {
-    defaultValue: DEFAULT_CHECKED,
-    className: "gap-4",
+export const Invalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Apply `aria-invalid` on items to surface error styling.",
+      },
+    },
   },
+  render: () => (
+    <RadioGroup className="gap-3">
+      <LabeledRadio value="yes" label="Yes" aria-invalid="true" />
+      <LabeledRadio value="no" label="No" aria-invalid="true" />
+    </RadioGroup>
+  ),
+}
+
+export const TwoItems: Story = {
+  args: { defaultValue: "yes", className: "gap-3" },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <LabeledRadio value="yes" label="Yes" />
+      <LabeledRadio value="no" label="No" />
+    </RadioGroup>
+  ),
+}
+
+export const FiveItems: Story = {
+  args: { defaultValue: "good", className: "gap-3" },
   render: (args) => (
     <RadioGroup {...args}>
-      {radioSet.map((radio) => (
-        <HStack key={radio.id} asChild>
-          <label>
-            <RadioGroupItem {...radio} />
-            {radio.label}
-          </label>
-        </HStack>
-      ))}
+      <LabeledRadio value="terrible" label="Terrible" />
+      <LabeledRadio value="bad" label="Bad" />
+      <LabeledRadio value="okay" label="Okay" />
+      <LabeledRadio value="good" label="Good" />
+      <LabeledRadio value="great" label="Great" />
+    </RadioGroup>
+  ),
+}
+
+export const WithDescriptions: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Wrap label text and helper copy in the `<label>` so the entire block is the click target.",
+      },
+    },
+  },
+  render: () => (
+    <RadioGroup defaultValue="standard" className="gap-4">
+      <HStack className="items-start gap-2" asChild>
+        <label>
+          <RadioGroupItem value="standard" className="mt-1" />
+          <span>
+            <span className="block font-medium">Standard</span>
+            <span className="block text-sm text-body-medium">
+              Best for everyday use. 1-3 day delivery.
+            </span>
+          </span>
+        </label>
+      </HStack>
+      <HStack className="items-start gap-2" asChild>
+        <label>
+          <RadioGroupItem value="express" className="mt-1" />
+          <span>
+            <span className="block font-medium">Express</span>
+            <span className="block text-sm text-body-medium">
+              Next-day delivery in supported regions.
+            </span>
+          </span>
+        </label>
+      </HStack>
     </RadioGroup>
   ),
 }

From 2021192a8a4e84b50d035a89f8a825d5d035a164 Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Tue, 5 May 2026 17:45:04 -0700
Subject: [PATCH 6/7] chore(storybook): remove RadioGroup story

Component is being removed in a separate cleanup; story shouldn't ship. Replaces the expansion in 8cccb5b695 and the original story file that lived on dev.

Refs: #18121

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 .../ui/__stories__/RadioGroup.stories.tsx     | 148 ------------------
 1 file changed, 148 deletions(-)
 delete mode 100644 src/components/ui/__stories__/RadioGroup.stories.tsx

diff --git a/src/components/ui/__stories__/RadioGroup.stories.tsx b/src/components/ui/__stories__/RadioGroup.stories.tsx
deleted file mode 100644
index 2fddc93bacd..00000000000
--- a/src/components/ui/__stories__/RadioGroup.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs"
-
-import { HStack, VStack } from "../flex"
-import { RadioGroup, RadioGroupItem } from "../radio-group"
-
-const meta = {
-  title: "UI / Primitives / RadioGroup",
-  component: RadioGroup,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Set of mutually exclusive options built on Radix RadioGroup. Items share styling tokens with `Checkbox` and `Switch` via `commonControlClasses`, including `aria-invalid` error styling.",
-      },
-    },
-  },
-} satisfies Meta<typeof RadioGroup>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-const LabeledRadio = ({
-  label,
-  value,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof RadioGroupItem> & {
-  label: string
-  value: string
-}) => (
-  <HStack asChild>
-    <label>
-      <RadioGroupItem value={value} {...props} />
-      {label}
-    </label>
-  </HStack>
-)
-
-export const Default: Story = {
-  args: { defaultValue: "eth", className: "gap-3" },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <LabeledRadio value="eth" label="Ethereum" />
-      <LabeledRadio value="arb" label="Arbitrum" />
-      <LabeledRadio value="base" label="Base" />
-    </RadioGroup>
-  ),
-}
-
-export const Disabled: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Disable the entire group via `disabled` on `RadioGroup`, or disable individual items.",
-      },
-    },
-  },
-  render: () => (
-    <VStack className="items-start gap-6">
-      <RadioGroup defaultValue="eth" disabled className="gap-3">
-        <LabeledRadio value="eth" label="Whole group disabled (selected)" />
-        <LabeledRadio value="arb" label="Whole group disabled" />
-      </RadioGroup>
-      <RadioGroup defaultValue="eth" className="gap-3">
-        <LabeledRadio value="eth" label="Selectable" />
-        <LabeledRadio value="arb" label="Disabled item" disabled />
-        <LabeledRadio value="base" label="Selectable" />
-      </RadioGroup>
-    </VStack>
-  ),
-}
-
-export const Invalid: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: "Apply `aria-invalid` on items to surface error styling.",
-      },
-    },
-  },
-  render: () => (
-    <RadioGroup className="gap-3">
-      <LabeledRadio value="yes" label="Yes" aria-invalid="true" />
-      <LabeledRadio value="no" label="No" aria-invalid="true" />
-    </RadioGroup>
-  ),
-}
-
-export const TwoItems: Story = {
-  args: { defaultValue: "yes", className: "gap-3" },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <LabeledRadio value="yes" label="Yes" />
-      <LabeledRadio value="no" label="No" />
-    </RadioGroup>
-  ),
-}
-
-export const FiveItems: Story = {
-  args: { defaultValue: "good", className: "gap-3" },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <LabeledRadio value="terrible" label="Terrible" />
-      <LabeledRadio value="bad" label="Bad" />
-      <LabeledRadio value="okay" label="Okay" />
-      <LabeledRadio value="good" label="Good" />
-      <LabeledRadio value="great" label="Great" />
-    </RadioGroup>
-  ),
-}
-
-export const WithDescriptions: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Wrap label text and helper copy in the `<label>` so the entire block is the click target.",
-      },
-    },
-  },
-  render: () => (
-    <RadioGroup defaultValue="standard" className="gap-4">
-      <HStack className="items-start gap-2" asChild>
-        <label>
-          <RadioGroupItem value="standard" className="mt-1" />
-          <span>
-            <span className="block font-medium">Standard</span>
-            <span className="block text-sm text-body-medium">
-              Best for everyday use. 1-3 day delivery.
-            </span>
-          </span>
-        </label>
-      </HStack>
-      <HStack className="items-start gap-2" asChild>
-        <label>
-          <RadioGroupItem value="express" className="mt-1" />
-          <span>
-            <span className="block font-medium">Express</span>
-            <span className="block text-sm text-body-medium">
-              Next-day delivery in supported regions.
-            </span>
-          </span>
-        </label>
-      </HStack>
-    </RadioGroup>
-  ),
-}

From 6314a5468e168425d516c571178ef0a6076fb11b Mon Sep 17 00:00:00 2001
From: myelinated-wackerow
 <263208946+myelinated-wackerow@users.noreply.github.com>
Date: Wed, 13 May 2026 05:36:42 -0700
Subject: [PATCH 7/7] chore(storybook): disable Chromatic snapshots on new
 form-input stories

Apply chromatic.disableSnapshot to new Textarea stories (entire file)
and to Checkbox/Switch where the file was rewritten with new export
names. For Input, leave the existing Sizes story enabled and disable
only the new exports (Default, HasError, Disabled, AutoFocus,
WithHelperText). Stories remain available in Storybook for visual
reference; snapshots can be re-enabled per-story as needed.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/ui/__stories__/Checkbox.stories.tsx | 1 +
 src/components/ui/__stories__/Input.stories.tsx    | 5 +++++
 src/components/ui/__stories__/Switch.stories.tsx   | 1 +
 src/components/ui/__stories__/Textarea.stories.tsx | 1 +
 4 files changed, 8 insertions(+)

diff --git a/src/components/ui/__stories__/Checkbox.stories.tsx b/src/components/ui/__stories__/Checkbox.stories.tsx
index 79fae47c214..d045270c920 100644
--- a/src/components/ui/__stories__/Checkbox.stories.tsx
+++ b/src/components/ui/__stories__/Checkbox.stories.tsx
@@ -7,6 +7,7 @@ const meta = {
   title: "UI / Primitives / Checkbox",
   component: Checkbox,
   parameters: {
+    chromatic: { disableSnapshot: true },
     docs: {
       description: {
         component:
diff --git a/src/components/ui/__stories__/Input.stories.tsx b/src/components/ui/__stories__/Input.stories.tsx
index 897cce5fda0..3d22a4fcf1a 100644
--- a/src/components/ui/__stories__/Input.stories.tsx
+++ b/src/components/ui/__stories__/Input.stories.tsx
@@ -21,6 +21,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
   args: { placeholder: "Search" },
   render: (args) => (
     <div className="w-[258px]">
@@ -40,6 +41,7 @@ export const Sizes: Story = {
 }
 
 export const HasError: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
   args: { placeholder: "Required" },
   render: (args) => (
     <VStack className="w-[258px] gap-4">
@@ -50,6 +52,7 @@ export const HasError: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
   args: { placeholder: "Cannot edit" },
   render: (args) => (
     <VStack className="w-[258px] gap-4">
@@ -60,6 +63,7 @@ export const Disabled: Story = {
 }
 
 export const AutoFocus: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
   args: { placeholder: "Focused on mount", autoFocus: true },
   render: (args) => (
     <div className="w-[258px]">
@@ -70,6 +74,7 @@ export const AutoFocus: Story = {
 
 export const WithHelperText: Story = {
   parameters: {
+    chromatic: { disableSnapshot: true },
     docs: {
       description: {
         story:
diff --git a/src/components/ui/__stories__/Switch.stories.tsx b/src/components/ui/__stories__/Switch.stories.tsx
index 2b3474aae5f..9aa07c301ab 100644
--- a/src/components/ui/__stories__/Switch.stories.tsx
+++ b/src/components/ui/__stories__/Switch.stories.tsx
@@ -7,6 +7,7 @@ const meta = {
   title: "UI / Primitives / Switch",
   component: Switch,
   parameters: {
+    chromatic: { disableSnapshot: true },
     docs: {
       description: {
         component:
diff --git a/src/components/ui/__stories__/Textarea.stories.tsx b/src/components/ui/__stories__/Textarea.stories.tsx
index 6d16be31cdf..83f187a5931 100644
--- a/src/components/ui/__stories__/Textarea.stories.tsx
+++ b/src/components/ui/__stories__/Textarea.stories.tsx
@@ -7,6 +7,7 @@ const meta = {
   title: "UI / Primitives / Textarea",
   component: Textarea,
   parameters: {
+    chromatic: { disableSnapshot: true },
     docs: {
       description: {
         component: