@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Input, type InputProps } from '../Input/Input';
-
-export interface CurrencyInputProps extends Omit<
-  InputProps,
-  'value' | 'onChange' | 'type' | 'inputMode'
-> {
-  /** Smallest currency unit (cents) — never a float. Null when the field is empty or unparsable. */
-  valueCents: number | null;
-  onValueChange: (cents: number | null) => void;
-}
-
-function centsToText(cents: number): string {
-  return (cents / 100).toFixed(2);
-}
-
-function textToCents(text: string): number | null {
-  const trimmed = text.trim();
-  if (!trimmed) return null;
-  const parsed = Number(trimmed);
-  if (!Number.isFinite(parsed)) return null;
-  return Math.round(parsed * 100);
-}
-
-/**
- * CurrencyInput — decimal amount entry that reports its value as integer
- * cents, matching Sovereign's "amounts are always smallest-unit integers"
- * data-model convention (never a float in application state).
- *
- * Keeps its own text buffer rather than deriving display text from
- * `valueCents` on every keystroke — reformatting mid-type (e.g. "12." → the
- * trailing decimal point) would fight the user's cursor. It only
- * re-syncs from `valueCents` when the prop changes to something the current
- * text doesn't already represent (an external reset/prefill), so typing
- * remains uninterrupted while the parsed amount stays in lockstep with the
- * parent's state.
- */
-export function CurrencyInput({ valueCents, onValueChange, ...rest }: CurrencyInputProps) {
-  const [text, setText] = useState(() => (valueCents != null ? centsToText(valueCents) : ''));
-
-  if (textToCents(text) !== valueCents) {
-    setText(valueCents != null ? centsToText(valueCents) : '');
-  }
-
-  return (
-    <Input
-      {...rest}
-      type="text"
-      inputMode="decimal"
-      value={text}
-      onChange={(e) => {
-        const next = e.currentTarget.value;
-        setText(next);
-        onValueChange(textToCents(next));
-      }}
-    />
-  );
-}

package/src/components/DataTable/DataTable.module.css

@@ -1,28 +0,0 @@
-.sortButton {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-  font: inherit;
-  font-weight: inherit;
-  cursor: pointer;
-}
-
-.sortButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-.sortIcon {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-  align-items: center;
-  justify-content: center;
-}

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DataTable, type DataTableColumn } from './DataTable';
-import { StatusBadge } from '../StatusBadge/StatusBadge';
-
-interface PluginRow {
-  id: string;
-  name: string;
-  installs: number;
-  status: 'synced' | 'draft';
-}
-
-const ROWS: PluginRow[] = [
-  { id: 'tasks', name: 'sovereign-tasks', installs: 482, status: 'synced' },
-  { id: 'ledger', name: 'sovereign-ledger', installs: 219, status: 'synced' },
-  { id: 'shopper', name: 'sovereign-shopper', installs: 37, status: 'draft' },
-  { id: 'healthlog', name: 'sovereign-healthlog', installs: 1204, status: 'synced' },
-];
-
-const columns: DataTableColumn<PluginRow>[] = [
-  { key: 'name', header: 'Plugin', sortable: true },
-  { key: 'installs', header: 'Installs', sortable: true, align: 'end' },
-  {
-    key: 'status',
-    header: 'Status',
-    render: (row) => <StatusBadge status={row.status} />,
-  },
-];
-
-const meta = {
-  title: 'Components/DataTable',
-  component: DataTable,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Sortable table built on Table. Column-driven: pass columns + data instead of composing TableRow/TableCell by hand. Clicking a sortable header cycles ascending → descending → unsorted.',
-      },
-    },
-  },
-  args: { columns: [], data: [], getRowKey: (row: PluginRow) => row.id },
-} satisfies Meta<typeof DataTable<PluginRow>>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: () => <DataTable columns={columns} data={ROWS} getRowKey={(row) => row.id} />,
-};
-
-export const DefaultSorted: Story = {
-  render: () => (
-    <DataTable
-      columns={columns}
-      data={ROWS}
-      getRowKey={(row) => row.id}
-      defaultSortKey="installs"
-      defaultSortDirection="desc"
-    />
-  ),
-};
-
-export const Empty: Story = {
-  render: () => (
-    <DataTable
-      columns={columns}
-      data={[]}
-      getRowKey={(row) => row.id}
-      emptyMessage="No plugins installed"
-    />
-  ),
-};

package/src/components/DataTable/DataTable.tsx

@@ -1,154 +0,0 @@
-'use client';
-
-import { useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../Table/Table';
-import { Icon } from '../Icon/Icon';
-import { EmptyState } from '../EmptyState/EmptyState';
-import styles from './DataTable.module.css';
-
-export type SortDirection = 'asc' | 'desc';
-
-export interface DataTableColumn<T> {
-  key: string;
-  header: string;
-  sortable?: boolean;
-  /** Cell content. Defaults to String(row[key]) when omitted. */
-  render?: (row: T) => ReactNode;
-  /** Value compared when sorting by this column. Defaults to row[key].
-   * Required if `key` isn't a property on T (a computed/joined column). */
-  sortValue?: (row: T) => string | number;
-  align?: 'start' | 'end';
-}
-
-export interface DataTableProps<T> {
-  columns: DataTableColumn<T>[];
-  data: T[];
-  getRowKey: (row: T) => string;
-  /** Initial sort — uncontrolled after mount, like Table itself has no
-   * externally-controlled state. */
-  defaultSortKey?: string;
-  defaultSortDirection?: SortDirection;
-  emptyMessage?: string;
-  className?: string;
-}
-
-function compareValues(a: string | number, b: string | number): number {
-  if (typeof a === 'number' && typeof b === 'number') return a - b;
-  return String(a).localeCompare(String(b));
-}
-
-/**
- * DataTable — sortable table built on Table's own primitives (no
- * virtualization or filtering — those stay out of scope, matching Table's
- * own "not a data grid" boundary). Column-driven: pass `columns` + `data`
- * rather than composing `<TableRow>`/`<TableCell>` by hand.
- *
- * Sort state is internal (uncontrolled) and click-cycles
- * ascending → descending → unsorted for a sortable column, mirroring the
- * "toggle → toggle → clear" pattern most sortable tables use rather than
- * being permanently stuck in whichever direction was clicked last.
- */
-export function DataTable<T>({
-  columns,
-  data,
-  getRowKey,
-  defaultSortKey,
-  defaultSortDirection = 'asc',
-  emptyMessage = 'No results.',
-  className,
-}: DataTableProps<T>) {
-  const [sortKey, setSortKey] = useState<string | undefined>(defaultSortKey);
-  const [sortDirection, setSortDirection] = useState<SortDirection>(defaultSortDirection);
-
-  const sortColumn = columns.find((c) => c.key === sortKey);
-
-  const sortedData = useMemo(() => {
-    if (!sortColumn) return data;
-    const getValue =
-      sortColumn.sortValue ??
-      ((row: T) => (row as Record<string, unknown>)[sortColumn.key] as string | number);
-    const sorted = [...data].sort((a, b) => compareValues(getValue(a), getValue(b)));
-    return sortDirection === 'asc' ? sorted : sorted.reverse();
-  }, [data, sortColumn, sortDirection]);
-
-  function handleSort(column: DataTableColumn<T>) {
-    if (!column.sortable) return;
-    if (sortKey !== column.key) {
-      setSortKey(column.key);
-      setSortDirection('asc');
-    } else if (sortDirection === 'asc') {
-      setSortDirection('desc');
-    } else {
-      setSortKey(undefined);
-      setSortDirection('asc');
-    }
-  }
-
-  if (data.length === 0) {
-    return <EmptyState heading={emptyMessage} />;
-  }
-
-  return (
-    <Table className={className}>
-      <TableHead>
-        <TableRow>
-          {columns.map((column) => {
-            const isSorted = sortKey === column.key;
-            const ariaSort = !column.sortable
-              ? undefined
-              : isSorted
-                ? sortDirection === 'asc'
-                  ? 'ascending'
-                  : 'descending'
-                : 'none';
-            return (
-              <TableHeaderCell
-                key={column.key}
-                aria-sort={ariaSort}
-                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
-              >
-                {column.sortable ? (
-                  <button
-                    type="button"
-                    className={styles.sortButton}
-                    onClick={() => handleSort(column)}
-                  >
-                    {column.header}
-                    <span className={styles.sortIcon}>
-                      {isSorted && (
-                        <Icon
-                          name={sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'}
-                          size="sm"
-                          aria-hidden
-                        />
-                      )}
-                    </span>
-                  </button>
-                ) : (
-                  column.header
-                )}
-              </TableHeaderCell>
-            );
-          })}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {sortedData.map((row) => (
-          <TableRow key={getRowKey(row)}>
-            {columns.map((column) => (
-              <TableCell
-                key={column.key}
-                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
-              >
-                {column.render
-                  ? column.render(row)
-                  : String((row as Record<string, unknown>)[column.key] ?? '')}
-              </TableCell>
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}

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

@@ -1,123 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
-import { DataTable, type DataTableColumn } from '../DataTable';
-
-afterEach(cleanup);
-
-interface Plugin {
-  id: string;
-  name: string;
-  installs: number;
-}
-
-const data: Plugin[] = [
-  { id: 'a', name: 'Charlie', installs: 12 },
-  { id: 'b', name: 'Alpha', installs: 30 },
-  { id: 'c', name: 'Bravo', installs: 5 },
-];
-
-const columns: DataTableColumn<Plugin>[] = [
-  { key: 'name', header: 'Name', sortable: true },
-  { key: 'installs', header: 'Installs', sortable: true, align: 'end' },
-];
-
-function rowsText() {
-  return screen
-    .getAllByRole('row')
-    .slice(1)
-    .map((row) => within(row).getAllByRole('cell')[0]?.textContent);
-}
-
-describe('DataTable', () => {
-  it('renders a row per data item and a header per column', () => {
-    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
-    expect(screen.getAllByRole('row')).toHaveLength(4); // 1 header + 3 body rows
-    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeDefined();
-    expect(screen.getByRole('columnheader', { name: 'Installs' })).toBeDefined();
-  });
-
-  it('renders cell values from row[key] by default', () => {
-    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
-    expect(screen.getByText('Charlie')).toBeDefined();
-    expect(screen.getByText('30')).toBeDefined();
-  });
-
-  it('uses a custom render function when provided', () => {
-    const withRender: DataTableColumn<Plugin>[] = [
-      { key: 'name', header: 'Name' },
-      { key: 'installs', header: 'Installs', render: (row) => `${row.installs} installs` },
-    ];
-    render(<DataTable columns={withRender} data={data} getRowKey={(row) => row.id} />);
-    expect(screen.getByText('30 installs')).toBeDefined();
-  });
-
-  it('shows an empty state instead of a table when data is empty', () => {
-    render(
-      <DataTable
-        columns={columns}
-        data={[]}
-        getRowKey={(row) => row.id}
-        emptyMessage="No plugins"
-      />,
-    );
-    expect(screen.queryByRole('table')).toBeNull();
-    expect(screen.getByText('No plugins')).toBeDefined();
-  });
-
-  it('non-sortable columns render as plain text, not a button', () => {
-    const withPlain: DataTableColumn<Plugin>[] = [{ key: 'name', header: 'Name' }];
-    render(<DataTable columns={withPlain} data={data} getRowKey={(row) => row.id} />);
-    expect(screen.queryByRole('button', { name: 'Name' })).toBeNull();
-    expect(screen.getByRole('columnheader', { name: 'Name' }).getAttribute('aria-sort')).toBeNull();
-  });
-
-  it('clicking a sortable header sorts ascending, then descending, then clears', () => {
-    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
-    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
-    const button = within(nameHeader).getByRole('button');
-
-    fireEvent.click(button);
-    expect(rowsText()).toEqual(['Alpha', 'Bravo', 'Charlie']);
-    expect(nameHeader.getAttribute('aria-sort')).toBe('ascending');
-
-    fireEvent.click(button);
-    expect(rowsText()).toEqual(['Charlie', 'Bravo', 'Alpha']);
-    expect(nameHeader.getAttribute('aria-sort')).toBe('descending');
-
-    fireEvent.click(button);
-    expect(rowsText()).toEqual(['Charlie', 'Alpha', 'Bravo']);
-    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
-  });
-
-  it('sorts numeric columns numerically, not lexicographically', () => {
-    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
-    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
-    fireEvent.click(within(installsHeader).getByRole('button'));
-    expect(rowsText()).toEqual(['Bravo', 'Charlie', 'Alpha']); // 5, 12, 30
-  });
-
-  it('switching the sort column resets to ascending', () => {
-    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
-    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
-    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
-    fireEvent.click(within(nameHeader).getByRole('button'));
-    fireEvent.click(within(nameHeader).getByRole('button')); // now descending
-    fireEvent.click(within(installsHeader).getByRole('button'));
-    expect(installsHeader.getAttribute('aria-sort')).toBe('ascending');
-    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
-  });
-
-  it('respects defaultSortKey/defaultSortDirection', () => {
-    render(
-      <DataTable
-        columns={columns}
-        data={data}
-        getRowKey={(row) => row.id}
-        defaultSortKey="installs"
-        defaultSortDirection="desc"
-      />,
-    );
-    expect(rowsText()).toEqual(['Alpha', 'Charlie', 'Bravo']); // 30, 12, 5
-  });
-});

package/src/components/DatePicker/DatePicker.module.css

@@ -1,61 +0,0 @@
-/* DatePicker — trigger styled to match Input's height/border/radius/focus
- * ring for visual consistency as a form field. Kept in sync with Input's
- * own sizing by hand (36px rendered height via explicit height +
- * border-box, not a literal reuse of Input). */
-
-.trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-2);
-  width: 100%;
-  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: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* Same iOS auto-zoom fix as Input — see its own module.css for why. */
-@media (pointer: coarse) {
-  .trigger {
-    font-size: var(--sv-font-size-md);
-  }
-}
-
-.trigger:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.trigger:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.triggerValue {
-  color: var(--sv-color-text-primary);
-}
-
-.triggerPlaceholder {
-  color: var(--sv-color-text-muted);
-}
-
-.popoverBody {
-  padding: var(--sv-space-3);
-}
-
-.drawerBody {
-  padding: var(--sv-space-4);
-  padding-bottom: max(var(--sv-space-4), env(safe-area-inset-bottom));
-}

package/src/components/DatePicker/DatePicker.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useIsMobile } from '../../hooks';
-import { Calendar } from '../Calendar/Calendar';
-import { formatDateShort } from '../Calendar/dateUtils';
-import { Drawer } from '../Drawer/Drawer';
-import { Icon } from '../Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import styles from './DatePicker.module.css';
-
-export interface DatePickerProps {
-  value: Date | null;
-  onChange: (date: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  placeholder?: string;
-  'aria-label': string;
-  disabled?: boolean;
-}
-
-// Wide enough for the 7-column Calendar grid (44px touch-target cells) plus
-// its own padding, without being so wide it looks odd as a Popover panel.
-const POPOVER_WIDTH = 320;
-
-/**
- * DatePicker — a form field pairing a compact trigger with `Calendar`:
- * `Popover` on desktop, a bottom-sheet `Drawer` on mobile (the platform's
- * standard adaptive-surface pattern, matching `Menu`). Date-only (decision
- * D6 in the mobile design-system plan) — time and range selection are future
- * scope; recurrence UI stays plugin-side.
- *
- * Unlike `Menu`, the trigger is built in rather than supplied by the caller
- * — a date picker is a form field (consistent with `Input`/`Select`), not an
- * arbitrary action-menu trigger.
- */
-export function DatePicker({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  placeholder = 'Select date',
-  'aria-label': ariaLabel,
-  disabled = false,
-}: DatePickerProps) {
-  const [open, setOpen] = useState(false);
-  const isMobile = useIsMobile();
-
-  function handleSelect(date: Date) {
-    onChange(date);
-    setOpen(false);
-  }
-
-  const trigger = (
-    <button
-      type="button"
-      className={styles.trigger}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      aria-haspopup="dialog"
-      aria-expanded={open}
-      onClick={() => setOpen((o) => !o)}
-    >
-      <span className={value ? styles.triggerValue : styles.triggerPlaceholder}>
-        {value ? formatDateShort(value) : placeholder}
-      </span>
-      <Icon name="calendar" size="sm" aria-hidden />
-    </button>
-  );
-
-  const calendar = (
-    <Calendar
-      value={value}
-      onChange={handleSelect}
-      minDate={minDate}
-      maxDate={maxDate}
-      aria-label={ariaLabel}
-    />
-  );
-
-  if (isMobile) {
-    return (
-      <>
-        {trigger}
-        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
-          <div className={styles.drawerBody}>{calendar}</div>
-        </Drawer>
-      </>
-    );
-  }
-
-  return (
-    <Popover
-      trigger={trigger}
-      open={open}
-      onClose={() => setOpen(false)}
-      aria-label={ariaLabel}
-      width={POPOVER_WIDTH}
-    >
-      <div className={styles.popoverBody}>{calendar}</div>
-    </Popover>
-  );
-}

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

@@ -1,89 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { DatePicker } from '../DatePicker';
-
-let mobile = false;
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      // useIsMobile's query is '(max-width: ...)'; Drawer's own
-      // prefers-reduced-motion check defaults to false — see Menu's
-      // identical test setup for why.
-      matches: query.includes('max-width') ? mobile : false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-const JAN_15_2026 = new Date(2026, 0, 15);
-
-describe('DatePicker', () => {
-  beforeEach(() => {
-    mobile = false;
-    installMatchMedia();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('shows the placeholder when no date is selected', () => {
-    render(
-      <DatePicker
-        value={null}
-        onChange={() => {}}
-        placeholder="Pick a date"
-        aria-label="Due date"
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Due date' }).textContent).toContain('Pick a date');
-  });
-
-  it('shows the formatted value when a date is selected', () => {
-    render(<DatePicker value={JAN_15_2026} onChange={() => {}} aria-label="Due date" />);
-    expect(screen.getByRole('button', { name: 'Due date' }).textContent).toContain('Jan 15, 2026');
-  });
-
-  it('opens the calendar as a Popover on desktop', () => {
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    const panel = screen.getByRole('dialog', { name: 'Due date' });
-    expect(panel.getAttribute('aria-modal')).toBe('false');
-    expect(screen.getByRole('grid')).toBeTruthy();
-  });
-
-  it('opens the calendar as a Drawer on mobile', () => {
-    mobile = true;
-    installMatchMedia();
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    const panel = screen.getByRole('dialog', { name: 'Due date' });
-    expect(panel.getAttribute('aria-modal')).toBe('true');
-    expect(screen.getByRole('grid')).toBeTruthy();
-  });
-
-  it('calls onChange and closes the picker when a date is selected', () => {
-    const onChange = vi.fn();
-    render(<DatePicker value={JAN_15_2026} onChange={onChange} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    fireEvent.click(screen.getByRole('button', { name: /January 20, 2026/ }));
-    expect(onChange).toHaveBeenCalledOnce();
-    const called = onChange.mock.calls[0]?.[0] as Date;
-    expect(called.getDate()).toBe(20);
-    expect(screen.queryByRole('grid')).toBeNull();
-  });
-
-  it('disables the trigger when disabled', () => {
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" disabled />);
-    expect((screen.getByRole('button', { name: 'Due date' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-  });
-});