@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,88 +0,0 @@
-.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

@@ -1,69 +0,0 @@
-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

@@ -1,99 +0,0 @@
-'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

@@ -1,59 +0,0 @@
-// @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

@@ -1,70 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 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);
-}
-
-.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: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  cursor: col-resize;
-  background: var(--sv-color-surface-sunken);
-}
-
-.handleVertical {
-  width: 100%;
-  height: 12px;
-  border-inline: 0;
-  border-block: var(--sv-border-width-hairline) 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

@@ -1,82 +0,0 @@
-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>
-  ),
-};