@sovereignfs/ui 0.54.0 → 0.89.1

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

@@ -1,69 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { TagInput } from '../TagInput';
-
-afterEach(cleanup);
-
-describe('TagInput', () => {
-  it('adds a tag with Enter', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={[]} onChange={onChange} aria-label="Tags" />);
-
-    const input = screen.getByLabelText('Tags');
-    fireEvent.change(input, { target: { value: 'launch' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(onChange).toHaveBeenCalledWith(['launch']);
-  });
-
-  it('removes the last tag with Backspace when the input is empty', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft', 'publish']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.keyDown(screen.getByLabelText('Tags'), { key: 'Backspace' });
-
-    expect(onChange).toHaveBeenCalledWith(['draft']);
-  });
-
-  it('splits pasted comma-separated tags', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.paste(screen.getByLabelText('Tags'), {
-      clipboardData: {
-        getData: () => 'launch, release\nnotes',
-      },
-    });
-
-    expect(onChange).toHaveBeenCalledWith(['draft', 'launch', 'release', 'notes']);
-  });
-
-  it('shows validation messages and does not add invalid tags', () => {
-    const onChange = vi.fn();
-    render(
-      <TagInput
-        value={[]}
-        onChange={onChange}
-        aria-label="Tags"
-        validateTag={(tag) => (tag.length > 4 ? 'Tag is too long.' : undefined)}
-      />,
-    );
-
-    const input = screen.getByLabelText('Tags');
-    fireEvent.change(input, { target: { value: 'launch' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-
-    expect(screen.getByRole('alert').textContent).toBe('Tag is too long.');
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('renders removable chips with accessible names', () => {
-    const onChange = vi.fn();
-    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Remove draft' }));
-
-    expect(onChange).toHaveBeenCalledWith([]);
-  });
-});

package/src/components/Textarea/Textarea.module.css

@@ -1,39 +0,0 @@
-.textarea {
-  display: block;
-  width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.5;
-  color: var(--sv-color-text-primary);
-  background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  resize: vertical;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.textarea::placeholder {
-  color: var(--sv-color-text-muted);
-}
-
-.textarea:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.textarea:read-only {
-  background-color: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-  border-color: var(--sv-color-border);
-  cursor: default;
-}
-
-.textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  resize: none;
-}

package/src/components/Textarea/Textarea.tsx

@@ -1,15 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react';
-import styles from './Textarea.module.css';
-
-export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-/**
- * Textarea — the primitive multi-line text field. Presentational and
- * RSC-safe: it forwards all native textarea props to the underlying
- * `<textarea>`. Styling references `--sv-*` tokens via CSS Modules; there
- * are no hardcoded values.
- */
-export function Textarea({ className, rows = 4, ...rest }: TextareaProps) {
-  const classes = [styles.textarea, className].filter(Boolean).join(' ');
-  return <textarea rows={rows} className={classes} {...rest} />;
-}

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

@@ -1,29 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Textarea } from '../Textarea';
-
-afterEach(cleanup);
-
-describe('Textarea', () => {
-  it('renders and forwards native props', () => {
-    render(<Textarea placeholder="Bio" defaultValue="Hello" />);
-    const textarea = screen.getByPlaceholderText('Bio') as HTMLTextAreaElement;
-    expect(textarea.value).toBe('Hello');
-  });
-
-  it('defaults to 4 rows', () => {
-    render(<Textarea aria-label="field" />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(4);
-  });
-
-  it('honours an explicit rows value', () => {
-    render(<Textarea aria-label="field" rows={8} />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(8);
-  });
-
-  it('is disabled when the disabled prop is set', () => {
-    render(<Textarea aria-label="field" disabled />);
-    expect((screen.getByLabelText('field') as HTMLTextAreaElement).disabled).toBe(true);
-  });
-});

package/src/components/Toast/Toast.module.css

@@ -1,132 +0,0 @@
-/* Toast — transient notification snackbar.
- *
- * Fixed top-right, 320px. Slides in from above. Each toast auto-dismisses
- * after `duration` ms. Leading status icon reinforces category at a glance.
- *
- * Category variants map to the semantic status tokens (info/success/warning/
- * error) so the visual language is consistent with banners and badges.
- * The announcement category uses the accent colour (neutral brand highlight).
- * `security` matches the error palette — draws maximum attention. */
-
-.region {
-  position: fixed;
-  top: var(--sv-space-4);
-  right: var(--sv-space-4);
-  z-index: 200;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-  width: 320px;
-  max-width: calc(100vw - var(--sv-space-8));
-  pointer-events: none;
-}
-
-.toast {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  background: var(--sv-color-surface-raised);
-  color: var(--sv-color-text-primary);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-md);
-  box-shadow: var(--sv-shadow-overlay);
-  pointer-events: all;
-  animation: toastIn 200ms ease-out;
-}
-
-.toast.exiting {
-  animation: toastOut 200ms ease-in forwards;
-}
-
-/* Leading status icon */
-.icon {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  padding-top: 1px;
-  color: var(--sv-color-border-strong);
-}
-
-.toast.info .icon,
-.toast.announcement .icon {
-  color: var(--sv-color-accent);
-}
-
-.toast.success .icon {
-  color: var(--sv-color-success-text);
-}
-
-.toast.warning .icon {
-  color: var(--sv-color-warning-text);
-}
-
-.toast.error .icon,
-.toast.security .icon {
-  color: var(--sv-color-error-text);
-}
-
-.body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.title {
-  font-size: var(--sv-font-size-sm);
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--sv-color-text-primary);
-}
-
-.message {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-  margin-top: var(--sv-space-1);
-  line-height: 1.4;
-}
-
-.close {
-  flex: 0 0 auto;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--sv-color-text-subtle);
-  line-height: 1;
-  font-size: var(--sv-font-size-md);
-}
-
-@media (hover: hover) {
-  .close:hover {
-    color: var(--sv-color-text-primary);
-  }
-}
-
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes toastOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toast,
-  .toast.exiting {
-    animation: none;
-  }
-}

package/src/components/Toast/Toast.stories.tsx

@@ -1,191 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ToastProvider, useToast } from './Toast';
-
-const meta = {
-  title: 'Components/Toast',
-  component: ToastProvider,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Fixed top-right notification stack. Use `<ToastProvider>` at the app root and `useToast()` to imperatively show toasts. Each toast has a leading status icon matched to its category.',
-      },
-    },
-  },
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof ToastProvider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-function ToastTrigger({ category, label }: { category: string; label: string }) {
-  const { show } = useToast();
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        show({
-          title: label,
-          message: `This is a ${category} toast notification.`,
-          category,
-        })
-      }
-      style={{
-        padding: '8px 16px',
-        borderRadius: 'var(--sv-radius-md)',
-        border: '1px solid var(--sv-color-border)',
-        background: 'var(--sv-color-surface)',
-        color: 'var(--sv-color-text-primary)',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        cursor: 'pointer',
-      }}
-    >
-      {label}
-    </button>
-  );
-}
-
-/** All toast categories — each button fires a toast with the matching leading icon. */
-export const AllCategories: Story = {
-  render: (_args) => (
-    <ToastProvider>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 8,
-          alignItems: 'flex-start',
-        }}
-      >
-        <ToastTrigger category="info" label="Info toast" />
-        <ToastTrigger category="success" label="Success toast" />
-        <ToastTrigger category="warning" label="Warning toast" />
-        <ToastTrigger category="error" label="Error toast" />
-        <ToastTrigger category="security" label="Security toast" />
-        <ToastTrigger category="announcement" label="Announcement toast" />
-      </div>
-    </ToastProvider>
-  ),
-};
-
-/** Toast with no body — title only. */
-export const TitleOnly: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      return (
-        <button
-          type="button"
-          onClick={() => show({ title: 'Session expires in 5 minutes', category: 'warning' })}
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: 'pointer',
-          }}
-        >
-          Show title-only toast
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};
-
-/** Persistent toast — pass `duration: 0` to disable auto-dismiss. */
-export const Persistent: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      return (
-        <button
-          type="button"
-          onClick={() =>
-            show({
-              title: 'Maintenance mode active',
-              message: 'Platform is in read-only mode. Dismiss when resolved.',
-              category: 'error',
-              duration: 0,
-            })
-          }
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: 'pointer',
-          }}
-        >
-          Show persistent toast
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};
-
-/** Multiple toasts stack vertically below the first. */
-export const Stacked: Story = {
-  render: (_args) => {
-    function Trigger() {
-      const { show } = useToast();
-      const [fired, setFired] = useState(false);
-      return (
-        <button
-          type="button"
-          disabled={fired}
-          onClick={() => {
-            show({ title: 'Plugin installed', category: 'success' });
-            show({
-              title: 'License warning',
-              message: 'Expires in 3 days.',
-              category: 'warning',
-            });
-            show({ title: 'Backup failed', message: 'Check storage quota.', category: 'error' });
-            setFired(true);
-          }}
-          style={{
-            padding: '8px 16px',
-            borderRadius: 'var(--sv-radius-md)',
-            border: '1px solid var(--sv-color-border)',
-            background: 'var(--sv-color-surface)',
-            color: 'var(--sv-color-text-primary)',
-            fontFamily: 'var(--sv-font-family)',
-            fontSize: 'var(--sv-font-size-sm)',
-            cursor: fired ? 'default' : 'pointer',
-            opacity: fired ? 0.5 : 1,
-          }}
-        >
-          Fire 3 toasts
-        </button>
-      );
-    }
-    return (
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-  },
-};

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