@sovereignfs/ui 0.21.0

package/src/components/Icon/icons/package.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function PackageIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+      <path d="M12 22V12" />
+      <polyline points="3.29 7 12 12 20.71 7" />
+      <path d="m7.5 4.27 9 5.15" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/pencil.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function PencilIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+      <path d="m15 5 4 4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/plus.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function PlusIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/rotate-ccw.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function RotateCcwIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/search.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SearchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m21 21-4.34-4.34" />
+      <circle cx="11" cy="11" r="8" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/settings.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/shield.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ShieldIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/sliders-horizontal.tsx

@@ -0,0 +1,28 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SlidersHorizontalIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <line x1="21" x2="14" y1="4" y2="4" />
+      <line x1="10" x2="3" y1="4" y2="4" />
+      <line x1="21" x2="12" y1="12" y2="12" />
+      <line x1="8" x2="3" y1="12" y2="12" />
+      <line x1="21" x2="16" y1="20" y2="20" />
+      <line x1="12" x2="3" y1="20" y2="20" />
+      <line x1="14" x2="14" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="10" y2="14" />
+      <line x1="16" x2="16" y1="18" y2="22" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/terminal.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export function TerminalIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polyline points="4 17 10 11 4 5" />
+      <line x1="12" x2="20" y1="19" y2="19" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/trash-2.tsx

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function Trash2Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10 11v6" />
+      <path d="M14 11v6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M3 6h18" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/user.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function UserIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/x.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function XIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}

package/src/components/Input/Input.module.css

@@ -0,0 +1,37 @@
+.input {
+  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);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.input:read-only {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  border-color: var(--sv-color-border);
+  cursor: default;
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './Input';
+
+// Wrap in a label so a11y checks pass (Input is a bare <input> — no built-in
+// label association).
+function Labeled({ label, ...props }: React.ComponentProps<typeof Input> & { label: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <label
+        htmlFor="sb-input"
+        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
+      >
+        {label}
+      </label>
+      <Input id="sb-input" {...props} />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The primitive text field. RSC-safe; forwards all native `<input>` props. No label is built-in — always pair with a `<label>` for accessibility.',
+      },
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Text: Story = {
+  render: (_args) => <Labeled label="Display name" type="text" placeholder="e.g. Jane Smith" />,
+};
+
+export const Email: Story = {
+  render: (_args) => <Labeled label="Email address" type="email" placeholder="you@example.com" />,
+};
+
+export const Password: Story = {
+  render: (_args) => <Labeled label="Password" type="password" placeholder="••••••••" />,
+};
+
+export const Disabled: Story = {
+  render: (_args) => (
+    <Labeled label="Read-only field" type="text" defaultValue="Cannot be changed" disabled />
+  ),
+};
+
+/** Mimics an error state — the container adds red border via CSS token. */
+export const ErrorState: Story = {
+  render: (_args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <label
+        htmlFor="sb-input-err"
+        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
+      >
+        Email address
+      </label>
+      <Input
+        id="sb-input-err"
+        type="email"
+        defaultValue="not-an-email"
+        aria-invalid="true"
+        aria-describedby="sb-input-err-msg"
+        style={{
+          borderColor: 'var(--sv-color-error-border)',
+          outline: 'none',
+        }}
+      />
+      <span
+        id="sb-input-err-msg"
+        style={{ fontSize: 12, color: 'var(--sv-color-error-text)', fontFamily: 'system-ui' }}
+      >
+        Enter a valid email address.
+      </span>
+    </div>
+  ),
+};

package/src/components/Input/Input.tsx

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

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

@@ -0,0 +1,22 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Input } from '../Input';
+
+describe('Input', () => {
+  it('renders and forwards native props', () => {
+    render(<Input placeholder="Email" defaultValue="a@b.c" />);
+    const input = screen.getByPlaceholderText('Email') as HTMLInputElement;
+    expect(input.value).toBe('a@b.c');
+  });
+
+  it('defaults to type="text"', () => {
+    render(<Input aria-label="field" />);
+    expect((screen.getByLabelText('field') as HTMLInputElement).type).toBe('text');
+  });
+
+  it('honours an explicit type', () => {
+    render(<Input aria-label="pw" type="password" />);
+    expect((screen.getByLabelText('pw') as HTMLInputElement).type).toBe('password');
+  });
+});

package/src/components/NavTabs/NavTabs.module.css

@@ -0,0 +1,48 @@
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  border-bottom: 1px solid var(--sv-color-border);
+}
+
+.link {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  padding-bottom: calc(var(--sv-space-2) + 2px);
+  border-bottom: 2px solid transparent;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.1s ease;
+}
+
+.link:hover {
+  color: var(--sv-color-text-primary);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.active {
+  color: var(--sv-color-text-primary);
+  font-weight: var(--sv-font-weight-semibold);
+  border-bottom-color: var(--sv-color-text-primary);
+}
+
+@media (max-width: 640px) {
+  .nav {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/components/NavTabs/NavTabs.tsx

@@ -0,0 +1,33 @@
+import styles from './NavTabs.module.css';
+
+export interface NavTabItem {
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export interface NavTabsProps {
+  items: NavTabItem[];
+  className?: string;
+  'aria-label'?: string;
+}
+
+export function NavTabs({ items, className, 'aria-label': ariaLabel }: NavTabsProps) {
+  return (
+    <nav
+      className={[styles.nav, className].filter(Boolean).join(' ')}
+      aria-label={ariaLabel ?? 'Page navigation'}
+    >
+      {items.map((item) => (
+        <a
+          key={item.href}
+          href={item.href}
+          className={[styles.link, item.active && styles.active].filter(Boolean).join(' ')}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      ))}
+    </nav>
+  );
+}

package/src/components/PageHeader/PageHeader.module.css

@@ -0,0 +1,32 @@
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sv-space-4);
+  margin-bottom: var(--sv-space-6);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-1);
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--sv-font-size-2xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  line-height: 1.2;
+}
+
+.description {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.action {
+  flex-shrink: 0;
+}

package/src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import styles from './PageHeader.module.css';
+
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ title, description, action, className }: PageHeaderProps) {
+  return (
+    <header className={[styles.header, className].filter(Boolean).join(' ')}>
+      <div className={styles.text}>
+        <h1 className={styles.title}>{title}</h1>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {action && <div className={styles.action}>{action}</div>}
+    </header>
+  );
+}

package/src/components/Popover/Popover.module.css

@@ -0,0 +1,44 @@
+.container {
+  position: relative;
+  display: inline-flex;
+}
+
+.panel {
+  position: absolute;
+  top: calc(100% + var(--sv-space-2));
+  z-index: 60;
+  background: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-2xl);
+  box-shadow: var(--sv-shadow-popover);
+  overflow: hidden;
+  /* Slide in from slightly above */
+  animation: sv-popover-in 0.12s ease;
+}
+
+@keyframes sv-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    animation: none;
+  }
+}
+
+/* Alignment: right edge of panel aligns to right edge of trigger */
+.right {
+  right: 0;
+}
+
+/* Alignment: left edge of panel aligns to left edge of trigger */
+.left {
+  left: 0;
+}