@sovereignfs/ui 0.21.2 → 0.23.0

package/src/stories/DesignSystemOverview.stories.tsx

@@ -11,6 +11,7 @@ import { EmptyState } from '../components/EmptyState/EmptyState';
 import { FormField } from '../components/FormField/FormField';
 import { Icon } from '../components/Icon/Icon';
 import { Input } from '../components/Input/Input';
+import { Textarea } from '../components/Textarea/Textarea';
 import { NavTabs } from '../components/NavTabs/NavTabs';
 import { PageHeader } from '../components/PageHeader/PageHeader';
 import { Popover } from '../components/Popover/Popover';
@@ -22,6 +23,8 @@ import { Tabs } from '../components/Tabs/Tabs';
 import { ToastProvider, useToast } from '../components/Toast/Toast';
 import { Toggle } from '../components/Toggle/Toggle';
 import { Tooltip } from '../components/Tooltip/Tooltip';
+import { Checkbox } from '../components/Checkbox/Checkbox';
+import { DragHandleRow } from '../components/DragHandleRow/DragHandleRow';
 
 // ---------------------------------------------------------------------------
 // Shared primitives
@@ -1181,7 +1184,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
         <section style={{ marginBottom: 'var(--sv-space-12)' }}>
           <SectionHeader
             title="Component gallery"
-            subtitle="All 13 components — click each story in the sidebar for the full API, variants, and controls."
+            subtitle="All 15 components — click each story in the sidebar for the full API, variants, and controls."
           />
 
           <div style={{ marginBottom: 'var(--sv-space-6)' }}>
@@ -1384,18 +1387,31 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
             <ComponentCard
               name="FormField"
               importLine="import { FormField } from '@sovereignfs/ui';"
-              usage="Accessible label + input wrapper. Wires hint and error text to the child via aria-describedby. Always pair with an Input and matching htmlFor/id."
+              usage="Accessible label + input wrapper. The render-prop `children` receives field props (id, aria-describedby, aria-invalid) to spread onto the control, so hint/error text stays wired to it."
             >
               <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }}>
-                <FormField label="Email" hint="We'll never share this." htmlFor="ov-email">
-                  <Input id="ov-email" type="email" placeholder="you@example.com" />
+                <FormField label="Email" hint="We'll never share this." id="ov-email">
+                  {(field) => <Input {...field} type="email" placeholder="you@example.com" />}
                 </FormField>
-                <FormField label="Password" error="Must be 8+ characters." htmlFor="ov-pw">
-                  <Input id="ov-pw" type="password" />
+                <FormField label="Password" error="Must be 8+ characters." id="ov-pw">
+                  {(field) => <Input {...field} type="password" />}
                 </FormField>
               </div>
             </ComponentCard>
 
+            {/* Textarea */}
+            <ComponentCard
+              name="Textarea"
+              importLine="import { Textarea } from '@sovereignfs/ui';"
+              usage="The primitive multi-line text field. Forwards all native textarea props. Pair with FormField or a <label> for accessibility."
+            >
+              <Textarea
+                aria-label="Description"
+                placeholder="Add a description…"
+                style={{ width: '100%' }}
+              />
+            </ComponentCard>
+
             {/* PageHeader */}
             <ComponentCard
               name="PageHeader"
@@ -1493,6 +1509,48 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
                 </Tooltip>
               </div>
             </ComponentCard>
+
+            {/* Checkbox */}
+            <ComponentCard
+              name="Checkbox"
+              importLine="import { Checkbox } from '@sovereignfs/ui';"
+              usage="Accessible checkbox with optional animated strike-through on the label when checked. Used in task lists."
+            >
+              {(() => {
+                const [a, setA] = useState(false);
+                const [b, setB] = useState(true);
+                return (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <Checkbox checked={a} onChange={setA} label="Unchecked task" strikeThrough />
+                    <Checkbox checked={b} onChange={setB} label="Completed task" strikeThrough />
+                  </div>
+                );
+              })()}
+            </ComponentCard>
+
+            {/* DragHandleRow */}
+            <ComponentCard
+              name="DragHandleRow"
+              importLine="import { DragHandleRow } from '@sovereignfs/ui';"
+              usage="Row wrapper with a drag handle that appears on hover. Attach dnd-kit sortable props via handleProps."
+            >
+              <div style={{ width: '100%' }}>
+                {['First item', 'Second item', 'Third item'].map((label) => (
+                  <DragHandleRow key={label}>
+                    <div
+                      style={{
+                        padding: 'var(--sv-space-2) var(--sv-space-1)',
+                        fontSize: 'var(--sv-font-size-sm)',
+                        color: 'var(--sv-color-text-primary)',
+                        borderBottom: '1px solid var(--sv-color-border)',
+                      }}
+                    >
+                      {label}
+                    </div>
+                  </DragHandleRow>
+                ))}
+              </div>
+            </ComponentCard>
           </div>
         </section>
 

package/src/stories/DragHandleRow.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DragHandleRow } from '../components/DragHandleRow/DragHandleRow';
+
+const meta: Meta<typeof DragHandleRow> = {
+  title: 'Components/DragHandleRow',
+  component: DragHandleRow,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DragHandleRow>;
+
+const rowStyle = {
+  padding: 'var(--sv-space-3) var(--sv-space-2)',
+  borderBottom: '1px solid var(--sv-color-border)',
+  fontSize: 'var(--sv-font-size-sm)',
+  color: 'var(--sv-color-text-primary)',
+  width: '320px',
+};
+
+export const Default: Story = {
+  render: () => (
+    <div>
+      {['Buy groceries', 'Call the dentist', 'Review pull request'].map((label) => (
+        <DragHandleRow key={label}>
+          <div style={rowStyle}>{label}</div>
+        </DragHandleRow>
+      ))}
+    </div>
+  ),
+  name: 'List of rows (hover to reveal handle)',
+};
+
+export const Dragging: Story = {
+  render: () => (
+    <DragHandleRow isDragging>
+      <div style={rowStyle}>This row is being dragged</div>
+    </DragHandleRow>
+  ),
+};

package/src/stories/FormField.stories.tsx

@@ -14,8 +14,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     label: 'Email address',
-    htmlFor: 'email',
-    children: <Input id="email" type="email" placeholder="you@example.com" />,
+    id: 'email',
+    children: (field) => <Input {...field} type="email" placeholder="you@example.com" />,
   },
 };
 
@@ -23,8 +23,8 @@ export const WithHint: Story = {
   args: {
     label: 'Username',
     hint: 'Letters, numbers, and underscores only.',
-    htmlFor: 'username',
-    children: <Input id="username" placeholder="your_username" />,
+    id: 'username',
+    children: (field) => <Input {...field} placeholder="your_username" />,
   },
 };
 
@@ -32,8 +32,8 @@ export const WithError: Story = {
   args: {
     label: 'Password',
     error: 'Password must be at least 8 characters.',
-    htmlFor: 'password',
-    children: <Input id="password" type="password" />,
+    id: 'password',
+    children: (field) => <Input {...field} type="password" />,
   },
 };
 
@@ -41,7 +41,7 @@ export const Required: Story = {
   args: {
     label: 'Full name',
     required: true,
-    htmlFor: 'name',
-    children: <Input id="name" placeholder="Jane Smith" />,
+    id: 'name',
+    children: (field) => <Input {...field} placeholder="Jane Smith" />,
   },
 };

package/src/stories/MobilePatterns.stories.tsx

@@ -405,11 +405,11 @@ function MobilePatternsDoc() {
                 gap: 'var(--sv-space-3)',
               }}
             >
-              <FormField label="Display name" htmlFor="mp-name">
-                <Input id="mp-name" placeholder="Your name" />
+              <FormField label="Display name" id="mp-name">
+                {(field) => <Input {...field} placeholder="Your name" />}
               </FormField>
-              <FormField label="Email" htmlFor="mp-email">
-                <Input id="mp-email" type="email" placeholder="you@example.com" />
+              <FormField label="Email" id="mp-email">
+                {(field) => <Input {...field} type="email" placeholder="you@example.com" />}
               </FormField>
               <Button type="submit">Save changes</Button>
             </div>

package/src/stories/Textarea.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '../components/Textarea/Textarea';
+
+// Wrap in a label so a11y checks pass (Textarea is a bare <textarea> — no
+// built-in label association).
+function Labeled({ label, ...props }: React.ComponentProps<typeof Textarea> & { label: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: 280 }}>
+      <label
+        htmlFor="sb-textarea"
+        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
+      >
+        {label}
+      </label>
+      <Textarea id="sb-textarea" {...props} />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The primitive multi-line text field. RSC-safe; forwards all native `<textarea>` props. No label is built-in — always pair with a `<label>` (or `FormField`) for accessibility.',
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (_args) => <Labeled label="Description" placeholder="Add a description…" />,
+};
+
+export const WithValue: Story = {
+  render: (_args) => <Labeled label="Notes" defaultValue="Follow up next week." />,
+};
+
+export const CustomRows: Story = {
+  render: (_args) => <Labeled label="Message" rows={8} placeholder="Write your message…" />,
+};
+
+export const Disabled: Story = {
+  render: (_args) => <Labeled label="Read-only field" defaultValue="Cannot be changed" disabled />,
+};

package/src/stories/TokenGallery.stories.tsx

@@ -19,6 +19,7 @@ const SEMANTIC_COLORS = [
   '--sv-color-border-strong',
   '--sv-color-accent',
   '--sv-color-accent-hover',
+  '--sv-color-accent-subtle',
   '--sv-color-focus-ring',
   '--sv-color-error-surface',
   '--sv-color-error-text',
@@ -82,6 +83,7 @@ const SHADOW_TOKENS = [
   '--sv-shadow-hover',
   '--sv-shadow-popover',
   '--sv-shadow-overlay',
+  '--sv-shadow-control',
 ];
 
 // ---------------------------------------------------------------------------

package/src/tokens/semantic.css

@@ -25,6 +25,10 @@
 
   --sv-color-accent: var(--sv-grey-900);
   --sv-color-accent-hover: var(--sv-grey-700);
+  /* Derived from --sv-color-accent via color-mix, so it re-themes automatically —
+     no separate dark-mode override needed. Tinted background for badges/chips
+     paired with --sv-color-accent text. */
+  --sv-color-accent-subtle: color-mix(in srgb, var(--sv-color-accent) 12%, transparent);
 
   --sv-color-focus-ring: var(--sv-grey-900);
 
@@ -56,6 +60,7 @@
   --sv-shadow-popover:
     0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); /* e2 — floating panels */
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
 
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
@@ -108,4 +113,5 @@
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.5);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5);
 }