@sovereignfs/ui 0.21.3 → 0.33.0

package/src/components/Icon/icons/calendar.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 2v4" />
+      <path d="M16 2v4" />
+      <rect width="18" height="18" x="3" y="4" rx="2" />
+      <path d="M3 10h18" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/ellipsis-vertical.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function EllipsisVerticalIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="12" cy="5" r="1" />
+      <circle cx="12" cy="19" r="1" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/index.ts

@@ -26,8 +26,9 @@ import { PackageIcon } from './package';
 import { Grid2x2Icon } from './grid-2x2';
 import { InfoIcon } from './info';
 import { AlertTriangleIcon } from './alert-triangle';
+import { CalendarIcon } from './calendar';
 import { SlidersHorizontalIcon } from './sliders-horizontal';
-import { TerminalIcon } from './terminal';
+import { EllipsisVerticalIcon } from './ellipsis-vertical';
 
 export type IconName =
   | 'house'
@@ -56,8 +57,9 @@ export type IconName =
   | 'grid-2x2'
   | 'info'
   | 'alert-triangle'
+  | 'calendar'
   | 'sliders-horizontal'
-  | 'terminal';
+  | 'ellipsis-vertical';
 
 export type IconComponent = (props: SVGProps<SVGSVGElement>) => ReactElement;
 
@@ -88,8 +90,9 @@ export const ICONS: Record<IconName, IconComponent> = {
   'grid-2x2': Grid2x2Icon,
   info: InfoIcon,
   'alert-triangle': AlertTriangleIcon,
+  calendar: CalendarIcon,
   'sliders-horizontal': SlidersHorizontalIcon,
-  terminal: TerminalIcon,
+  'ellipsis-vertical': EllipsisVerticalIcon,
 };
 
 export { HouseIcon } from './house';
@@ -118,5 +121,6 @@ export { PackageIcon } from './package';
 export { Grid2x2Icon } from './grid-2x2';
 export { InfoIcon } from './info';
 export { AlertTriangleIcon } from './alert-triangle';
+export { CalendarIcon } from './calendar';
 export { SlidersHorizontalIcon } from './sliders-horizontal';
-export { TerminalIcon } from './terminal';
+export { EllipsisVerticalIcon } from './ellipsis-vertical';

package/src/components/Icon/icons/sliders-horizontal.tsx

@@ -14,15 +14,15 @@ export function SlidersHorizontalIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinejoin="round"
       {...props}
     >
-      <line x1="21" x2="14" y1="4" y2="4" />
-      <line x1="10" x2="3" y1="4" y2="4" />
-      <line x1="21" x2="12" y1="12" y2="12" />
-      <line x1="8" x2="3" y1="12" y2="12" />
-      <line x1="21" x2="16" y1="20" y2="20" />
-      <line x1="12" x2="3" y1="20" y2="20" />
-      <line x1="14" x2="14" y1="2" y2="6" />
-      <line x1="8" x2="8" y1="10" y2="14" />
-      <line x1="16" x2="16" y1="18" y2="22" />
+      <path d="M10 5H3" />
+      <path d="M12 19H3" />
+      <path d="M14 3v4" />
+      <path d="M16 17v4" />
+      <path d="M21 12h-9" />
+      <path d="M21 19h-5" />
+      <path d="M21 5h-7" />
+      <path d="M8 10v4" />
+      <path d="M8 12H3" />
     </svg>
   );
 }

package/src/components/Input/Input.module.css

@@ -14,6 +14,16 @@
     box-shadow 0.15s ease;
 }
 
+/* iOS Safari (tab and standalone PWA) auto-zooms the page whenever a focused
+   input's font-size is below 16px. The viewport intentionally allows pinch-zoom
+   (no maximum-scale — an accessibility requirement), so the only way to stop the
+   focus-zoom is to render the field at >=16px on touch devices. */
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
 .input::placeholder {
   color: var(--sv-color-text-muted);
 }

package/src/components/Menu/Menu.module.css

@@ -0,0 +1,82 @@
+/* Menu — the item list shared by both presentations (Popover panel on
+ * desktop, Drawer panel on mobile); the presentational chrome around it is
+ * entirely owned by those two components, not duplicated here. */
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: var(--sv-space-1);
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  width: 100%;
+  /* Min touch target (WCAG 2.5.5 / Apple HIG) — this menu renders as a
+     Drawer sheet on mobile, so every item must be comfortably tappable. */
+  min-height: var(--sv-touch-target-min, 44px);
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  font: inherit;
+  font-size: var(--sv-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .item:hover:not(:disabled) {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.itemDestructive {
+  color: var(--sv-color-error-text);
+}
+
+@media (hover: hover) {
+  .itemDestructive:hover:not(:disabled) {
+    background: var(--sv-color-error-surface);
+  }
+}
+
+/* Reserved checkmark gutter for a checkable item — sized so unchecked
+   siblings in the same group still align with the checked one's icon. */
+.check {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-1);
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.separator {
+  height: 1px;
+  margin: var(--sv-space-1) var(--sv-space-2);
+  background: var(--sv-color-border);
+}

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import type { ReactElement } from 'react';
+import { useIsMobile } from '../../hooks';
+import { Drawer } from '../Drawer/Drawer';
+import { Icon, type IconName } from '../Icon/Icon';
+import { Popover } from '../Popover/Popover';
+import styles from './Menu.module.css';
+
+export interface MenuItem {
+  type?: 'item';
+  label: string;
+  onSelect: () => void;
+  icon?: IconName;
+  /** Styles the item as a destructive action (e.g. "Delete list"). */
+  destructive?: boolean;
+  disabled?: boolean;
+  /**
+   * Marks the item as one of a mutually-exclusive set (e.g. the active sort
+   * order) — renders a leading checkmark and `role="menuitemradio"` instead
+   * of `role="menuitem"`. Pass this on every item in the group, including
+   * the unchecked ones, so their labels stay aligned with the checked one's
+   * reserved checkmark gutter. Omit entirely for plain action items (e.g.
+   * "Delete list") — they render with no reserved leading space at all.
+   */
+  checked?: boolean;
+}
+
+/** A non-interactive section heading above a run of items (e.g. "Sort by"). */
+export interface MenuLabel {
+  type: 'label';
+  label: string;
+}
+
+/** A visual divider between sections. */
+export interface MenuSeparator {
+  type: 'separator';
+}
+
+export type MenuEntry = MenuItem | MenuLabel | MenuSeparator;
+
+export interface MenuProps {
+  /** The element that opens the menu — rendered as-is; the caller wires its
+   *  onClick to flip `open` (same controlled pattern as `Popover`). */
+  trigger: ReactElement;
+  open: boolean;
+  onClose: () => void;
+  items: MenuEntry[];
+  'aria-label': string;
+  /** Forwarded to `Popover` on desktop. Has no effect on mobile, where the
+   *  menu is always a full-width `Drawer`. */
+  align?: 'left' | 'right';
+}
+
+/**
+ * Menu — an adaptive action menu: `Popover` on desktop, a bottom-sheet
+ * `Drawer` on mobile. Replaces the desktop-Popover/mobile-Drawer fork that
+ * `⋯` action menus (list options, row actions) otherwise re-derive per
+ * plugin. Same list of `items` renders in both presentations — only the
+ * surrounding chrome (floating panel vs. bottom sheet) differs, matching the
+ * platform's `useIsMobile` breakpoint.
+ *
+ * `items` accepts three entry shapes: a plain action (`MenuItem`, `type`
+ * omitted or `'item'`), a non-interactive section heading (`MenuLabel`,
+ * `type: 'label'`), and a `MenuSeparator` (`type: 'separator'`) — enough to
+ * express grouped sections like "Filter" / "Sort by" above a run of
+ * destructive actions, matching how native OS menus lay out mixed
+ * action/selection groups.
+ *
+ * Selecting an item both closes the menu and calls its `onSelect` — a
+ * consumer's `onSelect` never needs to call `onClose` itself.
+ */
+export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps) {
+  const isMobile = useIsMobile();
+
+  const list = (
+    <ul className={styles.list} role="menu">
+      {items.map((entry, index) => {
+        // Entries are a static, order-stable list per render — nothing
+        // reorders — so an index key is safe here.
+        if (entry.type === 'separator') {
+          return <li key={index} role="separator" className={styles.separator} />;
+        }
+        if (entry.type === 'label') {
+          return (
+            <li key={index} role="presentation" className={styles.label}>
+              {entry.label}
+            </li>
+          );
+        }
+        const isCheckable = entry.checked !== undefined;
+        return (
+          <li key={index} role="none">
+            <button
+              role={isCheckable ? 'menuitemradio' : 'menuitem'}
+              aria-checked={isCheckable ? entry.checked : undefined}
+              type="button"
+              className={[styles.item, entry.destructive ? styles.itemDestructive : '']
+                .filter(Boolean)
+                .join(' ')}
+              disabled={entry.disabled}
+              onClick={() => {
+                onClose();
+                entry.onSelect();
+              }}
+            >
+              {isCheckable && (
+                <span className={styles.check} aria-hidden>
+                  {entry.checked && <Icon name="check" size="sm" aria-hidden />}
+                </span>
+              )}
+              {entry.icon && <Icon name={entry.icon} size="sm" aria-hidden />}
+              {entry.label}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        <Drawer open={open} onClose={onClose} aria-label={ariaLabel}>
+          {list}
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <Popover trigger={trigger} open={open} onClose={onClose} aria-label={ariaLabel} align={align}>
+      {list}
+    </Popover>
+  );
+}

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

@@ -0,0 +1,197 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { Menu, type MenuItem } from '../Menu';
+
+let mobile = false;
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      // useIsMobile's query is '(max-width: ...)'; everything else (e.g.
+      // Drawer's prefers-reduced-motion check) defaults to false so the
+      // mobile-branch Drawer isn't accidentally forced into the
+      // reduced-motion path.
+      matches: query.includes('max-width') ? mobile : false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+function installPointerCapture() {
+  if (!Element.prototype.setPointerCapture) {
+    Element.prototype.setPointerCapture = () => {};
+  }
+}
+
+const items: MenuItem[] = [
+  { label: 'Rename', onSelect: vi.fn() },
+  { label: 'Delete', onSelect: vi.fn(), destructive: true },
+];
+
+describe('Menu', () => {
+  beforeEach(() => {
+    mobile = false;
+    installMatchMedia();
+    installPointerCapture();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('renders the trigger regardless of open state', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open={false}
+        onClose={() => {}}
+        items={items}
+        aria-label="List actions"
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Open menu' })).toBeTruthy();
+  });
+
+  it('renders as a Popover on desktop', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={items}
+        aria-label="List actions"
+      />,
+    );
+    const menu = screen.getByRole('dialog', { name: 'List actions' });
+    // Popover's own aria-modal is explicitly false (non-modal floating panel).
+    expect(menu.getAttribute('aria-modal')).toBe('false');
+    expect(screen.getByRole('menuitem', { name: 'Rename' })).toBeTruthy();
+  });
+
+  it('renders as a Drawer on mobile', () => {
+    mobile = true;
+    installMatchMedia();
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={items}
+        aria-label="List actions"
+      />,
+    );
+    const menu = screen.getByRole('dialog', { name: 'List actions' });
+    expect(menu.getAttribute('aria-modal')).toBe('true');
+    expect(screen.getByRole('menuitem', { name: 'Rename' })).toBeTruthy();
+  });
+
+  it('calls both onClose and the item onSelect when an item is chosen', () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={onClose}
+        items={[{ label: 'Rename', onSelect }]}
+        aria-label="List actions"
+      />,
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Rename' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('disables an item and does not fire onSelect when clicked', () => {
+    const onSelect = vi.fn();
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={[{ label: 'Archive', onSelect, disabled: true }]}
+        aria-label="List actions"
+      />,
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Archive' }));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('marks a destructive item distinctly from a default one', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={items}
+        aria-label="List actions"
+      />,
+    );
+    const renameClass = screen.getByRole('menuitem', { name: 'Rename' }).className;
+    const deleteClass = screen.getByRole('menuitem', { name: 'Delete' }).className;
+    expect(deleteClass).not.toBe(renameClass);
+  });
+
+  it('renders section labels and separators as non-interactive entries', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={[
+          { type: 'label', label: 'Sort by' },
+          { label: 'Title', onSelect: vi.fn(), checked: true },
+          { type: 'separator' },
+          { label: 'Delete list', onSelect: vi.fn(), destructive: true },
+        ]}
+        aria-label="List actions"
+      />,
+    );
+    expect(screen.getByText('Sort by').getAttribute('role')).toBe('presentation');
+    expect(screen.getByRole('separator')).toBeTruthy();
+    // Only the plain action item is a plain menuitem; the checkable one is a menuitemradio.
+    expect(screen.getAllByRole('menuitem')).toHaveLength(1);
+  });
+
+  it('renders a checkable item as menuitemradio with aria-checked', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={[
+          { label: 'Manual', onSelect: vi.fn(), checked: false },
+          { label: 'Title', onSelect: vi.fn(), checked: true },
+        ]}
+        aria-label="List actions"
+      />,
+    );
+    const unchecked = screen.getByRole('menuitemradio', { name: 'Manual' });
+    const checked = screen.getByRole('menuitemradio', { name: 'Title' });
+    expect(unchecked.getAttribute('aria-checked')).toBe('false');
+    expect(checked.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('closes and selects when a checkable item is clicked', () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={onClose}
+        items={[{ label: 'Title', onSelect, checked: false }]}
+        aria-label="List actions"
+      />,
+    );
+    fireEvent.click(screen.getByRole('menuitemradio', { name: 'Title' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

package/src/components/NavTabs/NavTabs.module.css

@@ -17,8 +17,10 @@
   transition: color 0.1s ease;
 }
 
-.link:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .link:hover {
+    color: var(--sv-color-text-primary);
+  }
 }
 
 .link:focus-visible {

package/src/components/OverlayHeader/OverlayHeader.module.css

@@ -0,0 +1,98 @@
+/* OverlayHeader — shared fixed secondary header for Dialog's mobile mode,
+ * Sheet, and Drawer. Not itself pinned via position — the consumer renders it
+ * as a flex-shrink: 0 sibling before its own scrolling content region (see
+ * the component's own doc comment). */
+
+.header {
+  flex-shrink: 0;
+  background: var(--sv-color-surface);
+  border-bottom: 1px solid var(--sv-color-border);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-3) var(--sv-space-4);
+}
+
+.backButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-touch-target-min, 44px);
+  height: var(--sv-touch-target-min, 44px);
+  flex-shrink: 0;
+  /* Pull the touch-target padding back so the chevron glyph still sits close
+     to the title, matching the visual (not hit-area) spacing of .row's own
+     gap — otherwise a 44px box reads as a large empty gap before the title. */
+  margin-left: calc(-1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-md)) / 2);
+  margin-right: calc(
+    -1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-md)) / 2 + var(--sv-space-1)
+  );
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .backButton:hover {
+    background: var(--sv-color-surface-sunken);
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.backButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sv-font-size-xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.action {
+  flex-shrink: 0;
+}
+
+.closeButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-touch-target-min, 44px);
+  height: var(--sv-touch-target-min, 44px);
+  flex-shrink: 0;
+  /* Pull the touch-target padding back so the × sits flush with the row's own
+     edge padding, same reasoning as .backButton above. */
+  margin-right: calc(-1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-sm)) / 2);
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .closeButton:hover {
+    background: var(--sv-color-surface-sunken);
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.closeButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.secondRow {
+  padding: 0 var(--sv-space-2) var(--sv-space-2);
+}