@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import styles from './SwipableMobileCarouselDots.module.css';
-
-export interface SwipableMobileCarouselDotsProps {
-  count: number;
-  activeIndex: number;
-  onJump: (index: number) => void;
-  /** Per-dot accessible names, e.g. ["Lists", "Starred", "Groceries"]. Falls
-   *  back to "Slide N of count" for any index without one. */
-  labels?: (string | undefined)[];
-  /** Labels the whole group — required, no generic fallback (mirrors
-   *  SwipableMobileCarousel's own required aria-label). */
-  'aria-label': string;
-  className?: string;
-}
-
-/**
- * SwipableMobileCarouselDots — a real, tappable, labeled slide indicator.
- * Standalone (not carousel-only): reusable anywhere a set of positions needs
- * a dot indicator (e.g. an image gallery, an onboarding stepper), and is also
- * SwipableMobileCarousel's default `renderIndicator`.
- *
- * Replaces the `aria-hidden`, non-interactive dots pattern both
- * sovereign-tasks and sovereign-shopper currently hand-roll — every dot here
- * is a real `role="tab"` button with its own accessible name, reachable by
- * keyboard. No roving tabIndex/arrow-key handling: `Tabs` (this library's
- * other `role="tablist"` component) has none either, so this stays
- * consistent with it rather than gold-plating past its sibling.
- */
-export function SwipableMobileCarouselDots({
-  count,
-  activeIndex,
-  onJump,
-  labels,
-  'aria-label': ariaLabel,
-  className,
-}: SwipableMobileCarouselDotsProps) {
-  return (
-    <div
-      role="tablist"
-      aria-label={ariaLabel}
-      className={[styles.dots, className].filter(Boolean).join(' ')}
-    >
-      {Array.from({ length: count }, (_, i) => {
-        const active = i === activeIndex;
-        const label = labels?.[i] ?? `Slide ${i + 1} of ${count}`;
-        return (
-          <button
-            key={i}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            aria-label={label}
-            className={[styles.dot, active ? styles.dotActive : ''].filter(Boolean).join(' ')}
-            onClick={() => onJump(i)}
-          />
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,63 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { SwipableMobileCarouselDots } from '../SwipableMobileCarouselDots';
-
-afterEach(cleanup);
-
-describe('SwipableMobileCarouselDots', () => {
-  it('renders a tablist with one tab per count, none aria-hidden', () => {
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
-    );
-    const list = screen.getByRole('tablist', { name: 'Lists' });
-    expect(list.getAttribute('aria-hidden')).toBeNull();
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(3);
-    tabs.forEach((tab) => expect(tab.getAttribute('aria-hidden')).toBeNull());
-  });
-
-  it('marks only the active dot as aria-selected', () => {
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={1} onJump={() => {}} aria-label="Lists" />,
-    );
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs[0]?.getAttribute('aria-selected')).toBe('false');
-    expect(tabs[1]?.getAttribute('aria-selected')).toBe('true');
-    expect(tabs[2]?.getAttribute('aria-selected')).toBe('false');
-  });
-
-  it('uses the provided per-dot labels, falling back to "Slide N of count"', () => {
-    render(
-      <SwipableMobileCarouselDots
-        count={3}
-        activeIndex={0}
-        onJump={() => {}}
-        labels={['Lists', undefined, 'Groceries']}
-        aria-label="Lists"
-      />,
-    );
-    expect(screen.getByRole('tab', { name: 'Lists' })).toBeDefined();
-    expect(screen.getByRole('tab', { name: 'Slide 2 of 3' })).toBeDefined();
-    expect(screen.getByRole('tab', { name: 'Groceries' })).toBeDefined();
-  });
-
-  it('clicking a dot calls onJump with its index', () => {
-    const onJump = vi.fn();
-    render(
-      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={onJump} aria-label="Lists" />,
-    );
-    const thirdTab = screen.getAllByRole('tab')[2];
-    if (!thirdTab) throw new Error('expected a 3rd tab');
-    fireEvent.click(thirdTab);
-    expect(onJump).toHaveBeenCalledWith(2);
-  });
-
-  it('every dot is a real, focusable button (not a decorative element)', () => {
-    render(
-      <SwipableMobileCarouselDots count={2} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
-    );
-    const tabs = screen.getAllByRole('tab');
-    tabs.forEach((tab) => expect(tab.tagName).toBe('BUTTON'));
-  });
-});

package/src/components/SystemBanner/SystemBanner.module.css

@@ -1,69 +0,0 @@
-.banner {
-  position: sticky;
-  top: 0;
-  /* Sits above sidebar rail (z-index ~10) but below dialogs/overlays (z-index 100) */
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-2) var(--sv-space-4);
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.4;
-}
-
-.content {
-  flex: 1;
-  text-align: center;
-}
-
-/* Dismiss button — inherits the variant text colour */
-.dismiss {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-sm);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.12s ease;
-}
-
-@media (hover: hover) {
-  .dismiss:hover {
-    opacity: 1;
-  }
-}
-
-.dismiss:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-
-/* Variants */
-.info {
-  background: var(--sv-color-info-surface);
-  color: var(--sv-color-info-text);
-  border-bottom-color: var(--sv-color-info-border);
-}
-
-.warning {
-  background: var(--sv-color-warning-surface);
-  color: var(--sv-color-warning-text);
-  border-bottom-color: var(--sv-color-warning-border);
-}
-
-.error {
-  background: var(--sv-color-error-surface);
-  color: var(--sv-color-error-text);
-  border-bottom-color: var(--sv-color-error-border);
-}

package/src/components/SystemBanner/SystemBanner.stories.tsx

@@ -1,86 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SystemBanner } from './SystemBanner';
-
-const meta = {
-  title: 'Components/SystemBanner',
-  component: SystemBanner,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Full-width `position: sticky` strip for platform-level notices. Stack multiple banners by rendering multiple `<SystemBanner>` elements. Dismiss button only appears when `onDismiss` is provided.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'warning', 'error'] },
-  },
-  args: {
-    children: 'Notice',
-  },
-} satisfies Meta<typeof SystemBanner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Info: Story = {
-  args: {
-    variant: 'info',
-    children: 'Platform is in read-only mode during migration.',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    children: 'License for Example: Monetized expires in 7 days.',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: 'error',
-    children: 'Maintenance mode is active — only admins can sign in.',
-  },
-};
-
-export const Dismissible: Story = {
-  render: (_args) => {
-    const [visible, setVisible] = useState(true);
-    return visible ? (
-      <SystemBanner variant="warning" onDismiss={() => setVisible(false)}>
-        License for Example: Monetized expires in 7 days.
-      </SystemBanner>
-    ) : (
-      <div
-        style={{
-          padding: 16,
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-muted)',
-        }}
-      >
-        Banner dismissed.
-      </div>
-    );
-  },
-};
-
-/** All three variants stacked — as they appear when multiple notices are active. */
-export const Stacked: Story = {
-  render: (_args) => (
-    <div>
-      <SystemBanner variant="error">
-        Maintenance mode is active — only admins can sign in.
-      </SystemBanner>
-      <SystemBanner variant="warning">
-        License for Example: Monetized expires in 7 days.
-      </SystemBanner>
-      <SystemBanner variant="info">Platform is in read-only mode during migration.</SystemBanner>
-    </div>
-  ),
-};

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: 1px solid var(--sv-color-border-strong);
-}
-
-.body .row {
-  border-bottom: 1px 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);
-  });
-});