@sovereignfs/ui 0.33.0 → 0.37.0

package/src/stories/DesignSystemOverview.stories.tsx

@@ -10,12 +10,17 @@ import { Drawer } from '../components/Drawer/Drawer';
 import { EmptyState } from '../components/EmptyState/EmptyState';
 import { FormField } from '../components/FormField/FormField';
 import { Icon } from '../components/Icon/Icon';
+import type { IconName } from '../components/Icon/Icon';
+import { IconPicker } from '../components/IconPicker/IconPicker';
+import { QuantityStepper } from '../components/QuantityStepper/QuantityStepper';
+import { CheckableListRow } from '../components/CheckableListRow/CheckableListRow';
 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 { SuggestionInput } from '../components/SuggestionInput/SuggestionInput';
 import { NavTabs } from '../components/NavTabs/NavTabs';
 import { PageHeader } from '../components/PageHeader/PageHeader';
 import { Popover } from '../components/Popover/Popover';
@@ -730,6 +735,70 @@ function TagInputDemo() {
   return <TagInput value={tags} onChange={setTags} aria-label="Tags" />;
 }
 
+function QuantityStepperDemo() {
+  const [value, setValue] = useState(6);
+  return <QuantityStepper value={value} onChange={setValue} unit="pcs" aria-label="Quantity" />;
+}
+
+function CheckableListRowDemo() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div style={{ width: '100%' }}>
+      <CheckableListRow
+        checked={checked}
+        onCheckedChange={setChecked}
+        label="Bananas"
+        icon={<Icon name="banana" size="md" aria-hidden />}
+        trailing={<span style={{ fontSize: 13, color: 'var(--sv-color-text-muted)' }}>6 pcs</span>}
+      />
+    </div>
+  );
+}
+
+function IconPickerDemo() {
+  const [value, setValue] = useState<IconName | null>('banana');
+  const options: IconName[] = [
+    'banana',
+    'apple',
+    'carrot',
+    'egg',
+    'milk',
+    'beef',
+    'drumstick',
+    'fish',
+    'croissant',
+    'cookie',
+  ];
+  return (
+    <IconPicker
+      value={value}
+      onChange={setValue}
+      options={options}
+      aria-label="Item icon"
+      triggerLabel={value ?? 'Choose icon'}
+    />
+  );
+}
+
+function SuggestionInputDemo() {
+  const [value, setValue] = useState('ban');
+  const options = ['Bananas', 'Banana bread mix']
+    .filter((label) => label.toLowerCase().includes(value.trim().toLowerCase()))
+    .map((label, i) => ({ id: String(i), label }));
+  return (
+    <SuggestionInput
+      value={value}
+      onChange={setValue}
+      options={value.trim() ? options : []}
+      onSelect={(o) => setValue(o.label)}
+      placeholder="Add an item…"
+      aria-label="Add an item"
+      createLabel={(v) => `Add "${v}" as a new item`}
+      onCreate={setValue}
+    />
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -1429,6 +1498,35 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <TagInputDemo />
             </ComponentCard>
 
+            {/* SuggestionInput */}
+            <ComponentCard
+              name="SuggestionInput"
+              importLine="import { SuggestionInput } from '@sovereignfs/ui';"
+              usage="Text field with an anchored, keyboard-navigable async suggestion list, plus an optional trailing 'create new' row. Built on Popover."
+            >
+              <div style={{ width: '100%' }}>
+                <SuggestionInputDemo />
+              </div>
+            </ComponentCard>
+
+            {/* IconPicker */}
+            <ComponentCard
+              name="IconPicker"
+              importLine="import { IconPicker } from '@sovereignfs/ui';"
+              usage="Trigger button + Popover grid for a curated, bounded icon set (e.g. a plugin's category icons) — not the full icon library."
+            >
+              <IconPickerDemo />
+            </ComponentCard>
+
+            {/* QuantityStepper */}
+            <ComponentCard
+              name="QuantityStepper"
+              importLine="import { QuantityStepper } from '@sovereignfs/ui';"
+              usage="Numeric input with +/- buttons and an optional read-only unit suffix. Supports fractional step values (e.g. 0.5 kg)."
+            >
+              <QuantityStepperDemo />
+            </ComponentCard>
+
             {/* Select */}
             <ComponentCard
               name="Select"
@@ -1798,6 +1896,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               </div>
             </ComponentCard>
 
+            {/* CheckableListRow */}
+            <ComponentCard
+              name="CheckableListRow"
+              importLine="import { CheckableListRow } from '@sovereignfs/ui';"
+              usage="Whole-row tap target that toggles a checked state, with strike-through on the label — for 'tap the row to mark it done' lists (not a form checkbox)."
+            >
+              <CheckableListRowDemo />
+            </ComponentCard>
+
             {/* Checkbox */}
             <ComponentCard
               name="Checkbox"