@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/HeaderFooterLayout/HeaderFooterLayout.stories.tsx

@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HeaderFooterLayout } from './HeaderFooterLayout';
-
-function Bar({ label }: { label: string }) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        fontWeight: 600,
-        color: 'var(--sv-color-text-primary)',
-        background: 'var(--sv-color-surface-raised)',
-        borderBlock: '1px solid var(--sv-color-border)',
-      }}
-    >
-      {label}
-    </div>
-  );
-}
-
-function ScrollableMain() {
-  return (
-    <div style={{ padding: 'var(--sv-space-4)', fontFamily: 'var(--sv-font-family)' }}>
-      {Array.from({ length: 30 }, (_, index) => (
-        <p key={index} style={{ color: 'var(--sv-color-text-primary)' }}>
-          Row {index + 1} — the main region scrolls independently; header and footer stay put.
-        </p>
-      ))}
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/HeaderFooterLayout',
-  component: HeaderFooterLayout,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Header + main + optional footer, both fixed-height and independently optional, with main always claiming the remaining height. The vertical counterpart to ThreeColumnLayout — a plain flex column, no color opinions, no responsive behavior of its own.',
-      },
-    },
-  },
-  args: {
-    children: <ScrollableMain />,
-  },
-} satisfies Meta<typeof HeaderFooterLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The canonical usage — header + main + footer, all three present. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <HeaderFooterLayout header={<Bar label="Header" />} footer={<Bar label="Footer" />}>
-        <ScrollableMain />
-      </HeaderFooterLayout>
-    </div>
-  ),
-};
-
-export const HeaderOnly: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <HeaderFooterLayout header={<Bar label="Header" />}>
-        <ScrollableMain />
-      </HeaderFooterLayout>
-    </div>
-  ),
-};
-
-export const FooterOnly: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <HeaderFooterLayout footer={<Bar label="Footer" />}>
-        <ScrollableMain />
-      </HeaderFooterLayout>
-    </div>
-  ),
-};
-
-export const MainOnly: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <HeaderFooterLayout>
-        <ScrollableMain />
-      </HeaderFooterLayout>
-    </div>
-  ),
-};
-
-export const CustomHeights: Story = {
-  render: () => (
-    <div style={{ height: '480px' }}>
-      <HeaderFooterLayout
-        header={<Bar label="Header (100px)" />}
-        footer={<Bar label="Footer (48px)" />}
-        headerHeight={100}
-        footerHeight={48}
-      >
-        <ScrollableMain />
-      </HeaderFooterLayout>
-    </div>
-  ),
-};

package/src/components/HeaderFooterLayout/HeaderFooterLayout.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import styles from './HeaderFooterLayout.module.css';
-
-export interface HeaderFooterLayoutProps {
-  /** Main content — required, always fills whatever height header/footer don't claim. */
-  children: ReactNode;
-  header?: ReactNode;
-  footer?: ReactNode;
-  /** px. Fixed height of the header, when present. Default 60 (matches
-   *  MobileHeader/--sv-shell-header-height's own default). */
-  headerHeight?: number;
-  /** px. Fixed height of the footer, when present. Default 60 (matches
-   *  MobileFooter/--sv-shell-footer-height's own default). */
-  footerHeight?: number;
-  className?: string;
-}
-
-/**
- * HeaderFooterLayout — header + main + optional footer, both fixed-height
- * and independently optional, with main always claiming the remaining
- * height. The vertical counterpart to ThreeColumnLayout: same purely
- * structural approach (no color/background opinions, no awareness of what's
- * inside each slot, no responsive behavior of its own — a plain flex
- * column), just rotated. "Footer always at the bottom" falls out of flex
- * layout alone; there is no position: fixed or safe-area handling here, so
- * a caller composing this with the platform shell's own chrome still owns
- * that separately.
- */
-export function HeaderFooterLayout({
-  children,
-  header,
-  footer,
-  headerHeight = 60,
-  footerHeight = 60,
-  className,
-}: HeaderFooterLayoutProps) {
-  return (
-    <div className={[styles.shell, className].filter(Boolean).join(' ')}>
-      {header && (
-        <div className={styles.header} style={{ height: headerHeight }}>
-          {header}
-        </div>
-      )}
-      <div className={styles.main}>{children}</div>
-      {footer && (
-        <div className={styles.footer} style={{ height: footerHeight }}>
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { HeaderFooterLayout } from '../HeaderFooterLayout';
-
-afterEach(cleanup);
-
-describe('HeaderFooterLayout', () => {
-  it('renders main content with no header/footer by default', () => {
-    render(<HeaderFooterLayout>Main content</HeaderFooterLayout>);
-
-    expect(screen.getByText('Main content')).toBeDefined();
-    expect(screen.queryByText('Header')).toBeNull();
-    expect(screen.queryByText('Footer')).toBeNull();
-  });
-
-  it('renders header and footer when given', () => {
-    render(
-      <HeaderFooterLayout header={<span>Header</span>} footer={<span>Footer</span>}>
-        Main content
-      </HeaderFooterLayout>,
-    );
-
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.getByText('Main content')).toBeDefined();
-    expect(screen.getByText('Footer')).toBeDefined();
-  });
-
-  it('renders header without a footer', () => {
-    render(<HeaderFooterLayout header={<span>Header</span>}>Main content</HeaderFooterLayout>);
-
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.queryByText('Footer')).toBeNull();
-  });
-
-  it('renders footer without a header', () => {
-    render(<HeaderFooterLayout footer={<span>Footer</span>}>Main content</HeaderFooterLayout>);
-
-    expect(screen.queryByText('Header')).toBeNull();
-    expect(screen.getByText('Footer')).toBeDefined();
-  });
-
-  it('applies headerHeight and footerHeight as inline heights', () => {
-    render(
-      <HeaderFooterLayout
-        header={<span>Header</span>}
-        footer={<span>Footer</span>}
-        headerHeight={48}
-        footerHeight={72}
-      >
-        Main content
-      </HeaderFooterLayout>,
-    );
-
-    expect(screen.getByText('Header').parentElement?.style.height).toBe('48px');
-    expect(screen.getByText('Footer').parentElement?.style.height).toBe('72px');
-  });
-});

package/src/components/HoverCard/HoverCard.module.css

@@ -1,3 +0,0 @@
-.root {
-  display: inline-flex;
-}

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HoverCard } from './HoverCard';
-import { Avatar } from '../Avatar/Avatar';
-
-const meta = {
-  title: 'Components/HoverCard',
-  component: HoverCard,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Hover-triggered popover on desktop, tap-to-toggle on touch. Built on Popover for positioning/collision detection — this only adds hover-intent timing and the touch fallback. Opens on keyboard focus too.',
-      },
-    },
-  },
-  args: { trigger: <span />, children: null, 'aria-label': 'Preview' },
-} satisfies Meta<typeof HoverCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: () => (
-    <HoverCard
-      aria-label="User preview"
-      trigger={
-        <button
-          type="button"
-          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
-        >
-          <Avatar name="Jane Smith" size="sm" />
-        </button>
-      }
-    >
-      <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
-        <div style={{ fontWeight: 600 }}>Jane Smith</div>
-        <div style={{ color: 'var(--sv-color-text-muted)' }}>jane@example.com</div>
-      </div>
-    </HoverCard>
-  ),
-};
-
-export const WithLink: Story = {
-  render: () => (
-    <p style={{ fontSize: 14 }}>
-      Assigned to{' '}
-      <HoverCard
-        aria-label="Assignee preview"
-        trigger={
-          <a href="/console/users/jane-smith" style={{ color: 'var(--sv-color-text-primary)' }}>
-            Jane Smith
-          </a>
-        }
-      >
-        <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
-          <div style={{ fontWeight: 600 }}>Jane Smith</div>
-          <div style={{ color: 'var(--sv-color-text-muted)' }}>12 tasks completed this month</div>
-        </div>
-      </HoverCard>
-      .
-    </p>
-  ),
-};

package/src/components/HoverCard/HoverCard.tsx

@@ -1,111 +0,0 @@
-'use client';
-
-import { cloneElement, useEffect, useRef, useState } from 'react';
-import type { ReactElement, ReactNode } from 'react';
-import { Popover } from '../Popover/Popover';
-import styles from './HoverCard.module.css';
-
-export interface HoverCardProps {
-  /** The element that opens the card — cloned with hover/focus handlers
-   * (desktop) or a tap handler (touch). */
-  trigger: ReactElement;
-  children: ReactNode;
-  align?: 'left' | 'right';
-  width?: number | 'trigger';
-  'aria-label': string;
-}
-
-const OPEN_DELAY_MS = 400;
-const CLOSE_DELAY_MS = 150;
-
-/** Whether the primary pointer can hover. Distinct from viewport-width-based
- * mobile detection: a touchscreen laptop with a mouse as its primary
- * pointer should still get real hover behavior, and a large-viewport tablet
- * with only touch should not — viewport width doesn't capture that, `(hover:
- * hover)` does, matching the pointer-based gating this design system already
- * uses in CSS (e.g. Button/Checkbox's touch-target expansion). Defaults to
- * `true`: this only changes which event handlers get attached, not the
- * initial DOM shape, so there's no hydration-mismatch risk to guard against
- * the way `useIsMobile` does. */
-function useHoverCapable(): boolean {
-  const [hoverCapable, setHoverCapable] = useState(true);
-
-  useEffect(() => {
-    const mql = window.matchMedia('(hover: hover)');
-    setHoverCapable(mql.matches);
-    function handleChange(e: MediaQueryListEvent) {
-      setHoverCapable(e.matches);
-    }
-    mql.addEventListener('change', handleChange);
-    return () => mql.removeEventListener('change', handleChange);
-  }, []);
-
-  return hoverCapable;
-}
-
-/**
- * HoverCard — hover-triggered popover on desktop, tap-to-toggle on touch.
- *
- * Built on `Popover` rather than reimplementing positioning/collision
- * detection: this only adds the hover-intent open/close timing (avoids
- * flicker on an accidental mouse pass-over, and gives the pointer time to
- * travel from the trigger to the card itself across the gap between them)
- * and the touch fallback. Also opens on keyboard focus and closes on blur —
- * a hover-only trigger is a WCAG failure, since keyboard users can't hover.
- */
-export function HoverCard({
-  trigger,
-  children,
-  align,
-  width,
-  'aria-label': ariaLabel,
-}: HoverCardProps) {
-  const [open, setOpen] = useState(false);
-  const hoverCapable = useHoverCapable();
-  const openTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-  function scheduleOpen() {
-    clearTimeout(closeTimer.current);
-    openTimer.current = setTimeout(() => setOpen(true), OPEN_DELAY_MS);
-  }
-
-  function scheduleClose() {
-    clearTimeout(openTimer.current);
-    closeTimer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
-  }
-
-  function cancelScheduledClose() {
-    clearTimeout(closeTimer.current);
-  }
-
-  const triggerHandlers = hoverCapable
-    ? {
-        onMouseEnter: scheduleOpen,
-        onMouseLeave: scheduleClose,
-        onFocus: () => setOpen(true),
-        onBlur: scheduleClose,
-      }
-    : { onClick: () => setOpen((o) => !o) };
-
-  const wrappedTrigger = cloneElement(trigger, triggerHandlers);
-
-  return (
-    <div
-      className={styles.root}
-      onMouseEnter={hoverCapable ? cancelScheduledClose : undefined}
-      onMouseLeave={hoverCapable ? scheduleClose : undefined}
-    >
-      <Popover
-        trigger={wrappedTrigger}
-        open={open}
-        onClose={() => setOpen(false)}
-        align={align}
-        width={width}
-        aria-label={ariaLabel}
-      >
-        {children}
-      </Popover>
-    </div>
-  );
-}

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

@@ -1,99 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { HoverCard } from '../HoverCard';
-
-let matches = true;
-
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-describe('HoverCard', () => {
-  beforeEach(() => {
-    matches = true; // hover-capable by default
-    installMatchMedia();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('does not open immediately on mouse enter (hover-intent delay)', () => {
-    render(
-      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
-        Card content
-      </HoverCard>,
-    );
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.queryByText('Card content')).toBeNull();
-  });
-
-  it('opens after the hover-intent delay elapses', () => {
-    render(
-      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
-        Card content
-      </HoverCard>,
-    );
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Profile' }));
-    act(() => {
-      vi.advanceTimersByTime(500);
-    });
-    expect(screen.getByText('Card content')).toBeDefined();
-  });
-
-  it('cancels the open timer if the pointer leaves before the delay elapses', () => {
-    render(
-      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
-        Card content
-      </HoverCard>,
-    );
-    const trigger = screen.getByRole('button', { name: 'Profile' });
-    fireEvent.mouseEnter(trigger);
-    fireEvent.mouseLeave(trigger);
-    act(() => {
-      vi.advanceTimersByTime(1000);
-    });
-    expect(screen.queryByText('Card content')).toBeNull();
-  });
-
-  it('opens immediately on keyboard focus, for keyboard accessibility', () => {
-    render(
-      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
-        Card content
-      </HoverCard>,
-    );
-    fireEvent.focus(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('Card content')).toBeDefined();
-  });
-
-  it('falls back to tap-to-toggle when the pointer cannot hover', () => {
-    matches = false;
-    installMatchMedia();
-    render(
-      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
-        Card content
-      </HoverCard>,
-    );
-    const trigger = screen.getByRole('button', { name: 'Profile' });
-    fireEvent.click(trigger);
-    expect(screen.getByText('Card content')).toBeDefined();
-    fireEvent.click(trigger);
-    expect(screen.queryByText('Card content')).toBeNull();
-  });
-});

package/src/components/Icon/Icon.module.css

@@ -1,27 +0,0 @@
-.root {
-  display: inline-block;
-  flex-shrink: 0;
-  /* Prevent the inline-block from adding line-height whitespace below the SVG. */
-  line-height: 0;
-  /* Color follows the surrounding text via currentColor — no token needed. */
-}
-
-.xs {
-  width: var(--sv-icon-size-xs);
-  height: var(--sv-icon-size-xs);
-}
-
-.sm {
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-}
-
-.md {
-  width: var(--sv-icon-size-md);
-  height: var(--sv-icon-size-md);
-}
-
-.lg {
-  width: var(--sv-icon-size-lg);
-  height: var(--sv-icon-size-lg);
-}

package/src/components/Icon/Icon.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ICONS, type IconName } from './icons';
-import { Icon } from './Icon';
-
-const ALL_NAMES = Object.keys(ICONS) as IconName[];
-
-const meta = {
-  title: 'Components/Icon',
-  component: Icon,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'SVG icon primitive. Icons are either **decorative** (`aria-hidden`) or **meaningful** (`aria-label`). Size is controlled by `--sv-icon-size-*` tokens.',
-      },
-    },
-  },
-  argTypes: {
-    name: { control: 'select', options: ALL_NAMES },
-    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Decorative: Story = {
-  args: { name: 'house', size: 'md', 'aria-hidden': true },
-};
-
-export const Meaningful: Story = {
-  args: { name: 'settings', size: 'md', 'aria-label': 'Open settings' },
-};
-
-export const SizeExtraSmall: Story = { args: { name: 'bell', size: 'xs', 'aria-hidden': true } };
-export const SizeSmall: Story = { args: { name: 'bell', size: 'sm', 'aria-hidden': true } };
-export const SizeMedium: Story = { args: { name: 'bell', size: 'md', 'aria-hidden': true } };
-export const SizeLarge: Story = { args: { name: 'bell', size: 'lg', 'aria-hidden': true } };
-
-/** Full icon grid — every name across all four sizes. */
-export const AllIcons: Story = {
-  parameters: { layout: 'padded' },
-  args: { name: 'house', 'aria-hidden': true },
-  render: (_args) => (
-    <div>
-      {(['xs', 'sm', 'md', 'lg'] as const).map((sz) => (
-        <section key={sz} style={{ marginBottom: 32 }}>
-          <h3
-            style={{
-              fontFamily: 'system-ui',
-              fontSize: 13,
-              fontWeight: 600,
-              color: 'var(--sv-color-text-muted)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.08em',
-              marginBottom: 12,
-            }}
-          >
-            Size: {sz}
-          </h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
-            {ALL_NAMES.map((name) => (
-              <div
-                key={name}
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: 4,
-                  width: 64,
-                }}
-              >
-                <Icon name={name} size={sz} aria-hidden />
-                <span
-                  style={{
-                    fontFamily: 'monospace',
-                    fontSize: 10,
-                    color: 'var(--sv-color-text-muted)',
-                    textAlign: 'center',
-                    wordBreak: 'break-word',
-                  }}
-                >
-                  {name}
-                </span>
-              </div>
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
-  ),
-};

package/src/components/Icon/Icon.tsx

@@ -1,43 +0,0 @@
-import { ICONS, type IconName } from './icons';
-import styles from './Icon.module.css';
-
-export type { IconName };
-
-/** Decorative icon — visually meaningful but described by surrounding text. */
-type DecorativeProps = { 'aria-hidden': true; 'aria-label'?: never };
-/** Meaningful icon — standalone affordance that requires a label for screen readers. */
-type MeaningfulProps = { 'aria-label': string; 'aria-hidden'?: never };
-
-export interface IconProps {
-  /** Name of the icon from the curated Sovereign set. */
-  name: IconName;
-  /** Visual size. Defaults to `"md"` (20 px). */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  /** Additional CSS class applied to the SVG element. */
-  className?: string;
-}
-
-/**
- * `<Icon>` — the Sovereign design system icon primitive.
- *
- * Icons are either **decorative** (described by surrounding text — pass `aria-hidden`)
- * or **meaningful** (standalone affordance — pass `aria-label`):
- *
- * ```tsx
- * <Icon name="house" aria-hidden />           // decorative
- * <Icon name="log-out" aria-label="Sign out" /> // meaningful
- * ```
- *
- * Color follows `currentColor` so an icon automatically inherits the text color
- * of its container and recolors with theme changes — no extra CSS required.
- */
-export function Icon({
-  name,
-  size = 'md',
-  className,
-  ...aria
-}: IconProps & (DecorativeProps | MeaningfulProps)) {
-  const Svg = ICONS[name];
-  const classes = [styles.root, styles[size], className].filter(Boolean).join(' ');
-  return <Svg className={classes} role={aria['aria-label'] ? 'img' : undefined} {...aria} />;
-}