@sovereignfs/ui 0.21.3 → 0.33.0

package/src/stories/DesignSystemOverview.stories.tsx

@@ -11,6 +11,11 @@ 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 { CodeTextarea } from '../components/CodeTextarea/CodeTextarea';
+import { Textarea } from '../components/Textarea/Textarea';
+import { StatusBadge } from '../components/StatusBadge/StatusBadge';
+import { SplitPane } from '../components/SplitPane/SplitPane';
+import { TagInput } from '../components/TagInput/TagInput';
 import { NavTabs } from '../components/NavTabs/NavTabs';
 import { PageHeader } from '../components/PageHeader/PageHeader';
 import { Popover } from '../components/Popover/Popover';
@@ -22,6 +27,14 @@ 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';
+import { OverlayHeader } from '../components/OverlayHeader/OverlayHeader';
+import { Sheet } from '../components/Sheet/Sheet';
+import { ConfirmDialog } from '../components/ConfirmDialog/ConfirmDialog';
+import { Menu } from '../components/Menu/Menu';
+import { Calendar } from '../components/Calendar/Calendar';
+import { DatePicker } from '../components/DatePicker/DatePicker';
 
 // ---------------------------------------------------------------------------
 // Shared primitives
@@ -167,6 +180,8 @@ const COLOR_GROUPS: Array<{
       { token: '--sv-color-text-muted', name: 'text-muted' },
       { token: '--sv-color-text-subtle', name: 'text-subtle' },
       { token: '--sv-color-text-on-accent', name: 'text-on-accent' },
+      { token: '--sv-color-text-on-error', name: 'text-on-error' },
+      { token: '--sv-color-text-on-success', name: 'text-on-success' },
     ],
   },
   {
@@ -194,6 +209,7 @@ const COLOR_GROUPS: Array<{
       { token: '--sv-color-error-surface', name: 'error-surface' },
       { token: '--sv-color-error-text', name: 'error-text' },
       { token: '--sv-color-error-border', name: 'error-border' },
+      { token: '--sv-color-error-solid', name: 'error-solid' },
     ],
   },
   {
@@ -212,6 +228,7 @@ const COLOR_GROUPS: Array<{
       { token: '--sv-color-success-surface', name: 'success-surface' },
       { token: '--sv-color-success-text', name: 'success-text' },
       { token: '--sv-color-success-border', name: 'success-border' },
+      { token: '--sv-color-success-solid', name: 'success-solid' },
     ],
   },
   {
@@ -545,6 +562,150 @@ function PopoverDemo() {
   );
 }
 
+function OverlayHeaderDemo() {
+  return (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: 360,
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-lg)',
+        overflow: 'hidden',
+      }}
+    >
+      <OverlayHeader
+        title="Edit list"
+        onClose={() => {}}
+        onBack={() => {}}
+        action={
+          <Button size="sm" variant="ghost" onClick={() => {}}>
+            Save
+          </Button>
+        }
+      />
+    </div>
+  );
+}
+
+function SheetDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button size="sm" onClick={() => setOpen(true)}>
+        Open sheet
+      </Button>
+      {/* Storybook has no --sv-shell-header-height/--sv-shell-footer-height, so
+          the panel fills this fixed-height preview box instead of the real
+          app's header-to-footer region — same component, just no shell
+          around it here. */}
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: 360,
+          height: 280,
+          marginTop: 12,
+          border: '1px solid var(--sv-color-border)',
+          borderRadius: 'var(--sv-radius-lg)',
+          overflow: 'hidden',
+        }}
+      >
+        <div style={{ position: 'absolute', inset: 0 }}>
+          <Sheet
+            open={open}
+            onClose={() => setOpen(false)}
+            title="Task detail"
+            aria-label="Task detail"
+          >
+            <div
+              style={{
+                padding: 16,
+                fontFamily: ff,
+                fontSize: 14,
+                color: 'var(--sv-color-text-muted)',
+              }}
+            >
+              Full-page overlay content — same pattern the tasks plugin used for its task-detail and
+              list-edit panels.
+            </div>
+          </Sheet>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ConfirmDialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button size="sm" variant="destructive" onClick={() => setOpen(true)}>
+        Remove passkey
+      </Button>
+      <ConfirmDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+        title="Remove passkey"
+        message="You will no longer be able to sign in with this passkey."
+        confirmLabel="Remove"
+        destructive
+      />
+    </>
+  );
+}
+
+function MenuDemo() {
+  const [open, setOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<'manual' | 'title' | 'due'>('manual');
+  return (
+    <Menu
+      open={open}
+      onClose={() => setOpen(false)}
+      aria-label="List actions"
+      align="left"
+      trigger={
+        <Button size="sm" variant="ghost" onClick={() => setOpen((o) => !o)}>
+          <Icon name="settings" size="sm" aria-hidden /> Actions
+        </Button>
+      }
+      items={[
+        { type: 'label', label: 'Sort by' },
+        { label: 'Manual', checked: sortBy === 'manual', onSelect: () => setSortBy('manual') },
+        { label: 'Title', checked: sortBy === 'title', onSelect: () => setSortBy('title') },
+        { label: 'Due date', checked: sortBy === 'due', onSelect: () => setSortBy('due') },
+        { type: 'separator' },
+        { label: 'Rename', icon: 'pencil', onSelect: () => {} },
+        { label: 'Duplicate', icon: 'plus', onSelect: () => {} },
+        { label: 'Delete', icon: 'trash-2', destructive: true, onSelect: () => {} },
+      ]}
+    />
+  );
+}
+
+function CalendarDemo() {
+  const [value, setValue] = useState<Date | null>(new Date());
+  return (
+    <div style={{ width: '100%', maxWidth: 320 }}>
+      <Calendar value={value} onChange={setValue} aria-label="Example calendar" />
+    </div>
+  );
+}
+
+function DatePickerDemo() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <div style={{ width: '100%', maxWidth: 240 }}>
+      <DatePicker
+        value={value}
+        onChange={setValue}
+        aria-label="Due date"
+        placeholder="Select date"
+      />
+    </div>
+  );
+}
+
 function ToastDemo() {
   const { show } = useToast();
   return (
@@ -564,6 +725,11 @@ function ToastDemo() {
   );
 }
 
+function TagInputDemo() {
+  const [tags, setTags] = useState(['draft', 'frontmatter']);
+  return <TagInput value={tags} onChange={setTags} aria-label="Tags" />;
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -1181,7 +1347,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 22 components — click each story in the sidebar for the full API, variants, and controls."
           />
 
           <div style={{ marginBottom: 'var(--sv-space-6)' }}>
@@ -1203,7 +1369,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
             <ComponentCard
               name="Button"
               importLine="import { Button } from '@sovereignfs/ui';"
-              usage="Primary interactive control. Four variants: primary, secondary, ghost, destructive. Two sizes: md (default), sm."
+              usage="Primary interactive control. Four variants: primary, secondary, ghost, destructive. Two sizes: md (default), sm. loading disables the button, sets aria-busy, and shows a spinner. 44px min-height under (pointer: coarse); hover behind (hover: hover)."
             >
               <Button>Primary</Button>
               <Button variant="secondary">Secondary</Button>
@@ -1211,6 +1377,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <Button variant="destructive" size="sm">
                 Delete
               </Button>
+              <Button loading>Saving…</Button>
             </ComponentCard>
 
             {/* Badge */}
@@ -1229,6 +1396,18 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <Badge variant="mono">v1.2.0</Badge>
             </ComponentCard>
 
+            {/* StatusBadge */}
+            <ComponentCard
+              name="StatusBadge"
+              importLine="import { StatusBadge } from '@sovereignfs/ui';"
+              usage="Inline status indicator for editor sync, draft, conflict, and delete-pending states. RSC-safe."
+            >
+              <StatusBadge status="draft" />
+              <StatusBadge status="synced" />
+              <StatusBadge status="conflict" />
+              <StatusBadge status="pending-delete" />
+            </ComponentCard>
+
             {/* Input */}
             <ComponentCard
               name="Input"
@@ -1241,6 +1420,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               </div>
             </ComponentCard>
 
+            {/* TagInput */}
+            <ComponentCard
+              name="TagInput"
+              importLine="import { TagInput } from '@sovereignfs/ui';"
+              usage="Controlled multi-value input for tags and frontmatter arrays. Enter/comma adds, Backspace removes, paste can split multiple tags."
+            >
+              <TagInputDemo />
+            </ComponentCard>
+
             {/* Select */}
             <ComponentCard
               name="Select"
@@ -1328,11 +1516,38 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
             <ComponentCard
               name="Drawer"
               importLine="import { Drawer } from '@sovereignfs/ui';"
-              usage="Bottom-sheet panel for mobile navigation. Esc, scrim-click, focus trap. Respects safe-area-inset-bottom."
+              usage="Bottom-sheet panel. Esc, scrim-click, or swipe-down on the built-in grab handle to dismiss. snapHeight: 'content' (default, capped 80dvh) or 'half' (fixed 50dvh). Respects safe-area-inset-bottom."
             >
               <DrawerDemo />
             </ComponentCard>
 
+            {/* OverlayHeader */}
+            <ComponentCard
+              name="OverlayHeader"
+              importLine="import { OverlayHeader } from '@sovereignfs/ui';"
+              usage="Shared fixed secondary header for Dialog's mobile mode, Sheet, and Drawer: title + close, optional back button, trailing action, and a second row for tab strips."
+            >
+              <OverlayHeaderDemo />
+            </ComponentCard>
+
+            {/* Sheet */}
+            <ComponentCard
+              name="Sheet"
+              importLine="import { Sheet } from '@sovereignfs/ui';"
+              usage="Full-page overlay filling a plugin's content area between the shell header and footer — for detail views (task detail, list edit). No desktop equivalent; a desktop layout shows the same content inline instead."
+            >
+              <SheetDemo />
+            </ComponentCard>
+
+            {/* ConfirmDialog */}
+            <ComponentCard
+              name="ConfirmDialog"
+              importLine="import { ConfirmDialog } from '@sovereignfs/ui';"
+              usage="Small, content-sized confirm/cancel prompt. Same presentation on desktop and mobile — not a full-screen sheet. destructive for a solid red confirm action; pending + error for an async onConfirm."
+            >
+              <ConfirmDialogDemo />
+            </ComponentCard>
+
             {/* Popover */}
             <ComponentCard
               name="Popover"
@@ -1342,6 +1557,33 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <PopoverDemo />
             </ComponentCard>
 
+            {/* Menu */}
+            <ComponentCard
+              name="Menu"
+              importLine="import { Menu } from '@sovereignfs/ui';"
+              usage="Adaptive action menu: Popover on desktop, Drawer on mobile. Same items list renders in both — for '⋯' row/list actions. Entries can be a plain item, a { type: 'label' } section heading, a { type: 'separator' } divider, or a checkable item (pass checked on every item in the group) for a mutually-exclusive set like sort order."
+            >
+              <MenuDemo />
+            </ComponentCard>
+
+            {/* Calendar */}
+            <ComponentCard
+              name="Calendar"
+              importLine="import { Calendar } from '@sovereignfs/ui';"
+              usage="Keyboard-navigable month grid. Date-only (no time/range yet). Arrow keys, Home/End, PageUp/PageDown, Enter/Space to select."
+            >
+              <CalendarDemo />
+            </ComponentCard>
+
+            {/* DatePicker */}
+            <ComponentCard
+              name="DatePicker"
+              importLine="import { DatePicker } from '@sovereignfs/ui';"
+              usage="Form field pairing a trigger with Calendar: Popover on desktop, Drawer on mobile. Built-in trigger, unlike Menu's caller-supplied one."
+            >
+              <DatePickerDemo />
+            </ComponentCard>
+
             {/* SystemBanner */}
             <ComponentCard
               name="SystemBanner"
@@ -1384,18 +1626,80 @@ 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>
+
+            {/* CodeTextarea */}
+            <ComponentCard
+              name="CodeTextarea"
+              importLine="import { CodeTextarea } from '@sovereignfs/ui';"
+              usage="Monospace textarea for Markdown, YAML, JSON, and raw frontmatter editing. Pair with FormField for labels and validation."
+            >
+              <CodeTextarea
+                aria-label="YAML source"
+                defaultValue={'title: Release notes\ntags:\n  - launch'}
+                rows={5}
+                style={{ width: '100%' }}
+              />
+            </ComponentCard>
+
+            {/* SplitPane */}
+            <ComponentCard
+              name="SplitPane"
+              importLine="import { SplitPane } from '@sovereignfs/ui';"
+              usage="Responsive editor/preview or list/detail layout. Desktop panes are resizable with pointer and keyboard controls; mobile stacks to one column."
+            >
+              <SplitPane
+                defaultPrimarySize={44}
+                primary={
+                  <div
+                    style={{
+                      padding: 'var(--sv-space-3)',
+                      fontFamily: ffm,
+                      fontSize: 'var(--sv-font-size-xs)',
+                      color: 'var(--sv-color-text-primary)',
+                    }}
+                  >
+                    # Draft
+                  </div>
+                }
+                secondary={
+                  <div
+                    style={{
+                      padding: 'var(--sv-space-3)',
+                      fontFamily: ff,
+                      fontSize: 'var(--sv-font-size-sm)',
+                      color: 'var(--sv-color-text-primary)',
+                    }}
+                  >
+                    Draft preview
+                  </div>
+                }
+              />
+            </ComponentCard>
+
             {/* PageHeader */}
             <ComponentCard
               name="PageHeader"
@@ -1493,6 +1797,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. Tap target expands to 44px under (pointer: coarse) without growing the visible 18px box."
+            >
+              {(() => {
+                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" />,
   },
 };