@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/MemberMultiSelect/MemberMultiSelect.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { Checkbox } from '../Checkbox/Checkbox';
-import styles from './MemberMultiSelect.module.css';
-
-export interface MemberMultiSelectOption {
-  id: string;
-  label: string;
-}
-
-export interface MemberMultiSelectProps {
-  options: MemberMultiSelectOption[];
-  selectedIds: Set<string>;
-  onToggle: (id: string, checked: boolean) => void;
-  /** Rendered to the right of a selected row only — e.g. a per-person `CurrencyInput` or share count. */
-  renderTrailing?: (id: string) => ReactNode;
-  /** Section label above the list, e.g. "Paid by" or "Split between". */
-  label?: string;
-  /** Helper/validation text below the list, e.g. a running total. */
-  hint?: ReactNode;
-  className?: string;
-}
-
-/**
- * MemberMultiSelect — checkbox list for picking any number of people from an
- * already-resolved set of options (group/project members, collaborators,
- * etc.). Deliberately domain-agnostic about *who* an option represents —
- * instance users and guest members are both just `{id, label}` here, so
- * nothing special is needed to include guests alongside instance users; the
- * caller's `options` array is the only place that distinction exists.
- *
- * Not a directory search or an "add a new guest" flow — pair with
- * `SuggestionInput` (search + add) for that; this component only selects
- * among options already passed in.
- */
-export function MemberMultiSelect({
-  options,
-  selectedIds,
-  onToggle,
-  renderTrailing,
-  label,
-  hint,
-  className,
-}: MemberMultiSelectProps) {
-  return (
-    <div className={[styles.group, className].filter(Boolean).join(' ')}>
-      {label && <span className={styles.label}>{label}</span>}
-      {options.map((option) => {
-        const checked = selectedIds.has(option.id);
-        return (
-          <div key={option.id} className={styles.row}>
-            <Checkbox
-              checked={checked}
-              onChange={(next) => onToggle(option.id, next)}
-              label={option.label}
-            />
-            {checked && renderTrailing && (
-              <span className={styles.trailing}>{renderTrailing(option.id)}</span>
-            )}
-          </div>
-        );
-      })}
-      {hint && <span className={styles.hint}>{hint}</span>}
-    </div>
-  );
-}

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

@@ -1,90 +0,0 @@
-/* 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.
- *
- * Sizing audit: reviewed against this scale's other compact controls —
- * --sv-radius-sm (6px) and --sv-font-size-sm (14px) already fit. The 44px
- * min-height is a deliberate design choice, kept unconditional (not gated
- * to pointer:coarse like Button/Checkbox) because this menu doubles as a
- * full Drawer sheet on mobile, where every item must stay comfortably
- * tappable. */
-
-.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;
-  text-decoration: none;
-  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

@@ -1,209 +0,0 @@
-'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;
-  /** Optional when `href` is provided (a pure navigation entry needs no
-   *  extra callback) — required otherwise. Called before the surface closes
-   *  is the caller's job to avoid; `Menu`'s own wiring always closes first,
-   *  then calls this. */
-  onSelect?: () => void;
-  /** Renders the entry as a link (`<a href>`, `role="menuitem"`) instead of
-   *  a `<button>` — same href-vs-onClick convention as `MobileAppsDrawer`'s
-   *  items. Framework-agnostic (a plain anchor, not `next/link`), matching
-   *  every other `packages/ui` href slot. */
-  href?: string;
-  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';
-  /** Forwarded to `Popover` on desktop (same default: 288). Has no effect
-   *  on mobile. Narrow this when the trigger lives inside a column
-   *  narrower than the default width — e.g. a per-row "⋯" menu in a
-   *  sidebar list — so the panel fits within that column's own bounds
-   *  instead of overflowing past its edge, where a scrollable ancestor's
-   *  `overflow-y: auto` (which the CSS Overflow spec computes the paired
-   *  `overflow-x` to `auto` as well, not `visible`, once either axis is
-   *  set) would clip it. */
-  width?: number | 'trigger';
-}
-
-/**
- * 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.
- */
-/**
- * MenuEntries — the `<ul role="menu">` item list itself, factored out of
- * `Menu` so other adaptive-surface components (e.g. `ContextMenu`) can
- * render the exact same items/destructive/checked/icon markup inside their
- * own positioning shell, instead of re-deriving it and risking drift.
- */
-export function MenuEntries({
-  items,
-  onSelect,
-}: {
-  items: MenuEntry[];
-  /** Called after an item's own onSelect — typically the surface's onClose. */
-  onSelect: (entry: MenuItem) => void;
-}) {
-  return (
-    <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;
-        const className = [styles.item, entry.destructive ? styles.itemDestructive : '']
-          .filter(Boolean)
-          .join(' ');
-        const content = (
-          <>
-            {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}
-          </>
-        );
-        return (
-          <li key={index} role="none">
-            {entry.href ? (
-              <a
-                role="menuitem"
-                href={entry.href}
-                className={className}
-                onClick={() => onSelect(entry)}
-              >
-                {content}
-              </a>
-            ) : (
-              <button
-                role={isCheckable ? 'menuitemradio' : 'menuitem'}
-                aria-checked={isCheckable ? entry.checked : undefined}
-                type="button"
-                className={className}
-                disabled={entry.disabled}
-                onClick={() => onSelect(entry)}
-              >
-                {content}
-              </button>
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export function Menu({
-  trigger,
-  open,
-  onClose,
-  items,
-  'aria-label': ariaLabel,
-  align,
-  width,
-}: MenuProps) {
-  const isMobile = useIsMobile();
-
-  const list = (
-    <MenuEntries
-      items={items}
-      onSelect={(entry) => {
-        onClose();
-        entry.onSelect?.();
-      }}
-    />
-  );
-
-  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}
-      width={width}
-    >
-      {list}
-    </Popover>
-  );
-}

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

@@ -1,227 +0,0 @@
-// @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();
-  });
-
-  it('renders an item with href as a link, not a button', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={[{ label: 'Account', href: '/account' }]}
-        aria-label="List actions"
-      />,
-    );
-    const link = screen.getByRole('menuitem', { name: 'Account' });
-    expect(link.tagName).toBe('A');
-    expect(link.getAttribute('href')).toBe('/account');
-  });
-
-  it('closes on click of an href item even with no onSelect', () => {
-    const onClose = vi.fn();
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={onClose}
-        items={[{ label: 'Account', href: '/account' }]}
-        aria-label="List actions"
-      />,
-    );
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Account' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-});

package/src/components/Menubar/Menubar.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Menubar } from './Menubar';
-
-const meta = {
-  title: 'Components/Menubar',
-  component: Menubar,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "Desktop app-style menu bar (File/Edit/View...). A thin composition of NavigationMenu with MenuEntries as each item's flyout content — no positioning or list-rendering logic duplicated.",
-      },
-    },
-  },
-} satisfies Meta<typeof Menubar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  args: {
-    menus: [
-      {
-        label: 'File',
-        items: [
-          { label: 'New conversation', onSelect: () => {} },
-          { label: 'Export', onSelect: () => {} },
-          { type: 'separator' },
-          { label: 'Close', onSelect: () => {} },
-        ],
-      },
-      {
-        label: 'Edit',
-        items: [
-          { label: 'Undo', onSelect: () => {} },
-          { label: 'Redo', onSelect: () => {} },
-        ],
-      },
-      {
-        label: 'View',
-        items: [
-          { type: 'label', label: 'Layout' },
-          { label: 'Compact', checked: false, onSelect: () => {} },
-          { label: 'Comfortable', checked: true, onSelect: () => {} },
-        ],
-      },
-    ],
-  },
-};

package/src/components/Menubar/Menubar.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { NavigationMenu } from '../NavigationMenu/NavigationMenu';
-import { MenuEntries, type MenuEntry } from '../Menu/Menu';
-
-export interface MenubarMenu {
-  label: string;
-  items: MenuEntry[];
-}
-
-export interface MenubarProps {
-  menus: MenubarMenu[];
-  'aria-label'?: string;
-}
-
-/**
- * Menubar — desktop app-style menu bar (File / Edit / View...). A thin
- * composition of `NavigationMenu` (top-level triggers, per-item flyout
- * positioning, hover-switches-when-one-is-open, arrow-key navigation) with
- * `MenuEntries` (the same item list markup `Menu`'s dropdowns use) as each
- * item's flyout content — no positioning or list-rendering logic
- * duplicated from either.
- */
-export function Menubar({ menus, 'aria-label': ariaLabel = 'Menu bar' }: MenubarProps) {
-  return (
-    <NavigationMenu
-      aria-label={ariaLabel}
-      items={menus.map((menu) => ({
-        label: menu.label,
-        content: (close: () => void) => (
-          <MenuEntries
-            items={menu.items}
-            onSelect={(entry) => {
-              close();
-              entry.onSelect?.();
-            }}
-          />
-        ),
-      }))}
-    />
-  );
-}