@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,27 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { AspectRatio } from '../AspectRatio';
-
-afterEach(cleanup);
-
-describe('AspectRatio', () => {
-  it('applies the ratio as inline CSS aspect-ratio', () => {
-    render(
-      <AspectRatio ratio={16 / 9}>
-        <img src="/x.png" alt="Preview" />
-      </AspectRatio>,
-    );
-    const root = screen.getByRole('img').parentElement;
-    expect(root?.style.aspectRatio).toContain(String(16 / 9));
-  });
-
-  it('renders children', () => {
-    render(
-      <AspectRatio ratio={1}>
-        <div>content</div>
-      </AspectRatio>,
-    );
-    expect(screen.getByText('content')).toBeDefined();
-  });
-});

package/src/components/Avatar/Avatar.module.css

@@ -1,38 +0,0 @@
-.avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--sv-color-surface-raised);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  overflow: hidden;
-  flex-shrink: 0;
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-}
-
-.sm {
-  width: 24px;
-  height: 24px;
-  font-size: var(--sv-font-size-label);
-}
-
-.md {
-  width: 32px;
-  height: 32px;
-  font-size: var(--sv-font-size-xs);
-}
-
-.lg {
-  width: 40px;
-  height: 40px;
-  font-size: var(--sv-font-size-sm);
-}
-
-.img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}

package/src/components/Avatar/Avatar.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import styles from './Avatar.module.css';
-
-export interface AvatarProps {
-  name: string;
-  src?: string;
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-}
-
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length === 1) return (parts[0] ?? '').slice(0, 2).toUpperCase();
-  return ((parts[0]?.[0] ?? '') + (parts[parts.length - 1]?.[0] ?? '')).toUpperCase();
-}
-
-const sizeClass: Record<NonNullable<AvatarProps['size']>, string> = {
-  sm: styles.sm as string,
-  md: styles.md as string,
-  lg: styles.lg as string,
-};
-
-export function Avatar({ name, src, size = 'md', className }: AvatarProps) {
-  const [imgFailed, setImgFailed] = useState(false);
-  const cls = [styles.avatar, sizeClass[size], className].filter(Boolean).join(' ');
-
-  if (src && !imgFailed) {
-    return (
-      <span className={cls} aria-label={name}>
-        <img src={src} alt={name} className={styles.img} onError={() => setImgFailed(true)} />
-      </span>
-    );
-  }
-
-  return (
-    <span className={cls} aria-label={name}>
-      {initials(name)}
-    </span>
-  );
-}

package/src/components/Badge/Badge.module.css

@@ -1,177 +0,0 @@
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  border-radius: var(--sv-radius-sm);
-  font-family: var(--sv-font-family);
-  line-height: 1;
-  white-space: nowrap;
-  user-select: none;
-}
-
-/* Applied by default (uppercase=true) — opt out for a title-case badge that
-   renders children exactly as passed in. */
-.uppercase {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* role — neutral fill, border */
-.role {
-  background: var(--sv-color-surface-sunken);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  color: var(--sv-color-text-primary);
-  font-weight: var(--sv-font-weight-semibold);
-}
-
-/* status — tinted chip with leading colour dot; colour set by chip* classes below */
-.status {
-  font-weight: var(--sv-font-weight-medium);
-}
-
-.chipGreen {
-  background: var(--sv-color-success-surface);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-success-border);
-  color: var(--sv-color-success-text);
-}
-
-.chipAmber {
-  background: var(--sv-color-warning-surface);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-warning-border);
-  color: var(--sv-color-warning-text);
-}
-
-.chipRed {
-  background: var(--sv-color-error-surface);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-error-border);
-  color: var(--sv-color-error-text);
-}
-
-.chipNeutral {
-  background: var(--sv-color-surface-sunken);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  color: var(--sv-color-text-muted);
-}
-
-/* mono — monospace font, neutral surface, for type tags / versions */
-.mono {
-  background: var(--sv-color-surface-sunken);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  color: var(--sv-color-text-muted);
-  font-family: var(--sv-font-family-mono);
-}
-
-/* Size × variant — font-size and padding are the two axes that change
-   together, so each combination is one compound rule rather than two
-   composed partials fighting over the same properties. `.role.md`,
-   `.status.md`, and `.mono.md` reproduce the badge's original (and, until
-   now, only) sizing exactly, so the default (no `size` prop) renders
-   pixel-identical to before this scale existed. `xs` was added later, for a
-   badge sitting inline next to larger text where `sm` (already the smallest
-   type-scale token, `--sv-font-size-label`) still read oversized — it needed
-   a new, smaller primitive (`--sv-font-size-2xs`) rather than reusing one. */
-.role.xs {
-  padding: 1px 3px;
-  font-size: var(--sv-font-size-2xs);
-}
-
-.role.sm {
-  padding: 1px var(--sv-space-1);
-  font-size: var(--sv-font-size-label);
-}
-
-.role.md {
-  padding: 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-label);
-}
-
-.role.lg {
-  padding: 3px var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-}
-
-.mono.xs {
-  padding: 1px 3px;
-  font-size: var(--sv-font-size-2xs);
-}
-
-.mono.sm {
-  padding: 1px var(--sv-space-1);
-  font-size: var(--sv-font-size-label);
-}
-
-.mono.md {
-  padding: 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-xs);
-}
-
-.mono.lg {
-  padding: 3px var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-}
-
-/* status keeps a tighter left edge than right at every size — the dot +
-   gap already read as space before the text, so a full padding-inline-start
-   would double it up. */
-.status.xs {
-  padding: 1px 3px 1px 2px;
-  font-size: var(--sv-font-size-2xs);
-}
-
-.status.sm {
-  padding: 1px var(--sv-space-1) 1px 3px;
-  font-size: var(--sv-font-size-label);
-}
-
-.status.md {
-  padding: 2px var(--sv-space-2) 2px var(--sv-space-1);
-  font-size: var(--sv-font-size-xs);
-}
-
-.status.lg {
-  padding: 3px var(--sv-space-3) 3px var(--sv-space-2);
-  font-size: var(--sv-font-size-sm);
-}
-
-/* Status dot — scales with size */
-.dot {
-  display: inline-block;
-  border-radius: var(--sv-radius-full);
-  flex-shrink: 0;
-}
-
-.xs .dot {
-  width: 4px;
-  height: 4px;
-}
-
-.sm .dot {
-  width: 5px;
-  height: 5px;
-}
-
-.md .dot {
-  width: 6px;
-  height: 6px;
-}
-
-.lg .dot {
-  width: 8px;
-  height: 8px;
-}
-
-.dotGreen {
-  background: var(--sv-color-success-text);
-}
-
-.dotRed {
-  background: var(--sv-color-error-text);
-}
-
-.dotAmber {
-  background: var(--sv-color-warning-text);
-}
-
-.dotGrey {
-  background: var(--sv-color-text-muted);
-}

package/src/components/Badge/Badge.stories.tsx

@@ -1,238 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from './Badge';
-import type { BadgeStatus } from './Badge';
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Compact label for roles (`role`), lifecycle states (`status`), and type/version tags (`mono`). Four sizes (`xs`/`sm`/`md`/`lg`); ALL CAPS by default, or set `uppercase={false}` for title case. RSC-safe — no state.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['role', 'status', 'mono'] },
-    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
-    status: {
-      control: 'select',
-      options: ['active', 'enabled', 'deactivated', 'failed', 'invited', 'pending', 'neutral'],
-    },
-    uppercase: { control: 'boolean' },
-  },
-  args: { children: 'Badge' },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Role: Story = { args: { variant: 'role', children: 'Owner' } };
-export const RoleAdmin: Story = { args: { variant: 'role', children: 'Admin' } };
-export const RoleUser: Story = { args: { variant: 'role', children: 'User' } };
-export const RoleAuditor: Story = { args: { variant: 'role', children: 'Auditor' } };
-
-export const StatusActive: Story = {
-  args: { variant: 'status', status: 'active', children: 'Active' },
-};
-export const StatusDeactivated: Story = {
-  args: { variant: 'status', status: 'deactivated', children: 'Deactivated' },
-};
-export const StatusInvited: Story = {
-  args: { variant: 'status', status: 'invited', children: 'Invited' },
-};
-export const StatusFailed: Story = {
-  args: { variant: 'status', status: 'failed', children: 'Failed' },
-};
-export const StatusPending: Story = {
-  args: { variant: 'status', status: 'pending', children: 'Pending' },
-};
-
-export const MonoPlatform: Story = { args: { variant: 'mono', children: 'platform' } };
-export const MonoCommunity: Story = { args: { variant: 'mono', children: 'community' } };
-export const MonoVersion: Story = { args: { variant: 'mono', children: 'v0.1.0' } };
-
-/** xs / sm / md (default) / lg side by side, across all three variants. */
-export const Sizes: Story = {
-  render: () => {
-    const rowStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 8 };
-    const sectionStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8 };
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div style={sectionStyle}>
-          <div style={rowStyle}>
-            <Badge variant="role" size="xs">
-              Owner
-            </Badge>
-            <Badge variant="role" size="sm">
-              Owner
-            </Badge>
-            <Badge variant="role" size="md">
-              Owner
-            </Badge>
-            <Badge variant="role" size="lg">
-              Owner
-            </Badge>
-          </div>
-          <div style={rowStyle}>
-            <Badge variant="status" status="active" size="xs">
-              Active
-            </Badge>
-            <Badge variant="status" status="active" size="sm">
-              Active
-            </Badge>
-            <Badge variant="status" status="active" size="md">
-              Active
-            </Badge>
-            <Badge variant="status" status="active" size="lg">
-              Active
-            </Badge>
-          </div>
-          <div style={rowStyle}>
-            <Badge variant="mono" size="xs">
-              v0.1.0
-            </Badge>
-            <Badge variant="mono" size="sm">
-              v0.1.0
-            </Badge>
-            <Badge variant="mono" size="md">
-              v0.1.0
-            </Badge>
-            <Badge variant="mono" size="lg">
-              v0.1.0
-            </Badge>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** uppercase (default) vs. title case — same text, `uppercase={false}` on the right. */
-export const TitleCase: Story = {
-  render: () => {
-    const rowStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 8 };
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <div style={rowStyle}>
-          <Badge variant="role">Owner</Badge>
-          <Badge variant="role" uppercase={false}>
-            Owner
-          </Badge>
-        </div>
-        <div style={rowStyle}>
-          <Badge variant="status" status="active">
-            Active
-          </Badge>
-          <Badge variant="status" status="active" uppercase={false}>
-            Active
-          </Badge>
-        </div>
-        <div style={rowStyle}>
-          <Badge variant="mono">Serve Route</Badge>
-          <Badge variant="mono" uppercase={false}>
-            Serve Route
-          </Badge>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** All variants and statuses at a glance. */
-export const AllVariants: Story = {
-  render: (_args) => {
-    const roleLabels = ['Owner', 'Admin', 'User', 'Auditor'];
-    const statuses: { status: BadgeStatus; label: string }[] = [
-      { status: 'active', label: 'Active' },
-      { status: 'enabled', label: 'Enabled' },
-      { status: 'deactivated', label: 'Deactivated' },
-      { status: 'failed', label: 'Failed' },
-      { status: 'invited', label: 'Invited' },
-      { status: 'pending', label: 'Pending' },
-      { status: 'neutral', label: 'Neutral' },
-    ];
-    const monoLabels = ['platform', 'community', 'serve-route', 'v0.1.0', 'admin-only'];
-
-    const groupStyle: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: 8 };
-    const sectionStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8 };
-    const headingStyle: React.CSSProperties = {
-      fontSize: 11,
-      fontWeight: 600,
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase',
-      color: 'var(--sv-color-text-muted)',
-      fontFamily: 'var(--sv-font-family)',
-    };
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: 16 }}>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Role</span>
-          <div style={groupStyle}>
-            {roleLabels.map((l) => (
-              <Badge key={l} variant="role">
-                {l}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Status</span>
-          <div style={groupStyle}>
-            {statuses.map(({ status, label }) => (
-              <Badge key={status} variant="status" status={status}>
-                {label}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Mono</span>
-          <div style={groupStyle}>
-            {monoLabels.map((l) => (
-              <Badge key={l} variant="mono">
-                {l}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Sizes (xs / sm / md / lg)</span>
-          <div style={{ ...groupStyle, alignItems: 'center' }}>
-            <Badge variant="role" size="xs">
-              Owner
-            </Badge>
-            <Badge variant="role" size="sm">
-              Owner
-            </Badge>
-            <Badge variant="role" size="md">
-              Owner
-            </Badge>
-            <Badge variant="role" size="lg">
-              Owner
-            </Badge>
-          </div>
-        </div>
-        <div style={sectionStyle}>
-          <span style={headingStyle}>Title case (uppercase=false)</span>
-          <div style={{ ...groupStyle, alignItems: 'center' }}>
-            <Badge variant="role" uppercase={false}>
-              Owner
-            </Badge>
-            <Badge variant="status" status="active" uppercase={false}>
-              Active
-            </Badge>
-            <Badge variant="mono" uppercase={false}>
-              Serve Route
-            </Badge>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Badge/Badge.tsx

@@ -1,84 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './Badge.module.css';
-
-export type BadgeVariant = 'role' | 'status' | 'mono';
-export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
-export type BadgeStatus =
-  'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
-
-export interface BadgeProps {
-  variant?: BadgeVariant;
-  /** 'xs' | 'sm' | 'md' (default) | 'lg'. 'md' is the badge's original — and
-   * until now, only — size, so the default renders unchanged. 'xs' is the
-   * smallest tier (`--sv-font-size-2xs`, 10px) — for a badge sitting inline
-   * next to larger text (e.g. a status chip beside a card's headline value)
-   * where even 'sm' still reads oversized next to it. */
-  size?: BadgeSize;
-  /** Only relevant when variant="status" — determines the dot colour. */
-  status?: BadgeStatus;
-  /** Forces ALL CAPS display regardless of the case `children` is passed
-   * in. Defaults to `true` — every existing badge in the app relies on
-   * this. Set `false` for a title-case badge that renders exactly the text
-   * passed in (e.g. "Owner" instead of "OWNER"). */
-  uppercase?: boolean;
-  children: ReactNode;
-}
-
-const STATUS_DOT_CLASS: Record<BadgeStatus, string> = {
-  active: styles.dotGreen as string,
-  enabled: styles.dotGreen as string,
-  deactivated: styles.dotRed as string,
-  failed: styles.dotRed as string,
-  invited: styles.dotAmber as string,
-  pending: styles.dotAmber as string,
-  neutral: styles.dotGrey as string,
-};
-
-const STATUS_CHIP_CLASS: Record<BadgeStatus, string> = {
-  active: styles.chipGreen as string,
-  enabled: styles.chipGreen as string,
-  deactivated: styles.chipRed as string,
-  failed: styles.chipRed as string,
-  invited: styles.chipAmber as string,
-  pending: styles.chipAmber as string,
-  neutral: styles.chipNeutral as string,
-};
-
-/**
- * Badge — compact label for roles, lifecycle states, and type/version tags.
- *
- * - `role`   neutral surface + border, semibold — for Owner / Admin / User
- * - `status` tinted chip with leading colour dot — for Active / Deactivated / etc.
- * - `mono`   monospace font, neutral surface — for platform / community / v0.1.0
- *
- * Four sizes (`xs`/`sm`/`md`/`lg`, default `md`). ALL CAPS by default
- * (`uppercase`) — set `uppercase={false}` for a title-case badge instead.
- */
-export function Badge({
-  variant = 'role',
-  size = 'md',
-  status = 'neutral',
-  uppercase = true,
-  children,
-}: BadgeProps) {
-  const isStatus = variant === 'status';
-  const dotClass = isStatus ? STATUS_DOT_CLASS[status] : undefined;
-  const chipClass = isStatus ? STATUS_CHIP_CLASS[status] : undefined;
-
-  return (
-    <span
-      className={[
-        styles.badge,
-        styles[variant],
-        styles[size],
-        chipClass,
-        uppercase && styles.uppercase,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {isStatus && <span className={[styles.dot, dotClass].join(' ')} aria-hidden />}
-      {children}
-    </span>
-  );
-}

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

@@ -1,90 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Badge } from '../Badge';
-
-afterEach(cleanup);
-
-describe('Badge', () => {
-  it('renders its children', () => {
-    render(<Badge>Owner</Badge>);
-    expect(screen.getByText('Owner')).toBeDefined();
-  });
-
-  it('defaults to role variant', () => {
-    render(<Badge>Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('role');
-  });
-
-  it('applies mono variant class', () => {
-    render(<Badge variant="mono">platform</Badge>);
-    expect(screen.getByText('platform').closest('span')?.className).toContain('mono');
-  });
-
-  it('renders status variant with a dot element', () => {
-    const { container } = render(
-      <Badge variant="status" status="active">
-        Active
-      </Badge>,
-    );
-    const dots = container.querySelectorAll('[aria-hidden]');
-    expect(dots.length).toBe(1);
-    expect(dots.item(0).className).toContain('dotGreen');
-  });
-
-  it('uses red dot for deactivated status', () => {
-    const { container } = render(
-      <Badge variant="status" status="deactivated">
-        Deactivated
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotRed');
-  });
-
-  it('uses amber dot for invited status', () => {
-    const { container } = render(
-      <Badge variant="status" status="invited">
-        Invited
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotAmber');
-  });
-
-  it('uses grey dot for neutral status', () => {
-    const { container } = render(
-      <Badge variant="status" status="neutral">
-        Neutral
-      </Badge>,
-    );
-    expect(container.querySelector('[aria-hidden]')?.className).toContain('dotGrey');
-  });
-
-  it('does not render a dot for role variant', () => {
-    const { container } = render(<Badge variant="role">Owner</Badge>);
-    expect(container.querySelectorAll('[aria-hidden]').length).toBe(0);
-  });
-
-  it('defaults to md size', () => {
-    render(<Badge>Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('md');
-  });
-
-  it('applies xs, sm, and lg size classes', () => {
-    const { rerender } = render(<Badge size="xs">Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('xs');
-    rerender(<Badge size="sm">Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('sm');
-    rerender(<Badge size="lg">Admin</Badge>);
-    expect(screen.getByText('Admin').closest('span')?.className).toContain('lg');
-  });
-
-  it('defaults to uppercase display', () => {
-    render(<Badge>Owner</Badge>);
-    expect(screen.getByText('Owner').closest('span')?.className).toContain('uppercase');
-  });
-
-  it('omits the uppercase class when uppercase is false', () => {
-    render(<Badge uppercase={false}>Owner</Badge>);
-    expect(screen.getByText('Owner').closest('span')?.className).not.toContain('uppercase');
-  });
-});