@sovereignfs/ui 0.21.0

package/src/stories/NavTabs.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NavTabs } from '../components/NavTabs/NavTabs';
+
+const items = [
+  { label: 'Overview', href: '#overview', active: true },
+  { label: 'Users', href: '#users' },
+  { label: 'Plugins', href: '#plugins' },
+  { label: 'Settings', href: '#settings' },
+];
+
+const meta = {
+  title: 'Components/NavTabs',
+  component: NavTabs,
+  parameters: { layout: 'padded' },
+  args: { items },
+} satisfies Meta<typeof NavTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ManyTabs: Story = {
+  args: {
+    items: [
+      { label: 'Profile', href: '#profile', active: true },
+      { label: 'Security', href: '#security' },
+      { label: 'Notifications', href: '#notifications' },
+      { label: 'Preferences', href: '#preferences' },
+      { label: 'Data & Privacy', href: '#data' },
+      { label: 'Sessions', href: '#sessions' },
+    ],
+  },
+  parameters: { viewport: { defaultViewport: 'mobile' } },
+};

package/src/stories/PageHeader.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PageHeader } from '../components/PageHeader/PageHeader';
+import { Button } from '../components/Button/Button';
+
+const meta = {
+  title: 'Components/PageHeader',
+  component: PageHeader,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { title: 'Users' },
+};
+
+export const WithDescription: Story = {
+  args: {
+    title: 'Users',
+    description: 'Manage who has access to this instance.',
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    title: 'Users',
+    description: 'Manage who has access to this instance.',
+    action: <Button size="sm">Invite user</Button>,
+  },
+};

package/src/stories/Spinner.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Spinner } from '../components/Spinner/Spinner';
+
+const meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Small: Story = { args: { size: 'sm' } };
+export const Large: Story = { args: { size: 'lg' } };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  ),
+};

package/src/stories/TokenGallery.stories.tsx

@@ -0,0 +1,355 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+// ---------------------------------------------------------------------------
+// Token Gallery — live rendering of every CSS custom property tier.
+// Values are read from the computed style at render time so they always
+// reflect the actual loaded CSS, not a hardcoded snapshot. Toggle dark mode
+// via the Themes toolbar to compare both theme values side-by-side.
+// ---------------------------------------------------------------------------
+
+const SEMANTIC_COLORS = [
+  '--sv-color-surface',
+  '--sv-color-surface-sunken',
+  '--sv-color-surface-raised',
+  '--sv-color-text-primary',
+  '--sv-color-text-muted',
+  '--sv-color-text-subtle',
+  '--sv-color-text-on-accent',
+  '--sv-color-border',
+  '--sv-color-border-strong',
+  '--sv-color-accent',
+  '--sv-color-accent-hover',
+  '--sv-color-focus-ring',
+  '--sv-color-error-surface',
+  '--sv-color-error-text',
+  '--sv-color-error-border',
+  '--sv-color-warning-surface',
+  '--sv-color-warning-text',
+  '--sv-color-warning-border',
+  '--sv-color-success-surface',
+  '--sv-color-success-text',
+  '--sv-color-success-border',
+  '--sv-color-info-surface',
+  '--sv-color-info-text',
+  '--sv-color-info-border',
+  '--sv-color-scrim',
+];
+
+const SPACE_TOKENS = [
+  '--sv-space-1',
+  '--sv-space-2',
+  '--sv-space-3',
+  '--sv-space-4',
+  '--sv-space-5',
+  '--sv-space-6',
+  '--sv-space-8',
+  '--sv-space-10',
+  '--sv-space-12',
+  '--sv-space-16',
+];
+
+const RADIUS_TOKENS = [
+  '--sv-radius-sm',
+  '--sv-radius-md',
+  '--sv-radius-lg',
+  '--sv-radius-xl',
+  '--sv-radius-2xl',
+  '--sv-radius-3xl',
+  '--sv-radius-full',
+];
+const ICON_SIZE_TOKENS = ['--sv-icon-size-sm', '--sv-icon-size-md', '--sv-icon-size-lg'];
+
+const FONT_SIZE_TOKENS = [
+  '--sv-font-size-label',
+  '--sv-font-size-xs',
+  '--sv-font-size-caption',
+  '--sv-font-size-sm',
+  '--sv-font-size-md',
+  '--sv-font-size-lg',
+  '--sv-font-size-xl',
+  '--sv-font-size-2xl',
+];
+
+const FONT_WEIGHT_TOKENS = [
+  '--sv-font-weight-normal',
+  '--sv-font-weight-medium',
+  '--sv-font-weight-semibold',
+  '--sv-font-weight-bold',
+];
+
+const SHADOW_TOKENS = [
+  '--sv-shadow-card',
+  '--sv-shadow-hover',
+  '--sv-shadow-popover',
+  '--sv-shadow-overlay',
+];
+
+// ---------------------------------------------------------------------------
+
+const row: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  padding: '6px 0',
+  borderBottom: '1px solid var(--sv-color-border)',
+};
+
+const label: React.CSSProperties = {
+  fontFamily: 'monospace',
+  fontSize: '13px',
+  color: 'var(--sv-color-text-primary)',
+  minWidth: '300px',
+};
+
+const value: React.CSSProperties = {
+  fontFamily: 'monospace',
+  fontSize: '12px',
+  color: 'var(--sv-color-text-muted)',
+  flex: 1,
+};
+
+// ---------------------------------------------------------------------------
+
+function ColorRow({ token }: { token: string }) {
+  const computed =
+    typeof window !== 'undefined'
+      ? getComputedStyle(document.documentElement).getPropertyValue(token).trim()
+      : '';
+  const swatch: React.CSSProperties = {
+    width: 28,
+    height: 28,
+    borderRadius: 4,
+    background: `var(${token})`,
+    border: '1px solid var(--sv-color-border)',
+    flexShrink: 0,
+  };
+  return (
+    <div style={row}>
+      <div style={swatch} />
+      <span style={label}>{token}</span>
+      <span style={value}>{computed}</span>
+    </div>
+  );
+}
+
+function ScaleRow({
+  token,
+  renderPreview,
+}: {
+  token: string;
+  renderPreview: (v: string) => React.ReactNode;
+}) {
+  const computed =
+    typeof window !== 'undefined'
+      ? getComputedStyle(document.documentElement).getPropertyValue(token).trim()
+      : '';
+  return (
+    <div style={row}>
+      {renderPreview(computed)}
+      <span style={label}>{token}</span>
+      <span style={value}>{computed}</span>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section style={{ marginBottom: 40 }}>
+      <h2
+        style={{
+          fontFamily: 'var(--sv-font-family)',
+          fontSize: 18,
+          fontWeight: 600,
+          color: 'var(--sv-color-text-primary)',
+          marginBottom: 12,
+          borderBottom: '2px solid var(--sv-color-accent)',
+          paddingBottom: 4,
+        }}
+      >
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+function TokenGalleryComponent() {
+  return (
+    <div
+      style={{
+        padding: 24,
+        background: 'var(--sv-color-surface)',
+        minHeight: '100vh',
+        fontFamily: 'var(--sv-font-family)',
+      }}
+    >
+      <h1
+        style={{
+          fontSize: 24,
+          fontWeight: 700,
+          color: 'var(--sv-color-text-primary)',
+          marginBottom: 8,
+        }}
+      >
+        Sovereign Design Token Gallery
+      </h1>
+      <p style={{ color: 'var(--sv-color-text-muted)', marginBottom: 32, fontSize: 14 }}>
+        All values are read live from computed styles — they reflect the actual loaded CSS, not a
+        hardcoded snapshot. Use the Themes toolbar above to switch dark mode.
+      </p>
+
+      <Section title="Semantic colours">
+        {SEMANTIC_COLORS.map((t) => (
+          <ColorRow key={t} token={t} />
+        ))}
+      </Section>
+
+      <Section title="Space scale">
+        {SPACE_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <div
+                style={{
+                  width: `var(${t})`,
+                  height: 16,
+                  background: 'var(--sv-color-accent)',
+                  flexShrink: 0,
+                  minWidth: 4,
+                }}
+              />
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Font weight scale">
+        {FONT_WEIGHT_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <span
+                style={{
+                  fontFamily: 'var(--sv-font-family)',
+                  fontSize: 'var(--sv-font-size-md)',
+                  fontWeight: `var(${t})`,
+                  color: 'var(--sv-color-text-primary)',
+                  minWidth: 100,
+                }}
+              >
+                Sovereign
+              </span>
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Typography scale">
+        {FONT_SIZE_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <span
+                style={{
+                  fontSize: `var(${t})`,
+                  color: 'var(--sv-color-text-primary)',
+                  minWidth: 100,
+                  lineHeight: 1,
+                }}
+              >
+                Aa
+              </span>
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Radius scale">
+        {RADIUS_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <div
+                style={{
+                  width: 40,
+                  height: 24,
+                  background: 'var(--sv-color-accent)',
+                  borderRadius: `var(${t})`,
+                  flexShrink: 0,
+                }}
+              />
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Icon sizes">
+        {ICON_SIZE_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <div
+                style={{
+                  width: `var(${t})`,
+                  height: `var(${t})`,
+                  background: 'var(--sv-color-accent)',
+                  borderRadius: 2,
+                  flexShrink: 0,
+                }}
+              />
+            )}
+          />
+        ))}
+      </Section>
+
+      <Section title="Shadows">
+        {SHADOW_TOKENS.map((t) => (
+          <ScaleRow
+            key={t}
+            token={t}
+            renderPreview={(_v) => (
+              <div
+                style={{
+                  width: 48,
+                  height: 28,
+                  background: 'var(--sv-color-surface-raised)',
+                  boxShadow: `var(${t})`,
+                  borderRadius: 4,
+                  flexShrink: 0,
+                }}
+              />
+            )}
+          />
+        ))}
+      </Section>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+const meta = {
+  title: 'Design Tokens/Token Gallery',
+  component: TokenGalleryComponent,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Live gallery of every `--sv-*` CSS custom property. Values are read from `getComputedStyle` at render time — toggle dark mode via the Themes toolbar to see both themes.',
+      },
+    },
+  },
+} satisfies Meta<typeof TokenGalleryComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllTokens: Story = {};

package/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tooltip } from '../components/Tooltip/Tooltip';
+import { Button } from '../components/Button/Button';
+import { Icon } from '../components/Icon/Icon';
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'This is a tooltip',
+    children: <Button variant="secondary">Hover me</Button>,
+  },
+};
+
+export const OnIcon: Story = {
+  args: {
+    content: 'More information',
+    children: (
+      <span style={{ color: 'var(--sv-color-text-muted)', cursor: 'default' }}>
+        <Icon name="info" size="md" aria-label="Info" />
+      </span>
+    ),
+  },
+};
+
+export const Sides: Story = {
+  args: { content: '', children: <span /> },
+  render: () => (
+    <div style={{ display: 'flex', gap: 48, alignItems: 'center', padding: 48 }}>
+      <Tooltip content="Top" side="top">
+        <Button variant="ghost" size="sm">
+          Top
+        </Button>
+      </Tooltip>
+      <Tooltip content="Bottom" side="bottom">
+        <Button variant="ghost" size="sm">
+          Bottom
+        </Button>
+      </Tooltip>
+      <Tooltip content="Left" side="left">
+        <Button variant="ghost" size="sm">
+          Left
+        </Button>
+      </Tooltip>
+      <Tooltip content="Right" side="right">
+        <Button variant="ghost" size="sm">
+          Right
+        </Button>
+      </Tooltip>
+    </div>
+  ),
+};

package/src/tokens/primitives.css

@@ -0,0 +1,99 @@
+/*
+ * Sovereign Design System — primitive tokens.
+ *
+ * Raw, context-free scales: the palette, spacing, type, and radii. These are
+ * fixed — tenant theming never overrides primitives (it overrides the semantic
+ * layer in semantic.css). Plugin code should reference SEMANTIC colour tokens,
+ * not these primitives directly.
+ */
+:root {
+  /* Neutral grey scale (monochrome identity) */
+  --sv-white: #ffffff;
+
+  /* Status colour primitives — amber (warning), green (success), red (error), blue (info).
+     Kept minimal: only the swatches the semantic status tokens reference.
+     Hex values align with the v3.1 design spec. */
+  --sv-amber-100: #fff7ed;
+  --sv-amber-200: #fed7aa;
+  --sv-amber-800: #b45309;
+  --sv-amber-900: #92400e;
+  --sv-green-100: #ecfdf3;
+  --sv-green-200: #bbf7d0;
+  --sv-green-800: #167c4a;
+  --sv-green-900: #14532d;
+  --sv-red-100: #fef2f2;
+  --sv-red-200: #fecaca;
+  --sv-red-700: #b91c1c;
+  --sv-red-800: #991b1b;
+  --sv-red-900: #7f1d1d;
+  --sv-blue-100: #eff6ff;
+  --sv-blue-200: #dbeafe;
+  --sv-blue-800: #1d4ed8;
+  --sv-blue-900: #1e3a8a;
+  --sv-black: #000000;
+  --sv-grey-50: #fafafa;
+  --sv-grey-100: #f4f4f5;
+  --sv-grey-200: #e4e4e7;
+  --sv-grey-300: #d4d4d8;
+  --sv-grey-400: #a1a1aa;
+  --sv-grey-500: #71717a;
+  --sv-grey-600: #52525b;
+  --sv-grey-700: #3f3f46;
+  --sv-grey-800: #27272a;
+  --sv-grey-900: #18181b;
+  --sv-grey-950: #09090b;
+
+  /* Spacing scale (4px base) */
+  --sv-space-1: 0.25rem;
+  --sv-space-2: 0.5rem;
+  --sv-space-3: 0.75rem;
+  --sv-space-4: 1rem;
+  --sv-space-5: 1.25rem;
+  --sv-space-6: 1.5rem;
+  --sv-space-8: 2rem;
+  --sv-space-10: 2.5rem;
+  --sv-space-12: 3rem;
+  --sv-space-16: 4rem;
+
+  /* Typography
+     Default pair: Hanken Grotesk (body) + JetBrains Mono (code/identifiers).
+     Operators supply the web font via <link> or instance CSS; the fallback
+     stack applies when the font is not loaded. */
+  --sv-font-family:
+    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  --sv-font-family-mono:
+    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --sv-font-size-label: 0.6875rem; /* 11px — all-caps section labels */
+  --sv-font-size-xs: 0.75rem; /* 12px — mono identifiers */
+  --sv-font-size-caption: 0.8125rem; /* 13px — secondary / supporting copy */
+  --sv-font-size-sm: 0.875rem; /* 14px — body copy */
+  --sv-font-size-md: 1rem; /* 16px */
+  --sv-font-size-lg: 1.125rem; /* 18px */
+  --sv-font-size-xl: 1.25rem; /* 20px */
+  --sv-font-size-2xl: 1.5rem; /* 24px */
+  --sv-font-weight-regular: 400;
+  --sv-font-weight-medium: 500;
+  --sv-font-weight-semibold: 600;
+  --sv-font-weight-bold: 700;
+
+  /* Icon sizes — scale tokens used directly by the Icon component */
+  --sv-icon-size-sm: 1rem; /* 16px — inline with body text */
+  --sv-icon-size-md: 1.25rem; /* 20px — standard affordance */
+  --sv-icon-size-lg: 1.5rem; /* 24px — prominent / standalone */
+
+  /* Border radii (v3.1 spec values) */
+  --sv-radius-sm: 0.375rem; /* 6px — badge, tag */
+  --sv-radius-md: 0.5rem; /* 8px — button, input */
+  --sv-radius-lg: 0.6875rem; /* 11px — sidebar icon, card */
+  --sv-radius-xl: 0.75rem; /* 12px — card, panel */
+  --sv-radius-2xl: 0.875rem; /* 14px — popover */
+  --sv-radius-3xl: 1.25rem; /* 20px — bottom sheet (Drawer top corners) */
+  --sv-radius-full: 9999px; /* pill / avatar */
+
+  /* Touch targets — minimum hit-area dimension for interactive controls.
+     44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
+     touch without a pointing device. Applied to icon-only controls on mobile
+     (avatar, footer button, Drawer nav items). */
+  --sv-touch-target-min: 44px;
+}