@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/BalanceChip/BalanceChip.module.css

@@ -1,32 +0,0 @@
-.chip {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 24px;
-  padding: 2px var(--sv-space-2);
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-full);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-xs);
-  font-weight: var(--sv-font-weight-semibold);
-  line-height: 1.2;
-  white-space: nowrap;
-}
-
-.owed {
-  color: var(--sv-color-success-text);
-  background: var(--sv-color-success-surface);
-  border-color: var(--sv-color-success-border);
-}
-
-.owes {
-  color: var(--sv-color-error-text);
-  background: var(--sv-color-error-surface);
-  border-color: var(--sv-color-error-border);
-}
-
-.settled {
-  color: var(--sv-color-text-muted);
-  background: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border);
-}

package/src/components/BalanceChip/BalanceChip.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BalanceChip } from './BalanceChip';
-
-const meta = {
-  title: 'Components/BalanceChip',
-  component: BalanceChip,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Inline net-balance indicator — green when owed to them, red when they owe, neutral when settled. Not tied to expense-splitting specifically: any plugin tracking a signed balance between people can use it.',
-      },
-    },
-  },
-  args: {
-    amountCents: 2500,
-    currency: 'USD',
-  },
-} satisfies Meta<typeof BalanceChip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Owed: Story = {
-  args: { amountCents: 2500, currency: 'USD' },
-};
-
-export const Owes: Story = {
-  args: { amountCents: -1350, currency: 'USD' },
-};
-
-export const SettledUp: Story = {
-  args: { amountCents: 0, currency: 'USD' },
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: 'var(--sv-space-2)' }}>
-      <BalanceChip amountCents={2500} currency="USD" />
-      <BalanceChip amountCents={-1350} currency="USD" />
-      <BalanceChip amountCents={0} currency="USD" />
-    </div>
-  ),
-};

package/src/components/BalanceChip/BalanceChip.tsx

@@ -1,33 +0,0 @@
-import styles from './BalanceChip.module.css';
-
-export interface BalanceChipProps {
-  /** Smallest currency unit (cents). Positive = owed to them, negative = they owe, zero = settled. */
-  amountCents: number;
-  /** ISO 4217 currency code, e.g. "USD". */
-  currency: string;
-  className?: string;
-}
-
-function formatAbsCents(cents: number): string {
-  return (Math.abs(cents) / 100).toFixed(2);
-}
-
-/**
- * BalanceChip — inline balance indicator (green = owed to them, red = they
- * owe, neutral = settled up). For any plugin tracking who-owes-whom — not
- * Tally-specific despite the naming; "amountCents" is a generic signed net
- * balance, not tied to expense-splitting semantics.
- */
-export function BalanceChip({ amountCents, currency, className }: BalanceChipProps) {
-  const direction = amountCents > 0 ? 'owed' : amountCents < 0 ? 'owes' : 'settled';
-  const text =
-    direction === 'settled'
-      ? 'Settled up'
-      : `${direction === 'owed' ? 'Owed' : 'Owes'} ${currency} ${formatAbsCents(amountCents)}`;
-
-  return (
-    <span className={[styles.chip, styles[direction], className].filter(Boolean).join(' ')}>
-      {text}
-    </span>
-  );
-}

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -1,49 +0,0 @@
-.nav {
-  min-width: 0;
-}
-
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sv-space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-}
-
-.link {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .link:hover {
-    color: var(--sv-color-text-primary);
-    text-decoration: underline;
-  }
-}
-
-.link:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-.current {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-}
-
-.separator {
-  color: var(--sv-color-text-muted);
-  flex-shrink: 0;
-}

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Breadcrumb } from './Breadcrumb';
-
-const meta = {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Link trail. The last item (no href) renders as plain text with aria-current="page". Pass renderLink to use a client-side router Link instead of a plain <a> — matters inside overlay-shell plugins, where a full page reload breaks the dismiss flow.',
-      },
-    },
-  },
-  args: {
-    items: [
-      { label: 'Console', href: '/console' },
-      { label: 'Plugins', href: '/console/plugins' },
-      { label: 'sovereign-tasks' },
-    ],
-  },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const TwoLevels: Story = {
-  args: {
-    items: [{ label: 'Console', href: '/console' }, { label: 'Settings' }],
-  },
-};
-
-export const WithRenderLink: Story = {
-  name: 'With custom renderLink',
-  args: {
-    renderLink: (item, children) => (
-      <a href={item.href} data-client-side-nav="true">
-        {children}
-      </a>
-    ),
-  },
-};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './Breadcrumb.module.css';
-
-export interface BreadcrumbItem {
-  label: string;
-  /** Omit for the current page — rendered as plain text with aria-current. */
-  href?: string;
-}
-
-export interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  /** Renders a linked item. Defaults to a plain `<a href>`, which causes a
-   * full page reload — pass Next's `<Link>` (or equivalent) to keep
-   * navigation client-side, which matters inside overlay-shell plugins
-   * where a full reload breaks the router.back()-driven dismiss flow. */
-  renderLink?: (item: BreadcrumbItem, children: ReactNode) => ReactNode;
-  className?: string;
-  'aria-label'?: string;
-}
-
-export function Breadcrumb({
-  items,
-  renderLink,
-  className,
-  'aria-label': ariaLabel = 'Breadcrumb',
-}: BreadcrumbProps) {
-  return (
-    <nav aria-label={ariaLabel} className={[styles.nav, className].filter(Boolean).join(' ')}>
-      <ol className={styles.list}>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          return (
-            <li key={item.label + index} className={styles.item}>
-              {item.href ? (
-                renderLink ? (
-                  renderLink(item, item.label)
-                ) : (
-                  <a href={item.href} className={styles.link}>
-                    {item.label}
-                  </a>
-                )
-              ) : (
-                <span className={styles.current} aria-current="page">
-                  {item.label}
-                </span>
-              )}
-              {!isLast && (
-                <Icon name="chevron-right" size="xs" aria-hidden className={styles.separator} />
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

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

@@ -1,52 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Breadcrumb } from '../Breadcrumb';
-
-afterEach(cleanup);
-
-const items = [
-  { label: 'Console', href: '/console' },
-  { label: 'Plugins', href: '/console/plugins' },
-  { label: 'sovereign-tasks' },
-];
-
-describe('Breadcrumb', () => {
-  it('renders a link for every item with an href', () => {
-    render(<Breadcrumb items={items} />);
-    expect(screen.getByRole('link', { name: 'Console' })).toHaveProperty(
-      'href',
-      expect.stringContaining('/console'),
-    );
-    expect(screen.getByRole('link', { name: 'Plugins' })).toBeDefined();
-  });
-
-  it('renders the item without href as plain text with aria-current', () => {
-    render(<Breadcrumb items={items} />);
-    expect(screen.queryByRole('link', { name: 'sovereign-tasks' })).toBeNull();
-    expect(screen.getByText('sovereign-tasks').getAttribute('aria-current')).toBe('page');
-  });
-
-  it('uses a caller-supplied renderLink instead of a plain <a> when given', () => {
-    render(
-      <Breadcrumb
-        items={items}
-        renderLink={(item, children) => (
-          <button type="button" data-href={item.href}>
-            {children}
-          </button>
-        )}
-      />,
-    );
-    expect(screen.queryByRole('link', { name: 'Console' })).toBeNull();
-    expect(screen.getByRole('button', { name: 'Console' })).toHaveProperty(
-      'dataset.href',
-      '/console',
-    );
-  });
-
-  it('defaults to an accessible nav label', () => {
-    render(<Breadcrumb items={items} />);
-    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeDefined();
-  });
-});

package/src/components/Button/Button.module.css

@@ -1,169 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-2);
-  border: var(--sv-border-width-hairline) solid transparent;
-  border-radius: var(--sv-radius-md);
-  font-family: var(--sv-font-family);
-  font-weight: var(--sv-font-weight-medium);
-  line-height: 1;
-  cursor: pointer;
-  /* Removes the ~300ms double-tap-to-zoom delay on touch — this is a tap
-     target, never a pinch-zoom surface. */
-  touch-action: manipulation;
-  /* --sv-button-shadow defaults to `none` (semantic.css) — this box-shadow
-     line is a no-op for every theme that doesn't set it (RFC 0094). */
-  box-shadow: var(--sv-button-shadow);
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease,
-    transform 0.1s ease,
-    box-shadow 0.1s ease;
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* --sv-button-press-x/-y default to 0 (semantic.css) — translate(0, 0) is a
-   no-op, so this rule only produces a visible "press into shadow" effect
-   for a theme preset that sets non-zero values (RFC 0094). Unguarded by
-   (hover: hover) deliberately: :active press feedback is wanted on every
-   input type, the same reasoning documented for Button's existing
-   color-mix() :active background changes below. */
-.button:active:not(:disabled) {
-  transform: translate(var(--sv-button-press-x), var(--sv-button-press-y));
-  box-shadow: none;
-}
-
-/* Touch target: gated to (pointer: coarse) — the *primary* pointer, not
-   (any-pointer: coarse) — so a touchscreen laptop with mouse/trackpad as
-   primary keeps desktop density (see mobile design-system plan, Part 4 #5). */
-@media (pointer: coarse) {
-  .button {
-    min-height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-/* Sizes — 32px / 36px / 40px rendered height (font-size + padding*2 + border*2).
-   Vertical padding is hardcoded where the --sv-space-* scale can't hit the
-   exact target height; horizontal padding stays token-based, growing with
-   size for visual rhythm with the rest of this scale. */
-.sm {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-}
-
-.md {
-  padding: 10px var(--sv-space-4);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-}
-
-.lg {
-  padding: var(--sv-space-3) var(--sv-space-5);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-}
-
-/* Loading spinner — a self-contained token-only spinner rather than reusing
-   the Spinner component: Spinner's border colors are semantic-fixed
-   (`--sv-color-accent`), which would be invisible against a primary button's
-   accent background, and overriding a second CSS module's rule on the same
-   element is a cross-module cascade-order gamble (see ConfirmDialog's
-   `.destructiveConfirm` comment for the same tradeoff). `currentColor` picks
-   up each variant's own text color for free. */
-.spinner {
-  display: inline-block;
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-  flex-shrink: 0;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: var(--sv-radius-full);
-  opacity: 0.7;
-  animation: button-spin 0.7s linear infinite;
-}
-
-@keyframes button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation-play-state: paused;
-  }
-}
-
-/* Variants */
-.primary {
-  background-color: var(--sv-color-accent);
-  color: var(--sv-color-text-on-accent);
-}
-
-@media (hover: hover) {
-  .primary:hover:not(:disabled) {
-    background-color: var(--sv-color-accent-hover);
-  }
-}
-
-.primary:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--sv-color-accent) 80%, black);
-}
-
-.secondary {
-  background-color: var(--sv-color-surface);
-  color: var(--sv-color-text-primary);
-  border-color: var(--sv-color-border-strong);
-}
-
-@media (hover: hover) {
-  .secondary:hover:not(:disabled) {
-    background-color: var(--sv-color-surface-sunken);
-  }
-}
-
-.secondary:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--sv-color-surface-sunken) 85%, black);
-}
-
-.ghost {
-  background-color: transparent;
-  color: var(--sv-color-text-primary);
-}
-
-@media (hover: hover) {
-  .ghost:hover:not(:disabled) {
-    background-color: var(--sv-color-surface-sunken);
-  }
-}
-
-.ghost:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--sv-color-surface-sunken) 85%, black);
-}
-
-.destructive {
-  background-color: transparent;
-  color: var(--sv-color-error-text);
-  border-color: var(--sv-color-error-border);
-}
-
-@media (hover: hover) {
-  .destructive:hover:not(:disabled) {
-    background-color: var(--sv-color-error-surface);
-  }
-}
-
-.destructive:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--sv-color-error-surface) 85%, black);
-}

package/src/components/Button/Button.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Icon } from '../Icon/Icon';
-import { Button } from './Button';
-
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The primitive interactive control. RSC-safe (no state, forwards props). All styling references `--sv-*` tokens; no hardcoded values.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['primary', 'secondary', 'ghost', 'destructive'] },
-    size: { control: 'select', options: ['sm', 'md', 'lg'] },
-    disabled: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    children: { control: 'text' },
-  },
-  args: {
-    children: 'Button',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Primary: Story = { args: { variant: 'primary' } };
-export const Secondary: Story = { args: { variant: 'secondary' } };
-export const Ghost: Story = { args: { variant: 'ghost' } };
-export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete account' } };
-
-export const Small: Story = { args: { size: 'sm' } };
-export const Medium: Story = { args: { size: 'md' } };
-export const Large: Story = { args: { size: 'lg' } };
-
-export const Disabled: Story = { args: { disabled: true } };
-export const DisabledSecondary: Story = { args: { variant: 'secondary', disabled: true } };
-
-export const Loading: Story = { args: { loading: true, children: 'Saving…' } };
-export const LoadingSecondary: Story = {
-  args: { variant: 'secondary', loading: true, children: 'Saving…' },
-};
-
-export const WithLeadingIcon: Story = {
-  args: {
-    children: (
-      <>
-        <Icon name="plus" size="sm" aria-hidden />
-        Add item
-      </>
-    ),
-  },
-};
-
-export const IconOnly: Story = {
-  args: {
-    variant: 'ghost',
-    'aria-label': 'Settings',
-    children: <Icon name="settings" size="sm" aria-hidden />,
-  },
-};
-
-/** All variant × size combinations at a glance. */
-export const AllVariants: Story = {
-  render: (_args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
-      {(['primary', 'secondary', 'ghost', 'destructive'] as const).map((v) =>
-        (['lg', 'md', 'sm'] as const).map((s) => (
-          <Button key={`${v}-${s}`} variant={v} size={s}>
-            {v} / {s}
-          </Button>
-        )),
-      )}
-    </div>
-  ),
-};

package/src/components/Button/Button.tsx

@@ -1,52 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import styles from './Button.module.css';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  /** Shows a spinner and disables the button while an async action is pending. */
-  loading?: boolean;
-  children: ReactNode;
-}
-
-/**
- * Button — the primitive interactive control. Presentational and RSC-safe: it
- * holds no state and simply forwards props to the underlying `<button>`, so it
- * renders in both Server and Client Components. All styling references `--sv-*`
- * tokens via CSS Modules; there are no hardcoded values.
- */
-export function Button({
-  variant = 'primary',
-  size = 'md',
-  type = 'button',
-  loading = false,
-  disabled,
-  className,
-  children,
-  ...rest
-}: ButtonProps) {
-  const classes = [styles.button, styles[variant], styles[size], className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button
-      type={type}
-      className={classes}
-      disabled={disabled || loading}
-      aria-busy={loading || undefined}
-      {...rest}
-    >
-      {loading && (
-        // aria-hidden: the button's own accessible name (its visible children,
-        // unchanged below) plus aria-busy already communicate the pending
-        // state — an unhidden Spinner-style status region would double-narrate it.
-        <span className={styles.spinner} aria-hidden="true" />
-      )}
-      {children}
-    </button>
-  );
-}

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

@@ -1,66 +0,0 @@
-// @vitest-environment jsdom
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Button } from '../Button';
-
-describe('Button', () => {
-  it('renders its children', () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByRole('button', { name: 'Click me' })).toBeDefined();
-  });
-
-  it('applies the variant and size classes', () => {
-    render(
-      <Button variant="ghost" size="sm">
-        Go
-      </Button>,
-    );
-    const button = screen.getByRole('button', { name: 'Go' });
-    expect(button.className).toContain('ghost');
-    expect(button.className).toContain('sm');
-  });
-
-  it('applies the lg size class', () => {
-    render(<Button size="lg">Upgrade</Button>);
-    expect(screen.getByRole('button', { name: 'Upgrade' }).className).toContain('lg');
-  });
-
-  it('defaults to the md size class', () => {
-    render(<Button>Confirm</Button>);
-    expect(screen.getByRole('button', { name: 'Confirm' }).className).toContain('md');
-  });
-
-  it('defaults to type="button"', () => {
-    render(<Button>Save</Button>);
-    expect(screen.getByRole('button', { name: 'Save' }).getAttribute('type')).toBe('button');
-  });
-
-  it('forwards native button props', () => {
-    render(<Button disabled>Nope</Button>);
-    expect((screen.getByRole('button', { name: 'Nope' }) as HTMLButtonElement).disabled).toBe(true);
-  });
-
-  it('applies destructive variant class', () => {
-    render(<Button variant="destructive">Delete</Button>);
-    expect(screen.getByRole('button', { name: 'Delete' }).className).toContain('destructive');
-  });
-
-  it('disables the button and sets aria-busy when loading', () => {
-    render(<Button loading>Submit</Button>);
-    const button = screen.getByRole('button', { name: 'Submit' }) as HTMLButtonElement;
-    expect(button.disabled).toBe(true);
-    expect(button.getAttribute('aria-busy')).toBe('true');
-  });
-
-  it('does not set aria-busy when not loading', () => {
-    render(<Button>Continue</Button>);
-    expect(screen.getByRole('button', { name: 'Continue' }).getAttribute('aria-busy')).toBeNull();
-  });
-
-  it('respects an explicit disabled prop independent of loading', () => {
-    render(<Button disabled>Archive</Button>);
-    const button = screen.getByRole('button', { name: 'Archive' }) as HTMLButtonElement;
-    expect(button.disabled).toBe(true);
-    expect(button.getAttribute('aria-busy')).toBeNull();
-  });
-});