@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/FormField/FormField.module.css

@@ -1,33 +0,0 @@
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-  /* Every local .field/.fieldGroup class this component replaced set this
-     explicitly. Without it, a parent with align-items: flex-start (needed so
-     submit buttons don't stretch full-width) shrink-wraps this wrapper to its
-     content's intrinsic width instead of filling the available space. */
-  width: 100%;
-}
-
-.label {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-}
-
-.required {
-  color: var(--sv-color-error-text);
-  margin-left: var(--sv-space-1);
-}
-
-.hint {
-  margin: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-muted);
-}
-
-.error {
-  margin: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-error-text);
-}

package/src/components/FormField/FormField.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-import { useId } from 'react';
-import styles from './FormField.module.css';
-
-/** Props to spread onto the field's actual form control. */
-export interface FormFieldRenderProps {
-  id: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  required?: boolean;
-}
-
-export interface FormFieldProps {
-  label: string;
-  hint?: string;
-  error?: string;
-  /** Explicit control id. Auto-generated via `useId()` when omitted. */
-  id?: string;
-  required?: boolean;
-  className?: string;
-  /** Render prop — receives the props that must be spread onto the control
-   * so the label, hint, and error stay associated with it. */
-  children: (field: FormFieldRenderProps) => ReactNode;
-}
-
-/**
- * FormField — accessible label + hint/error wrapper for a single form control.
- * Wires `htmlFor`/`id` and `aria-describedby`/`aria-invalid` onto the control
- * itself (via the render-prop `field` object), not a surrounding element, so
- * screen readers reliably announce the hint or error as part of the control.
- */
-export function FormField({
-  label,
-  hint,
-  error,
-  id,
-  required = false,
-  className,
-  children,
-}: FormFieldProps) {
-  const generatedId = useId();
-  const fieldId = id ?? generatedId;
-  const hintId = `${fieldId}-hint`;
-  const errorId = `${fieldId}-error`;
-  const describedBy =
-    [hint && !error && hintId, error && errorId].filter(Boolean).join(' ') || undefined;
-
-  const field: FormFieldRenderProps = {
-    id: fieldId,
-    'aria-describedby': describedBy,
-    'aria-invalid': error ? true : undefined,
-    required: required || undefined,
-  };
-
-  return (
-    <div className={[styles.field, className].filter(Boolean).join(' ')}>
-      <label className={styles.label} htmlFor={fieldId}>
-        {label}
-        {required && (
-          <span className={styles.required} aria-hidden="true">
-            *
-          </span>
-        )}
-      </label>
-      {children(field)}
-      {hint && !error && (
-        <p id={hintId} className={styles.hint}>
-          {hint}
-        </p>
-      )}
-      {error && (
-        <p id={errorId} className={styles.error} role="alert">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,83 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { FormField } from '../FormField';
-
-afterEach(cleanup);
-
-describe('FormField', () => {
-  it('associates the label with the control via htmlFor/id', () => {
-    render(
-      <FormField label="Email" id="email">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByLabelText('Email')).toBeDefined();
-  });
-
-  it('generates an id when none is provided', () => {
-    render(<FormField label="Email">{(field) => <input {...field} />}</FormField>);
-    const input = screen.getByLabelText('Email') as HTMLInputElement;
-    expect(input.id).toBeTruthy();
-  });
-
-  it('wires the hint to the control via aria-describedby', () => {
-    render(
-      <FormField label="Username" hint="Letters and numbers only." id="username">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText('Username');
-    const hint = screen.getByText('Letters and numbers only.');
-    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
-  });
-
-  it('wires the error to the control via aria-describedby and marks it invalid', () => {
-    render(
-      <FormField label="Password" error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText('Password');
-    const error = screen.getByText('Too short.');
-    expect(input.getAttribute('aria-describedby')).toBe(error.id);
-    expect(input.getAttribute('aria-invalid')).toBe('true');
-  });
-
-  it('renders the error with role="alert"', () => {
-    render(
-      <FormField label="Password" error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByRole('alert').textContent).toBe('Too short.');
-  });
-
-  it('hides the hint when an error is present', () => {
-    render(
-      <FormField label="Password" hint="At least 8 characters." error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.queryByText('At least 8 characters.')).toBeNull();
-  });
-
-  it('shows a required indicator and sets required on the control', () => {
-    render(
-      <FormField label="Full name" required id="name">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText(/Full name/) as HTMLInputElement;
-    expect(input.required).toBe(true);
-  });
-
-  it('does not set aria-describedby when there is no hint or error', () => {
-    render(
-      <FormField label="Nickname" id="nickname">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByLabelText('Nickname').hasAttribute('aria-describedby')).toBe(false);
-  });
-});

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} />;
-}

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

@@ -1,40 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Icon } from '../Icon';
-
-describe('Icon', () => {
-  it('renders an SVG element', () => {
-    const { container } = render(<Icon name="house" aria-hidden />);
-    expect(container.querySelector('svg')).toBeTruthy();
-  });
-
-  it('applies aria-hidden for decorative icons', () => {
-    const { container } = render(<Icon name="house" aria-hidden />);
-    expect(container.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('applies aria-label and role="img" for meaningful icons', () => {
-    render(<Icon name="log-out" aria-label="Sign out" />);
-    const svg = screen.getByRole('img', { name: 'Sign out' });
-    expect(svg).toBeTruthy();
-  });
-
-  it('defaults to md size', () => {
-    const { container } = render(<Icon name="settings" aria-hidden />);
-    const svg = container.querySelector('svg');
-    // SVG className is an SVGAnimatedString in the DOM — use getAttribute('class').
-    // CSS Modules are identity-mapped in the test environment, so 'md' is literal.
-    expect(svg?.getAttribute('class')).toContain('md');
-  });
-
-  it('applies the requested size class', () => {
-    const { container } = render(<Icon name="settings" size="lg" aria-hidden />);
-    expect(container.querySelector('svg')?.getAttribute('class')).toContain('lg');
-  });
-
-  it('merges an additional className', () => {
-    const { container } = render(<Icon name="x" aria-hidden className="my-class" />);
-    expect(container.querySelector('svg')?.getAttribute('class')).toContain('my-class');
-  });
-});