@sovereignfs/ui 0.33.1 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.33.1",
+  "version": "0.37.0",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [

package/src/components/CheckableListRow/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/src/components/CheckableListRow/CheckableListRow.stories.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CheckableListRow } from './CheckableListRow';
+import { Icon } from '../Icon/Icon';
+
+const meta = {
+  title: 'Components/CheckableListRow',
+  component: CheckableListRow,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A whole-row tap target that toggles a checked state, with strike-through on the label when checked — for "tap the row to mark it done" lists.',
+      },
+    },
+  },
+  args: {
+    checked: false,
+    onCheckedChange: () => {},
+    label: 'Bananas',
+  },
+} satisfies Meta<typeof CheckableListRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledRow({
+  initial = false,
+  icon,
+  trailing,
+  disabled,
+}: {
+  initial?: boolean;
+  icon?: boolean;
+  trailing?: boolean;
+  disabled?: boolean;
+}) {
+  const [checked, setChecked] = useState(initial);
+  return (
+    <div style={{ width: 320 }}>
+      <CheckableListRow
+        checked={checked}
+        onCheckedChange={setChecked}
+        label="Bananas"
+        icon={icon ? <Icon name="banana" size="md" aria-hidden /> : undefined}
+        trailing={trailing ? <span style={{ fontSize: 13, color: '#888' }}>6 pcs</span> : undefined}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledRow />,
+};
+
+export const Checked: Story = {
+  render: () => <ControlledRow initial />,
+};
+
+export const WithIconAndTrailing: Story = {
+  render: () => <ControlledRow icon trailing />,
+};
+
+export const CheckedWithIconAndTrailing: Story = {
+  render: () => <ControlledRow initial icon trailing />,
+};
+
+export const Disabled: Story = {
+  render: () => <ControlledRow icon trailing disabled />,
+};
+
+export const List: Story = {
+  name: 'Multiple rows (list context)',
+  render: () => {
+    const items = ['Bananas', 'Milk', 'Eggs', 'Coffee'];
+    const [checkedSet, setCheckedSet] = useState<Set<string>>(new Set(['Milk']));
+    return (
+      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {items.map((item) => (
+          <CheckableListRow
+            key={item}
+            checked={checkedSet.has(item)}
+            onCheckedChange={(checked) =>
+              setCheckedSet((prev) => {
+                const next = new Set(prev);
+                if (checked) next.add(item);
+                else next.delete(item);
+                return next;
+              })
+            }
+            label={item}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/CheckableListRow/CheckableListRow.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import type { KeyboardEvent, ReactNode } from 'react';
+import styles from './CheckableListRow.module.css';
+
+export 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.
+ */
+export function CheckableListRow({
+  checked,
+  onCheckedChange,
+  label,
+  icon,
+  trailing,
+  disabled = false,
+  className,
+}: CheckableListRowProps) {
+  function toggle() {
+    if (!disabled) onCheckedChange(!checked);
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggle();
+    }
+  }
+
+  return (
+    <div className={[styles.row, className].filter(Boolean).join(' ')}>
+      <div
+        role="checkbox"
+        aria-checked={checked}
+        aria-label={label}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        className={styles.tapTarget}
+        onClick={toggle}
+        onKeyDown={handleKeyDown}
+      >
+        <span className={[styles.box, checked ? styles.checked : ''].filter(Boolean).join(' ')}>
+          {checked && (
+            <svg className={styles.tick} viewBox="0 0 10 8" fill="none" aria-hidden="true">
+              <path
+                d="M1 4l3 3 5-6"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </span>
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <span className={[styles.label, checked ? styles.struck : ''].filter(Boolean).join(' ')}>
+          {label}
+        </span>
+      </div>
+      {trailing && <span className={styles.trailing}>{trailing}</span>}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+// 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 AppleIcon(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 6.528V3a1 1 0 0 1 1-1h0" />
+      <path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,21 @@
+// 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 BananaIcon(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="M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5" />
+      <path d="M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/beef.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 BeefIcon(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="M16.4 13.7A6.5 6.5 0 1 0 6.28 6.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3" />
+      <path d="m18.5 6 2.19 4.5a6.48 6.48 0 0 1-2.29 7.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" />
+      <circle cx="12.5" cy="8.5" r="2.5" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/beer.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 BeerIcon(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="M17 11h1a3 3 0 0 1 0 6h-1" />
+      <path d="M9 12v6" />
+      <path d="M13 12v6" />
+      <path d="M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z" />
+      <path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/candy.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 CandyIcon(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 7v10.9" />
+      <path d="M14 6.1V17" />
+      <path d="M16 7V3a1 1 0 0 1 1.707-.707 2.5 2.5 0 0 0 2.152.717 1 1 0 0 1 1.131 1.131 2.5 2.5 0 0 0 .717 2.152A1 1 0 0 1 21 8h-4" />
+      <path d="M16.536 7.465a5 5 0 0 0-7.072 0l-2 2a5 5 0 0 0 0 7.07 5 5 0 0 0 7.072 0l2-2a5 5 0 0 0 0-7.07" />
+      <path d="M8 17v4a1 1 0 0 1-1.707.707 2.5 2.5 0 0 0-2.152-.717 1 1 0 0 1-1.131-1.131 2.5 2.5 0 0 0-.717-2.152A1 1 0 0 1 3 16h4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/carrot.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 CarrotIcon(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="M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46" />
+      <path d="M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z" />
+      <path d="M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/coffee.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 CoffeeIcon(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 2v2" />
+      <path d="M14 2v2" />
+      <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" />
+      <path d="M6 2v2" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,25 @@
+// 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 CookieIcon(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 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
+      <path d="M8.5 8.5v.01" />
+      <path d="M16 15.5v.01" />
+      <path d="M12 12v.01" />
+      <path d="M11 17v.01" />
+      <path d="M7 14v.01" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/croissant.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 CroissantIcon(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.2 18H4.774a1.5 1.5 0 0 1-1.352-.97 11 11 0 0 1 .132-6.487" />
+      <path d="M18 10.2V4.774a1.5 1.5 0 0 0-.97-1.352 11 11 0 0 0-6.486.132" />
+      <path d="M18 5a4 3 0 0 1 4 3 2 2 0 0 1-2 2 10 10 0 0 0-5.139 1.42" />
+      <path d="M5 18a3 4 0 0 0 3 4 2 2 0 0 0 2-2 10 10 0 0 1 1.42-5.14" />
+      <path d="M8.709 2.554a10 10 0 0 0-6.155 6.155 1.5 1.5 0 0 0 .676 1.626l9.807 5.42a2 2 0 0 0 2.718-2.718l-5.42-9.807a1.5 1.5 0 0 0-1.626-.676" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/cup-soda.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 CupSodaIcon(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="m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8" />
+      <path d="M5 8h14" />
+      <path d="M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
+      <path d="m12 8 1-6h2" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,21 @@
+// 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 DrumstickIcon(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.4 15.63a7.875 6 135 1 1 6.23-6.23 4.5 3.43 135 0 0-6.23 6.23" />
+      <path d="m8.29 12.71-2.6 2.6a2.5 2.5 0 1 0-1.65 4.65A2.5 2.5 0 1 0 8.7 18.3l2.59-2.59" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,20 @@
+// 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 EggIcon(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 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,25 @@
+// 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 FishIcon(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="M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z" />
+      <path d="M18 12v.5" />
+      <path d="M16 17.93a9.77 9.77 0 0 1 0-11.86" />
+      <path d="M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33" />
+      <path d="M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4" />
+      <path d="m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98" />
+    </svg>
+  );
+}