@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Select/__tests__/Select.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 { Select } from '../Select';
-
-afterEach(cleanup);
-
-describe('Select', () => {
-  it('renders a combobox', () => {
-    render(
-      <Select aria-label="Role">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-      </Select>,
-    );
-    expect(screen.getByRole('combobox', { name: 'Role' })).toBeDefined();
-  });
-
-  it('renders provided options', () => {
-    render(
-      <Select aria-label="Role">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-        <option value="owner">Owner</option>
-      </Select>,
-    );
-    expect(screen.getAllByRole('option').length).toBe(3);
-  });
-
-  it('forwards value and onChange', () => {
-    const onChange = vi.fn();
-    render(
-      <Select aria-label="Role" value="user" onChange={onChange}>
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-      </Select>,
-    );
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'admin' } });
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  it('is disabled when the disabled prop is set', () => {
-    render(
-      <Select aria-label="Role" disabled>
-        <option value="user">User</option>
-      </Select>,
-    );
-    expect((screen.getByRole('combobox') as HTMLSelectElement).disabled).toBe(true);
-  });
-
-  it('renders a decorative chevron element', () => {
-    const { container } = render(
-      <Select aria-label="Role">
-        <option value="user">User</option>
-      </Select>,
-    );
-    expect(container.querySelector('[aria-hidden]')).toBeDefined();
-  });
-});

package/src/components/Sheet/Sheet.module.css

@@ -1,55 +0,0 @@
-/* Sheet — fills the same rect as a plugin's content area (between the shell's
- * sticky header and footer nav — see --sv-shell-header-height /
- * --sv-shell-footer-height, set by the shell), sliding in from an edge
- * instead of Dialog's centered box or Drawer's partial-height sheet-over-
- * scrim. z-index matches Dialog/Drawer's scrim so it layers consistently
- * with any other overlay. No scrim of its own — see the component doc
- * comment for why. */
-
-.panel {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: var(--sv-shell-header-height, 0);
-  bottom: var(--sv-shell-footer-height, 0);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  background: var(--sv-color-surface);
-  outline: none;
-  transform: translateY(100%);
-  transition: transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-}
-
-.panelOpen {
-  transform: translateY(0);
-}
-
-/* Opt-in top variant (slideFrom="top") — a short options/actions menu opened
- * from a header button reads more naturally sliding down from that button's
- * edge than traveling up from off-screen bottom. :not(.panelOpen) is what
- * lets this coexist with .panelOpen above despite equal-looking single-class
- * specificity elsewhere in this file: its (0,2,0) beats .panelOpen's (0,1,0)
- * while closed/entering/closing, and yields to it (transform: translateY(0),
- * same value either direction) once open. */
-.panelFromTop:not(.panelOpen) {
-  transform: translateY(-100%);
-}
-
-/* See Dialog.module.css's identical rule for why 0.01ms rather than 0. */
-@media (prefers-reduced-motion: reduce) {
-  .panel {
-    transition-duration: 0.01ms;
-  }
-}
-
-/* Always the scroll container, with or without OverlayHeader present (see
- * Sheet.tsx). No opinionated padding here — matches Drawer's convention of
- * leaving horizontal/top padding and safe-area-bottom clearance to the
- * content itself, since a Sheet's content shape varies far more than a
- * fixed-size Dialog's. */
-.content {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}

package/src/components/Sheet/Sheet.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { type ReactNode, useRef } from 'react';
-import { useMountTransition, usePrefersReducedMotion } from '../../motion';
-import {
-  useOverlayFocusCapture,
-  useOverlayKeyboardTrap,
-  useOverlayScrollLock,
-} from '../../overlay-shell';
-import { OverlayHeader } from '../OverlayHeader/OverlayHeader';
-import styles from './Sheet.module.css';
-
-export interface SheetProps {
-  /** Whether the sheet is shown. When false, nothing renders. */
-  open: boolean;
-  /** Called on Esc, or the built-in `OverlayHeader`'s close button. There is
-   *  no scrim to tap — a Sheet replaces the content area it fills, not a
-   *  layer floating above it (see the component doc comment). */
-  onClose: () => void;
-  /** Accessible name for the sheet. Defaults to `title` when omitted. */
-  'aria-label'?: string;
-  /** Renders a built-in `OverlayHeader` (title + close, optional back button
-   *  and trailing action). Omit when the content supplies its own header —
-   *  e.g. a form whose title doubles as an editable field. */
-  title?: string;
-  /** Forwarded to `OverlayHeader` — see its own `onBack` doc. Has no effect
-   *  without `title`. */
-  onBack?: () => void;
-  /** Forwarded to `OverlayHeader`'s trailing-action slot. Has no effect
-   *  without `title`. */
-  headerAction?: ReactNode;
-  /**
-   * Which edge the panel slides in from. Defaults to `'bottom'` (detail
-   * views, forms — content the user is reaching down into). `'top'` suits a
-   * short options/actions menu opened from a header button near the top of
-   * the screen, where sliding up from the bottom would travel past empty
-   * space before reaching content that visually belongs near the trigger.
-   */
-  slideFrom?: 'bottom' | 'top';
-  children: ReactNode;
-}
-
-// Matches --sv-motion-duration-base (Sheet.module.css) — see Dialog.tsx's
-// identical constant for why this stays a plain JS number.
-const MOTION_DURATION_MS = 250;
-
-/**
- * Sheet — a full-page overlay that replaces a plugin's content area between
- * the shell's fixed header and footer (RFC 0013's mobile chrome stays visible
- * and interactive around it), sliding in from an edge instead of centering
- * like `Dialog`. Promoted from the tasks plugin's `MobileFullPageOverlay`
- * (now the reference pattern for this component). Desktop has no equivalent
- * presentation — a desktop layout shows the same content inline (columns,
- * panes) instead of mounting a `Sheet` at all; this component is for the
- * mobile case specifically.
- *
- * Unlike `Dialog`/`Drawer` there is no scrim: a Sheet visually *replaces* the
- * region it covers rather than floating a layer above it, so there is no
- * "outside" to tap-dismiss. Behaviour: Esc dismisses; focus moves into the
- * panel on open and is restored on close; Tab is trapped within the panel;
- * animated open/close via the same two-phase mount as `Dialog`/`Drawer`,
- * respecting `prefers-reduced-motion`.
- */
-export function Sheet({
-  open,
-  onClose,
-  'aria-label': ariaLabel,
-  title,
-  onBack,
-  headerAction,
-  slideFrom = 'bottom',
-  children,
-}: SheetProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const reducedMotion = usePrefersReducedMotion();
-  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS);
-
-  useOverlayScrollLock(mounted);
-  useOverlayFocusCapture(panelRef, mounted);
-  useOverlayKeyboardTrap(panelRef, open, onClose);
-
-  if (!mounted) return null;
-
-  return (
-    <div
-      ref={panelRef}
-      role="dialog"
-      aria-modal="true"
-      aria-label={ariaLabel ?? title}
-      tabIndex={-1}
-      className={[
-        styles.panel,
-        slideFrom === 'top' ? styles.panelFromTop : '',
-        phase === 'open' ? styles.panelOpen : '',
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {title && (
-        <OverlayHeader title={title} onClose={onClose} onBack={onBack} action={headerAction} />
-      )}
-      {/* Content is always the scroll container — with or without a header —
-          so a header's sibling stays fixed and any content-owned internal
-          sticky positioning (e.g. a form's own sub-header) resolves against
-          this same scrolling ancestor either way. */}
-      <div className={styles.content}>{children}</div>
-    </div>
-  );
-}

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

@@ -1,99 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { Sheet } from '../Sheet';
-
-// Sheet's exit animation reads prefers-reduced-motion via matchMedia, which
-// jsdom does not implement — see Dialog.test.tsx's identical setup.
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches: false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-describe('Sheet', () => {
-  beforeEach(installMatchMedia);
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders nothing when closed', () => {
-    render(
-      <Sheet open={false} onClose={() => {}}>
-        Body
-      </Sheet>,
-    );
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('renders the panel with its accessible name when open', () => {
-    render(
-      <Sheet open onClose={() => {}} aria-label="Task detail">
-        Body
-      </Sheet>,
-    );
-    const panel = screen.getByRole('dialog', { name: 'Task detail' });
-    expect(panel.getAttribute('aria-modal')).toBe('true');
-  });
-
-  it('falls back to title for the accessible name when aria-label is omitted', () => {
-    render(
-      <Sheet open onClose={() => {}} title="Edit list">
-        Body
-      </Sheet>,
-    );
-    expect(screen.getByRole('dialog', { name: 'Edit list' })).toBeTruthy();
-  });
-
-  it('does not render OverlayHeader when title is omitted (headerless escape hatch)', () => {
-    render(
-      <Sheet open onClose={() => {}} aria-label="Custom">
-        <button type="button">Own close button</button>
-      </Sheet>,
-    );
-    // Only the content's own button — no OverlayHeader close button.
-    expect(screen.getAllByRole('button')).toHaveLength(1);
-  });
-
-  it('renders OverlayHeader (title + close) when title is provided', () => {
-    const onClose = vi.fn();
-    render(
-      <Sheet open onClose={onClose} title="Edit list">
-        Body
-      </Sheet>,
-    );
-    expect(screen.getByText('Edit list')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('calls onClose on Escape', () => {
-    const onClose = vi.fn();
-    render(
-      <Sheet open onClose={onClose} aria-label="Panel">
-        Body
-      </Sheet>,
-    );
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('applies the top slide-from variant class', () => {
-    render(
-      <Sheet open onClose={() => {}} aria-label="Menu" slideFrom="top">
-        Body
-      </Sheet>,
-    );
-    expect(screen.getByRole('dialog').className).toMatch(/panelFromTop/);
-  });
-});

package/src/components/Slider/Slider.module.css

@@ -1,95 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-}
-
-.label {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-}
-
-.slider {
-  appearance: none;
-  width: 100%;
-  height: 20px;
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-}
-
-/* Expand the vertical hit area for touch dragging without thickening the
-   visible track — same rationale as Button/Checkbox's touch-target
-   expansion, gated to the primary pointer. */
-@media (pointer: coarse) {
-  .slider {
-    height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-.slider:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.slider:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-/* Track — WebKit/Blink. The filled portion is a gradient computed from the
-   --slider-fill custom property the component sets inline; no JS-measured
-   pixel math, just a CSS variable driving a hard color stop. */
-.slider::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: linear-gradient(
-    to right,
-    var(--sv-color-accent) var(--slider-fill),
-    var(--sv-color-border-strong) var(--slider-fill)
-  );
-}
-
-.slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  margin-top: -6px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  box-shadow: var(--sv-shadow-control);
-  cursor: pointer;
-}
-
-.slider:disabled::-webkit-slider-thumb {
-  cursor: not-allowed;
-}
-
-/* Track — Firefox. Separate track/progress pseudo-elements instead of a
-   gradient — Firefox renders the filled portion natively via
-   ::-moz-range-progress. */
-.slider::-moz-range-track {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-border-strong);
-}
-
-.slider::-moz-range-progress {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-}
-
-.slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border: none;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  box-shadow: var(--sv-shadow-control);
-  cursor: pointer;
-}
-
-.slider:disabled::-moz-range-thumb {
-  cursor: not-allowed;
-}

package/src/components/Slider/Slider.stories.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slider } from './Slider';
-
-const meta = {
-  title: 'Components/Slider',
-  component: Slider,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Single-thumb range input. A native <input type="range"> under custom styling — arrow keys, Home/End, and touch-drag all come from the browser.',
-      },
-    },
-  },
-  args: {
-    value: 50,
-    onChange: () => {},
-    min: 0,
-    max: 100,
-    'aria-label': 'Value',
-  },
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return <Slider {...args} value={value} onChange={setValue} />;
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return <Slider {...args} label="Volume" value={value} onChange={setValue} />;
-  },
-};
-
-export const AtMin: Story = {
-  args: { value: 0 },
-};
-
-export const AtMax: Story = {
-  args: { value: 100 },
-};
-
-export const SteppedRange: Story = {
-  render: (_args) => {
-    const [value, setValue] = useState(5);
-    return (
-      <Slider value={value} onChange={setValue} min={0} max={10} step={1} label="Rating (0–10)" />
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};

package/src/components/Slider/Slider.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { useId } from 'react';
-import type { CSSProperties } from 'react';
-import styles from './Slider.module.css';
-
-export interface SliderProps {
-  value: number;
-  onChange: (value: number) => void;
-  min: number;
-  max: number;
-  step?: number;
-  /** Renders a visible label above the track. Omit and pass `aria-label`
-   * instead for a standalone, unlabeled slider. */
-  label?: string;
-  disabled?: boolean;
-  id?: string;
-  className?: string;
-  'aria-label'?: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  required?: boolean;
-}
-
-/**
- * Slider — single-thumb range input.
- *
- * A native `<input type="range">` under custom track/thumb styling — arrow
- * key (adjust by `step`), Home/End (jump to min/max), and touch-drag
- * support all come from the browser, nothing hand-rolled. Dual-thumb/range
- * selection is out of scope until a consumer needs it.
- */
-export function Slider({
-  value,
-  onChange,
-  min,
-  max,
-  step,
-  label,
-  disabled,
-  id,
-  className,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  'aria-invalid': ariaInvalid,
-  required,
-}: SliderProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const fillPercent = max > min ? ((value - min) / (max - min)) * 100 : 0;
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {label && (
-        <label htmlFor={inputId} className={styles.label}>
-          {label}
-        </label>
-      )}
-      <input
-        id={inputId}
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        disabled={disabled}
-        required={required}
-        aria-label={label ? undefined : ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={ariaInvalid}
-        className={styles.slider}
-        style={{ '--slider-fill': `${fillPercent}%` } as CSSProperties}
-        onChange={(e) => onChange(Number(e.target.value))}
-      />
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Slider } from '../Slider';
-
-afterEach(cleanup);
-
-describe('Slider', () => {
-  it('renders a range input with the given min/max/value', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
-    const input = screen.getByRole('slider') as HTMLInputElement;
-    expect(input.min).toBe('0');
-    expect(input.max).toBe('100');
-    expect(input.value).toBe('50');
-  });
-
-  it('calls onChange with a number when the value changes', () => {
-    const onChange = vi.fn();
-    render(<Slider value={50} onChange={onChange} min={0} max={100} aria-label="Volume" />);
-    fireEvent.change(screen.getByRole('slider'), { target: { value: '75' } });
-    expect(onChange).toHaveBeenCalledWith(75);
-  });
-
-  it('respects a step prop', () => {
-    render(<Slider value={5} onChange={() => {}} min={0} max={10} step={5} aria-label="Volume" />);
-    expect((screen.getByRole('slider') as HTMLInputElement).step).toBe('5');
-  });
-
-  it('renders a visible label and associates it via htmlFor', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} label="Volume" />);
-    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
-  });
-
-  it('falls back to aria-label when no visible label is given', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
-    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
-  });
-
-  it('disables the input when disabled is set', () => {
-    render(
-      <Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" disabled />,
-    );
-    expect(screen.getByRole('slider')).toHaveProperty('disabled', true);
-  });
-});

package/src/components/Spinner/Spinner.module.css

@@ -1,39 +0,0 @@
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner {
-  display: inline-block;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: var(--sv-color-border);
-  border-top-color: var(--sv-color-accent);
-  animation: spin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation-play-state: paused;
-  }
-}
-
-.sm {
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-  border-width: 2px;
-}
-
-.md {
-  width: var(--sv-icon-size-md);
-  height: var(--sv-icon-size-md);
-  border-width: 2px;
-}
-
-.lg {
-  width: var(--sv-icon-size-lg);
-  height: var(--sv-icon-size-lg);
-  border-width: 3px;
-}

package/src/components/Spinner/Spinner.tsx

@@ -1,23 +0,0 @@
-import styles from './Spinner.module.css';
-
-export interface SpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
-  label?: string;
-  className?: string;
-}
-
-const sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {
-  sm: styles.sm as string,
-  md: styles.md as string,
-  lg: styles.lg as string,
-};
-
-export function Spinner({ size = 'md', label = 'Loading…', className }: SpinnerProps) {
-  return (
-    <span
-      role="status"
-      aria-label={label}
-      className={[styles.spinner, sizeClass[size], className].filter(Boolean).join(' ')}
-    />
-  );
-}