@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,263 +0,0 @@
-// @vitest-environment jsdom
-import { StrictMode, useState } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Popover } from '../Popover';
-
-afterEach(cleanup);
-
-const trigger = <button type="button">Open</button>;
-
-describe('Popover', () => {
-  it('renders the trigger element', () => {
-    render(
-      <Popover open={false} onClose={() => {}} aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    expect(screen.getByRole('button', { name: 'Open' })).toBeDefined();
-  });
-
-  it('does not render the panel when closed', () => {
-    render(
-      <Popover open={false} onClose={() => {}} aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('renders the panel with children when open', () => {
-    render(
-      <Popover open={true} onClose={() => {}} aria-label="Menu" trigger={trigger}>
-        Panel content
-      </Popover>,
-    );
-    expect(screen.getByRole('dialog', { name: 'Menu' })).toBeDefined();
-    expect(screen.getByText('Panel content')).toBeDefined();
-  });
-
-  it('applies the right alignment class by default', () => {
-    render(
-      <Popover open={true} onClose={() => {}} aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('right');
-  });
-
-  it('applies the left alignment class when specified', () => {
-    render(
-      <Popover open={true} onClose={() => {}} align="left" aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('left');
-  });
-
-  it('calls onClose when Escape is pressed', () => {
-    const onClose = vi.fn();
-    render(
-      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('calls onClose when clicking outside the container', () => {
-    const onClose = vi.fn();
-    render(
-      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    fireEvent.mouseDown(document.body);
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  describe('Escape precedence with a nested Popover', () => {
-    it('defers Escape to a nested open Popover instead of closing the outer one', () => {
-      const outerOnClose = vi.fn();
-
-      function NestedHarness() {
-        // Starts closed and opens via a later click, matching the real
-        // sequence (e.g. a date-picker Popover opened from a field inside a
-        // Combobox's own popover content) — mounting both already-open in
-        // the same initial render would instead have React fire the child's
-        // registration effect before the parent's in that one shared commit,
-        // the one case this stack-order approach doesn't handle (see the
-        // equivalent Dialog+ConfirmDialog regression test's own note).
-        const [innerOpen, setInnerOpen] = useState(false);
-        return (
-          <Popover open={true} onClose={outerOnClose} aria-label="Outer" trigger={trigger}>
-            <button type="button" onClick={() => setInnerOpen(true)}>
-              Open inner
-            </button>
-            <Popover
-              open={innerOpen}
-              onClose={() => setInnerOpen(false)}
-              aria-label="Inner"
-              trigger={<span />}
-            >
-              Inner content
-            </Popover>
-          </Popover>
-        );
-      }
-
-      render(<NestedHarness />);
-      fireEvent.click(screen.getByRole('button', { name: 'Open inner' }));
-      expect(screen.getByRole('dialog', { name: 'Inner' })).toBeTruthy();
-
-      // The nested Popover is topmost — the outer Popover's own Escape
-      // listener must not act while it's open.
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(outerOnClose).not.toHaveBeenCalled();
-      expect(screen.queryByRole('dialog', { name: 'Inner' })).toBeNull();
-
-      // With the inner one dismissed, the outer Popover is topmost again —
-      // a second Escape now reaches it.
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(outerOnClose).toHaveBeenCalledOnce();
-    });
-  });
-
-  it('does not call onClose when clicking inside the panel', () => {
-    const onClose = vi.fn();
-    render(
-      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
-        <button type="button">Inside</button>
-      </Popover>,
-    );
-    fireEvent.mouseDown(screen.getByRole('button', { name: 'Inside' }));
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('applies the provided width as inline style', () => {
-    render(
-      <Popover open={true} onClose={() => {}} aria-label="Menu" width={320} trigger={trigger}>
-        Content
-      </Popover>,
-    );
-    expect((screen.getByRole('dialog') as HTMLElement).style.width).toBe('320px');
-  });
-
-  describe('horizontal viewport clamp', () => {
-    const rect = (partial: Partial<DOMRect>): DOMRect =>
-      ({
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        toJSON() {},
-        ...partial,
-      }) as DOMRect;
-
-    afterEach(() => {
-      vi.restoreAllMocks();
-    });
-
-    it('shifts the panel back on-screen when align="right" would overflow the left edge', () => {
-      // A 340px-wide panel right-aligned under a trigger sitting near the
-      // right edge of a 375px viewport (e.g. a mobile header bell) — its
-      // natural `right: 0` position runs off the left edge, mirroring the
-      // real KanbanNotificationBell overflow found live-testing at 375px.
-      Object.defineProperty(window, 'innerWidth', { value: 375, configurable: true });
-      Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true });
-      const containerRect = rect({ left: 275, right: 319, top: 12, bottom: 56 });
-      const panelRect = rect({
-        left: -21,
-        right: 319,
-        top: 64,
-        bottom: 200,
-        width: 340,
-        height: 136,
-      });
-      vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (
-        this: Element,
-      ) {
-        return this.getAttribute('role') === 'dialog' ? panelRect : containerRect;
-      });
-
-      render(
-        <Popover open={true} onClose={() => {}} aria-label="Menu" width={340} trigger={trigger}>
-          Content
-        </Popover>,
-      );
-
-      const panel = screen.getByRole('dialog') as HTMLElement;
-      // containerRect.left (275) + style.left must land the panel's left
-      // edge at the 4px viewport margin: 4 - 275 = -271.
-      expect(panel.style.left).toBe('-271px');
-      expect(panel.style.right).toBe('auto');
-    });
-
-    it('leaves alignment untouched when the panel already fits the viewport', () => {
-      Object.defineProperty(window, 'innerWidth', { value: 1280, configurable: true });
-      Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true });
-      const containerRect = rect({ left: 900, right: 944, top: 12, bottom: 56 });
-      const panelRect = rect({
-        left: 604,
-        right: 944,
-        top: 64,
-        bottom: 200,
-        width: 340,
-        height: 136,
-      });
-      vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (
-        this: Element,
-      ) {
-        return this.getAttribute('role') === 'dialog' ? panelRect : containerRect;
-      });
-
-      render(
-        <Popover open={true} onClose={() => {}} aria-label="Menu" width={340} trigger={trigger}>
-          Content
-        </Popover>,
-      );
-
-      const panel = screen.getByRole('dialog') as HTMLElement;
-      expect(panel.style.left).toBe('');
-      expect(panel.style.right).toBe('');
-    });
-
-    it('stays clamped under StrictMode double-invoked layout effects', () => {
-      // Regression test: an earlier version of this clamp measured the
-      // panel's *current* `left`/`right` off the DOM to decide whether a
-      // correction was needed. That's not idempotent — StrictMode's dev-only
-      // double-invoke of layout effects re-ran the same measurement against
-      // the panel's own just-applied correction, saw a rect that already
-      // looked fine, and reset `horizontalOffset` back to null before first
-      // paint (found live: the panel visibly overflowed again after HMR).
-      // The fix derives the natural position analytically from `containerRect`
-      // instead, which StrictMode's replay can't perturb.
-      Object.defineProperty(window, 'innerWidth', { value: 375, configurable: true });
-      Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true });
-      const containerRect = rect({ left: 275, right: 319, top: 12, bottom: 56 });
-      const panelWidthOnly = rect({ width: 340, height: 136, top: 64, bottom: 200 });
-      vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (
-        this: Element,
-      ) {
-        return this.getAttribute('role') === 'dialog' ? panelWidthOnly : containerRect;
-      });
-
-      render(
-        <StrictMode>
-          <Popover open={true} onClose={() => {}} aria-label="Menu" width={340} trigger={trigger}>
-            Content
-          </Popover>
-        </StrictMode>,
-      );
-
-      const panel = screen.getByRole('dialog') as HTMLElement;
-      expect(panel.style.left).toBe('-271px');
-      expect(panel.style.right).toBe('auto');
-    });
-  });
-});

package/src/components/Progress/Progress.module.css

@@ -1,20 +0,0 @@
-.track {
-  width: 100%;
-  height: 8px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-surface-sunken);
-  overflow: hidden;
-}
-
-.fill {
-  height: 100%;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  transition: width 0.2s ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .fill {
-    transition: none;
-  }
-}

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: var(--sv-border-width-hairline) 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>
-  );
-}