@sovereignfs/ui 0.33.1 → 0.37.0

package/src/components/Icon/icons/index.ts

@@ -29,6 +29,26 @@ import { AlertTriangleIcon } from './alert-triangle';
 import { CalendarIcon } from './calendar';
 import { SlidersHorizontalIcon } from './sliders-horizontal';
 import { EllipsisVerticalIcon } from './ellipsis-vertical';
+import { BananaIcon } from './banana';
+import { AppleIcon } from './apple';
+import { CarrotIcon } from './carrot';
+import { EggIcon } from './egg';
+import { BeefIcon } from './beef';
+import { FishIcon } from './fish';
+import { CoffeeIcon } from './coffee';
+import { WineIcon } from './wine';
+import { BeerIcon } from './beer';
+import { CookieIcon } from './cookie';
+import { PizzaIcon } from './pizza';
+import { CandyIcon } from './candy';
+import { SaladIcon } from './salad';
+import { MilkIcon } from './milk';
+import { DrumstickIcon } from './drumstick';
+import { CroissantIcon } from './croissant';
+import { CupSodaIcon } from './cup-soda';
+import { SprayCanIcon } from './spray-can';
+import { SnowflakeIcon } from './snowflake';
+import { ShoppingBasketIcon } from './shopping-basket';
 
 export type IconName =
   | 'house'
@@ -59,7 +79,27 @@ export type IconName =
   | 'alert-triangle'
   | 'calendar'
   | 'sliders-horizontal'
-  | 'ellipsis-vertical';
+  | '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';
 
 export type IconComponent = (props: SVGProps<SVGSVGElement>) => ReactElement;
 
@@ -93,6 +133,26 @@ export const ICONS: Record<IconName, IconComponent> = {
   calendar: CalendarIcon,
   'sliders-horizontal': SlidersHorizontalIcon,
   'ellipsis-vertical': EllipsisVerticalIcon,
+  banana: BananaIcon,
+  apple: AppleIcon,
+  carrot: CarrotIcon,
+  egg: EggIcon,
+  beef: BeefIcon,
+  fish: FishIcon,
+  coffee: CoffeeIcon,
+  wine: WineIcon,
+  beer: BeerIcon,
+  cookie: CookieIcon,
+  pizza: PizzaIcon,
+  candy: CandyIcon,
+  salad: SaladIcon,
+  milk: MilkIcon,
+  drumstick: DrumstickIcon,
+  croissant: CroissantIcon,
+  'cup-soda': CupSodaIcon,
+  'spray-can': SprayCanIcon,
+  snowflake: SnowflakeIcon,
+  'shopping-basket': ShoppingBasketIcon,
 };
 
 export { HouseIcon } from './house';
@@ -124,3 +184,23 @@ export { AlertTriangleIcon } from './alert-triangle';
 export { CalendarIcon } from './calendar';
 export { SlidersHorizontalIcon } from './sliders-horizontal';
 export { EllipsisVerticalIcon } from './ellipsis-vertical';
+export { BananaIcon } from './banana';
+export { AppleIcon } from './apple';
+export { CarrotIcon } from './carrot';
+export { EggIcon } from './egg';
+export { BeefIcon } from './beef';
+export { FishIcon } from './fish';
+export { CoffeeIcon } from './coffee';
+export { WineIcon } from './wine';
+export { BeerIcon } from './beer';
+export { CookieIcon } from './cookie';
+export { PizzaIcon } from './pizza';
+export { CandyIcon } from './candy';
+export { SaladIcon } from './salad';
+export { MilkIcon } from './milk';
+export { DrumstickIcon } from './drumstick';
+export { CroissantIcon } from './croissant';
+export { CupSodaIcon } from './cup-soda';
+export { SprayCanIcon } from './spray-can';
+export { SnowflakeIcon } from './snowflake';
+export { ShoppingBasketIcon } from './shopping-basket';

package/src/components/Icon/icons/milk.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function MilkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 2h8" />
+      <path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
+      <path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/pizza.tsx

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function PizzaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m12 14-1 1" />
+      <path d="m13.75 18.25-1.25 1.42" />
+      <path d="M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12" />
+      <path d="M18.8 9.3a1 1 0 0 0 2.1 7.7" />
+      <path d="M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/salad.tsx

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SaladIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M7 21h10" />
+      <path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" />
+      <path d="M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1" />
+      <path d="m13 12 4-4" />
+      <path d="M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/shopping-basket.tsx

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ShoppingBasketIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m15 11-1 9" />
+      <path d="m19 11-4-7" />
+      <path d="M2 11h20" />
+      <path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4" />
+      <path d="M4.5 15.5h15" />
+      <path d="m5 11 4-7" />
+      <path d="m9 11 1 9" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/snowflake.tsx

@@ -0,0 +1,31 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SnowflakeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m10 20-1.25-2.5L6 18" />
+      <path d="M10 4 8.75 6.5 6 6" />
+      <path d="m14 20 1.25-2.5L18 18" />
+      <path d="m14 4 1.25 2.5L18 6" />
+      <path d="m17 21-3-6h-4" />
+      <path d="m17 3-3 6 1.5 3" />
+      <path d="M2 12h6.5L10 9" />
+      <path d="m20 10-1.5 2 1.5 2" />
+      <path d="M22 12h-6.5L14 15" />
+      <path d="m4 10 1.5 2L4 14" />
+      <path d="m7 21 3-6-1.5-3" />
+      <path d="m7 3 3 6h4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/spray-can.tsx

@@ -0,0 +1,29 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SprayCanIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M3 3h.01" />
+      <path d="M7 5h.01" />
+      <path d="M11 7h.01" />
+      <path d="M3 7h.01" />
+      <path d="M7 9h.01" />
+      <path d="M3 11h.01" />
+      <rect width="4" height="4" x="15" y="5" />
+      <path d="m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2" />
+      <path d="m13 14 8-2" />
+      <path d="m13 19 8-2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/wine.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function WineIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 22h8" />
+      <path d="M7 10h10" />
+      <path d="M12 15v7" />
+      <path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" />
+    </svg>
+  );
+}

package/src/components/IconPicker/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/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 />
+  ),
+};