@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/ScrollArea/ScrollArea.module.css

@@ -1,20 +0,0 @@
-.root {
-  overflow: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--sv-color-border-strong) transparent;
-}
-
-.root::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.root::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.root::-webkit-scrollbar-thumb {
-  background: var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-full);
-}

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ScrollArea } from './ScrollArea';
-
-const meta = {
-  title: 'Components/ScrollArea',
-  component: ScrollArea,
-  parameters: { layout: 'padded' },
-  args: { children: null },
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Vertical: Story = {
-  render: () => (
-    <div style={{ width: 280 }}>
-      <ScrollArea maxHeight={160}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 4 }}>
-          {Array.from({ length: 20 }, (_, i) => (
-            <div key={i} style={{ fontSize: 14 }}>
-              Row {i + 1}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  ),
-};
-
-export const Horizontal: Story = {
-  render: () => (
-    <ScrollArea maxWidth={320}>
-      <div style={{ display: 'flex', gap: 8, padding: 4, width: 'max-content' }}>
-        {Array.from({ length: 12 }, (_, i) => (
-          <div
-            key={i}
-            style={{
-              width: 80,
-              height: 60,
-              flexShrink: 0,
-              background: 'var(--sv-color-surface-sunken)',
-              borderRadius: 'var(--sv-radius-md)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: 12,
-            }}
-          >
-            {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,27 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import styles from './ScrollArea.module.css';
-
-export interface ScrollAreaProps {
-  children: ReactNode;
-  /** Constrains the scrollable direction; content taller/wider than this scrolls. */
-  maxHeight?: string | number;
-  maxWidth?: string | number;
-  className?: string;
-}
-
-/**
- * ScrollArea — a styled scrollable container (thin, token-colored scrollbar
- * instead of the OS default). Native overflow scrolling underneath — no
- * virtualization, no custom scroll physics.
- */
-export function ScrollArea({ children, maxHeight, maxWidth, className }: ScrollAreaProps) {
-  const style: CSSProperties = {};
-  if (maxHeight !== undefined) style.maxHeight = maxHeight;
-  if (maxWidth !== undefined) style.maxWidth = maxWidth;
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')} style={style}>
-      {children}
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { ScrollArea } from '../ScrollArea';
-
-afterEach(cleanup);
-
-describe('ScrollArea', () => {
-  it('renders children', () => {
-    render(
-      <ScrollArea>
-        <div>content</div>
-      </ScrollArea>,
-    );
-    expect(screen.getByText('content')).toBeDefined();
-  });
-
-  it('applies maxHeight/maxWidth as inline styles when given', () => {
-    render(
-      <ScrollArea maxHeight={200} maxWidth="100%">
-        <div data-testid="child">content</div>
-      </ScrollArea>,
-    );
-    const root = screen.getByTestId('child').parentElement;
-    expect(root?.style.maxHeight).toBe('200px');
-    expect(root?.style.maxWidth).toBe('100%');
-  });
-
-  it('does not set maxHeight/maxWidth styles when omitted', () => {
-    render(
-      <ScrollArea>
-        <div data-testid="child">content</div>
-      </ScrollArea>,
-    );
-    const root = screen.getByTestId('child').parentElement;
-    expect(root?.style.maxHeight).toBe('');
-    expect(root?.style.maxWidth).toBe('');
-  });
-});

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -1,55 +0,0 @@
-.track {
-  display: inline-flex;
-  background: var(--sv-color-surface-sunken);
-  border-radius: var(--sv-radius-full);
-  border: 1px solid var(--sv-color-border);
-  padding: 2px;
-  gap: 2px;
-}
-
-/* Size variants */
-.md .segment {
-  padding: var(--sv-space-1) var(--sv-space-3);
-  font-size: var(--sv-font-size-sm);
-}
-
-.sm .segment {
-  padding: 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-caption);
-}
-
-.segment {
-  border: none;
-  border-radius: var(--sv-radius-full);
-  font-family: var(--sv-font-family);
-  font-weight: var(--sv-font-weight-medium);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    color 0.12s ease,
-    box-shadow 0.12s ease;
-  white-space: nowrap;
-}
-
-.segment:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 1px;
-}
-
-.active {
-  background: var(--sv-color-surface);
-  color: var(--sv-color-text-primary);
-  box-shadow: var(--sv-shadow-card);
-}
-
-.inactive {
-  background: transparent;
-  color: var(--sv-color-text-muted);
-}
-
-@media (hover: hover) {
-  .inactive:hover {
-    color: var(--sv-color-text-primary);
-  }
-}

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,118 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SegmentedControl } from './SegmentedControl';
-
-const meta = {
-  title: 'Components/SegmentedControl',
-  component: SegmentedControl,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Pill-based 2–3 option picker for inline use in table rows and dialogs. Renders as `role="radiogroup"` with `role="radio"` segments.',
-      },
-    },
-  },
-  args: {
-    value: 'a',
-    onChange: () => {},
-    options: [
-      { label: 'A', value: 'a' },
-      { label: 'B', value: 'b' },
-    ],
-    'aria-label': 'Select option',
-  },
-} satisfies Meta<typeof SegmentedControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const TwoOption: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-export const ThreeOption: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin' | 'owner'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-          { label: 'Owner', value: 'owner' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-export const SmallSize: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <SegmentedControl
-        value={role}
-        onChange={setRole}
-        size="sm"
-        options={[
-          { label: 'User', value: 'user' },
-          { label: 'Admin', value: 'admin' },
-        ]}
-        aria-label="Role"
-      />
-    );
-  },
-};
-
-/** Table-row context — sm size next to other table content. */
-export const InTableRow: Story = {
-  render: (_args) => {
-    const [role, setRole] = useState<'user' | 'admin'>('user');
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 16,
-          padding: '10px 12px',
-          border: '1px solid var(--sv-color-border)',
-          borderRadius: 'var(--sv-radius-md)',
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        <span>Test User</span>
-        <SegmentedControl
-          value={role}
-          onChange={setRole}
-          size="sm"
-          options={[
-            { label: 'User', value: 'user' },
-            { label: 'Admin', value: 'admin' },
-          ]}
-          aria-label="User role"
-        />
-      </div>
-    );
-  },
-};

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import styles from './SegmentedControl.module.css';
-
-export interface SegmentedOption<T extends string = string> {
-  label: string;
-  value: T;
-}
-
-export interface SegmentedControlProps<T extends string = string> {
-  value: T;
-  onChange: (value: T) => void;
-  options: SegmentedOption<T>[];
-  size?: 'sm' | 'md';
-  'aria-label': string;
-}
-
-/**
- * SegmentedControl — pill-based 2–3 option picker for inline use in table rows
- * and dialogs (e.g. User / Admin / Owner role switcher).
- *
- * Renders as `<div role="radiogroup">` with `<button role="radio">` children —
- * correct semantics without a native `<input type="radio">` (which needs an id/name
- * pair and a `<form>` context to function correctly in all browsers).
- */
-export function SegmentedControl<T extends string = string>({
-  value,
-  onChange,
-  options,
-  size = 'md',
-  'aria-label': ariaLabel,
-}: SegmentedControlProps<T>) {
-  return (
-    <div
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={[styles.track, styles[size]].join(' ')}
-    >
-      {options.map((opt) => {
-        const active = opt.value === value;
-        return (
-          <button
-            key={opt.value}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            className={[styles.segment, active ? styles.active : styles.inactive].join(' ')}
-            onClick={() => onChange(opt.value)}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,63 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-
-afterEach(cleanup);
-import { SegmentedControl } from '../SegmentedControl';
-
-const options = [
-  { label: 'User', value: 'user' as const },
-  { label: 'Admin', value: 'admin' as const },
-  { label: 'Owner', value: 'owner' as const },
-];
-
-describe('SegmentedControl', () => {
-  it('renders all options as radio buttons', () => {
-    render(
-      <SegmentedControl value="user" onChange={() => {}} options={options} aria-label="Role" />,
-    );
-    expect(screen.getAllByRole('radio').length).toBe(3);
-  });
-
-  it('marks the active option as checked', () => {
-    render(
-      <SegmentedControl value="admin" onChange={() => {}} options={options} aria-label="Role" />,
-    );
-    expect(screen.getByRole('radio', { name: 'Admin' }).getAttribute('aria-checked')).toBe('true');
-    expect(screen.getByRole('radio', { name: 'User' }).getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('calls onChange with the selected value on click', () => {
-    const onChange = vi.fn();
-    render(
-      <SegmentedControl value="user" onChange={onChange} options={options} aria-label="Role" />,
-    );
-    fireEvent.click(screen.getByRole('radio', { name: 'Admin' }));
-    expect(onChange).toHaveBeenCalledWith('admin');
-  });
-
-  it('exposes a radiogroup with the given aria-label', () => {
-    render(
-      <SegmentedControl
-        value="user"
-        onChange={() => {}}
-        options={options}
-        aria-label="Select role"
-      />,
-    );
-    expect(screen.getByRole('radiogroup', { name: 'Select role' })).toBeDefined();
-  });
-
-  it('applies size class to the track', () => {
-    const { container } = render(
-      <SegmentedControl
-        value="user"
-        onChange={() => {}}
-        options={options}
-        size="sm"
-        aria-label="Role"
-      />,
-    );
-    expect((container.firstChild as HTMLElement).className).toContain('sm');
-  });
-});

package/src/components/Select/Select.module.css

@@ -1,82 +0,0 @@
-/* Wrapper provides the positioning context for the custom chevron */
-.wrapper {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.select {
-  display: block;
-  width: 100%;
-  /* 36px rendered height. Explicit height + border-box, same technique as
-     Input. Right-pad to clear the custom chevron. */
-  height: 36px;
-  box-sizing: border-box;
-  padding: 4px var(--sv-space-8) 4px var(--sv-space-3);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.5;
-  color: var(--sv-color-text-primary);
-  background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  cursor: pointer;
-  /* Remove native OS chevron */
-  appearance: none;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* sm — compact for table cells and inline controls. 32px height. */
-.sm .select {
-  height: 32px;
-  padding: 2px var(--sv-space-6) 2px var(--sv-space-2);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.4;
-  border-radius: var(--sv-radius-sm);
-}
-
-/* iOS Safari zooms the page when a <select> under 16px receives focus, exactly
-   as it does for text inputs. Lift the default size to >=16px on touch devices;
-   the compact `.sm` variant is for dense desktop tables and is left untouched. */
-@media (pointer: coarse) {
-  .select {
-    font-size: var(--sv-font-size-md);
-  }
-}
-
-.select:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Compact size variant — reduced padding for table-cell usage */
-.sm .select {
-  padding-top: var(--sv-space-1);
-  padding-bottom: var(--sv-space-1);
-  font-size: var(--sv-font-size-sm);
-}
-
-/* SVG chevron — matches the icon stroke style used across the UI */
-.chevron {
-  pointer-events: none;
-  position: absolute;
-  right: var(--sv-space-3);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--sv-color-text-muted);
-  flex-shrink: 0;
-}
-
-.sm .chevron {
-  right: var(--sv-space-2);
-  width: 10px;
-  height: 10px;
-}

package/src/components/Select/Select.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Select';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Styled native `<select>` — same visual language as `Input`. Preserves native picker on mobile for maximum accessibility. RSC-safe.',
-      },
-    },
-  },
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (_args) => (
-    <div style={{ width: 280, fontFamily: 'var(--sv-font-family)' }}>
-      <label
-        htmlFor="role-select"
-        style={{
-          display: 'block',
-          marginBottom: 4,
-          fontSize: 'var(--sv-font-size-sm)',
-          fontWeight: 'var(--sv-font-weight-medium)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        Role
-      </label>
-      <Select id="role-select" defaultValue="user">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-        <option value="owner">Owner</option>
-      </Select>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: (_args) => (
-    <div style={{ width: 280 }}>
-      <Select disabled defaultValue="user">
-        <option value="user">User</option>
-        <option value="admin">Admin</option>
-      </Select>
-    </div>
-  ),
-};
-
-/** Form context — several fields together matching the spec layout. */
-export const FormContext: Story = {
-  render: (_args) => {
-    const fieldStyle: React.CSSProperties = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 4,
-    };
-    const labelStyle: React.CSSProperties = {
-      fontSize: 'var(--sv-font-size-sm)',
-      fontWeight: 'var(--sv-font-weight-medium)',
-      color: 'var(--sv-color-text-primary)',
-      fontFamily: 'var(--sv-font-family)',
-    };
-
-    return (
-      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div style={fieldStyle}>
-          <label htmlFor="lang-select" style={labelStyle}>
-            Language
-          </label>
-          <Select id="lang-select" defaultValue="en-us">
-            <option value="en-us">English (US)</option>
-            <option value="en-gb">English (UK)</option>
-            <option value="fr">Français</option>
-            <option value="de">Deutsch</option>
-            <option value="ja">日本語</option>
-          </Select>
-        </div>
-        <div style={fieldStyle}>
-          <label htmlFor="tz-select" style={labelStyle}>
-            Timezone
-          </label>
-          <Select id="tz-select" defaultValue="asia-colombo">
-            <option value="asia-colombo">Asia/Colombo (UTC+5:30)</option>
-            <option value="utc">UTC</option>
-            <option value="america-ny">America/New_York (UTC−5)</option>
-            <option value="europe-london">Europe/London (UTC+0)</option>
-          </Select>
-        </div>
-        <div style={fieldStyle}>
-          <label htmlFor="poll-select" style={labelStyle}>
-            Poll interval
-          </label>
-          <Select id="poll-select" defaultValue="30">
-            <option value="15">Every 15 seconds</option>
-            <option value="30">Every 30 seconds</option>
-            <option value="60">Every minute</option>
-            <option value="300">Every 5 minutes</option>
-          </Select>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Select/Select.tsx

@@ -1,48 +0,0 @@
-import type { SelectHTMLAttributes } from 'react';
-import styles from './Select.module.css';
-
-export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
-  /** 'md' (default) — standard form field height. 'sm' — compact for table cells and inline controls. */
-  size?: 'sm' | 'md';
-};
-
-/**
- * Select — styled wrapper around the native `<select>`. Inherits the same
- * height, border, radius, and focus ring as `Input` for visual consistency.
- * Uses the native picker on mobile — no custom dropdown, maximum a11y coverage.
- *
- * RSC-safe: presentational, no hooks, forwards all native select props.
- *
- * `className` sizes the outer box (the wrapper), not the `<select>` itself —
- * the chevron is absolutely positioned against the wrapper, so a className
- * that constrains only the `<select>` (e.g. `max-width`) shrinks the select
- * while the wrapper (and thus the chevron) stays full width, leaving the
- * chevron stranded past the visible box.
- */
-export function Select({ className, size = 'md', children, ...rest }: SelectProps) {
-  return (
-    <div
-      className={[styles.wrapper, size === 'sm' ? styles.sm : undefined, className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <select className={styles.select} {...rest}>
-        {children}
-      </select>
-      <svg
-        className={styles.chevron}
-        aria-hidden="true"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="6 9 12 15 18 9" />
-      </svg>
-    </div>
-  );
-}