@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Toggle } from './Toggle';
-
-const meta = {
-  title: 'Components/Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '38×22px binary switch for settings rows. Renders as `<button role="switch">` for reliable VoiceOver support. `aria-label` is required.',
-      },
-    },
-  },
-  argTypes: {
-    checked: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    checked: false,
-    onChange: () => {},
-    'aria-label': 'Toggle setting',
-  },
-} satisfies Meta<typeof Toggle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Off: Story = { args: { checked: false } };
-export const On: Story = { args: { checked: true } };
-export const Disabled: Story = { args: { checked: false, disabled: true } };
-export const DisabledOn: Story = { args: { checked: true, disabled: true } };
-
-/** Interactive — click to toggle. */
-export const Interactive: Story = {
-  render: (args) => {
-    const [checked, setChecked] = useState(args.checked);
-    return <Toggle {...args} checked={checked} onChange={setChecked} />;
-  },
-};
-
-/** Settings rows — typical usage with adjacent label text. */
-export const SettingsRows: Story = {
-  render: (_args) => {
-    const [twoFA, setTwoFA] = useState(true);
-    const [email, setEmail] = useState(false);
-
-    const rowStyle: React.CSSProperties = {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 32,
-      padding: '12px 0',
-      borderBottom: '1px solid var(--sv-color-border)',
-      fontFamily: 'var(--sv-font-family)',
-    };
-    const labelStyle: React.CSSProperties = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 2,
-    };
-    const titleStyle: React.CSSProperties = {
-      fontSize: 'var(--sv-font-size-sm)',
-      fontWeight: 'var(--sv-font-weight-medium)',
-      color: 'var(--sv-color-text-primary)',
-    };
-    const descStyle: React.CSSProperties = {
-      fontSize: 'var(--sv-font-size-caption)',
-      color: 'var(--sv-color-text-muted)',
-    };
-
-    return (
-      <div style={{ width: 320 }}>
-        <div style={rowStyle}>
-          <div style={labelStyle}>
-            <span style={titleStyle}>Two-factor authentication</span>
-            <span style={descStyle}>Require a code when signing in.</span>
-          </div>
-          <Toggle checked={twoFA} onChange={setTwoFA} aria-label="Two-factor authentication" />
-        </div>
-        <div style={rowStyle}>
-          <div style={labelStyle}>
-            <span style={titleStyle}>Email notifications</span>
-            <span style={descStyle}>Receive digests and alerts.</span>
-          </div>
-          <Toggle checked={email} onChange={setEmail} aria-label="Email notifications" />
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Toggle/Toggle.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import type { ButtonHTMLAttributes } from 'react';
-import styles from './Toggle.module.css';
-
-export interface ToggleProps extends Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'onChange' | 'aria-label'
-> {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-  'aria-label': string;
-}
-
-/**
- * Toggle — 38×22px binary switch for settings rows.
- *
- * Renders as `<button role="switch">` rather than a hidden `<input type="checkbox">`
- * to avoid iOS VoiceOver focus quirks on visually styled checkboxes. The `aria-label`
- * prop is required because the control has no visible text label of its own.
- */
-export function Toggle({ checked, onChange, disabled, className, ...rest }: ToggleProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      disabled={disabled}
-      className={[styles.track, checked ? styles.on : styles.off, className]
-        .filter(Boolean)
-        .join(' ')}
-      onClick={() => onChange(!checked)}
-      {...rest}
-    >
-      <span className={styles.thumb} />
-    </button>
-  );
-}

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

@@ -1,47 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-
-afterEach(cleanup);
-import { Toggle } from '../Toggle';
-
-describe('Toggle', () => {
-  it('renders as a switch button', () => {
-    render(<Toggle checked={false} onChange={() => {}} aria-label="Notifications" />);
-    expect(screen.getByRole('switch', { name: 'Notifications' })).toBeDefined();
-  });
-
-  it('reflects checked state via aria-checked', () => {
-    const { rerender } = render(
-      <Toggle checked={false} onChange={() => {}} aria-label="Setting" />,
-    );
-    expect(screen.getByRole('switch').getAttribute('aria-checked')).toBe('false');
-
-    rerender(<Toggle checked={true} onChange={() => {}} aria-label="Setting" />);
-    expect(screen.getByRole('switch').getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('calls onChange with toggled value on click', () => {
-    const onChange = vi.fn();
-    render(<Toggle checked={false} onChange={onChange} aria-label="Setting" />);
-    fireEvent.click(screen.getByRole('switch'));
-    expect(onChange).toHaveBeenCalledWith(true);
-  });
-
-  it('does not call onChange when disabled', () => {
-    const onChange = vi.fn();
-    render(<Toggle checked={false} onChange={onChange} disabled aria-label="Setting" />);
-    fireEvent.click(screen.getByRole('switch'));
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('applies on class when checked', () => {
-    render(<Toggle checked={true} onChange={() => {}} aria-label="Setting" />);
-    expect(screen.getByRole('switch').className).toContain('on');
-  });
-
-  it('applies off class when unchecked', () => {
-    render(<Toggle checked={false} onChange={() => {}} aria-label="Setting" />);
-    expect(screen.getByRole('switch').className).toContain('off');
-  });
-});

package/src/components/Tooltip/Tooltip.module.css

@@ -1,56 +0,0 @@
-.wrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.tip {
-  position: absolute;
-  z-index: 50;
-  white-space: nowrap;
-  padding: var(--sv-space-1) var(--sv-space-2);
-  background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-md);
-  box-shadow: var(--sv-shadow-popover);
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s ease;
-}
-
-@media (hover: hover) {
-  .wrapper:hover .tip {
-    opacity: 1;
-  }
-}
-
-.wrapper:focus-within .tip {
-  opacity: 1;
-}
-
-/* Placement */
-.top {
-  bottom: calc(100% + var(--sv-space-2));
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.bottom {
-  top: calc(100% + var(--sv-space-2));
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.left {
-  right: calc(100% + var(--sv-space-2));
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.right {
-  left: calc(100% + var(--sv-space-2));
-  top: 50%;
-  transform: translateY(-50%);
-}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,30 +0,0 @@
-import type { ReactElement } from 'react';
-import { useId } from 'react';
-import styles from './Tooltip.module.css';
-
-export interface TooltipProps {
-  content: string;
-  children: ReactElement;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-}
-
-const sideClass: Record<NonNullable<TooltipProps['side']>, string> = {
-  top: styles.top as string,
-  bottom: styles.bottom as string,
-  left: styles.left as string,
-  right: styles.right as string,
-};
-
-export function Tooltip({ content, children, side = 'top' }: TooltipProps) {
-  const tipId = useId();
-
-  return (
-    <span className={styles.wrapper}>
-      {/* aria-describedby wires the tooltip text to the trigger for screen readers */}
-      <span aria-describedby={tipId}>{children}</span>
-      <span id={tipId} role="tooltip" className={[styles.tip, sideClass[side]].join(' ')}>
-        {content}
-      </span>
-    </span>
-  );
-}

package/src/components/Typography/Typography.module.css

@@ -1,47 +0,0 @@
-.h1 {
-  margin: 0;
-  font-size: var(--sv-font-size-2xl);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.h2 {
-  margin: 0;
-  font-size: var(--sv-font-size-xl);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.h3 {
-  margin: 0;
-  font-size: var(--sv-font-size-lg);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.h4 {
-  margin: 0;
-  font-size: var(--sv-font-size-md);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.body {
-  margin: 0;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-}
-
-.caption {
-  margin: 0;
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-}
-
-.label {
-  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;
-}

package/src/components/Typography/Typography.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Typography } from './Typography';
-
-const meta = {
-  title: 'Components/Typography',
-  component: Typography,
-  parameters: { layout: 'padded' },
-  args: {
-    variant: 'body',
-    children: 'The quick brown fox',
-  },
-} satisfies Meta<typeof Typography>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const H1: Story = {
-  args: { variant: 'h1' },
-};
-
-export const H2: Story = {
-  args: { variant: 'h2' },
-};
-
-export const H3: Story = {
-  args: { variant: 'h3' },
-};
-
-export const H4: Story = {
-  args: { variant: 'h4' },
-};
-
-export const Body: Story = {
-  args: { variant: 'body' },
-};
-
-export const Caption: Story = {
-  args: { variant: 'caption' },
-};
-
-export const LabelVariant: Story = {
-  name: 'Label',
-  args: { variant: 'label', children: 'Section label' },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Typography variant="h1">Heading 1</Typography>
-      <Typography variant="h2">Heading 2</Typography>
-      <Typography variant="h3">Heading 3</Typography>
-      <Typography variant="h4">Heading 4</Typography>
-      <Typography variant="body">
-        Body copy — the default reading size for paragraphs and descriptions.
-      </Typography>
-      <Typography variant="caption">Caption — secondary, supporting copy.</Typography>
-      <Typography variant="label">Section label</Typography>
-    </div>
-  ),
-};

package/src/components/Typography/Typography.tsx

@@ -1,30 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import styles from './Typography.module.css';
-
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption' | 'label';
-
-const DEFAULT_TAG: Record<TypographyVariant, ElementType> = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  body: 'p',
-  caption: 'p',
-  label: 'span',
-};
-
-export interface TypographyProps {
-  variant: TypographyVariant;
-  children: ReactNode;
-  /** Override the rendered tag while keeping the variant's visual style —
-   * e.g. `variant="h1" as="div"` to avoid a second `<h1>` on a page that
-   * already has one. */
-  as?: ElementType;
-  className?: string;
-}
-
-/** Typography — text bound to the design system's font-size/weight scale. */
-export function Typography({ variant, children, as, className }: TypographyProps) {
-  const Tag = as ?? DEFAULT_TAG[variant];
-  return <Tag className={[styles[variant], className].filter(Boolean).join(' ')}>{children}</Tag>;
-}

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

@@ -1,34 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Typography } from '../Typography';
-
-afterEach(cleanup);
-
-describe('Typography', () => {
-  it('renders the default tag for each variant', () => {
-    render(<Typography variant="h1">Title</Typography>);
-    expect(screen.getByText('Title').tagName).toBe('H1');
-  });
-
-  it('renders body as a <p> by default', () => {
-    render(<Typography variant="body">Body copy</Typography>);
-    expect(screen.getByText('Body copy').tagName).toBe('P');
-  });
-
-  it('renders label as a <span> by default', () => {
-    render(<Typography variant="label">Section</Typography>);
-    expect(screen.getByText('Section').tagName).toBe('SPAN');
-  });
-
-  it('overrides the rendered tag via `as` while keeping the variant class', () => {
-    render(
-      <Typography variant="h1" as="div">
-        Title
-      </Typography>,
-    );
-    const el = screen.getByText('Title');
-    expect(el.tagName).toBe('DIV');
-    expect(el.className).toContain('h1');
-  });
-});

package/src/css-modules.d.ts

@@ -1,4 +0,0 @@
-declare module '*.module.css' {
-  const classes: Readonly<Record<string, string>>;
-  export default classes;
-}

package/src/hooks/__tests__/useCarouselRouteSync.test.tsx

@@ -1,126 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render } from '@testing-library/react';
-import { useCarouselRouteSync } from '../useCarouselRouteSync';
-
-const SLIDES = ['/a', '/b', '/c'];
-function indexForPathname(pathname: string) {
-  const i = SLIDES.indexOf(pathname);
-  return i === -1 ? 0 : i;
-}
-function pathForIndex(index: number) {
-  return SLIDES[index] ?? '/a';
-}
-
-function Harness({
-  pathname,
-  onNavigate,
-  onResult,
-}: {
-  pathname: string;
-  onNavigate: (path: string) => void;
-  onResult: (result: { activeIndex: number; onSettle: (i: number) => void }) => void;
-}) {
-  const result = useCarouselRouteSync({ indexForPathname, pathForIndex, pathname, onNavigate });
-  onResult(result);
-  return <span data-testid="active">{result.activeIndex}</span>;
-}
-
-afterEach(cleanup);
-
-describe('useCarouselRouteSync', () => {
-  it('initializes activeIndex from the current pathname', () => {
-    const onNavigate = vi.fn();
-    const { getByTestId } = render(
-      <Harness pathname="/b" onNavigate={onNavigate} onResult={() => {}} />,
-    );
-    expect(getByTestId('active').textContent).toBe('1');
-    expect(onNavigate).not.toHaveBeenCalled();
-  });
-
-  it('an external pathname change (tapped Link, browser back/forward) updates activeIndex without calling onNavigate', () => {
-    const onNavigate = vi.fn();
-    const { getByTestId, rerender } = render(
-      <Harness pathname="/a" onNavigate={onNavigate} onResult={() => {}} />,
-    );
-    expect(getByTestId('active').textContent).toBe('0');
-
-    rerender(<Harness pathname="/c" onNavigate={onNavigate} onResult={() => {}} />);
-    expect(getByTestId('active').textContent).toBe('2');
-    expect(onNavigate).not.toHaveBeenCalled();
-  });
-
-  it("onSettle calls onNavigate with pathForIndex's output and updates activeIndex synchronously", () => {
-    const onNavigate = vi.fn();
-    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
-      activeIndex: -1,
-      onSettle: () => {},
-    };
-    const { getByTestId } = render(
-      <Harness
-        pathname="/a"
-        onNavigate={onNavigate}
-        onResult={(r) => {
-          latest = r;
-        }}
-      />,
-    );
-
-    act(() => void latest.onSettle(2));
-
-    expect(getByTestId('active').textContent).toBe('2');
-    expect(onNavigate).toHaveBeenCalledWith('/c');
-    expect(onNavigate).toHaveBeenCalledTimes(1);
-  });
-
-  it('does NOT re-trigger the external-nav branch on the pathname-effect run that follows its own onSettle-driven navigation', () => {
-    // This is the isInternalNav dance: onSettle navigates via onNavigate; the
-    // caller's router then re-renders this hook with the new pathname — that
-    // pathname change must be recognized as "our own settle, already
-    // applied" and NOT reprocessed as an external nav. Both existing plugins'
-    // code comments describe a real double-flicker bug from getting this
-    // wrong, so this is the highest-value assertion in this file.
-    const onNavigate = vi.fn();
-    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
-      activeIndex: -1,
-      onSettle: () => {},
-    };
-    const { getByTestId, rerender } = render(
-      <Harness
-        pathname="/a"
-        onNavigate={onNavigate}
-        onResult={(r) => {
-          latest = r;
-        }}
-      />,
-    );
-
-    // Settle on /b (index 1) — this is the carousel's own gesture-driven navigation.
-    act(() => void latest.onSettle(1));
-    expect(getByTestId('active').textContent).toBe('1');
-    expect(onNavigate).toHaveBeenCalledWith('/b');
-
-    // The caller's router "commits" the navigation by re-rendering with the
-    // new pathname (exactly what onNavigate's real router.replace would
-    // eventually cause). If this were misidentified as an external nav, the
-    // effect would recompute indexForPathname('/b') anyway — same value, so
-    // a bug here wouldn't show up as a *wrong* index, only as an extra,
-    // redundant setState (the actual symptom in the original bug was a
-    // visible re-snap/flicker, not a wrong end state) — so this test also
-    // asserts onNavigate is never called a second time as a side effect of
-    // that re-render, which would happen if the effect treated it as new
-    // settle-worthy input rather than a no-op resync.
-    rerender(<Harness pathname="/b" onNavigate={onNavigate} onResult={(r) => (latest = r)} />);
-
-    expect(getByTestId('active').textContent).toBe('1');
-    expect(onNavigate).toHaveBeenCalledTimes(1);
-  });
-
-  it('an unrecognized pathname falls back to index 0', () => {
-    const onNavigate = vi.fn();
-    const { getByTestId } = render(
-      <Harness pathname="/unknown" onNavigate={onNavigate} onResult={() => {}} />,
-    );
-    expect(getByTestId('active').textContent).toBe('0');
-  });
-});