@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Progress/Progress.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Progress } from './Progress';
-
-const meta = {
-  title: 'Components/Progress',
-  component: Progress,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Determinate progress bar. role="progressbar" with aria-valuenow/min/max so screen readers announce the current value. Indeterminate state is out of scope.',
-      },
-    },
-  },
-  args: {
-    value: 40,
-    label: 'Upload progress',
-  },
-} satisfies Meta<typeof Progress>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: { value: 0 },
-};
-
-export const Complete: Story = {
-  args: { value: 100 },
-};
-
-export const OverMax: Story = {
-  name: 'Clamped (value > 100)',
-  args: { value: 140 },
-};

package/src/components/Progress/Progress.tsx

@@ -1,35 +0,0 @@
-import styles from './Progress.module.css';
-
-export interface ProgressProps {
-  /** 0–100. Values outside that range are clamped. */
-  value: number;
-  /** Accessible name — Progress has no visible text of its own. */
-  label?: string;
-  id?: string;
-  className?: string;
-}
-
-/**
- * Progress — determinate bar.
- *
- * `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * so screen readers announce the current value. Indeterminate state is out
- * of scope until a consumer needs it.
- */
-export function Progress({ value, label, id, className }: ProgressProps) {
-  const clamped = Math.min(100, Math.max(0, value));
-
-  return (
-    <div
-      id={id}
-      role="progressbar"
-      aria-valuenow={clamped}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-label={label}
-      className={[styles.track, className].filter(Boolean).join(' ')}
-    >
-      <div className={styles.fill} style={{ width: `${clamped}%` }} />
-    </div>
-  );
-}

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

@@ -1,31 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Progress } from '../Progress';
-
-afterEach(cleanup);
-
-describe('Progress', () => {
-  it('exposes progressbar ARIA attributes for the given value', () => {
-    render(<Progress value={40} label="Upload progress" />);
-    const bar = screen.getByRole('progressbar', { name: 'Upload progress' });
-    expect(bar.getAttribute('aria-valuenow')).toBe('40');
-    expect(bar.getAttribute('aria-valuemin')).toBe('0');
-    expect(bar.getAttribute('aria-valuemax')).toBe('100');
-  });
-
-  it('clamps a value above 100', () => {
-    render(<Progress value={140} label="Upload progress" />);
-    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('100');
-  });
-
-  it('clamps a negative value to 0', () => {
-    render(<Progress value={-10} label="Upload progress" />);
-    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('0');
-  });
-
-  it('renders without an accessible name when label is omitted', () => {
-    render(<Progress value={40} />);
-    expect(screen.getByRole('progressbar').getAttribute('aria-label')).toBeNull();
-  });
-});

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

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

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

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

@@ -1,88 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-}
-
-.option {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  cursor: pointer;
-}
-
-/* The visual circle — same 18px size and touch-target-expansion technique
-   as Checkbox's box, radius-full instead of radius-sm. */
-.circle {
-  --radio-circle-size: 18px;
-  position: relative;
-  flex-shrink: 0;
-  width: var(--radio-circle-size);
-  height: var(--radio-circle-size);
-  border-radius: var(--sv-radius-full);
-  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 {
-  border-color: var(--sv-color-accent);
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  pointer-events: none;
-}
-
-/* Hide the native input visually but keep it accessible */
-.input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-.input:disabled {
-  cursor: not-allowed;
-}
-
-/* Expand the tappable region to the platform's minimum touch target without
-   growing the visible circle. Gated to (pointer: coarse), the *primary*
-   pointer, so a touchscreen laptop with mouse/trackpad as primary keeps
-   desktop density — same reasoning as Checkbox. */
-@media (pointer: coarse) {
-  .input {
-    inset: calc((var(--radio-circle-size) - var(--sv-touch-target-min, 44px)) / 2);
-  }
-}
-
-.input:focus-visible {
-  outline: none;
-}
-
-.circle:has(.input:focus-visible) {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.optionLabel {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-  user-select: none;
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,69 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { RadioGroup } from './RadioGroup';
-import { FormField } from '../FormField/FormField';
-
-const meta = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Single-select list of options. Renders real `<input type="radio">` elements sharing one `name`, so keyboard arrow-key navigation between options is native browser behavior.',
-      },
-    },
-  },
-  args: {
-    items: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-    value: 'md',
-    onChange: () => {},
-    'aria-label': 'Size',
-  },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return <RadioGroup {...args} value={value} onChange={setValue} />;
-  },
-};
-
-export const WithDisabledItem: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return (
-      <RadioGroup
-        {...args}
-        items={[...args.items, { label: 'X-Large (out of stock)', value: 'xl', disabled: true }]}
-        value={value}
-        onChange={setValue}
-      />
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const InFormField: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return (
-      <FormField label="Shirt size" error="Select a size to continue.">
-        {(field) => <RadioGroup {...args} {...field} value={value} onChange={setValue} />}
-      </FormField>
-    );
-  },
-};

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import { useId } from 'react';
-import styles from './RadioGroup.module.css';
-
-export interface RadioGroupItem {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps {
-  items: RadioGroupItem[];
-  value: string;
-  onChange: (value: string) => void;
-  /** Groups the underlying native radios. Auto-generated when omitted —
-   * only pass this to participate in a native, non-React form submission. */
-  name?: string;
-  /** Disables every item. Use `items[].disabled` to disable one. */
-  disabled?: boolean;
-  id?: string;
-  className?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  required?: boolean;
-}
-
-/**
- * RadioGroup — single-select list of options.
- *
- * Renders real `<input type="radio">` elements sharing one `name`, visually
- * hidden behind a custom circle (same technique as `Checkbox`). Keyboard
- * arrow-key navigation between options is native browser behavior for
- * grouped radio inputs — nothing to hand-roll here.
- */
-export function RadioGroup({
-  items,
-  value,
-  onChange,
-  name,
-  disabled,
-  id,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-describedby': ariaDescribedBy,
-  'aria-invalid': ariaInvalid,
-  required,
-}: RadioGroupProps) {
-  const generatedName = useId();
-  const groupName = name ?? generatedName;
-
-  return (
-    <div
-      id={id}
-      role="radiogroup"
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={ariaInvalid}
-      aria-required={required}
-      className={[styles.root, className].filter(Boolean).join(' ')}
-    >
-      {items.map((item) => {
-        const checked = item.value === value;
-        const itemDisabled = disabled || item.disabled;
-        const inputId = `${groupName}-${item.value}`;
-
-        return (
-          <label
-            key={item.value}
-            htmlFor={inputId}
-            className={[styles.option, itemDisabled ? styles.disabled : '']
-              .filter(Boolean)
-              .join(' ')}
-          >
-            <span className={[styles.circle, checked ? styles.checked : ''].join(' ')}>
-              <input
-                id={inputId}
-                type="radio"
-                name={groupName}
-                value={item.value}
-                checked={checked}
-                disabled={itemDisabled}
-                required={required}
-                className={styles.input}
-                onChange={() => onChange(item.value)}
-              />
-              {checked && <span className={styles.dot} />}
-            </span>
-            <span className={styles.optionLabel}>{item.label}</span>
-          </label>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,59 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { RadioGroup } from '../RadioGroup';
-
-afterEach(cleanup);
-
-const items = [
-  { label: 'Small', value: 'sm' },
-  { label: 'Medium', value: 'md' },
-  { label: 'Large', value: 'lg' },
-];
-
-describe('RadioGroup', () => {
-  it('renders all items as radio inputs', () => {
-    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" />);
-    expect(screen.getAllByRole('radio').length).toBe(3);
-  });
-
-  it('marks the matching item as checked', () => {
-    render(<RadioGroup items={items} value="md" onChange={() => {}} aria-label="Size" />);
-    expect(screen.getByRole('radio', { name: 'Medium' })).toHaveProperty('checked', true);
-    expect(screen.getByRole('radio', { name: 'Small' })).toHaveProperty('checked', false);
-  });
-
-  it('calls onChange with the selected value', () => {
-    const onChange = vi.fn();
-    render(<RadioGroup items={items} value="sm" onChange={onChange} aria-label="Size" />);
-    fireEvent.click(screen.getByRole('radio', { name: 'Large' }));
-    expect(onChange).toHaveBeenCalledWith('lg');
-  });
-
-  it('exposes a radiogroup with the given aria-label', () => {
-    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" />);
-    expect(screen.getByRole('radiogroup', { name: 'Size' })).toBeDefined();
-  });
-
-  it('shares one name across all items so native radio semantics apply', () => {
-    render(
-      <RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" name="size" />,
-    );
-    const radios = screen.getAllByRole('radio') as HTMLInputElement[];
-    expect(new Set(radios.map((r) => r.name)).size).toBe(1);
-  });
-
-  it('disables an individual item via items[].disabled', () => {
-    const withDisabled = [...items, { label: 'X-Large', value: 'xl', disabled: true }];
-    render(<RadioGroup items={withDisabled} value="sm" onChange={() => {}} aria-label="Size" />);
-    expect(screen.getByRole('radio', { name: 'X-Large' })).toHaveProperty('disabled', true);
-    expect(screen.getByRole('radio', { name: 'Small' })).toHaveProperty('disabled', false);
-  });
-
-  it('disables every item when the group-level disabled prop is set', () => {
-    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" disabled />);
-    for (const radio of screen.getAllByRole('radio')) {
-      expect(radio).toHaveProperty('disabled', true);
-    }
-  });
-});