@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/NavTabs/NavTabs.tsx

@@ -1,61 +0,0 @@
-import { Fragment, type ReactNode } from 'react';
-import styles from './NavTabs.module.css';
-
-export interface NavTabItem {
-  label: string;
-  href: string;
-  active?: boolean;
-}
-
-/** Props to spread onto a consumer-supplied link element — keeps NavTabs' own
- * class names and a11y attributes in sync with whatever the consumer renders. */
-export interface NavTabLinkProps {
-  href: string;
-  className: string;
-  'aria-current': 'page' | undefined;
-  children: ReactNode;
-}
-
-export interface NavTabsProps {
-  items: NavTabItem[];
-  className?: string;
-  'aria-label'?: string;
-  /** Render a tab as something other than a plain `<a href>` — e.g. Next's
-   * `<Link replace>` inside an overlay-shell plugin, where a full page
-   * navigation would break the dialog's history contract. Receives the item
-   * plus the class name/aria attributes NavTabs would otherwise apply. */
-  renderLink?: (item: NavTabItem, linkProps: NavTabLinkProps) => ReactNode;
-}
-
-export function NavTabs({ items, className, 'aria-label': ariaLabel, renderLink }: NavTabsProps) {
-  return (
-    <nav
-      className={[styles.nav, className].filter(Boolean).join(' ')}
-      aria-label={ariaLabel ?? 'Page navigation'}
-    >
-      {items.map((item) => {
-        const linkProps: NavTabLinkProps = {
-          href: item.href,
-          className: [styles.link, item.active && styles.active].filter(Boolean).join(' '),
-          'aria-current': item.active ? 'page' : undefined,
-          children: item.label,
-        };
-        return (
-          <Fragment key={item.href}>
-            {renderLink ? (
-              renderLink(item, linkProps)
-            ) : (
-              <a
-                href={linkProps.href}
-                className={linkProps.className}
-                aria-current={linkProps['aria-current']}
-              >
-                {linkProps.children}
-              </a>
-            )}
-          </Fragment>
-        );
-      })}
-    </nav>
-  );
-}

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/NotificationsPanel/NotificationsPanel.module.css

@@ -1,258 +0,0 @@
-.trigger {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .trigger:hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.badge {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
-  background: var(--sv-color-error-text);
-  color: white;
-  border-radius: var(--sv-radius-full);
-  font-size: 9px;
-  font-weight: 700;
-  line-height: 14px;
-  text-align: center;
-  pointer-events: none;
-}
-
-/* ── Header ─────────────────────────────────────────────────────────────── */
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-4);
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-.headerTitle {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-  flex: 1;
-}
-
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-}
-
-.actionBtn {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-  white-space: nowrap;
-}
-
-@media (hover: hover) {
-  .actionBtn:hover {
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.closeBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: none;
-  color: var(--sv-color-text-muted);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .closeBtn:hover {
-    color: var(--sv-color-text-primary);
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-/* ── List ───────────────────────────────────────────────────────────────── */
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-height: 420px;
-  overflow-y: auto;
-}
-
-/* ── Empty state ────────────────────────────────────────────────────────── */
-
-.empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-10) var(--sv-space-4);
-}
-
-.emptyIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-}
-
-.emptyText {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-}
-
-/* ── Notification item ─────────────────────────────────────────────────── */
-
-.item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-3);
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-.item:last-child {
-  border-bottom: none;
-}
-
-.categoryIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--sv-radius-full);
-  margin-top: 1px;
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-}
-
-.itemBody {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.itemTitle {
-  display: block;
-  width: 100%;
-  border: none;
-  padding: 0;
-  background: none;
-  font: inherit;
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-  text-decoration: none;
-  text-align: left;
-  line-height: 1.4;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  a.itemTitle:hover,
-  button.itemTitle:hover {
-    text-decoration: underline;
-  }
-}
-
-.itemRead .itemTitle {
-  color: var(--sv-color-text-subtle);
-  cursor: default;
-}
-
-.itemTime {
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-}
-
-.itemEnd {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  flex: none;
-  padding-top: 2px;
-}
-
-.unreadDot {
-  display: block;
-  width: 7px;
-  height: 7px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  flex: none;
-}
-
-.dismissBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: none;
-  color: var(--sv-color-text-muted);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .dismissBtn:hover {
-    color: var(--sv-color-text-primary);
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.viewAll {
-  display: block;
-  text-align: center;
-  padding: var(--sv-space-2) var(--sv-space-3);
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .viewAll:hover {
-    color: var(--sv-color-text-primary);
-    background: var(--sv-color-surface-sunken);
-  }
-}