@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Toast/Toast.tsx

@@ -1,139 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Icon, type IconName } from '../Icon/Icon';
-import styles from './Toast.module.css';
-
-export interface ToastItem {
-  id: string;
-  title: string;
-  message?: string;
-  /** `'info'` | `'success'` | `'warning'` | `'error'` | `'security'` | `'announcement'` */
-  category?: string;
-  /** Auto-dismiss delay in ms. Default 5000. Pass `0` to disable auto-dismiss. */
-  duration?: number;
-  exiting?: boolean;
-}
-
-export interface ToastContextValue {
-  /** Show a toast notification. Returns the generated toast id. */
-  show(item: Omit<ToastItem, 'id'>): string;
-  /** Dismiss a toast by id. */
-  dismiss(id: string): void;
-}
-
-const ToastContext = createContext<ToastContextValue | null>(null);
-
-/** Consume the toast context to imperatively show toasts from any client component. */
-export function useToast(): ToastContextValue {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error('useToast() must be used inside <ToastProvider>');
-  return ctx;
-}
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
-  const seedId = useId();
-  const counter = useRef(0);
-
-  const dismiss = useCallback((id: string) => {
-    setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, exiting: true } : t)));
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 220);
-  }, []);
-
-  const show = useCallback(
-    (item: Omit<ToastItem, 'id'>): string => {
-      const id = `${seedId}-${++counter.current}`;
-      const duration = item.duration ?? 5000;
-      setToasts((prev) => [...prev, { ...item, id }]);
-      if (duration > 0) {
-        const timer = setTimeout(() => dismiss(id), duration);
-        timers.current.set(id, timer);
-      }
-      return id;
-    },
-    [seedId, dismiss],
-  );
-
-  useEffect(() => {
-    const currentTimers = timers.current;
-    return () => {
-      currentTimers.forEach((t) => clearTimeout(t));
-    };
-  }, []);
-
-  const value = useMemo(() => ({ show, dismiss }), [show, dismiss]);
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-      <ol
-        className={styles.region}
-        aria-label="Notifications"
-        aria-live="polite"
-        aria-atomic="false"
-      >
-        {toasts.map((toast) => (
-          <Toast key={toast.id} {...toast} onDismiss={dismiss} />
-        ))}
-      </ol>
-    </ToastContext.Provider>
-  );
-}
-
-/** Maps toast category to a leading Icon name. */
-const CATEGORY_ICON: Record<string, IconName> = {
-  info: 'info',
-  announcement: 'info',
-  success: 'check',
-  warning: 'alert-triangle',
-  error: 'alert-triangle',
-  security: 'alert-triangle',
-};
-
-function Toast({
-  id,
-  title,
-  message,
-  category = 'info',
-  exiting,
-  onDismiss,
-}: ToastItem & { onDismiss(id: string): void }) {
-  const categoryClass = styles[category as keyof typeof styles] ?? styles.info;
-  const iconName = CATEGORY_ICON[category] ?? 'info';
-
-  return (
-    <li
-      role="status"
-      className={`${styles.toast} ${String(categoryClass)} ${exiting ? styles.exiting : ''}`}
-    >
-      <span className={styles.icon} aria-hidden="true">
-        <Icon name={iconName} size="sm" aria-hidden />
-      </span>
-      <div className={styles.body}>
-        <div className={styles.title}>{title}</div>
-        {message && <div className={styles.message}>{message}</div>}
-      </div>
-      <button
-        type="button"
-        className={styles.close}
-        aria-label="Dismiss notification"
-        onClick={() => onDismiss(id)}
-      >
-        ✕
-      </button>
-    </li>
-  );
-}

package/src/components/Toggle/Toggle.module.css

@@ -1,57 +0,0 @@
-.track {
-  /* 38×22px pill — spec dimensions. Sizing audit: despite the component
-     name, this renders as a binary pill switch (role="switch"), not a
-     pressable toggle button — reviewed against this scale's other compact
-     controls with that in mind. Kept dimensions unchanged, generously
-     sized for touch-friendliness. (The name vs. actual behavior mismatch
-     is a separate, pre-existing naming note, not addressed here.) */
-  display: inline-flex;
-  align-items: center;
-  width: 38px;
-  height: 22px;
-  border-radius: var(--sv-radius-full);
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background-color 0.15s ease;
-  position: relative;
-}
-
-.track:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.track:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.on {
-  background-color: var(--sv-color-accent);
-}
-
-.off {
-  background-color: var(--sv-color-border-strong);
-}
-
-/* 18px thumb, 2px inset on each side */
-.thumb {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-white);
-  transition: transform 0.15s ease;
-  left: 2px;
-  box-shadow: var(--sv-shadow-control);
-}
-
-.on .thumb {
-  transform: translateX(16px); /* 38 - 18 - 2 - 2 = 16 */
-}
-
-.off .thumb {
-  transform: translateX(0);
-}

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: var(--sv-border-width-hairline) 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');
-  });
-});