@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Item/Item.module.css

@@ -1,70 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-3);
-  width: 100%;
-  padding: var(--sv-space-3);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  text-align: left;
-  font-family: var(--sv-font-family);
-  color: inherit;
-}
-
-.interactive {
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .interactive:not(:disabled):hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.interactive:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.interactive:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-@media (pointer: coarse) {
-  .root {
-    min-height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-.leading,
-.trailing {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex: 1;
-}
-
-.title {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.description {
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/src/components/Item/Item.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Item } from './Item';
-import { Icon } from '../Icon/Icon';
-
-const meta = {
-  title: 'Components/Item',
-  component: Item,
-  parameters: { layout: 'padded' },
-  args: {
-    title: 'Notifications',
-  },
-} satisfies Meta<typeof Item>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const WithDescription: Story = {
-  args: { description: 'Manage email and push alerts' },
-};
-
-export const Interactive: Story = {
-  args: {
-    description: 'Manage email and push alerts',
-    leading: <Icon name="bell" aria-hidden />,
-    trailing: <Icon name="chevron-right" size="sm" aria-hidden />,
-    onClick: () => {},
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    description: 'Requires admin role',
-    onClick: () => {},
-    disabled: true,
-  },
-};
-
-export const List: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Item
-        title="Notifications"
-        description="Manage email and push alerts"
-        leading={<Icon name="bell" aria-hidden />}
-        trailing={<Icon name="chevron-right" size="sm" aria-hidden />}
-        onClick={() => {}}
-      />
-      <Item
-        title="Privacy"
-        description="Control what others can see"
-        leading={<Icon name="shield" aria-hidden />}
-        trailing={<Icon name="chevron-right" size="sm" aria-hidden />}
-        onClick={() => {}}
-      />
-      <Item title="Sign out" leading={<Icon name="log-out" aria-hidden />} onClick={() => {}} />
-    </div>
-  ),
-};

package/src/components/Item/Item.tsx

@@ -1,54 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './Item.module.css';
-
-export interface ItemProps {
-  leading?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  trailing?: ReactNode;
-  /** Renders as a button when given; a plain row otherwise. */
-  onClick?: () => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * Item — generic row primitive: leading slot, title + optional description,
- * trailing slot. The building block for settings rows, list rows, and
- * menu-adjacent rows that don't fit `Menu`'s own item shape.
- */
-export function Item({
-  leading,
-  title,
-  description,
-  trailing,
-  onClick,
-  disabled,
-  className,
-}: ItemProps) {
-  const interactive = Boolean(onClick);
-  const classes = [styles.root, interactive ? styles.interactive : '', className]
-    .filter(Boolean)
-    .join(' ');
-
-  const content = (
-    <>
-      {leading && <span className={styles.leading}>{leading}</span>}
-      <span className={styles.content}>
-        <span className={styles.title}>{title}</span>
-        {description && <span className={styles.description}>{description}</span>}
-      </span>
-      {trailing && <span className={styles.trailing}>{trailing}</span>}
-    </>
-  );
-
-  if (interactive) {
-    return (
-      <button type="button" onClick={onClick} disabled={disabled} className={classes}>
-        {content}
-      </button>
-    );
-  }
-
-  return <div className={classes}>{content}</div>;
-}

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

@@ -1,39 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Item } from '../Item';
-
-afterEach(cleanup);
-
-describe('Item', () => {
-  it('renders as a plain row when no onClick is given', () => {
-    render(<Item title="Notifications" description="Manage email and push alerts" />);
-    expect(screen.queryByRole('button')).toBeNull();
-    expect(screen.getByText('Notifications')).toBeDefined();
-    expect(screen.getByText('Manage email and push alerts')).toBeDefined();
-  });
-
-  it('renders as a button and fires onClick when given', () => {
-    const onClick = vi.fn();
-    render(<Item title="Notifications" onClick={onClick} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Notifications' }));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('renders leading and trailing slots', () => {
-    render(
-      <Item
-        title="Notifications"
-        leading={<span data-testid="leading">icon</span>}
-        trailing={<span data-testid="trailing">chevron</span>}
-      />,
-    );
-    expect(screen.getByTestId('leading')).toBeDefined();
-    expect(screen.getByTestId('trailing')).toBeDefined();
-  });
-
-  it('disables the button when disabled is set', () => {
-    render(<Item title="Notifications" onClick={() => {}} disabled />);
-    expect(screen.getByRole('button')).toHaveProperty('disabled', true);
-  });
-});

package/src/components/Kbd/Kbd.module.css

@@ -1,14 +0,0 @@
-.kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5em;
-  padding: var(--sv-space-1) var(--sv-space-2);
-  border: 1px solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-sm);
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family-mono);
-  font-size: var(--sv-font-size-xs);
-  line-height: 1;
-}

package/src/components/Kbd/Kbd.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Kbd } from './Kbd';
-
-const meta = {
-  title: 'Components/Kbd',
-  component: Kbd,
-  parameters: { layout: 'padded' },
-  args: { children: '⌘K' },
-} satisfies Meta<typeof Kbd>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const Letter: Story = {
-  args: { children: 'S' },
-};
-
-export const Sequence: Story = {
-  render: () => (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-      <Kbd>Ctrl</Kbd>
-      <span>+</span>
-      <Kbd>Shift</Kbd>
-      <span>+</span>
-      <Kbd>P</Kbd>
-    </span>
-  ),
-};

package/src/components/Kbd/Kbd.tsx

@@ -1,12 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './Kbd.module.css';
-
-export interface KbdProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/** Kbd — inline keyboard-key styling. Renders a real `<kbd>` element. */
-export function Kbd({ children, className }: KbdProps) {
-  return <kbd className={[styles.kbd, className].filter(Boolean).join(' ')}>{children}</kbd>;
-}

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

@@ -1,14 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Kbd } from '../Kbd';
-
-afterEach(cleanup);
-
-describe('Kbd', () => {
-  it('renders a real <kbd> element', () => {
-    render(<Kbd>⌘K</Kbd>);
-    const el = screen.getByText('⌘K');
-    expect(el.tagName).toBe('KBD');
-  });
-});

package/src/components/Label/Label.module.css

@@ -1,11 +0,0 @@
-.label {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-  cursor: default;
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/components/Label/Label.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Label } from './Label';
-
-const meta = {
-  title: 'Components/Label',
-  component: Label,
-  parameters: { layout: 'padded' },
-  args: { children: 'Label text' },
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};
-
-export const WithControl: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      <Label htmlFor="example-input">Email address</Label>
-      <input
-        id="example-input"
-        type="email"
-        placeholder="you@example.com"
-        style={{
-          padding: 'var(--sv-space-2) var(--sv-space-3)',
-          border: '1px solid var(--sv-color-border-strong)',
-          borderRadius: 'var(--sv-radius-md)',
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-sm)',
-        }}
-      />
-    </div>
-  ),
-};

package/src/components/Label/Label.tsx

@@ -1,24 +0,0 @@
-import type { LabelHTMLAttributes } from 'react';
-import styles from './Label.module.css';
-
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  disabled?: boolean;
-}
-
-/**
- * Label — standalone accessible form label, independent of `FormField`.
- * Use `FormField` when a control needs hint/error text too; use `Label`
- * directly for a bare label (e.g. next to a `Checkbox` group heading).
- */
-export function Label({ disabled, className, children, ...rest }: LabelProps) {
-  return (
-    <label
-      className={[styles.label, disabled ? styles.disabled : '', className]
-        .filter(Boolean)
-        .join(' ')}
-      {...rest}
-    >
-      {children}
-    </label>
-  );
-}

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

@@ -1,32 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Label } from '../Label';
-
-afterEach(cleanup);
-
-describe('Label', () => {
-  it('renders a real <label> element', () => {
-    render(<Label htmlFor="agree">I agree</Label>);
-    expect(screen.getByText('I agree').tagName).toBe('LABEL');
-  });
-
-  it('associates with a control via htmlFor', () => {
-    render(
-      <>
-        <Label htmlFor="agree">I agree to the terms</Label>
-        <input id="agree" type="checkbox" />
-      </>,
-    );
-    expect(screen.getByLabelText('I agree to the terms')).toBeDefined();
-  });
-
-  it('applies disabled styling without disabling the underlying element', () => {
-    render(
-      <Label htmlFor="agree" disabled>
-        I agree
-      </Label>,
-    );
-    expect(screen.getByText('I agree').className).toContain('disabled');
-  });
-});

package/src/components/LegalLinks/LegalLinks.module.css

@@ -1,24 +0,0 @@
-.root {
-  margin: var(--sv-space-5) 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-2);
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-muted);
-}
-
-.link {
-  color: var(--sv-color-text-muted);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-decoration-color: var(--sv-color-border);
-}
-
-.link:hover {
-  color: var(--sv-color-text-primary);
-}
-
-.dot {
-  color: var(--sv-color-border);
-}

package/src/components/LegalLinks/LegalLinks.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { LegalLinks } from './LegalLinks';
-
-const meta = {
-  title: 'Components/LegalLinks',
-  component: LegalLinks,
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof LegalLinks>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const CustomHrefs: Story = {
-  args: {
-    privacyHref: 'https://example.com/legal/privacy',
-    tosHref: 'https://example.com/legal/tos',
-  },
-};

package/src/components/LegalLinks/LegalLinks.tsx

@@ -1,40 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './LegalLinks.module.css';
-
-export interface LegalLinksProps {
-  privacyHref?: string;
-  tosHref?: string;
-  /** 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. Not needed for a full-reload navigation away
-   * from a standalone auth page, but matters if this is ever mounted inside
-   * an SPA-like shell. */
-  renderLink?: (href: string, label: string) => ReactNode;
-  className?: string;
-}
-
-export function LegalLinks({
-  privacyHref = '/privacy',
-  tosHref = '/tos',
-  renderLink,
-  className,
-}: LegalLinksProps) {
-  const link = (href: string, label: string) =>
-    renderLink ? (
-      renderLink(href, label)
-    ) : (
-      <a href={href} className={styles.link}>
-        {label}
-      </a>
-    );
-
-  return (
-    <p className={[styles.root, className].filter(Boolean).join(' ')}>
-      {link(privacyHref, 'Privacy Policy')}
-      <span aria-hidden="true" className={styles.dot}>
-        ·
-      </span>
-      {link(tosHref, 'Terms of Service')}
-    </p>
-  );
-}

package/src/components/Markdown/Markdown.module.css

@@ -1,49 +0,0 @@
-/* Spacing lives on this wrapper div, not on the Typography-rendered tag
-   inside it — Typography's own variants reset margin: 0, which would tie
-   for CSS specificity against a bare `.root > * + *` sibling rule and make
-   the outcome depend on module load order. A dedicated class avoids that. */
-.block {
-  margin-top: var(--sv-space-4);
-}
-
-.block:first-child {
-  margin-top: 0;
-}
-
-.block[data-heading] {
-  margin-top: var(--sv-space-8);
-}
-
-.block[data-heading]:first-child {
-  margin-top: 0;
-}
-
-.blockquote {
-  margin: 0;
-  padding: var(--sv-space-4);
-  border-left: 3px solid var(--sv-color-border);
-  background: var(--sv-color-surface-sunken);
-  border-radius: var(--sv-radius-sm);
-}
-
-.list {
-  margin: 0;
-  padding-left: var(--sv-space-6);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-}
-
-.root a {
-  color: var(--sv-color-text-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.root code {
-  font-family: var(--sv-font-family-mono);
-  font-size: 0.9em;
-  background: var(--sv-color-surface-sunken);
-  padding: 0.1em 0.35em;
-  border-radius: var(--sv-radius-sm);
-}

package/src/components/Markdown/Markdown.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Markdown } from './Markdown';
-
-const sample = `# Privacy Policy
-
-This document describes the built-in, default behavior of **Sovereign**.
-
-> Replaced content from an operator overrides this default.
-
-## What we collect
-
-- **Email address** and password.
-- *Time zone*, detected automatically at signup.
-
-See the [project source](https://github.com/sovereignfs/sovereign) for details.
-`;
-
-const meta = {
-  title: 'Components/Markdown',
-  component: Markdown,
-  parameters: { layout: 'padded' },
-  args: { content: sample },
-} satisfies Meta<typeof Markdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};