@sovereignfs/ui 0.33.1 → 0.40.0

package/src/components/IconPicker/IconPicker.stories.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconPicker } from './IconPicker';
+import type { IconName } from '../Icon/Icon';
+
+const meta = {
+  title: 'Components/IconPicker',
+  component: IconPicker,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A trigger button showing the current icon that opens a Popover grid of selectable icons — for a curated, bounded icon set rather than the full design-system library.',
+      },
+    },
+  },
+  args: {
+    value: null,
+    onChange: () => {},
+    options: [],
+    'aria-label': 'Icon',
+  },
+} satisfies Meta<typeof IconPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const GROCERY_ICONS: IconName[] = [
+  'banana',
+  'apple',
+  'carrot',
+  'egg',
+  'milk',
+  'beef',
+  'drumstick',
+  'fish',
+  'croissant',
+  'cookie',
+  'pizza',
+  'salad',
+  'coffee',
+  'wine',
+  'beer',
+  'cup-soda',
+  'candy',
+  'spray-can',
+  'snowflake',
+  'shopping-basket',
+];
+
+function ControlledIconPicker({ initial = null }: { initial?: IconName | null }) {
+  const [value, setValue] = useState<IconName | null>(initial);
+  return (
+    <IconPicker
+      value={value}
+      onChange={setValue}
+      options={GROCERY_ICONS}
+      aria-label="Item icon"
+      triggerLabel={value ?? 'Choose icon'}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledIconPicker />,
+};
+
+export const Preselected: Story = {
+  render: () => <ControlledIconPicker initial="banana" />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <IconPicker
+      value="milk"
+      onChange={() => {}}
+      options={GROCERY_ICONS}
+      aria-label="Item icon"
+      triggerLabel="Milk"
+      disabled
+    />
+  ),
+};

package/src/components/IconPicker/IconPicker.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+import { Icon, type IconName } from '../Icon/Icon';
+import { Popover } from '../Popover/Popover';
+import styles from './IconPicker.module.css';
+
+export interface IconPickerProps {
+  value: IconName | null;
+  onChange: (icon: IconName) => void;
+  /** Icons offered in the grid, in display order. */
+  options: readonly IconName[];
+  'aria-label': string;
+  /** Shown next to the trigger's icon preview, e.g. the item's name. */
+  triggerLabel?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * IconPicker — a trigger button showing the current icon that opens a
+ * `Popover` grid of selectable icons. Built for cases with a curated,
+ * bounded icon set (e.g. Sovereign Shopper's grocery category icons,
+ * SHP-05) rather than the full design-system icon library.
+ *
+ * Selecting an icon both closes the picker and calls `onChange` — a
+ * consumer's `onChange` never needs to close the picker itself.
+ */
+export function IconPicker({
+  value,
+  onChange,
+  options,
+  'aria-label': ariaLabel,
+  triggerLabel,
+  disabled = false,
+  className,
+}: IconPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  const trigger = (
+    <button
+      type="button"
+      className={[styles.trigger, className].filter(Boolean).join(' ')}
+      onClick={() => setOpen((o) => !o)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      aria-haspopup="true"
+      aria-expanded={open}
+    >
+      {value ? (
+        <Icon name={value} size="md" aria-hidden />
+      ) : (
+        <span className={styles.placeholder} aria-hidden>
+          ?
+        </span>
+      )}
+      {triggerLabel && <span className={styles.triggerLabel}>{triggerLabel}</span>}
+    </button>
+  );
+
+  return (
+    <Popover
+      trigger={trigger}
+      open={open}
+      onClose={() => setOpen(false)}
+      width={240}
+      aria-label={`${ariaLabel} options`}
+    >
+      <div className={styles.grid} role="listbox" aria-label={ariaLabel}>
+        {options.map((name) => (
+          <button
+            key={name}
+            type="button"
+            role="option"
+            aria-selected={name === value}
+            className={[styles.option, name === value ? styles.optionSelected : '']
+              .filter(Boolean)
+              .join(' ')}
+            onClick={() => {
+              onChange(name);
+              setOpen(false);
+            }}
+          >
+            <Icon name={name} size="md" aria-hidden />
+          </button>
+        ))}
+      </div>
+    </Popover>
+  );
+}

package/src/components/QuantityStepper/QuantityStepper.module.css

@@ -0,0 +1,67 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-1);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+}
+
+.button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-6);
+  height: var(--sv-space-6);
+  border-radius: var(--sv-radius-full);
+  color: var(--sv-color-text-primary);
+  font-size: var(--sv-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--sv-color-surface);
+}
+
+.button:disabled {
+  color: var(--sv-color-text-subtle);
+  cursor: not-allowed;
+}
+
+.input {
+  all: unset;
+  width: 3ch;
+  text-align: center;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  /* Hide the native spinner — the +/- buttons are the stepper affordance,
+     a second one from the browser would be redundant and often looks
+     inconsistent across browsers anyway. */
+  -moz-appearance: textfield;
+}
+
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+  border-radius: var(--sv-radius-sm);
+}
+
+.input:disabled {
+  color: var(--sv-color-text-muted);
+}
+
+.unit {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-subtle);
+  white-space: nowrap;
+}

package/src/components/QuantityStepper/QuantityStepper.stories.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QuantityStepper } from './QuantityStepper';
+
+const meta = {
+  title: 'Components/QuantityStepper',
+  component: QuantityStepper,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A numeric input with +/- buttons and an optional read-only unit suffix. Supports fractional step values for quantities like "1.5 kg".',
+      },
+    },
+  },
+  args: {
+    value: 1,
+    onChange: () => {},
+    'aria-label': 'Quantity',
+  },
+} satisfies Meta<typeof QuantityStepper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledStepper({
+  initial = 1,
+  step = 1,
+  min = 0,
+  max,
+  unit,
+}: {
+  initial?: number;
+  step?: number;
+  min?: number;
+  max?: number;
+  unit?: string;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <QuantityStepper
+      value={value}
+      onChange={setValue}
+      step={step}
+      min={min}
+      max={max}
+      unit={unit}
+      aria-label="Quantity"
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledStepper initial={1} />,
+};
+
+export const WithUnit: Story = {
+  render: () => <ControlledStepper initial={6} unit="pcs" />,
+};
+
+export const FractionalStep: Story = {
+  name: 'Fractional step (0.5 kg)',
+  render: () => <ControlledStepper initial={1.5} step={0.5} unit="kg" />,
+};
+
+export const AtMinimum: Story = {
+  render: () => <ControlledStepper initial={0} min={0} unit="pcs" />,
+};
+
+export const WithMax: Story = {
+  render: () => <ControlledStepper initial={9} max={10} unit="pcs" />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <QuantityStepper value={3} onChange={() => {}} unit="pcs" aria-label="Quantity" disabled />
+  ),
+};

package/src/components/QuantityStepper/QuantityStepper.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useId, type ChangeEvent } from 'react';
+import styles from './QuantityStepper.module.css';
+
+export interface QuantityStepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  /** Smallest selectable value. Default `0`. */
+  min?: number;
+  /** Largest selectable value. Default unbounded. */
+  max?: number;
+  /** Amount +/- adjusts by. Default `1` — pass e.g. `0.5` for fractional
+   *  quantities (kg, L). */
+  step?: number;
+  /** Read-only suffix shown after the number, e.g. "pcs" or "kg" — for
+   *  compact contexts (a list row) where a separate unit selector doesn't
+   *  fit. Editable unit selection (a `<Select>` of units) lives outside
+   *  this component. */
+  unit?: string;
+  'aria-label': string;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * QuantityStepper — a numeric input with +/- buttons and an optional
+ * read-only unit suffix. Built for grocery/inventory-style quantities
+ * (Sovereign Shopper, SHP-06) — supports fractional `step` values since
+ * quantities like "1.5 kg" are common, unlike a typical integer counter.
+ *
+ * The middle field is a real `<input type="number">` so keyboard entry,
+ * paste, and the browser's native numeric affordances all work — the
+ * buttons are a convenience on top, not the only way to change the value.
+ */
+export function QuantityStepper({
+  value,
+  onChange,
+  min = 0,
+  max,
+  step = 1,
+  unit,
+  'aria-label': ariaLabel,
+  disabled = false,
+  id,
+  className,
+}: QuantityStepperProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  function clamp(next: number): number {
+    let result = next;
+    if (min !== undefined) result = Math.max(min, result);
+    if (max !== undefined) result = Math.min(max, result);
+    // Avoid float drift (0.1 + 0.2 style errors) from repeated +/- clicks.
+    return Math.round(result * 1000) / 1000;
+  }
+
+  function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
+    const parsed = Number.parseFloat(e.target.value);
+    if (!Number.isNaN(parsed)) onChange(clamp(parsed));
+  }
+
+  const decrementDisabled = disabled || (min !== undefined && value <= min);
+  const incrementDisabled = disabled || (max !== undefined && value >= max);
+
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>
+      <button
+        type="button"
+        className={styles.button}
+        onClick={() => onChange(clamp(value - step))}
+        disabled={decrementDisabled}
+        aria-label={`Decrease ${ariaLabel}`}
+      >
+        −
+      </button>
+      <input
+        id={inputId}
+        type="number"
+        className={styles.input}
+        value={value}
+        onChange={handleInputChange}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
+      {unit && (
+        <span className={styles.unit} aria-hidden>
+          {unit}
+        </span>
+      )}
+      <button
+        type="button"
+        className={styles.button}
+        onClick={() => onChange(clamp(value + step))}
+        disabled={incrementDisabled}
+        aria-label={`Increase ${ariaLabel}`}
+      >
+        +
+      </button>
+    </div>
+  );
+}

package/src/components/SuggestionInput/SuggestionInput.module.css

@@ -0,0 +1,103 @@
+.input {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* iOS Safari auto-zooms on focused inputs under 16px — see Input.module.css
+   for the full rationale; kept in sync here since this isn't built on Input. */
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: var(--sv-space-1);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.status {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.option:hover,
+.optionActive {
+  background: var(--sv-color-surface-sunken);
+}
+
+.optionIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.optionLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionMeta {
+  flex-shrink: 0;
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-subtle);
+}
+
+.optionCreate {
+  font-style: italic;
+  color: var(--sv-color-text-muted);
+}
+
+.divider {
+  margin: var(--sv-space-1) var(--sv-space-2);
+  border-top: 1px solid var(--sv-color-border);
+}

package/src/components/SuggestionInput/SuggestionInput.stories.tsx

@@ -0,0 +1,144 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SuggestionInput, type SuggestionOption } from './SuggestionInput';
+
+const meta = {
+  title: 'Components/SuggestionInput',
+  component: SuggestionInput,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A text field with an anchored, keyboard-navigable list of async suggestions, plus an optional trailing "create new" row so free text is always a valid commit.',
+      },
+    },
+  },
+  args: {
+    value: '',
+    onChange: () => {},
+    options: [],
+    onSelect: () => {},
+    'aria-label': 'Add an item',
+  },
+} satisfies Meta<typeof SuggestionInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CATALOG: SuggestionOption[] = [
+  { id: '1', label: 'Bananas', icon: '🍌', meta: 'bought 4× recently' },
+  { id: '2', label: 'Banana bread mix', icon: '🍞' },
+  { id: '3', label: 'Milk', icon: '🥛' },
+  { id: '4', label: 'Eggs', icon: '🥚' },
+  { id: '5', label: 'Olive oil', icon: '🫒' },
+];
+
+function ControlledSuggestionInput({ withCreateRow = true }: { withCreateRow?: boolean }) {
+  const [value, setValue] = useState('');
+  const [selected, setSelected] = useState<string | null>(null);
+  const options = useMemo(
+    () =>
+      value.trim()
+        ? CATALOG.filter((c) => c.label.toLowerCase().includes(value.trim().toLowerCase()))
+        : [],
+    [value],
+  );
+
+  return (
+    <div style={{ width: 320 }}>
+      <SuggestionInput
+        value={value}
+        onChange={setValue}
+        options={options}
+        onSelect={(option) => {
+          setSelected(option.label);
+          setValue('');
+        }}
+        placeholder="Add an item…"
+        aria-label="Add an item"
+        createLabel={withCreateRow ? (v) => `Add "${v}" as a new item` : undefined}
+        onCreate={
+          withCreateRow
+            ? (v) => {
+                setSelected(v);
+                setValue('');
+              }
+            : undefined
+        }
+      />
+      {selected && <p style={{ marginTop: 12, fontSize: 13 }}>Added: {selected}</p>}
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledSuggestionInput />,
+};
+
+export const NoCreateRow: Story = {
+  name: 'Without create row (matched options only)',
+  render: () => <ControlledSuggestionInput withCreateRow={false} />,
+};
+
+export const OpenWithOptions: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <SuggestionInput
+        value="ban"
+        onChange={() => {}}
+        options={CATALOG.slice(0, 2)}
+        onSelect={() => {}}
+        aria-label="Add an item"
+        createLabel={(v) => `Add "${v}" as a new item`}
+        onCreate={() => {}}
+      />
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <SuggestionInput
+        value="ban"
+        onChange={() => {}}
+        options={[]}
+        onSelect={() => {}}
+        loading
+        aria-label="Add an item"
+      />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  name: 'Empty (no matches, no create row)',
+  render: () => (
+    <div style={{ width: 320 }}>
+      <SuggestionInput
+        value="xyz"
+        onChange={() => {}}
+        options={[]}
+        onSelect={() => {}}
+        aria-label="Add an item"
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <SuggestionInput
+        value=""
+        onChange={() => {}}
+        options={[]}
+        onSelect={() => {}}
+        disabled
+        placeholder="Add an item…"
+        aria-label="Add an item"
+      />
+    </div>
+  ),
+};