@sovereignfs/ui 0.21.0

package/src/components/Select/Select.module.css

@@ -0,0 +1,69 @@
+/* Wrapper provides the positioning context for the custom chevron */
+.wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.select {
+  display: block;
+  width: 100%;
+  /* Right-pad to clear the custom chevron */
+  padding: var(--sv-space-2) var(--sv-space-8) 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);
+  cursor: pointer;
+  /* Remove native OS chevron */
+  appearance: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* sm — compact for table cells and inline controls */
+.sm .select {
+  padding: 2px var(--sv-space-6) 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.4;
+  border-radius: var(--sv-radius-sm);
+}
+
+.select:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Compact size variant — reduced padding for table-cell usage */
+.sm .select {
+  padding-top: var(--sv-space-1);
+  padding-bottom: var(--sv-space-1);
+  font-size: var(--sv-font-size-sm);
+}
+
+/* SVG chevron — matches the icon stroke style used across the UI */
+.chevron {
+  pointer-events: none;
+  position: absolute;
+  right: var(--sv-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sv-color-text-muted);
+  flex-shrink: 0;
+}
+
+.sm .chevron {
+  right: var(--sv-space-2);
+  width: 10px;
+  height: 10px;
+}

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Select } from './Select';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Styled native `<select>` — same visual language as `Input`. Preserves native picker on mobile for maximum accessibility. RSC-safe.',
+      },
+    },
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: (_args) => (
+    <div style={{ width: 280, fontFamily: 'var(--sv-font-family)' }}>
+      <label
+        htmlFor="role-select"
+        style={{
+          display: 'block',
+          marginBottom: 4,
+          fontSize: 'var(--sv-font-size-sm)',
+          fontWeight: 'var(--sv-font-weight-medium)',
+          color: 'var(--sv-color-text-primary)',
+        }}
+      >
+        Role
+      </label>
+      <Select id="role-select" defaultValue="user">
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+        <option value="owner">Owner</option>
+      </Select>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: (_args) => (
+    <div style={{ width: 280 }}>
+      <Select disabled defaultValue="user">
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+      </Select>
+    </div>
+  ),
+};
+
+/** Form context — several fields together matching the spec layout. */
+export const FormContext: Story = {
+  render: (_args) => {
+    const fieldStyle: React.CSSProperties = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+    };
+    const labelStyle: React.CSSProperties = {
+      fontSize: 'var(--sv-font-size-sm)',
+      fontWeight: 'var(--sv-font-weight-medium)',
+      color: 'var(--sv-color-text-primary)',
+      fontFamily: 'var(--sv-font-family)',
+    };
+
+    return (
+      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={fieldStyle}>
+          <label htmlFor="lang-select" style={labelStyle}>
+            Language
+          </label>
+          <Select id="lang-select" defaultValue="en-us">
+            <option value="en-us">English (US)</option>
+            <option value="en-gb">English (UK)</option>
+            <option value="fr">Français</option>
+            <option value="de">Deutsch</option>
+            <option value="ja">日本語</option>
+          </Select>
+        </div>
+        <div style={fieldStyle}>
+          <label htmlFor="tz-select" style={labelStyle}>
+            Timezone
+          </label>
+          <Select id="tz-select" defaultValue="asia-colombo">
+            <option value="asia-colombo">Asia/Colombo (UTC+5:30)</option>
+            <option value="utc">UTC</option>
+            <option value="america-ny">America/New_York (UTC−5)</option>
+            <option value="europe-london">Europe/London (UTC+0)</option>
+          </Select>
+        </div>
+        <div style={fieldStyle}>
+          <label htmlFor="poll-select" style={labelStyle}>
+            Poll interval
+          </label>
+          <Select id="poll-select" defaultValue="30">
+            <option value="15">Every 15 seconds</option>
+            <option value="30">Every 30 seconds</option>
+            <option value="60">Every minute</option>
+            <option value="300">Every 5 minutes</option>
+          </Select>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,40 @@
+import type { SelectHTMLAttributes } from 'react';
+import styles from './Select.module.css';
+
+export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
+  /** 'md' (default) — standard form field height. 'sm' — compact for table cells and inline controls. */
+  size?: 'sm' | 'md';
+};
+
+/**
+ * Select — styled wrapper around the native `<select>`. Inherits the same
+ * height, border, radius, and focus ring as `Input` for visual consistency.
+ * Uses the native picker on mobile — no custom dropdown, maximum a11y coverage.
+ *
+ * RSC-safe: presentational, no hooks, forwards all native select props.
+ */
+export function Select({ className, size = 'md', children, ...rest }: SelectProps) {
+  return (
+    <div
+      className={[styles.wrapper, size === 'sm' ? styles.sm : undefined].filter(Boolean).join(' ')}
+    >
+      <select className={[styles.select, className].filter(Boolean).join(' ')} {...rest}>
+        {children}
+      </select>
+      <svg
+        className={styles.chevron}
+        aria-hidden="true"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Select } from '../Select';
+
+afterEach(cleanup);
+
+describe('Select', () => {
+  it('renders a combobox', () => {
+    render(
+      <Select aria-label="Role">
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+      </Select>,
+    );
+    expect(screen.getByRole('combobox', { name: 'Role' })).toBeDefined();
+  });
+
+  it('renders provided options', () => {
+    render(
+      <Select aria-label="Role">
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+        <option value="owner">Owner</option>
+      </Select>,
+    );
+    expect(screen.getAllByRole('option').length).toBe(3);
+  });
+
+  it('forwards value and onChange', () => {
+    const onChange = vi.fn();
+    render(
+      <Select aria-label="Role" value="user" onChange={onChange}>
+        <option value="user">User</option>
+        <option value="admin">Admin</option>
+      </Select>,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'admin' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(
+      <Select aria-label="Role" disabled>
+        <option value="user">User</option>
+      </Select>,
+    );
+    expect((screen.getByRole('combobox') as HTMLSelectElement).disabled).toBe(true);
+  });
+
+  it('renders a decorative chevron element', () => {
+    const { container } = render(
+      <Select aria-label="Role">
+        <option value="user">User</option>
+      </Select>,
+    );
+    expect(container.querySelector('[aria-hidden]')).toBeDefined();
+  });
+});

package/src/components/Spinner/Spinner.module.css

@@ -0,0 +1,39 @@
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: var(--sv-color-border);
+  border-top-color: var(--sv-color-accent);
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-play-state: paused;
+  }
+}
+
+.sm {
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  border-width: 2px;
+}
+
+.md {
+  width: var(--sv-icon-size-md);
+  height: var(--sv-icon-size-md);
+  border-width: 2px;
+}
+
+.lg {
+  width: var(--sv-icon-size-lg);
+  height: var(--sv-icon-size-lg);
+  border-width: 3px;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,23 @@
+import styles from './Spinner.module.css';
+
+export interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  className?: string;
+}
+
+const sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {
+  sm: styles.sm as string,
+  md: styles.md as string,
+  lg: styles.lg as string,
+};
+
+export function Spinner({ size = 'md', label = 'Loading…', className }: SpinnerProps) {
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={[styles.spinner, sizeClass[size], className].filter(Boolean).join(' ')}
+    />
+  );
+}

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

@@ -0,0 +1,67 @@
+.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;
+}
+
+.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

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

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

@@ -0,0 +1,50 @@
+// @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/Tabs/Tabs.module.css

@@ -0,0 +1,49 @@
+.tablist {
+  display: flex;
+  border-bottom: 1px 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;
+  padding: var(--sv-space-2) 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);
+}
+
+.inactive:hover {
+  color: var(--sv-color-text-primary);
+}