@sovereignfs/ui 0.23.0 → 0.33.0

package/src/stories/DesignSystemOverview.stories.tsx

@@ -11,7 +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';
@@ -25,6 +29,12 @@ 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
@@ -170,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' },
     ],
   },
   {
@@ -197,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' },
     ],
   },
   {
@@ -215,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' },
     ],
   },
   {
@@ -548,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 (
@@ -567,6 +725,11 @@ function ToastDemo() {
   );
 }
 
+function TagInputDemo() {
+  const [tags, setTags] = useState(['draft', 'frontmatter']);
+  return <TagInput value={tags} onChange={setTags} aria-label="Tags" />;
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -1184,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 15 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)' }}>
@@ -1206,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>
@@ -1214,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 */}
@@ -1232,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"
@@ -1244,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"
@@ -1331,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"
@@ -1345,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"
@@ -1412,6 +1651,55 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               />
             </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"
@@ -1514,7 +1802,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
             <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."
+              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);