@sovereignfs/ui 0.54.0 → 0.89.1

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

@@ -1,26 +0,0 @@
-// 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/sliders-horizontal.tsx

@@ -1,28 +0,0 @@
-// 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 SlidersHorizontalIcon(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 5H3" />
-      <path d="M12 19H3" />
-      <path d="M14 3v4" />
-      <path d="M16 17v4" />
-      <path d="M21 12h-9" />
-      <path d="M21 19h-5" />
-      <path d="M21 5h-7" />
-      <path d="M8 10v4" />
-      <path d="M8 12H3" />
-    </svg>
-  );
-}

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

@@ -1,21 +0,0 @@
-// 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 SmartphoneIcon(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}
-    >
-      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
-      <path d="M12 18h.01" />
-    </svg>
-  );
-}

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

@@ -1,31 +0,0 @@
-// 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

@@ -1,29 +0,0 @@
-// 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/trash-2.tsx

@@ -1,24 +0,0 @@
-// 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 Trash2Icon(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 11v6" />
-      <path d="M14 11v6" />
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
-      <path d="M3 6h18" />
-      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-    </svg>
-  );
-}

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

@@ -1,22 +0,0 @@
-// 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 UploadIcon(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 3v12" />
-      <path d="m17 8-5-5-5 5" />
-      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-    </svg>
-  );
-}

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

@@ -1,21 +0,0 @@
-// 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 UserIcon(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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-}

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

@@ -1,23 +0,0 @@
-// 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/Icon/icons/x.tsx

@@ -1,21 +0,0 @@
-// 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 XIcon(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="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}

package/src/components/IconPicker/IconPicker.module.css

@@ -1,63 +0,0 @@
-.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

@@ -1,84 +0,0 @@
-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

@@ -1,90 +0,0 @@
-'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/Input/Input.module.css

@@ -1,52 +0,0 @@
-.input {
-  display: block;
-  width: 100%;
-  /* 36px rendered height. Explicit height + border-box (rather than
-     deriving height from padding and line-height) gives an exact,
-     browser-independent target instead of an approximation. */
-  height: 36px;
-  box-sizing: border-box;
-  padding: 4px 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 (tab and standalone PWA) auto-zooms the page whenever a focused
-   input's font-size is below 16px. The viewport intentionally allows pinch-zoom
-   (no maximum-scale — an accessibility requirement), so the only way to stop the
-   focus-zoom is to render the field at >=16px on touch devices. */
-@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:read-only {
-  background-color: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-  border-color: var(--sv-color-border);
-  cursor: default;
-}
-
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/components/Input/Input.stories.tsx

@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input } from './Input';
-
-// Wrap in a label so a11y checks pass (Input is a bare <input> — no built-in
-// label association).
-function Labeled({ label, ...props }: React.ComponentProps<typeof Input> & { label: string }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-      <label
-        htmlFor="sb-input"
-        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
-      >
-        {label}
-      </label>
-      <Input id="sb-input" {...props} />
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The primitive text field. RSC-safe; forwards all native `<input>` props. No label is built-in — always pair with a `<label>` for accessibility.',
-      },
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Text: Story = {
-  render: (_args) => <Labeled label="Display name" type="text" placeholder="e.g. Jane Smith" />,
-};
-
-export const Email: Story = {
-  render: (_args) => <Labeled label="Email address" type="email" placeholder="you@example.com" />,
-};
-
-export const Password: Story = {
-  render: (_args) => <Labeled label="Password" type="password" placeholder="••••••••" />,
-};
-
-export const Disabled: Story = {
-  render: (_args) => (
-    <Labeled label="Read-only field" type="text" defaultValue="Cannot be changed" disabled />
-  ),
-};
-
-/** Mimics an error state — the container adds red border via CSS token. */
-export const ErrorState: Story = {
-  render: (_args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-      <label
-        htmlFor="sb-input-err"
-        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
-      >
-        Email address
-      </label>
-      <Input
-        id="sb-input-err"
-        type="email"
-        defaultValue="not-an-email"
-        aria-invalid="true"
-        aria-describedby="sb-input-err-msg"
-        style={{
-          borderColor: 'var(--sv-color-error-border)',
-          outline: 'none',
-        }}
-      />
-      <span
-        id="sb-input-err-msg"
-        style={{ fontSize: 12, color: 'var(--sv-color-error-text)', fontFamily: 'system-ui' }}
-      >
-        Enter a valid email address.
-      </span>
-    </div>
-  ),
-};

package/src/components/Input/Input.tsx

@@ -1,14 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import styles from './Input.module.css';
-
-export type InputProps = InputHTMLAttributes<HTMLInputElement>;
-
-/**
- * Input — the primitive text field. Presentational and RSC-safe: it forwards
- * all native input props to the underlying `<input>`. Styling references
- * `--sv-*` tokens via CSS Modules; there are no hardcoded values.
- */
-export function Input({ type = 'text', className, ...rest }: InputProps) {
-  const classes = [styles.input, className].filter(Boolean).join(' ');
-  return <input type={type} className={classes} {...rest} />;
-}

package/src/components/Input/__tests__/Input.test.tsx

@@ -1,22 +0,0 @@
-// @vitest-environment jsdom
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Input } from '../Input';
-
-describe('Input', () => {
-  it('renders and forwards native props', () => {
-    render(<Input placeholder="Email" defaultValue="a@b.c" />);
-    const input = screen.getByPlaceholderText('Email') as HTMLInputElement;
-    expect(input.value).toBe('a@b.c');
-  });
-
-  it('defaults to type="text"', () => {
-    render(<Input aria-label="field" />);
-    expect((screen.getByLabelText('field') as HTMLInputElement).type).toBe('text');
-  });
-
-  it('honours an explicit type', () => {
-    render(<Input aria-label="pw" type="password" />);
-    expect((screen.getByLabelText('pw') as HTMLInputElement).type).toBe('password');
-  });
-});