@sovereignfs/ui 0.33.1 → 0.37.0

package/README.md

@@ -19,7 +19,7 @@ npm install @sovereignfs/ui
 import { Button, Input, Card, Dialog, Drawer } from '@sovereignfs/ui';
 ```
 
-Available components: `Avatar`, `Badge`, `Button`, `Card`, `Dialog`, `Drawer`, `EmptyState`, `FormField`, `Icon`, `Input`, `NavTabs`, `PageHeader`, `Popover`, `SegmentedControl`, `Select`, `Spinner`, `SystemBanner`, `Tabs`, `Toast` / `useToast`, `Toggle`, `Tooltip`.
+Available components and hooks: `Avatar`, `Badge`, `Button`, `Calendar`, `Card`, `CheckableListRow`, `Checkbox`, `CodeTextarea`, `ConfirmDialog`, `DatePicker`, `Dialog`, `DragHandleRow`, `Drawer`, `EmptyState`, `FormField`, `Icon`, `IconPicker`, `Input`, `Menu`, `NavTabs`, `OverlayHeader`, `PageHeader`, `Popover`, `QuantityStepper`, `SegmentedControl`, `Select`, `Sheet`, `Spinner`, `SplitPane`, `StatusBadge`, `SuggestionInput`, `SystemBanner`, `Tabs`, `TagInput`, `Textarea`, `Toast` / `useToast`, `Toggle`, `Tooltip`, `useDoubleTapHandler`, `useIsMobile`, `useLongPress`, and `useSingleOrDoubleTap`.
 
 ### Tokens
 

package/dist/CheckableListRow.module.css

@@ -0,0 +1,95 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  width: 100%;
+}
+
+.tapTarget {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  flex: 1;
+  min-width: 0;
+  min-height: var(--sv-touch-target-min);
+  cursor: pointer;
+}
+
+.tapTarget:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+/* Visual box — matches Checkbox.module.css's .box/.checked/.tick. */
+.box {
+  --checkbox-box-size: 18px;
+  flex-shrink: 0;
+  width: var(--checkbox-box-size);
+  height: var(--checkbox-box-size);
+  border-radius: var(--sv-radius-sm);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  background-color: var(--sv-color-accent);
+  border-color: var(--sv-color-accent);
+  color: var(--sv-white);
+}
+
+.tick {
+  width: 10px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+  position: relative;
+}
+
+.label::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1.5px;
+  background: var(--sv-color-text-muted);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 0.2s ease;
+}
+
+.struck {
+  color: var(--sv-color-text-muted);
+}
+
+.struck::after {
+  transform: scaleX(1);
+}
+
+.trailing {
+  flex-shrink: 0;
+}

package/dist/IconPicker.module.css

@@ -0,0 +1,63 @@
+.trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-2);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-color-surface);
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+.trigger:hover {
+  background: var(--sv-color-surface-sunken);
+}
+
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-icon-size-md);
+  height: var(--sv-icon-size-md);
+  color: var(--sv-color-text-subtle);
+  font-size: var(--sv-font-size-sm);
+}
+
+.triggerLabel {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-2);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-touch-target-min);
+  height: var(--sv-touch-target-min);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+.option:hover {
+  background: var(--sv-color-surface-sunken);
+}
+
+.optionSelected {
+  background: var(--sv-color-accent-subtle);
+}

package/dist/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/dist/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/dist/index.d.ts

@@ -18,7 +18,7 @@ interface BadgeProps {
  */
 declare function Badge({ variant, status, children }: BadgeProps): react.JSX.Element;
 
-type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical';
+type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
 
 /** Decorative icon — visually meaningful but described by surrounding text. */
 type DecorativeProps = {
@@ -747,6 +747,132 @@ interface DatePickerProps {
  */
 declare function DatePicker({ value, onChange, minDate, maxDate, placeholder, 'aria-label': ariaLabel, disabled, }: DatePickerProps): react.JSX.Element;
 
+interface SuggestionOption {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Secondary text shown right-aligned on the row, e.g. "bought 4× recently". */
+    meta?: string;
+}
+interface SuggestionInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SuggestionOption[];
+    onSelect: (option: SuggestionOption) => void;
+    placeholder?: string;
+    'aria-label': string;
+    id?: string;
+    disabled?: boolean;
+    /** Shown in place of the options list while a suggestion fetch is in flight. */
+    loading?: boolean;
+    /**
+     * Label for a trailing, always-selectable row that commits the raw typed
+     * text instead of a matched option — e.g. `(v) => \`Add "${v}" as a new item\`}`.
+     * Shown whenever `value` is non-empty and `onCreate` is provided, even
+     * when `options` is empty, so the input is never a dead end.
+     */
+    createLabel?: (value: string) => string;
+    onCreate?: (value: string) => void;
+    className?: string;
+}
+/**
+ * SuggestionInput — a text field with an anchored, keyboard-navigable list
+ * of async suggestions (a combobox), plus an optional trailing "create new"
+ * row so free text is always a valid commit, not just a matched option.
+ *
+ * Fully controlled: the caller owns `value`/`onChange` and supplies
+ * `options` (e.g. debounced server-fetched results) — this component only
+ * handles open/close, keyboard navigation, and selection. Built on `Popover`
+ * for positioning (`width: 'trigger'`, so the panel always matches the
+ * input's own width).
+ */
+declare function SuggestionInput({ value, onChange, options, onSelect, placeholder, 'aria-label': ariaLabel, id, disabled, loading, createLabel, onCreate, className, }: SuggestionInputProps): react.JSX.Element;
+
+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.
+ */
+declare function IconPicker({ value, onChange, options, 'aria-label': ariaLabel, triggerLabel, disabled, className, }: IconPickerProps): react.JSX.Element;
+
+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.
+ */
+declare function QuantityStepper({ value, onChange, min, max, step, unit, 'aria-label': ariaLabel, disabled, id, className, }: QuantityStepperProps): react.JSX.Element;
+
+interface CheckableListRowProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label: string;
+    /** Leading icon, e.g. a per-item `<Icon>`. */
+    icon?: ReactNode;
+    /** Trailing content, e.g. a quantity, a `QuantityStepper`, or a badge. */
+    trailing?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * CheckableListRow — a whole-row tap target that toggles a checked state,
+ * with strike-through on the label when checked. Built for "tap the row to
+ * mark it done" lists (Sovereign Shopper's tap-to-buy, SHP-07) where the
+ * checkbox itself is too small a target on mobile and the row already has
+ * nothing else competing for the tap.
+ *
+ * Renders as `role="checkbox"` on the row itself rather than composing
+ * `Checkbox`'s native `<input>` — nesting a real checkbox input inside the
+ * row's own click handler would mean two overlapping interactive elements
+ * (invalid HTML, and the input's own click would double-fire the row's
+ * toggle). The visual box matches `Checkbox`'s styling for consistency.
+ *
+ * `trailing` content (e.g. a `QuantityStepper`) is rendered outside the
+ * `role="checkbox"` element so its own interactive controls (+/- buttons)
+ * don't sit inside another interactive element either — clicking those
+ * doesn't toggle the row.
+ */
+declare function CheckableListRow({ checked, onCheckedChange, label, icon, trailing, disabled, className, }: CheckableListRowProps): react.JSX.Element;
+
 interface UseLongPressOptions {
     /** Called once the press has been held for `delay` without exceeding `moveTolerance`. */
     onLongPress: () => void;
@@ -853,4 +979,4 @@ declare const MOBILE_BREAKPOINT_PX = 768;
  */
 declare function useIsMobile(breakpointPx?: number): boolean;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, QuantityStepper, type QuantityStepperProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };