@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Alert/Alert.module.css

@@ -1,62 +0,0 @@
-.alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  border: 1px solid transparent;
-  border-radius: var(--sv-radius-md);
-  font-size: var(--sv-font-size-sm);
-}
-
-.icon {
-  flex-shrink: 0;
-  /* Optically align to the first line of text rather than the box's
-     vertical center — matches how the heading/body cap-height sits. */
-  margin-top: 2px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-  min-width: 0;
-}
-
-.heading {
-  margin: 0;
-  font-weight: var(--sv-font-weight-semibold);
-}
-
-.body {
-  margin: 0;
-}
-
-.info {
-  background: var(--sv-color-info-surface);
-  border-color: var(--sv-color-info-border);
-  color: var(--sv-color-info-text);
-}
-
-.success {
-  background: var(--sv-color-success-surface);
-  border-color: var(--sv-color-success-border);
-  color: var(--sv-color-success-text);
-}
-
-.warning {
-  background: var(--sv-color-warning-surface);
-  border-color: var(--sv-color-warning-border);
-  color: var(--sv-color-warning-text);
-}
-
-.error {
-  background: var(--sv-color-error-surface);
-  border-color: var(--sv-color-error-border);
-  color: var(--sv-color-error-text);
-}
-
-.neutral {
-  background: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border);
-  color: var(--sv-color-text-primary);
-}

package/src/components/Alert/Alert.stories.tsx

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Alert } from './Alert';
-
-const meta = {
-  title: 'Components/Alert',
-  component: Alert,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Inline, non-dismissible banner. Distinct from Toast (transient) and SystemBanner (instance-wide) — for form-level errors or explaining an empty/blocked state. A leading icon defaults per variant (none for neutral) — pass `icon` to override it or `icon={false}` to suppress it.',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'success', 'warning', 'error', 'neutral'] },
-  },
-  args: {
-    variant: 'info',
-    children: 'This is an informational message.',
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Info: Story = {
-  args: { variant: 'info' },
-};
-
-export const Success: Story = {
-  args: { variant: 'success', children: 'Your changes have been saved.' },
-};
-
-export const Warning: Story = {
-  args: { variant: 'warning', children: 'This action cannot be undone.' },
-};
-
-export const ErrorVariant: Story = {
-  name: 'Error',
-  args: { variant: 'error', children: 'Select a size to continue.' },
-};
-
-export const Neutral: Story = {
-  args: { variant: 'neutral', children: 'This project has no members yet.' },
-};
-
-export const WithHeading: Story = {
-  args: {
-    variant: 'error',
-    heading: 'Something went wrong',
-    children: 'We couldn’t save your changes. Check your connection and try again.',
-  },
-};
-
-export const WithoutHeading: Story = {
-  args: { variant: 'success', children: 'Invite sent.' },
-};
-
-/** Icon + heading + body — the pattern most alert examples use. */
-export const IconHeadingAndBody: Story = {
-  args: {
-    variant: 'success',
-    heading: 'Payment successful',
-    children:
-      'Your payment of $29.99 has been processed. A receipt has been sent to your email address.',
-  },
-};
-
-export const CustomIcon: Story = {
-  args: { variant: 'neutral', icon: 'bell', children: 'You have 3 unread notifications.' },
-};
-
-export const NoIcon: Story = {
-  args: { variant: 'success', icon: false, children: 'Your changes have been saved.' },
-};
-
-/** Every variant with its default icon, at a glance. */
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 480 }}>
-      <Alert variant="info" heading="New feature available">
-        We’ve added dark mode support. You can enable it in your account settings.
-      </Alert>
-      <Alert variant="success" heading="Payment successful">
-        Your payment of $29.99 has been processed. A receipt has been sent to your email address.
-      </Alert>
-      <Alert variant="warning">This action cannot be undone.</Alert>
-      <Alert variant="error">Select a size to continue.</Alert>
-      <Alert variant="neutral">This project has no members yet.</Alert>
-    </div>
-  ),
-};

package/src/components/Alert/Alert.tsx

@@ -1,58 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon, type IconName } from '../Icon/Icon';
-import styles from './Alert.module.css';
-
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
-
-/** Sensible default icon per variant. `neutral` has none — there's no
- * universal "neutral" glyph, so it stays icon-less unless `icon` is set
- * explicitly. */
-const DEFAULT_ICON: Record<AlertVariant, IconName | undefined> = {
-  info: 'info',
-  success: 'circle-check',
-  warning: 'alert-triangle',
-  error: 'circle-x',
-  neutral: undefined,
-};
-
-export interface AlertProps {
-  variant: AlertVariant;
-  heading?: string;
-  /** Leading icon next to the heading. Defaults to a per-variant icon (see
-   * `DEFAULT_ICON`) — pass an `IconName` to override it, or `false` to
-   * suppress the icon entirely. Purely decorative: the variant's colour and
-   * `heading`/`children` text already carry the meaning. */
-  icon?: IconName | false;
-  children: ReactNode;
-  id?: string;
-  className?: string;
-}
-
-/**
- * Alert — inline, non-dismissible banner.
- *
- * Distinct from `Toast` (transient, auto-dismissing) and `SystemBanner`
- * (instance-wide): Alert is for in-context messaging — form-level errors,
- * or explaining an empty/blocked state.
- *
- * `role="alert"` for `error` (interrupts screen readers immediately, since
- * an error demands attention); `role="status"` for the other variants
- * (announced politely, without interrupting).
- */
-export function Alert({ variant, heading, icon, children, id, className }: AlertProps) {
-  const resolvedIcon = icon === undefined ? DEFAULT_ICON[variant] : icon || undefined;
-
-  return (
-    <div
-      id={id}
-      role={variant === 'error' ? 'alert' : 'status'}
-      className={[styles.alert, styles[variant], className].filter(Boolean).join(' ')}
-    >
-      {resolvedIcon && <Icon name={resolvedIcon} size="sm" className={styles.icon} aria-hidden />}
-      <div className={styles.content}>
-        {heading && <p className={styles.heading}>{heading}</p>}
-        <div className={styles.body}>{children}</div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Alert } from '../Alert';
-
-afterEach(cleanup);
-
-describe('Alert', () => {
-  it('uses role="alert" for the error variant', () => {
-    render(<Alert variant="error">Something went wrong.</Alert>);
-    expect(screen.getByRole('alert')).toBeDefined();
-  });
-
-  it.each(['info', 'success', 'warning', 'neutral'] as const)(
-    'uses role="status" for the %s variant',
-    (variant) => {
-      render(<Alert variant={variant}>Message</Alert>);
-      expect(screen.getByRole('status')).toBeDefined();
-    },
-  );
-
-  it('renders a heading when given one', () => {
-    render(
-      <Alert variant="warning" heading="Heads up">
-        Body text.
-      </Alert>,
-    );
-    expect(screen.getByText('Heads up')).toBeDefined();
-    expect(screen.getByText('Body text.')).toBeDefined();
-  });
-
-  it('renders without a heading', () => {
-    render(<Alert variant="info">Just the body.</Alert>);
-    expect(screen.getByText('Just the body.')).toBeDefined();
-  });
-
-  it('renders a default icon for info, success, warning, and error, but none for neutral', () => {
-    const info = render(<Alert variant="info">Message</Alert>);
-    expect(info.container.querySelector('svg')).not.toBeNull();
-    info.unmount();
-
-    const success = render(<Alert variant="success">Message</Alert>);
-    expect(success.container.querySelector('svg')).not.toBeNull();
-    success.unmount();
-
-    const warning = render(<Alert variant="warning">Message</Alert>);
-    expect(warning.container.querySelector('svg')).not.toBeNull();
-    warning.unmount();
-
-    const error = render(<Alert variant="error">Message</Alert>);
-    expect(error.container.querySelector('svg')).not.toBeNull();
-    error.unmount();
-
-    const neutral = render(<Alert variant="neutral">Message</Alert>);
-    expect(neutral.container.querySelector('svg')).toBeNull();
-  });
-
-  it('suppresses the default icon when icon={false}', () => {
-    const { container } = render(
-      <Alert variant="success" icon={false}>
-        Message
-      </Alert>,
-    );
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('overrides the default icon when icon is set explicitly', () => {
-    const { container } = render(
-      <Alert variant="neutral" icon="info">
-        Message
-      </Alert>,
-    );
-    expect(container.querySelector('svg')).not.toBeNull();
-  });
-});

package/src/components/AspectRatio/AspectRatio.module.css

@@ -1,15 +0,0 @@
-.root {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--sv-radius-md);
-}
-
-/* A single direct child (img/video/iframe) fills the ratio box. */
-.root > :global(*) {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AspectRatio } from './AspectRatio';
-
-const meta = {
-  title: 'Components/AspectRatio',
-  component: AspectRatio,
-  parameters: { layout: 'padded' },
-  args: {
-    ratio: 16 / 9,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        16:9
-      </div>
-    ),
-  },
-} satisfies Meta<typeof AspectRatio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Widescreen: Story = {};
-
-export const Square: Story = {
-  args: {
-    ratio: 1,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        1:1
-      </div>
-    ),
-  },
-};
-
-export const Portrait: Story = {
-  args: {
-    ratio: 3 / 4,
-    children: (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          background: 'var(--sv-color-surface-sunken)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--sv-color-text-muted)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      >
-        3:4
-      </div>
-    ),
-  },
-};

package/src/components/AspectRatio/AspectRatio.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './AspectRatio.module.css';
-
-export interface AspectRatioProps {
-  /** Width / height, e.g. 16 / 9 or 1. */
-  ratio: number;
-  children: ReactNode;
-  className?: string;
-}
-
-/** AspectRatio — constrains content (image, video, embed) to a fixed ratio. */
-export function AspectRatio({ ratio, children, className }: AspectRatioProps) {
-  return (
-    <div
-      className={[styles.root, className].filter(Boolean).join(' ')}
-      style={{ aspectRatio: ratio }}
-    >
-      {children}
-    </div>
-  );
-}

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: 1px 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,154 +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: 1px 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: 1px solid var(--sv-color-success-border);
-  color: var(--sv-color-success-text);
-}
-
-.chipAmber {
-  background: var(--sv-color-warning-surface);
-  border: 1px solid var(--sv-color-warning-border);
-  color: var(--sv-color-warning-text);
-}
-
-.chipRed {
-  background: var(--sv-color-error-surface);
-  border: 1px solid var(--sv-color-error-border);
-  color: var(--sv-color-error-text);
-}
-
-.chipNeutral {
-  background: var(--sv-color-surface-sunken);
-  border: 1px 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: 1px 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. */
-.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.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.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;
-}
-
-.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);
-}