@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/SystemBanner/SystemBanner.tsx

@@ -1,50 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './SystemBanner.module.css';
-
-export type BannerVariant = 'info' | 'warning' | 'error';
-
-export interface SystemBannerProps {
-  variant?: BannerVariant;
-  /** Called when the user clicks ×. If omitted, no dismiss button is shown. */
-  onDismiss?: () => void;
-  children: ReactNode;
-}
-
-/**
- * SystemBanner — full-width sticky strip that shifts page content down.
- *
- * Used for platform-level notices: maintenance mode, license warnings, broadcast
- * messages. Stack multiple banners by rendering multiple `<SystemBanner>` elements.
- * The dismiss button is only rendered when `onDismiss` is provided.
- */
-export function SystemBanner({ variant = 'info', onDismiss, children }: SystemBannerProps) {
-  return (
-    <div role="status" aria-live="polite" className={[styles.banner, styles[variant]].join(' ')}>
-      <span className={styles.content}>{children}</span>
-      {onDismiss && (
-        <button
-          type="button"
-          className={styles.dismiss}
-          onClick={onDismiss}
-          aria-label="Dismiss banner"
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden
-          >
-            <path
-              d="M1 1L13 13M13 1L1 13"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

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

@@ -1,50 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { SystemBanner } from '../SystemBanner';
-
-afterEach(cleanup);
-
-describe('SystemBanner', () => {
-  it('renders children as content', () => {
-    render(<SystemBanner>Maintenance mode is active.</SystemBanner>);
-    expect(screen.getByText('Maintenance mode is active.')).toBeDefined();
-  });
-
-  it('defaults to the info variant', () => {
-    const { container } = render(<SystemBanner>Notice</SystemBanner>);
-    expect((container.firstChild as HTMLElement).className).toContain('info');
-  });
-
-  it('applies the warning variant class', () => {
-    const { container } = render(<SystemBanner variant="warning">Warning</SystemBanner>);
-    expect((container.firstChild as HTMLElement).className).toContain('warning');
-  });
-
-  it('applies the error variant class', () => {
-    const { container } = render(<SystemBanner variant="error">Error</SystemBanner>);
-    expect((container.firstChild as HTMLElement).className).toContain('error');
-  });
-
-  it('does not render a dismiss button when onDismiss is omitted', () => {
-    render(<SystemBanner>Notice</SystemBanner>);
-    expect(screen.queryByRole('button', { name: 'Dismiss banner' })).toBeNull();
-  });
-
-  it('renders a dismiss button when onDismiss is provided', () => {
-    render(<SystemBanner onDismiss={() => {}}>Notice</SystemBanner>);
-    expect(screen.getByRole('button', { name: 'Dismiss banner' })).toBeDefined();
-  });
-
-  it('calls onDismiss when the dismiss button is clicked', () => {
-    const onDismiss = vi.fn();
-    render(<SystemBanner onDismiss={onDismiss}>Notice</SystemBanner>);
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss banner' }));
-    expect(onDismiss).toHaveBeenCalledOnce();
-  });
-
-  it('exposes a status live region', () => {
-    render(<SystemBanner>Notice</SystemBanner>);
-    expect(screen.getByRole('status')).toBeDefined();
-  });
-});

package/src/components/Table/Table.module.css

@@ -1,45 +0,0 @@
-/* Horizontal scroll container — masked-edge fade + hidden scrollbar, same
-   technique as NavTabs. Always active (not gated to a narrow viewport):
-   unlike NavTabs' item count, a table's column count is content-driven and
-   can overflow at any screen size. */
-.scrollContainer {
-  overflow-x: auto;
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
-}
-
-.scrollContainer::-webkit-scrollbar {
-  display: none;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--sv-font-size-sm);
-}
-
-.head .row {
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
-}
-
-.body .row {
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-.body .row:last-child {
-  border-bottom: none;
-}
-
-.th {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  text-align: left;
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-muted);
-  white-space: nowrap;
-}
-
-.td {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  color: var(--sv-color-text-primary);
-}

package/src/components/Table/Table.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './Table';
-
-const meta = {
-  title: 'Components/Table',
-  component: Table,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Thin, styled wrappers around the native table elements. Not a data grid — no sort/filter/virtualization. Horizontal scroll (masked-edge fade, hidden scrollbar) at any viewport size.',
-      },
-    },
-  },
-  args: { children: null },
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const ROWS = [
-  { name: 'sovereign-tasks', status: 'Active', version: '1.4.2' },
-  { name: 'sovereign-ledger', status: 'Active', version: '2.0.0' },
-  { name: 'sovereign-shopper', status: 'Disabled', version: '0.9.1' },
-];
-
-export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Plugin</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {ROWS.map((row) => (
-          <TableRow key={row.name}>
-            <TableCell>{row.name}</TableCell>
-            <TableCell>{row.status}</TableCell>
-            <TableCell>{row.version}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-export const WithoutHeader: Story = {
-  render: () => (
-    <Table>
-      <TableBody>
-        {ROWS.map((row) => (
-          <TableRow key={row.name}>
-            <TableCell>{row.name}</TableCell>
-            <TableCell>{row.status}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Plugin</TableHeaderCell>
-          <TableHeaderCell>Description</TableHeaderCell>
-          <TableHeaderCell>Author</TableHeaderCell>
-          <TableHeaderCell>Repository</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {ROWS.map((row) => (
-          <TableRow key={row.name}>
-            <TableCell>{row.name}</TableCell>
-            <TableCell>A longer description column to force horizontal overflow</TableCell>
-            <TableCell>sovereign-community</TableCell>
-            <TableCell>github.com/sovereignfs/{row.name}</TableCell>
-            <TableCell>{row.status}</TableCell>
-            <TableCell>{row.version}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-export const NarrowViewport: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  render: () => (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Plugin</TableHeaderCell>
-          <TableHeaderCell>Description</TableHeaderCell>
-          <TableHeaderCell>Author</TableHeaderCell>
-          <TableHeaderCell>Repository</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {ROWS.map((row) => (
-          <TableRow key={row.name}>
-            <TableCell>{row.name}</TableCell>
-            <TableCell>A longer description column to force horizontal overflow</TableCell>
-            <TableCell>sovereign-community</TableCell>
-            <TableCell>github.com/sovereignfs/{row.name}</TableCell>
-            <TableCell>{row.status}</TableCell>
-            <TableCell>{row.version}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};

package/src/components/Table/Table.tsx

@@ -1,51 +0,0 @@
-import type { ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
-import styles from './Table.module.css';
-
-export interface TableProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * Table — thin, styled wrappers around the native table elements.
- *
- * Not a data grid: no sort, filter, or virtualization. `Table` wraps its
- * content in a horizontally-scrolling container (masked-edge fade, hidden
- * scrollbar — same technique as `NavTabs`) so a table wider than its
- * container scrolls instead of overflowing the page, at any viewport size.
- */
-export function Table({ children, className }: TableProps) {
-  return (
-    <div className={styles.scrollContainer}>
-      <table className={[styles.table, className].filter(Boolean).join(' ')}>{children}</table>
-    </div>
-  );
-}
-
-export function TableHead({ children }: { children: ReactNode }) {
-  return <thead className={styles.head}>{children}</thead>;
-}
-
-export function TableBody({ children }: { children: ReactNode }) {
-  return <tbody className={styles.body}>{children}</tbody>;
-}
-
-export function TableRow({ children }: { children: ReactNode }) {
-  return <tr className={styles.row}>{children}</tr>;
-}
-
-export function TableHeaderCell({ children, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
-  return (
-    <th className={styles.th} {...rest}>
-      {children}
-    </th>
-  );
-}
-
-export function TableCell({ children, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
-  return (
-    <td className={styles.td} {...rest}>
-      {children}
-    </td>
-  );
-}

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

@@ -1,50 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../Table';
-
-afterEach(cleanup);
-
-function Demo() {
-  return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Name</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell>Alpha</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Beta</TableCell>
-          <TableCell>Disabled</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
-
-describe('Table', () => {
-  it('renders a real table element', () => {
-    render(<Demo />);
-    expect(screen.getByRole('table')).toBeDefined();
-  });
-
-  it('renders header cells with columnheader role', () => {
-    render(<Demo />);
-    expect(screen.getAllByRole('columnheader').map((el) => el.textContent)).toEqual([
-      'Name',
-      'Status',
-    ]);
-  });
-
-  it('renders the correct number of body rows and cells', () => {
-    render(<Demo />);
-    expect(screen.getAllByRole('row').length).toBe(3); // 1 header + 2 body
-    expect(screen.getAllByRole('cell').length).toBe(4);
-  });
-});

package/src/components/Tabs/Tabs.module.css

@@ -1,56 +0,0 @@
-.tablist {
-  display: flex;
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  /* Horizontal scroll on mobile — scrollbar hidden for clean appearance */
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.tablist::-webkit-scrollbar {
-  display: none;
-}
-
-.tab {
-  flex-shrink: 0;
-  /* 36px rendered height, matching this scale's other 36px controls (Input,
-     Select). Vertical padding hardcoded to hit the exact height, same
-     reasoning as Button — accounting for the 2px border-bottom below,
-     which (content-box) adds to the rendered height on top of font-size +
-     padding. */
-  padding: 10px var(--sv-space-4);
-  border: none;
-  border-bottom: 2px solid transparent;
-  /* Negative margin pulls the 2px border flush with the tablist border-bottom */
-  margin-bottom: -1px;
-  background: transparent;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    color 0.12s ease,
-    border-color 0.12s ease;
-  white-space: nowrap;
-}
-
-.tab:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.active {
-  color: var(--sv-color-text-primary);
-  font-weight: var(--sv-font-weight-semibold);
-  border-bottom-color: var(--sv-color-accent);
-}
-
-.inactive {
-  color: var(--sv-color-text-muted);
-  font-weight: var(--sv-font-weight-medium);
-}
-
-@media (hover: hover) {
-  .inactive:hover {
-    color: var(--sv-color-text-primary);
-  }
-}

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tabs } from './Tabs';
-
-const meta = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Underline tab nav. Stateless — caller owns `value` + `onChange` and renders the active panel. Mobile: scrolls horizontally with the scrollbar hidden.',
-      },
-    },
-  },
-  args: {
-    items: [{ label: 'Tab', value: 'tab' }],
-    value: 'tab',
-    onChange: () => {},
-    'aria-label': 'Tabs',
-  },
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const CONSOLE_TABS = [
-  { label: 'Overview', value: 'overview' },
-  { label: 'Users', value: 'users' },
-  { label: 'Plugins', value: 'plugins' },
-  { label: 'Settings', value: 'settings' },
-  { label: 'Health', value: 'health' },
-];
-
-const ACCOUNT_TABS = [
-  { label: 'Profile', value: 'profile' },
-  { label: 'Security', value: 'security' },
-  { label: 'Appearance', value: 'appearance' },
-  { label: 'Notifications', value: 'notifications' },
-  { label: 'Billing', value: 'billing' },
-  { label: 'Data', value: 'data' },
-];
-
-/** Console panel navigation. */
-export const Console: Story = {
-  render: (_args) => {
-    const [tab, setTab] = useState('overview');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)' }}>
-        <Tabs items={CONSOLE_TABS} value={tab} onChange={setTab} aria-label="Console" />
-        <div
-          style={{
-            padding: 'var(--sv-space-4)',
-            color: 'var(--sv-color-text-muted)',
-            fontSize: 'var(--sv-font-size-sm)',
-          }}
-        >
-          Showing: <strong style={{ color: 'var(--sv-color-text-primary)' }}>{tab}</strong>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** Account settings — more tabs, scrolls on narrow viewports. */
-export const Account: Story = {
-  render: (_args) => {
-    const [tab, setTab] = useState('profile');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)', maxWidth: 480 }}>
-        <Tabs items={ACCOUNT_TABS} value={tab} onChange={setTab} aria-label="Account settings" />
-        <div
-          style={{
-            padding: 'var(--sv-space-4)',
-            color: 'var(--sv-color-text-muted)',
-            fontSize: 'var(--sv-font-size-sm)',
-          }}
-        >
-          Showing: <strong style={{ color: 'var(--sv-color-text-primary)' }}>{tab}</strong>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** Narrow viewport — confirms horizontal scroll behaviour. */
-export const NarrowScroll: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  render: (_args) => {
-    const [tab, setTab] = useState('profile');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)' }}>
-        <Tabs items={ACCOUNT_TABS} value={tab} onChange={setTab} aria-label="Account settings" />
-      </div>
-    );
-  },
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import styles from './Tabs.module.css';
-
-export interface TabItem {
-  label: string;
-  value: string;
-}
-
-export interface TabsProps {
-  items: TabItem[];
-  value: string;
-  onChange: (value: string) => void;
-  'aria-label': string;
-}
-
-/**
- * Tabs — underline tab nav for section switching.
- *
- * Stateless: the active tab is fully controlled via `value` + `onChange`, so the
- * caller owns state and controls the rendered panel content. This keeps the
- * component RSC-compatible when wrapped by a client boundary upstream.
- *
- * Mobile: the tab bar scrolls horizontally with the native scrollbar hidden.
- */
-export function Tabs({ items, value, onChange, 'aria-label': ariaLabel }: TabsProps) {
-  return (
-    <div role="tablist" aria-label={ariaLabel} className={styles.tablist}>
-      {items.map((item) => {
-        const active = item.value === value;
-        return (
-          <button
-            key={item.value}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            className={[styles.tab, active ? styles.active : styles.inactive].join(' ')}
-            onClick={() => onChange(item.value)}
-          >
-            {item.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Tabs } from '../Tabs';
-
-afterEach(cleanup);
-
-const items = [
-  { label: 'Overview', value: 'overview' },
-  { label: 'Users', value: 'users' },
-  { label: 'Plugins', value: 'plugins' },
-];
-
-describe('Tabs', () => {
-  it('renders all items as tab buttons', () => {
-    render(<Tabs items={items} value="overview" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getAllByRole('tab').length).toBe(3);
-  });
-
-  it('marks the active tab as selected', () => {
-    render(<Tabs items={items} value="users" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getByRole('tab', { name: 'Users' }).getAttribute('aria-selected')).toBe('true');
-    expect(screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected')).toBe(
-      'false',
-    );
-  });
-
-  it('applies active class to the selected tab', () => {
-    render(<Tabs items={items} value="plugins" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getByRole('tab', { name: 'Plugins' }).className).toContain('active');
-    expect(screen.getByRole('tab', { name: 'Overview' }).className).toContain('inactive');
-  });
-
-  it('calls onChange with the clicked tab value', () => {
-    const onChange = vi.fn();
-    render(<Tabs items={items} value="overview" onChange={onChange} aria-label="Console" />);
-    fireEvent.click(screen.getByRole('tab', { name: 'Users' }));
-    expect(onChange).toHaveBeenCalledWith('users');
-  });
-
-  it('exposes a tablist with the given aria-label', () => {
-    render(<Tabs items={items} value="overview" onChange={() => {}} aria-label="Nav" />);
-    expect(screen.getByRole('tablist', { name: 'Nav' })).toBeDefined();
-  });
-});