@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/NavigationMenu/NavigationMenu.module.css

@@ -1,53 +0,0 @@
-.nav {
-  min-width: 0;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.link,
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  height: 36px;
-  padding: 0 var(--sv-space-3);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .link:hover,
-  .trigger:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.link:focus-visible,
-.trigger:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.triggerOpen {
-  background: var(--sv-color-surface-sunken);
-}
-
-@media (pointer: coarse) {
-  .link,
-  .trigger {
-    min-height: var(--sv-touch-target-min, 44px);
-  }
-}

package/src/components/NavigationMenu/NavigationMenu.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NavigationMenu } from './NavigationMenu';
-
-const meta = {
-  title: 'Components/NavigationMenu',
-  component: NavigationMenu,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Top-level nav bar where some items open a flyout panel. Desktop-oriented by design — a hover-triggered flyout bar has no mobile equivalent. Once one flyout is open, hovering a sibling switches directly to it; ArrowLeft/ArrowRight move focus between triggers.',
-      },
-    },
-  },
-  args: { 'aria-label': 'Main' },
-} satisfies Meta<typeof NavigationMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const FlyoutContent = ({ links }: { links: string[] }) => (
-  <div style={{ padding: 'var(--sv-space-3)', display: 'flex', flexDirection: 'column', gap: 4 }}>
-    {links.map((link) => (
-      <a
-        key={link}
-        href={`/${link.toLowerCase().replace(/\s+/g, '-')}`}
-        style={{
-          fontSize: 14,
-          color: 'var(--sv-color-text-primary)',
-          textDecoration: 'none',
-          padding: 'var(--sv-space-1) var(--sv-space-2)',
-        }}
-      >
-        {link}
-      </a>
-    ))}
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    items: [
-      { label: 'Home', href: '/home' },
-      {
-        label: 'Products',
-        content: <FlyoutContent links={['Tasks', 'Ledger', 'Shopper', 'Wallet']} />,
-      },
-      {
-        label: 'Company',
-        content: <FlyoutContent links={['About', 'Blog', 'Careers']} />,
-      },
-      { label: 'Docs', href: '/docs' },
-    ],
-  },
-};

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import { useRef, useState } from 'react';
-import type { ReactNode, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { Popover } from '../Popover/Popover';
-import styles from './NavigationMenu.module.css';
-
-export interface NavigationMenuItem {
-  label: string;
-  /** A plain link with no flyout — mutually exclusive with `content`. */
-  href?: string;
-  /** Flyout panel content shown when this item is triggered. Pass a
-   * function instead of a plain node when the content needs to close its
-   * own flyout after an action (e.g. `Menubar`'s menu items) — it receives
-   * a `close` callback. */
-  content?: ReactNode | ((close: () => void) => ReactNode);
-}
-
-export interface NavigationMenuProps {
-  items: NavigationMenuItem[];
-  /** Renders a plain-link item's anchor. Defaults to `<a href>`, which
-   * causes a full page reload — pass Next's `<Link>` (or equivalent) to
-   * keep navigation client-side. */
-  renderLink?: (href: string, children: ReactNode) => ReactNode;
-  'aria-label'?: string;
-}
-
-/**
- * NavigationMenu — top-level nav bar where some items open a flyout panel.
- *
- * Desktop-oriented by design — a hover-triggered flyout bar has no mobile
- * equivalent (Research 0004); it renders as-is on touch rather than
- * attempting a redesign no consumer has asked for yet.
- *
- * Each flyout is its own `Popover` instance rather than one shared
- * positioned panel, reusing its collision detection per item. Once one
- * flyout is open, moving the pointer to a sibling trigger switches directly
- * to that one — standard menu-bar behavior — and ArrowLeft/ArrowRight move
- * focus between top-level triggers (a roving-tabindex bar, per the
- * WAI-ARIA menu pattern), Escape closes.
- */
-export function NavigationMenu({
-  items,
-  renderLink,
-  'aria-label': ariaLabel,
-}: NavigationMenuProps) {
-  const [openIndex, setOpenIndex] = useState<number | null>(null);
-  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  function handleKeyDown(e: ReactKeyboardEvent, index: number) {
-    if (e.key === 'Escape') {
-      setOpenIndex(null);
-      triggerRefs.current[index]?.focus();
-      return;
-    }
-    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-      e.preventDefault();
-      const direction = e.key === 'ArrowRight' ? 1 : -1;
-      const nextIndex = (index + direction + items.length) % items.length;
-      triggerRefs.current[nextIndex]?.focus();
-    }
-  }
-
-  return (
-    <nav aria-label={ariaLabel} className={styles.nav}>
-      <ul className={styles.list}>
-        {items.map((item, index) => {
-          if (!item.content) {
-            const linkChildren = item.label;
-            return (
-              <li key={item.label}>
-                {item.href && renderLink ? (
-                  renderLink(item.href, linkChildren)
-                ) : (
-                  <a href={item.href} className={styles.link}>
-                    {linkChildren}
-                  </a>
-                )}
-              </li>
-            );
-          }
-
-          const isOpen = openIndex === index;
-          return (
-            <li key={item.label}>
-              <Popover
-                aria-label={item.label}
-                open={isOpen}
-                onClose={() => setOpenIndex((current) => (current === index ? null : current))}
-                trigger={
-                  <button
-                    ref={(el) => {
-                      triggerRefs.current[index] = el;
-                    }}
-                    type="button"
-                    className={[styles.trigger, isOpen ? styles.triggerOpen : '']
-                      .filter(Boolean)
-                      .join(' ')}
-                    aria-expanded={isOpen}
-                    onClick={() => setOpenIndex((current) => (current === index ? null : index))}
-                    onMouseEnter={() => {
-                      // Once a sibling is already open, hovering another
-                      // trigger switches directly to it — standard menu-bar
-                      // behavior. Otherwise hovering alone does not open
-                      // one; that stays an explicit click, since a nav bar
-                      // (unlike HoverCard) isn't a "preview" surface.
-                      setOpenIndex((current) => (current !== null ? index : current));
-                    }}
-                    onKeyDown={(e) => handleKeyDown(e, index)}
-                  >
-                    {item.label}
-                  </button>
-                }
-              >
-                {typeof item.content === 'function'
-                  ? item.content(() => setOpenIndex(null))
-                  : item.content}
-              </Popover>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-}

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

@@ -1,93 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { NavigationMenu } from '../NavigationMenu';
-
-afterEach(cleanup);
-
-const items = [
-  { label: 'Home', href: '/home' },
-  { label: 'Products', content: <div>Products flyout</div> },
-  { label: 'Company', content: <div>Company flyout</div> },
-];
-
-describe('NavigationMenu', () => {
-  it('renders a plain link for an item with no content', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    const link = screen.getByRole('link', { name: 'Home' });
-    expect(link.getAttribute('href')).toBe('/home');
-  });
-
-  it('renders a toggle trigger for an item with content, collapsed by default', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    expect(screen.getByRole('button', { name: 'Products' }).getAttribute('aria-expanded')).toBe(
-      'false',
-    );
-  });
-
-  it('opens a flyout on trigger click', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Products' }));
-    expect(screen.getByText('Products flyout')).toBeDefined();
-  });
-
-  it('closes on a second click of the same trigger', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    const trigger = screen.getByRole('button', { name: 'Products' });
-    fireEvent.click(trigger);
-    fireEvent.click(trigger);
-    expect(screen.queryByText('Products flyout')).toBeNull();
-  });
-
-  it('switches directly to a sibling on hover once one flyout is already open', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Products' }));
-    expect(screen.getByText('Products flyout')).toBeDefined();
-
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Company' }));
-    expect(screen.getByText('Company flyout')).toBeDefined();
-    expect(screen.queryByText('Products flyout')).toBeNull();
-  });
-
-  it('does not open a flyout on hover alone when nothing else is open', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Products' }));
-    expect(screen.queryByText('Products flyout')).toBeNull();
-  });
-
-  it('ArrowRight/ArrowLeft move focus between top-level triggers', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    const products = screen.getByRole('button', { name: 'Products' });
-    const company = screen.getByRole('button', { name: 'Company' });
-    products.focus();
-    fireEvent.keyDown(products, { key: 'ArrowRight' });
-    expect(document.activeElement).toBe(company);
-    fireEvent.keyDown(company, { key: 'ArrowLeft' });
-    expect(document.activeElement).toBe(products);
-  });
-
-  it('Escape closes the open flyout and returns focus to its trigger', () => {
-    render(<NavigationMenu items={items} aria-label="Main" />);
-    const trigger = screen.getByRole('button', { name: 'Products' });
-    fireEvent.click(trigger);
-    fireEvent.keyDown(trigger, { key: 'Escape' });
-    expect(screen.queryByText('Products flyout')).toBeNull();
-    expect(document.activeElement).toBe(trigger);
-  });
-
-  it('uses a caller-supplied renderLink for plain links instead of a bare <a>', () => {
-    render(
-      <NavigationMenu
-        items={items}
-        aria-label="Main"
-        renderLink={(href, children) => (
-          <button type="button" data-href={href}>
-            {children}
-          </button>
-        )}
-      />,
-    );
-    expect(screen.queryByRole('link', { name: 'Home' })).toBeNull();
-    expect(screen.getByRole('button', { name: 'Home' })).toHaveProperty('dataset.href', '/home');
-  });
-});

package/src/components/OfflineGate/OfflineGate.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { useIsOffline } from '../../hooks/useIsOffline';
-import { EmptyState } from '../EmptyState/EmptyState';
-
-export interface OfflineGateProps {
-  children: ReactNode;
-  /** Defaults to a generic "this section" phrasing — pass the surface's own name. */
-  surfaceName?: string;
-  className?: string;
-}
-
-/**
- * OfflineGate — blocks administrative/settings surfaces from rendering
- * (possibly stale) cached content while the device has no network, showing an
- * explanatory empty state instead (research 0012, epic task 2.32).
- *
- * Distinct from `OfflineBanner`: the banner is an informational overlay that
- * coexists with normal content everywhere in the shell. This is a hard block
- * for surfaces where operating against stale data is actively wrong — e.g. a
- * Console user list or an Account billing page reflects a point-in-time
- * snapshot the moment it's server-rendered, and any cached copy replayed
- * later has no way to signal that it may already be stale. `OfflineGate`
- * doesn't try to tell staleness apart from freshness; it removes the
- * question by not rendering the content at all while offline.
- *
- * `children` is rendered unconditionally while online, so this adds no cost
- * to the common case — it only decides what to show, never how the wrapped
- * content itself is fetched or cached.
- */
-export function OfflineGate({ children, surfaceName, className }: OfflineGateProps) {
-  const isOffline = useIsOffline();
-  if (!isOffline) return <>{children}</>;
-
-  return (
-    <EmptyState
-      icon="alert-triangle"
-      heading="You're offline"
-      description={`${surfaceName ?? 'This section'} needs a connection — reconnect to continue.`}
-      className={className}
-    />
-  );
-}

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

@@ -1,66 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen } from '@testing-library/react';
-import { OfflineGate } from '../OfflineGate';
-
-describe('OfflineGate', () => {
-  beforeEach(() => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders children unchanged while online', () => {
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText('Live content')).toBeDefined();
-  });
-
-  it('replaces children with an explanatory empty state while offline', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.queryByText('Live content')).toBeNull();
-    expect(screen.getByText("You're offline")).toBeDefined();
-  });
-
-  it('names the surface in the offline message when provided', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate surfaceName="Console">
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText(/Console needs a connection/)).toBeDefined();
-  });
-
-  it('falls back to generic phrasing with no surface name', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText(/This section needs a connection/)).toBeDefined();
-  });
-
-  it('swaps back to children on reconnect', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText("You're offline")).toBeDefined();
-    act(() => window.dispatchEvent(new Event('online')));
-    expect(screen.getByText('Live content')).toBeDefined();
-  });
-});

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

@@ -1,98 +0,0 @@
-/* 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);
-}

package/src/components/OverlayHeader/OverlayHeader.tsx

@@ -1,62 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './OverlayHeader.module.css';
-
-export interface OverlayHeaderProps {
-  /** Overlay title, shown between the optional back button and the trailing
-   *  slots. Optional — some consumers (e.g. `Dialog`'s mobile bar) need the
-   *  row's close button present even when no title applies. */
-  title?: string;
-  /** Always renders a close button; called on click. */
-  onClose: () => void;
-  /** When provided, renders a back-chevron button before the title (for
-   *  hierarchical navigation within a single overlay — going back without
-   *  fully closing it). Omit for a flat overlay that only ever closes. */
-  onBack?: () => void;
-  /** Trailing slot next to the close button — e.g. a "Save" action. */
-  action?: ReactNode;
-  /** A second row below the title row — e.g. a tab strip. */
-  secondRow?: ReactNode;
-  className?: string;
-}
-
-/**
- * OverlayHeader — the shared fixed secondary header for `Dialog`'s mobile
- * mode, `Sheet`, and `Drawer`: title + close (+ optional back button /
- * trailing action / tab-strip row). Not itself `position: sticky` or
- * `position: fixed` — it stays visually pinned because the consuming overlay
- * renders it as a non-scrolling flex sibling before its own scrollable
- * content region, the same technique `Dialog`'s `.mobileBar` already used
- * before this component existed to generalize it.
- *
- * Content that needs a fully custom header (e.g. an editable title, or
- * controls that aren't a simple title/back/action shape) should not use this
- * component — render its own header row instead; `Sheet`'s `title` prop is
- * optional specifically to leave that escape hatch open.
- */
-export function OverlayHeader({
-  title,
-  onClose,
-  onBack,
-  action,
-  secondRow,
-  className,
-}: OverlayHeaderProps) {
-  return (
-    <div className={[styles.header, className].filter(Boolean).join(' ')}>
-      <div className={styles.row}>
-        {onBack && (
-          <button type="button" className={styles.backButton} aria-label="Back" onClick={onBack}>
-            <Icon name="chevron-left" size="md" aria-hidden />
-          </button>
-        )}
-        <span className={styles.title}>{title}</span>
-        {action && <div className={styles.action}>{action}</div>}
-        <button type="button" className={styles.closeButton} aria-label="Close" onClick={onClose}>
-          <Icon name="x" size="sm" aria-hidden />
-        </button>
-      </div>
-      {secondRow && <div className={styles.secondRow}>{secondRow}</div>}
-    </div>
-  );
-}

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

@@ -1,51 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { OverlayHeader } from '../OverlayHeader';
-
-describe('OverlayHeader', () => {
-  afterEach(cleanup);
-
-  it('renders the title and calls onClose on the close button', () => {
-    const onClose = vi.fn();
-    render(<OverlayHeader title="Account" onClose={onClose} />);
-    expect(screen.getByText('Account')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('does not render a back button when onBack is omitted', () => {
-    render(<OverlayHeader title="Account" onClose={() => {}} />);
-    expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
-  });
-
-  it('renders and wires a back button when onBack is provided', () => {
-    const onBack = vi.fn();
-    render(<OverlayHeader title="Account" onClose={() => {}} onBack={onBack} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Back' }));
-    expect(onBack).toHaveBeenCalledOnce();
-  });
-
-  it('renders the trailing action slot', () => {
-    render(
-      <OverlayHeader
-        title="Edit list"
-        onClose={() => {}}
-        action={<button type="button">Save</button>}
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy();
-  });
-
-  it('renders just the close button when title is omitted', () => {
-    const onClose = vi.fn();
-    render(<OverlayHeader onClose={onClose} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('renders the second row', () => {
-    render(<OverlayHeader title="Account" onClose={() => {}} secondRow={<nav>Tab strip</nav>} />);
-    expect(screen.getByText('Tab strip')).toBeTruthy();
-  });
-});

package/src/components/PageContainer/PageContainer.module.css

@@ -1,20 +0,0 @@
-.container {
-  width: 100%;
-  margin-inline: auto;
-}
-
-.sm {
-  max-width: 640px;
-}
-
-.md {
-  max-width: 960px;
-}
-
-.lg {
-  max-width: 1200px;
-}
-
-.full {
-  max-width: none;
-}