@sovereignfs/ui 0.41.0 → 0.45.0

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,35 @@
+import styles from './Progress.module.css';
+
+export interface ProgressProps {
+  /** 0–100. Values outside that range are clamped. */
+  value: number;
+  /** Accessible name — Progress has no visible text of its own. */
+  label?: string;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * Progress — determinate bar.
+ *
+ * `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * so screen readers announce the current value. Indeterminate state is out
+ * of scope until a consumer needs it.
+ */
+export function Progress({ value, label, id, className }: ProgressProps) {
+  const clamped = Math.min(100, Math.max(0, value));
+
+  return (
+    <div
+      id={id}
+      role="progressbar"
+      aria-valuenow={clamped}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+      className={[styles.track, className].filter(Boolean).join(' ')}
+    >
+      <div className={styles.fill} style={{ width: `${clamped}%` }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Progress } from '../Progress';
+
+afterEach(cleanup);
+
+describe('Progress', () => {
+  it('exposes progressbar ARIA attributes for the given value', () => {
+    render(<Progress value={40} label="Upload progress" />);
+    const bar = screen.getByRole('progressbar', { name: 'Upload progress' });
+    expect(bar.getAttribute('aria-valuenow')).toBe('40');
+    expect(bar.getAttribute('aria-valuemin')).toBe('0');
+    expect(bar.getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  it('clamps a value above 100', () => {
+    render(<Progress value={140} label="Upload progress" />);
+    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('100');
+  });
+
+  it('clamps a negative value to 0', () => {
+    render(<Progress value={-10} label="Upload progress" />);
+    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('0');
+  });
+
+  it('renders without an accessible name when label is omitted', () => {
+    render(<Progress value={40} />);
+    expect(screen.getByRole('progressbar').getAttribute('aria-label')).toBeNull();
+  });
+});

package/src/components/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,88 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  cursor: pointer;
+}
+
+/* The visual circle — same 18px size and touch-target-expansion technique
+   as Checkbox's box, radius-full instead of radius-sm. */
+.circle {
+  --radio-circle-size: 18px;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  border-radius: var(--sv-radius-full);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  border-color: var(--sv-color-accent);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  pointer-events: none;
+}
+
+/* Hide the native input visually but keep it accessible */
+.input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+/* Expand the tappable region to the platform's minimum touch target without
+   growing the visible circle. Gated to (pointer: coarse), the *primary*
+   pointer, so a touchscreen laptop with mouse/trackpad as primary keeps
+   desktop density — same reasoning as Checkbox. */
+@media (pointer: coarse) {
+  .input {
+    inset: calc((var(--radio-circle-size) - var(--sv-touch-target-min, 44px)) / 2);
+  }
+}
+
+.input:focus-visible {
+  outline: none;
+}
+
+.circle:has(.input:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.optionLabel {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  user-select: none;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RadioGroup } from './RadioGroup';
+import { FormField } from '../FormField/FormField';
+
+const meta = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Single-select list of options. Renders real `<input type="radio">` elements sharing one `name`, so keyboard arrow-key navigation between options is native browser behavior.',
+      },
+    },
+  },
+  args: {
+    items: [
+      { label: 'Small', value: 'sm' },
+      { label: 'Medium', value: 'md' },
+      { label: 'Large', value: 'lg' },
+    ],
+    value: 'md',
+    onChange: () => {},
+    'aria-label': 'Size',
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return <RadioGroup {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export const WithDisabledItem: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <RadioGroup
+        {...args}
+        items={[...args.items, { label: 'X-Large (out of stock)', value: 'xl', disabled: true }]}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const InFormField: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <FormField label="Shirt size" error="Select a size to continue.">
+        {(field) => <RadioGroup {...args} {...field} value={value} onChange={setValue} />}
+      </FormField>
+    );
+  },
+};

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useId } from 'react';
+import styles from './RadioGroup.module.css';
+
+export interface RadioGroupItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  items: RadioGroupItem[];
+  value: string;
+  onChange: (value: string) => void;
+  /** Groups the underlying native radios. Auto-generated when omitted —
+   * only pass this to participate in a native, non-React form submission. */
+  name?: string;
+  /** Disables every item. Use `items[].disabled` to disable one. */
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  required?: boolean;
+}
+
+/**
+ * RadioGroup — single-select list of options.
+ *
+ * Renders real `<input type="radio">` elements sharing one `name`, visually
+ * hidden behind a custom circle (same technique as `Checkbox`). Keyboard
+ * arrow-key navigation between options is native browser behavior for
+ * grouped radio inputs — nothing to hand-roll here.
+ */
+export function RadioGroup({
+  items,
+  value,
+  onChange,
+  name,
+  disabled,
+  id,
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  required,
+}: RadioGroupProps) {
+  const generatedName = useId();
+  const groupName = name ?? generatedName;
+
+  return (
+    <div
+      id={id}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      aria-invalid={ariaInvalid}
+      aria-required={required}
+      className={[styles.root, className].filter(Boolean).join(' ')}
+    >
+      {items.map((item) => {
+        const checked = item.value === value;
+        const itemDisabled = disabled || item.disabled;
+        const inputId = `${groupName}-${item.value}`;
+
+        return (
+          <label
+            key={item.value}
+            htmlFor={inputId}
+            className={[styles.option, itemDisabled ? styles.disabled : '']
+              .filter(Boolean)
+              .join(' ')}
+          >
+            <span className={[styles.circle, checked ? styles.checked : ''].join(' ')}>
+              <input
+                id={inputId}
+                type="radio"
+                name={groupName}
+                value={item.value}
+                checked={checked}
+                disabled={itemDisabled}
+                required={required}
+                className={styles.input}
+                onChange={() => onChange(item.value)}
+              />
+              {checked && <span className={styles.dot} />}
+            </span>
+            <span className={styles.optionLabel}>{item.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { RadioGroup } from '../RadioGroup';
+
+afterEach(cleanup);
+
+const items = [
+  { label: 'Small', value: 'sm' },
+  { label: 'Medium', value: 'md' },
+  { label: 'Large', value: 'lg' },
+];
+
+describe('RadioGroup', () => {
+  it('renders all items as radio inputs', () => {
+    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" />);
+    expect(screen.getAllByRole('radio').length).toBe(3);
+  });
+
+  it('marks the matching item as checked', () => {
+    render(<RadioGroup items={items} value="md" onChange={() => {}} aria-label="Size" />);
+    expect(screen.getByRole('radio', { name: 'Medium' })).toHaveProperty('checked', true);
+    expect(screen.getByRole('radio', { name: 'Small' })).toHaveProperty('checked', false);
+  });
+
+  it('calls onChange with the selected value', () => {
+    const onChange = vi.fn();
+    render(<RadioGroup items={items} value="sm" onChange={onChange} aria-label="Size" />);
+    fireEvent.click(screen.getByRole('radio', { name: 'Large' }));
+    expect(onChange).toHaveBeenCalledWith('lg');
+  });
+
+  it('exposes a radiogroup with the given aria-label', () => {
+    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" />);
+    expect(screen.getByRole('radiogroup', { name: 'Size' })).toBeDefined();
+  });
+
+  it('shares one name across all items so native radio semantics apply', () => {
+    render(
+      <RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" name="size" />,
+    );
+    const radios = screen.getAllByRole('radio') as HTMLInputElement[];
+    expect(new Set(radios.map((r) => r.name)).size).toBe(1);
+  });
+
+  it('disables an individual item via items[].disabled', () => {
+    const withDisabled = [...items, { label: 'X-Large', value: 'xl', disabled: true }];
+    render(<RadioGroup items={withDisabled} value="sm" onChange={() => {}} aria-label="Size" />);
+    expect(screen.getByRole('radio', { name: 'X-Large' })).toHaveProperty('disabled', true);
+    expect(screen.getByRole('radio', { name: 'Small' })).toHaveProperty('disabled', false);
+  });
+
+  it('disables every item when the group-level disabled prop is set', () => {
+    render(<RadioGroup items={items} value="sm" onChange={() => {}} aria-label="Size" disabled />);
+    for (const radio of screen.getAllByRole('radio')) {
+      expect(radio).toHaveProperty('disabled', true);
+    }
+  });
+});

package/src/components/Resizable/Resizable.module.css

@@ -0,0 +1,70 @@
+.group {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  overflow: hidden;
+  background: var(--sv-color-surface);
+}
+
+.groupVertical {
+  flex-direction: column;
+}
+
+.panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--sv-color-surface);
+}
+
+.handle {
+  position: relative;
+  flex-shrink: 0;
+  width: 12px;
+  padding: 0;
+  border: 0;
+  border-inline: 1px solid var(--sv-color-border);
+  cursor: col-resize;
+  background: var(--sv-color-surface-sunken);
+}
+
+.handleVertical {
+  width: 100%;
+  height: 12px;
+  border-inline: 0;
+  border-block: 1px solid var(--sv-color-border);
+  cursor: row-resize;
+}
+
+.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%);
+}
+
+.handleVertical::before {
+  width: 40px;
+  height: 2px;
+}
+
+@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;
+}

package/src/components/Resizable/Resizable.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './Resizable';
+
+const meta = {
+  title: 'Components/Resizable',
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A row or column of resizable panes. Each handle resizes only its two immediate neighbor panels, clamped to their own min/max. Desktop-oriented — panels render at their default sizes on touch.',
+      },
+    },
+  },
+  args: { direction: 'horizontal', children: null },
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+const paneStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  padding: 'var(--sv-space-4)',
+  fontSize: 14,
+  color: 'var(--sv-color-text-muted)',
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25} minSize={15} maxSize={50}>
+        <div style={paneStyle}>Sidebar</div>
+      </ResizablePanel>
+      <ResizableHandle aria-label="Resize sidebar" />
+      <ResizablePanel defaultSize={75}>
+        <div style={paneStyle}>Content</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const ThreePanels: Story = {
+  render: () => (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={20} minSize={15} maxSize={40}>
+        <div style={paneStyle}>Files</div>
+      </ResizablePanel>
+      <ResizableHandle aria-label="Resize files panel" />
+      <ResizablePanel defaultSize={50}>
+        <div style={paneStyle}>Editor</div>
+      </ResizablePanel>
+      <ResizableHandle aria-label="Resize editor panel" />
+      <ResizablePanel defaultSize={30} minSize={15} maxSize={50}>
+        <div style={paneStyle}>Preview</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    // Vertical orientation needs a definite-height ancestor for the
+    // percentage-based flex-basis on each panel to resolve.
+    <div style={{ height: 400 }}>
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel defaultSize={30}>
+          <div style={paneStyle}>Console output</div>
+        </ResizablePanel>
+        <ResizableHandle aria-label="Resize console" />
+        <ResizablePanel defaultSize={70}>
+          <div style={paneStyle}>Editor</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};