@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import styles from './SegmentedControl.module.css';
-
-export interface SegmentedOption<T extends string = string> {
-  label: string;
-  value: T;
-}
-
-export interface SegmentedControlProps<T extends string = string> {
-  value: T;
-  onChange: (value: T) => void;
-  options: SegmentedOption<T>[];
-  size?: 'sm' | 'md';
-  'aria-label': string;
-}
-
-/**
- * SegmentedControl — pill-based 2–3 option picker for inline use in table rows
- * and dialogs (e.g. User / Admin / Owner role switcher).
- *
- * Renders as `<div role="radiogroup">` with `<button role="radio">` children —
- * correct semantics without a native `<input type="radio">` (which needs an id/name
- * pair and a `<form>` context to function correctly in all browsers).
- */
-export function SegmentedControl<T extends string = string>({
-  value,
-  onChange,
-  options,
-  size = 'md',
-  'aria-label': ariaLabel,
-}: SegmentedControlProps<T>) {
-  return (
-    <div
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={[styles.track, styles[size]].join(' ')}
-    >
-      {options.map((opt) => {
-        const active = opt.value === value;
-        return (
-          <button
-            key={opt.value}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            className={[styles.segment, active ? styles.active : styles.inactive].join(' ')}
-            onClick={() => onChange(opt.value)}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,63 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-
-afterEach(cleanup);
-import { SegmentedControl } from '../SegmentedControl';
-
-const options = [
-  { label: 'User', value: 'user' as const },
-  { label: 'Admin', value: 'admin' as const },
-  { label: 'Owner', value: 'owner' as const },
-];
-
-describe('SegmentedControl', () => {
-  it('renders all options as radio buttons', () => {
-    render(
-      <SegmentedControl value="user" onChange={() => {}} options={options} aria-label="Role" />,
-    );
-    expect(screen.getAllByRole('radio').length).toBe(3);
-  });
-
-  it('marks the active option as checked', () => {
-    render(
-      <SegmentedControl value="admin" onChange={() => {}} options={options} aria-label="Role" />,
-    );
-    expect(screen.getByRole('radio', { name: 'Admin' }).getAttribute('aria-checked')).toBe('true');
-    expect(screen.getByRole('radio', { name: 'User' }).getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('calls onChange with the selected value on click', () => {
-    const onChange = vi.fn();
-    render(
-      <SegmentedControl value="user" onChange={onChange} options={options} aria-label="Role" />,
-    );
-    fireEvent.click(screen.getByRole('radio', { name: 'Admin' }));
-    expect(onChange).toHaveBeenCalledWith('admin');
-  });
-
-  it('exposes a radiogroup with the given aria-label', () => {
-    render(
-      <SegmentedControl
-        value="user"
-        onChange={() => {}}
-        options={options}
-        aria-label="Select role"
-      />,
-    );
-    expect(screen.getByRole('radiogroup', { name: 'Select role' })).toBeDefined();
-  });
-
-  it('applies size class to the track', () => {
-    const { container } = render(
-      <SegmentedControl
-        value="user"
-        onChange={() => {}}
-        options={options}
-        size="sm"
-        aria-label="Role"
-      />,
-    );
-    expect((container.firstChild as HTMLElement).className).toContain('sm');
-  });
-});

package/src/components/Select/Select.module.css

@@ -1,82 +0,0 @@
-/* Wrapper provides the positioning context for the custom chevron */
-.wrapper {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.select {
-  display: block;
-  width: 100%;
-  /* 36px rendered height. Explicit height + border-box, same technique as
-     Input. Right-pad to clear the custom chevron. */
-  height: 36px;
-  box-sizing: border-box;
-  padding: 4px var(--sv-space-8) 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: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  cursor: pointer;
-  /* Remove native OS chevron */
-  appearance: none;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* sm — compact for table cells and inline controls. 32px height. */
-.sm .select {
-  height: 32px;
-  padding: 2px var(--sv-space-6) 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.4;
-  border-radius: var(--sv-radius-sm);
-}
-
-/* iOS Safari zooms the page when a <select> under 16px receives focus, exactly
-   as it does for text inputs. Lift the default size to >=16px on touch devices;
-   the compact `.sm` variant is for dense desktop tables and is left untouched. */
-@media (pointer: coarse) {
-  .select {
-    font-size: var(--sv-font-size-md);
-  }
-}
-
-.select:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Compact size variant — reduced padding for table-cell usage */
-.sm .select {
-  padding-top: var(--sv-space-1);
-  padding-bottom: var(--sv-space-1);
-  font-size: var(--sv-font-size-sm);
-}
-
-/* SVG chevron — matches the icon stroke style used across the UI */
-.chevron {
-  pointer-events: none;
-  position: absolute;
-  right: var(--sv-space-3);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--sv-color-text-muted);
-  flex-shrink: 0;
-}
-
-.sm .chevron {
-  right: var(--sv-space-2);
-  width: 10px;
-  height: 10px;
-}

package/src/components/Select/Select.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Select';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Styled native `<select>` — same visual language as `Input`. Preserves native picker on mobile for maximum accessibility. RSC-safe.',
-      },
-    },
-  },
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (_args) => (
-    <div style={{ width: 280, fontFamily: 'var(--sv-font-family)' }}>
-      <label
-        htmlFor="role-select"
-        style={{
-          display: 'block',
-          marginBottom: 4,
-          fontSize: 'var(--sv-font-size-sm)',
-          fontWeight: 'var(--sv-font-weight-medium)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        Role
-      </label>
-      <Select id="role-select" defaultValue="user">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-        <option value="owner">Owner</option>
-      </Select>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: (_args) => (
-    <div style={{ width: 280 }}>
-      <Select disabled defaultValue="user">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-      </Select>
-    </div>
-  ),
-};
-
-/** Form context — several fields together matching the spec layout. */
-export const FormContext: Story = {
-  render: (_args) => {
-    const fieldStyle: React.CSSProperties = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 4,
-    };
-    const labelStyle: React.CSSProperties = {
-      fontSize: 'var(--sv-font-size-sm)',
-      fontWeight: 'var(--sv-font-weight-medium)',
-      color: 'var(--sv-color-text-primary)',
-      fontFamily: 'var(--sv-font-family)',
-    };
-
-    return (
-      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div style={fieldStyle}>
-          <label htmlFor="lang-select" style={labelStyle}>
-            Language
-          </label>
-          <Select id="lang-select" defaultValue="en-us">
-            <option value="en-us">English (US)</option>
-            <option value="en-gb">English (UK)</option>
-            <option value="fr">Français</option>
-            <option value="de">Deutsch</option>
-            <option value="ja">日本語</option>
-          </Select>
-        </div>
-        <div style={fieldStyle}>
-          <label htmlFor="tz-select" style={labelStyle}>
-            Timezone
-          </label>
-          <Select id="tz-select" defaultValue="asia-colombo">
-            <option value="asia-colombo">Asia/Colombo (UTC+5:30)</option>
-            <option value="utc">UTC</option>
-            <option value="america-ny">America/New_York (UTC−5)</option>
-            <option value="europe-london">Europe/London (UTC+0)</option>
-          </Select>
-        </div>
-        <div style={fieldStyle}>
-          <label htmlFor="poll-select" style={labelStyle}>
-            Poll interval
-          </label>
-          <Select id="poll-select" defaultValue="30">
-            <option value="15">Every 15 seconds</option>
-            <option value="30">Every 30 seconds</option>
-            <option value="60">Every minute</option>
-            <option value="300">Every 5 minutes</option>
-          </Select>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Select/Select.tsx

@@ -1,48 +0,0 @@
-import type { SelectHTMLAttributes } from 'react';
-import styles from './Select.module.css';
-
-export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
-  /** 'md' (default) — standard form field height. 'sm' — compact for table cells and inline controls. */
-  size?: 'sm' | 'md';
-};
-
-/**
- * Select — styled wrapper around the native `<select>`. Inherits the same
- * height, border, radius, and focus ring as `Input` for visual consistency.
- * Uses the native picker on mobile — no custom dropdown, maximum a11y coverage.
- *
- * RSC-safe: presentational, no hooks, forwards all native select props.
- *
- * `className` sizes the outer box (the wrapper), not the `<select>` itself —
- * the chevron is absolutely positioned against the wrapper, so a className
- * that constrains only the `<select>` (e.g. `max-width`) shrinks the select
- * while the wrapper (and thus the chevron) stays full width, leaving the
- * chevron stranded past the visible box.
- */
-export function Select({ className, size = 'md', children, ...rest }: SelectProps) {
-  return (
-    <div
-      className={[styles.wrapper, size === 'sm' ? styles.sm : undefined, className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <select className={styles.select} {...rest}>
-        {children}
-      </select>
-      <svg
-        className={styles.chevron}
-        aria-hidden="true"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="6 9 12 15 18 9" />
-      </svg>
-    </div>
-  );
-}

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,58 +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 platform shell or, for a plugin that
- * self-renders MobileHeader/MobileFooter instead (shellConfig.mobileHeader/
- * mobileFooter: false), by that component itself — see
- * usePublishShellChromeHeight), 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 {
-  OVERLAY_MOTION_DURATION_MS,
-  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;
-}
-
-/**
- * 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 : OVERLAY_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/);
-  });
-});