@sovereignfs/ui 0.41.0 → 0.45.0

package/src/components/Slider/Slider.module.css

@@ -0,0 +1,95 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.label {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.slider {
+  appearance: none;
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+}
+
+/* Expand the vertical hit area for touch dragging without thickening the
+   visible track — same rationale as Button/Checkbox's touch-target
+   expansion, gated to the primary pointer. */
+@media (pointer: coarse) {
+  .slider {
+    height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+.slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slider:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Track — WebKit/Blink. The filled portion is a gradient computed from the
+   --slider-fill custom property the component sets inline; no JS-measured
+   pixel math, just a CSS variable driving a hard color stop. */
+.slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: linear-gradient(
+    to right,
+    var(--sv-color-accent) var(--slider-fill),
+    var(--sv-color-border-strong) var(--slider-fill)
+  );
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  margin-top: -6px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  box-shadow: var(--sv-shadow-control);
+  cursor: pointer;
+}
+
+.slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+/* Track — Firefox. Separate track/progress pseudo-elements instead of a
+   gradient — Firefox renders the filled portion natively via
+   ::-moz-range-progress. */
+.slider::-moz-range-track {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-border-strong);
+}
+
+.slider::-moz-range-progress {
+  height: 4px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+}
+
+.slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  box-shadow: var(--sv-shadow-control);
+  cursor: pointer;
+}
+
+.slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Slider } from './Slider';
+
+const meta = {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Single-thumb range input. A native <input type="range"> under custom styling — arrow keys, Home/End, and touch-drag all come from the browser.',
+      },
+    },
+  },
+  args: {
+    value: 50,
+    onChange: () => {},
+    min: 0,
+    max: 100,
+    'aria-label': 'Value',
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return <Slider {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return <Slider {...args} label="Volume" value={value} onChange={setValue} />;
+  },
+};
+
+export const AtMin: Story = {
+  args: { value: 0 },
+};
+
+export const AtMax: Story = {
+  args: { value: 100 },
+};
+
+export const SteppedRange: Story = {
+  render: (_args) => {
+    const [value, setValue] = useState(5);
+    return (
+      <Slider value={value} onChange={setValue} min={0} max={10} step={1} label="Rating (0–10)" />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useId } from 'react';
+import type { CSSProperties } from 'react';
+import styles from './Slider.module.css';
+
+export interface SliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  /** Renders a visible label above the track. Omit and pass `aria-label`
+   * instead for a standalone, unlabeled slider. */
+  label?: string;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  required?: boolean;
+}
+
+/**
+ * Slider — single-thumb range input.
+ *
+ * A native `<input type="range">` under custom track/thumb styling — arrow
+ * key (adjust by `step`), Home/End (jump to min/max), and touch-drag
+ * support all come from the browser, nothing hand-rolled. Dual-thumb/range
+ * selection is out of scope until a consumer needs it.
+ */
+export function Slider({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  label,
+  disabled,
+  id,
+  className,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  required,
+}: SliderProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const fillPercent = max > min ? ((value - min) / (max - min)) * 100 : 0;
+
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>
+      {label && (
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        required={required}
+        aria-label={label ? undefined : ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+        className={styles.slider}
+        style={{ '--slider-fill': `${fillPercent}%` } as CSSProperties}
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Slider } from '../Slider';
+
+afterEach(cleanup);
+
+describe('Slider', () => {
+  it('renders a range input with the given min/max/value', () => {
+    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
+    const input = screen.getByRole('slider') as HTMLInputElement;
+    expect(input.min).toBe('0');
+    expect(input.max).toBe('100');
+    expect(input.value).toBe('50');
+  });
+
+  it('calls onChange with a number when the value changes', () => {
+    const onChange = vi.fn();
+    render(<Slider value={50} onChange={onChange} min={0} max={100} aria-label="Volume" />);
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '75' } });
+    expect(onChange).toHaveBeenCalledWith(75);
+  });
+
+  it('respects a step prop', () => {
+    render(<Slider value={5} onChange={() => {}} min={0} max={10} step={5} aria-label="Volume" />);
+    expect((screen.getByRole('slider') as HTMLInputElement).step).toBe('5');
+  });
+
+  it('renders a visible label and associates it via htmlFor', () => {
+    render(<Slider value={50} onChange={() => {}} min={0} max={100} label="Volume" />);
+    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
+  });
+
+  it('falls back to aria-label when no visible label is given', () => {
+    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
+    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
+  });
+
+  it('disables the input when disabled is set', () => {
+    render(
+      <Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" disabled />,
+    );
+    expect(screen.getByRole('slider')).toHaveProperty('disabled', true);
+  });
+});

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

@@ -0,0 +1,45 @@
+/* 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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,50 @@
+// @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

@@ -12,7 +12,12 @@
 
 .tab {
   flex-shrink: 0;
-  padding: var(--sv-space-2) var(--sv-space-4);
+  /* 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 */

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

@@ -1,5 +1,10 @@
 .track {
-  /* 38×22px pill — spec dimensions */
+  /* 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;

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

@@ -0,0 +1,47 @@
+.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

@@ -0,0 +1,62 @@
+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>
+  ),
+};