@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Slider/Slider.module.css

@@ -1,95 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-2);
-}
-
-.label {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-}
-
-.slider {
-  appearance: none;
-  width: 100%;
-  height: 20px;
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-}
-
-/* Expand the vertical hit area for touch dragging without thickening the
-   visible track — same rationale as Button/Checkbox's touch-target
-   expansion, gated to the primary pointer. */
-@media (pointer: coarse) {
-  .slider {
-    height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-.slider:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.slider:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-/* Track — WebKit/Blink. The filled portion is a gradient computed from the
-   --slider-fill custom property the component sets inline; no JS-measured
-   pixel math, just a CSS variable driving a hard color stop. */
-.slider::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: linear-gradient(
-    to right,
-    var(--sv-color-accent) var(--slider-fill),
-    var(--sv-color-border-strong) var(--slider-fill)
-  );
-}
-
-.slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  margin-top: -6px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  box-shadow: var(--sv-shadow-control);
-  cursor: pointer;
-}
-
-.slider:disabled::-webkit-slider-thumb {
-  cursor: not-allowed;
-}
-
-/* Track — Firefox. Separate track/progress pseudo-elements instead of a
-   gradient — Firefox renders the filled portion natively via
-   ::-moz-range-progress. */
-.slider::-moz-range-track {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-border-strong);
-}
-
-.slider::-moz-range-progress {
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-}
-
-.slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border: none;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-accent);
-  box-shadow: var(--sv-shadow-control);
-  cursor: pointer;
-}
-
-.slider:disabled::-moz-range-thumb {
-  cursor: not-allowed;
-}

package/src/components/Slider/Slider.stories.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slider } from './Slider';
-
-const meta = {
-  title: 'Components/Slider',
-  component: Slider,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Single-thumb range input. A native <input type="range"> under custom styling — arrow keys, Home/End, and touch-drag all come from the browser.',
-      },
-    },
-  },
-  args: {
-    value: 50,
-    onChange: () => {},
-    min: 0,
-    max: 100,
-    'aria-label': 'Value',
-  },
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return <Slider {...args} value={value} onChange={setValue} />;
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value);
-    return <Slider {...args} label="Volume" value={value} onChange={setValue} />;
-  },
-};
-
-export const AtMin: Story = {
-  args: { value: 0 },
-};
-
-export const AtMax: Story = {
-  args: { value: 100 },
-};
-
-export const SteppedRange: Story = {
-  render: (_args) => {
-    const [value, setValue] = useState(5);
-    return (
-      <Slider value={value} onChange={setValue} min={0} max={10} step={1} label="Rating (0–10)" />
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};

package/src/components/Slider/Slider.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { useId } from 'react';
-import type { CSSProperties } from 'react';
-import styles from './Slider.module.css';
-
-export interface SliderProps {
-  value: number;
-  onChange: (value: number) => void;
-  min: number;
-  max: number;
-  step?: number;
-  /** Renders a visible label above the track. Omit and pass `aria-label`
-   * instead for a standalone, unlabeled slider. */
-  label?: string;
-  disabled?: boolean;
-  id?: string;
-  className?: string;
-  'aria-label'?: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  required?: boolean;
-}
-
-/**
- * Slider — single-thumb range input.
- *
- * A native `<input type="range">` under custom track/thumb styling — arrow
- * key (adjust by `step`), Home/End (jump to min/max), and touch-drag
- * support all come from the browser, nothing hand-rolled. Dual-thumb/range
- * selection is out of scope until a consumer needs it.
- */
-export function Slider({
-  value,
-  onChange,
-  min,
-  max,
-  step,
-  label,
-  disabled,
-  id,
-  className,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  'aria-invalid': ariaInvalid,
-  required,
-}: SliderProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const fillPercent = max > min ? ((value - min) / (max - min)) * 100 : 0;
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {label && (
-        <label htmlFor={inputId} className={styles.label}>
-          {label}
-        </label>
-      )}
-      <input
-        id={inputId}
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        disabled={disabled}
-        required={required}
-        aria-label={label ? undefined : ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={ariaInvalid}
-        className={styles.slider}
-        style={{ '--slider-fill': `${fillPercent}%` } as CSSProperties}
-        onChange={(e) => onChange(Number(e.target.value))}
-      />
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Slider } from '../Slider';
-
-afterEach(cleanup);
-
-describe('Slider', () => {
-  it('renders a range input with the given min/max/value', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
-    const input = screen.getByRole('slider') as HTMLInputElement;
-    expect(input.min).toBe('0');
-    expect(input.max).toBe('100');
-    expect(input.value).toBe('50');
-  });
-
-  it('calls onChange with a number when the value changes', () => {
-    const onChange = vi.fn();
-    render(<Slider value={50} onChange={onChange} min={0} max={100} aria-label="Volume" />);
-    fireEvent.change(screen.getByRole('slider'), { target: { value: '75' } });
-    expect(onChange).toHaveBeenCalledWith(75);
-  });
-
-  it('respects a step prop', () => {
-    render(<Slider value={5} onChange={() => {}} min={0} max={10} step={5} aria-label="Volume" />);
-    expect((screen.getByRole('slider') as HTMLInputElement).step).toBe('5');
-  });
-
-  it('renders a visible label and associates it via htmlFor', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} label="Volume" />);
-    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
-  });
-
-  it('falls back to aria-label when no visible label is given', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />);
-    expect(screen.getByRole('slider', { name: 'Volume' })).toBeDefined();
-  });
-
-  it('disables the input when disabled is set', () => {
-    render(
-      <Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" disabled />,
-    );
-    expect(screen.getByRole('slider')).toHaveProperty('disabled', true);
-  });
-});

package/src/components/Spinner/Spinner.module.css

@@ -1,39 +0,0 @@
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner {
-  display: inline-block;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: var(--sv-color-border);
-  border-top-color: var(--sv-color-accent);
-  animation: spin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation-play-state: paused;
-  }
-}
-
-.sm {
-  width: var(--sv-icon-size-sm);
-  height: var(--sv-icon-size-sm);
-  border-width: 2px;
-}
-
-.md {
-  width: var(--sv-icon-size-md);
-  height: var(--sv-icon-size-md);
-  border-width: 2px;
-}
-
-.lg {
-  width: var(--sv-icon-size-lg);
-  height: var(--sv-icon-size-lg);
-  border-width: 3px;
-}

package/src/components/Spinner/Spinner.tsx

@@ -1,23 +0,0 @@
-import styles from './Spinner.module.css';
-
-export interface SpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
-  label?: string;
-  className?: string;
-}
-
-const sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {
-  sm: styles.sm as string,
-  md: styles.md as string,
-  lg: styles.lg as string,
-};
-
-export function Spinner({ size = 'md', label = 'Loading…', className }: SpinnerProps) {
-  return (
-    <span
-      role="status"
-      aria-label={label}
-      className={[styles.spinner, sizeClass[size], className].filter(Boolean).join(' ')}
-    />
-  );
-}

package/src/components/SplitMethodSelector/SplitMethodSelector.stories.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SplitMethodSelector, type SplitMethod } from './SplitMethodSelector';
-
-const meta = {
-  title: 'Components/SplitMethodSelector',
-  component: SplitMethodSelector,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The four-way Equal/Amount/Percentage/Shares picker shared by any cost-splitting plugin. A thin SegmentedControl preset that centralizes the option list and labels.',
-      },
-    },
-  },
-  args: {
-    value: 'equal',
-    onChange: () => {},
-  },
-} satisfies Meta<typeof SplitMethodSelector>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function ControlledSelector() {
-  const [value, setValue] = useState<SplitMethod>('equal');
-  return <SplitMethodSelector value={value} onChange={setValue} />;
-}
-
-export const Default: Story = {
-  render: () => <ControlledSelector />,
-};

package/src/components/SplitMethodSelector/SplitMethodSelector.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { SegmentedControl } from '../SegmentedControl/SegmentedControl';
-
-export type SplitMethod = 'equal' | 'amount' | 'percentage' | 'shares';
-
-export interface SplitMethodSelectorProps {
-  value: SplitMethod;
-  onChange: (value: SplitMethod) => void;
-  size?: 'sm' | 'md';
-  'aria-label'?: string;
-}
-
-const OPTIONS: { label: string; value: SplitMethod }[] = [
-  { label: 'Equal', value: 'equal' },
-  { label: 'Amount', value: 'amount' },
-  { label: 'Percentage', value: 'percentage' },
-  { label: 'Shares', value: 'shares' },
-];
-
-/**
- * SplitMethodSelector — the four-way equal/amount/percentage/shares picker
- * shared by any plugin that splits a cost between people. A thin
- * `SegmentedControl` preset: centralizes the option list and labels so every
- * expense-splitting plugin presents the same four choices in the same order,
- * instead of each one re-typing its own copy of this array.
- */
-export function SplitMethodSelector({
-  value,
-  onChange,
-  size = 'sm',
-  'aria-label': ariaLabel = 'Split method',
-}: SplitMethodSelectorProps) {
-  return (
-    <SegmentedControl
-      value={value}
-      onChange={onChange}
-      options={OPTIONS}
-      size={size}
-      aria-label={ariaLabel}
-    />
-  );
-}

package/src/components/SplitPane/SplitPane.module.css

@@ -1,85 +0,0 @@
-.splitPane {
-  display: grid;
-  grid-template-columns:
-    minmax(0, var(--split-pane-primary-size, 50%)) 12px
-    minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
-  width: 100%;
-  min-height: 320px;
-  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-lg);
-  overflow: hidden;
-  background: var(--sv-color-surface);
-}
-
-.splitPane:not(:has(.handle)) {
-  grid-template-columns:
-    minmax(0, var(--split-pane-primary-size, 50%))
-    minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
-}
-
-.pane {
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  background: var(--sv-color-surface);
-}
-
-.pane + .pane {
-  border-left: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-.handle {
-  position: relative;
-  width: 12px;
-  min-width: 12px;
-  padding: 0;
-  border: 0;
-  border-inline: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  cursor: col-resize;
-  background: var(--sv-color-surface-sunken);
-}
-
-.handle::before {
-  position: absolute;
-  inset-block: 50%;
-  inset-inline: 50%;
-  width: 2px;
-  height: 40px;
-  content: '';
-  background: var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-full);
-  transform: translate(-50%, -50%);
-}
-
-@media (hover: hover) {
-  .handle:hover {
-    background: var(--sv-color-accent-subtle);
-  }
-}
-
-.handle:focus-visible {
-  background: var(--sv-color-accent-subtle);
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-@media (max-width: 720px) {
-  .splitPane,
-  .splitPane:not(:has(.handle)) {
-    grid-template-columns: 1fr;
-    min-height: 0;
-  }
-
-  .handle {
-    display: none;
-  }
-
-  .pane {
-    min-height: 220px;
-  }
-
-  .pane + .pane {
-    border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-    border-left: 0;
-  }
-}

package/src/components/SplitPane/SplitPane.stories.tsx

@@ -1,160 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SplitPane } from './SplitPane';
-import { CodeTextarea } from '../CodeTextarea/CodeTextarea';
-import { StatusBadge } from '../StatusBadge/StatusBadge';
-
-const editorText = `# Release plan
-
-- Confirm copy
-- Preview page
-- Commit changes
-`;
-
-function PaneShell({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        minHeight: '100%',
-        flexDirection: 'column',
-        gap: 'var(--sv-space-3)',
-        padding: 'var(--sv-space-4)',
-        fontFamily: 'var(--sv-font-family)',
-      }}
-    >
-      <h3
-        style={{
-          margin: 0,
-          fontSize: 'var(--sv-font-size-sm)',
-          color: 'var(--sv-color-text-primary)',
-        }}
-      >
-        {title}
-      </h3>
-      {children}
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/SplitPane',
-  component: SplitPane,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Responsive two-pane layout for editor/preview and list/detail workflows. Drag or use arrow keys on the separator.',
-      },
-    },
-  },
-  args: {
-    primary: <PaneShell title="Primary">Primary pane</PaneShell>,
-    secondary: <PaneShell title="Secondary">Secondary pane</PaneShell>,
-  },
-} satisfies Meta<typeof SplitPane>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <SplitPane
-      primary={
-        <PaneShell title="Editor">
-          <CodeTextarea aria-label="Markdown editor" defaultValue={editorText} />
-        </PaneShell>
-      }
-      secondary={
-        <PaneShell title="Preview">
-          <article style={{ lineHeight: 1.6, color: 'var(--sv-color-text-primary)' }}>
-            <h2 style={{ marginTop: 0 }}>Release plan</h2>
-            <ul>
-              <li>Confirm copy</li>
-              <li>Preview page</li>
-              <li>Commit changes</li>
-            </ul>
-          </article>
-        </PaneShell>
-      }
-    />
-  ),
-};
-
-export const FixedPanes: Story = {
-  render: () => (
-    <SplitPane
-      resizable={false}
-      defaultPrimarySize={38}
-      primary={
-        <PaneShell title="Files">
-          {['index.md', 'release-notes.md', 'about.md'].map((file) => (
-            <div
-              key={file}
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: 'var(--sv-space-3)',
-                padding: 'var(--sv-space-2) 0',
-                borderBottom: '1px solid var(--sv-color-border)',
-              }}
-            >
-              <span>{file}</span>
-              <StatusBadge status={file === 'release-notes.md' ? 'draft' : 'synced'} />
-            </div>
-          ))}
-        </PaneShell>
-      }
-      secondary={
-        <PaneShell title="Details">
-          <p style={{ margin: 0, color: 'var(--sv-color-text-muted)' }}>
-            Select a file to inspect frontmatter, sync state, and publish history.
-          </p>
-        </PaneShell>
-      }
-    />
-  ),
-};
-
-export const KeyboardResizable: Story = {
-  render: () => (
-    <SplitPane
-      defaultPrimarySize={45}
-      minPrimarySize={25}
-      maxPrimarySize={75}
-      resizeLabel="Resize editor and preview panes with arrow keys"
-      primary={<PaneShell title="Keyboard">Focus the separator and press arrow keys.</PaneShell>}
-      secondary={<PaneShell title="Preview">Shift+Arrow resizes in larger steps.</PaneShell>}
-    />
-  ),
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <SplitPane
-      primary={
-        <PaneShell title="Long list">
-          {Array.from({ length: 28 }, (_, index) => (
-            <div key={index} style={{ paddingBlock: 'var(--sv-space-2)' }}>
-              Content item {index + 1}
-            </div>
-          ))}
-        </PaneShell>
-      }
-      secondary={<PaneShell title="Preview">Each pane scrolls independently.</PaneShell>}
-    />
-  ),
-};
-
-export const Mobile: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  render: () => (
-    <SplitPane
-      primary={<PaneShell title="Editor">This pane appears first on narrow screens.</PaneShell>}
-      secondary={<PaneShell title="Preview">The second pane stacks below it.</PaneShell>}
-    />
-  ),
-};