@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Collapsible/Collapsible.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import { useId } from 'react';
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './Collapsible.module.css';
-
-export interface CollapsibleProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  trigger: ReactNode;
-  children: ReactNode;
-  id?: string;
-  className?: string;
-}
-
-/**
- * Collapsible — single expand/collapse primitive. Independently useful
- * (e.g. a "show more" toggle), and composed internally by `Accordion`.
- *
- * The expand/collapse animation uses `grid-template-rows: 0fr` → `1fr`
- * rather than animating `height`, which can't transition to/from `auto`
- * in CSS without JS-measuring pixel heights. Collapsed content stays in
- * the DOM (so no layout jump on re-open) but is marked `inert` — removed
- * from the tab order and the accessibility tree — so it isn't reachable
- * while hidden.
- */
-export function Collapsible({
-  open,
-  onOpenChange,
-  trigger,
-  children,
-  id,
-  className,
-}: CollapsibleProps) {
-  const generatedId = useId();
-  const contentId = `${id ?? generatedId}-content`;
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      <button
-        type="button"
-        className={styles.trigger}
-        aria-expanded={open}
-        aria-controls={contentId}
-        onClick={() => onOpenChange(!open)}
-      >
-        <span className={styles.triggerLabel}>{trigger}</span>
-        <Icon
-          name="chevron-down"
-          size="sm"
-          aria-hidden
-          className={[styles.chevron, open ? styles.chevronOpen : ''].filter(Boolean).join(' ')}
-        />
-      </button>
-      <div
-        id={contentId}
-        className={styles.contentWrapper}
-        data-open={open}
-        inert={!open || undefined}
-      >
-        <div className={styles.contentInner}>{children}</div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,71 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Collapsible } from '../Collapsible';
-
-afterEach(cleanup);
-
-describe('Collapsible', () => {
-  it('exposes aria-expanded matching the open prop', () => {
-    const { rerender } = render(
-      <Collapsible open={false} onOpenChange={() => {}} trigger="More info">
-        Body content
-      </Collapsible>,
-    );
-    expect(screen.getByRole('button', { name: 'More info' }).getAttribute('aria-expanded')).toBe(
-      'false',
-    );
-
-    rerender(
-      <Collapsible open onOpenChange={() => {}} trigger="More info">
-        Body content
-      </Collapsible>,
-    );
-    expect(screen.getByRole('button', { name: 'More info' }).getAttribute('aria-expanded')).toBe(
-      'true',
-    );
-  });
-
-  it('calls onOpenChange with the toggled value when the trigger is clicked', () => {
-    const onOpenChange = vi.fn();
-    render(
-      <Collapsible open={false} onOpenChange={onOpenChange} trigger="More info">
-        Body content
-      </Collapsible>,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'More info' }));
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-
-  it('marks collapsed content inert', () => {
-    render(
-      <Collapsible open={false} onOpenChange={() => {}} trigger="More info">
-        Body content
-      </Collapsible>,
-    );
-    const content = screen.getByText('Body content').closest('[inert]');
-    expect(content).not.toBeNull();
-  });
-
-  it('does not mark expanded content inert', () => {
-    render(
-      <Collapsible open onOpenChange={() => {}} trigger="More info">
-        Body content
-      </Collapsible>,
-    );
-    const content = screen.getByText('Body content').closest('[inert]');
-    expect(content).toBeNull();
-  });
-
-  it('associates the trigger with the content via aria-controls', () => {
-    render(
-      <Collapsible open onOpenChange={() => {}} trigger="More info" id="details">
-        Body content
-      </Collapsible>,
-    );
-    const button = screen.getByRole('button', { name: 'More info' });
-    const controlsId = button.getAttribute('aria-controls');
-    expect(controlsId).toBeTruthy();
-    expect(document.getElementById(controlsId ?? '')).not.toBeNull();
-  });
-});

package/src/components/ColorPicker/ColorPicker.module.css

@@ -1,132 +0,0 @@
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sv-space-2);
-}
-
-.swatch {
-  width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  border-radius: var(--sv-radius-md);
-  border: 2px solid transparent;
-  padding: 0;
-  cursor: pointer;
-}
-
-.swatch:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.swatchSelected {
-  border-color: var(--sv-color-accent);
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 1px;
-}
-
-/* Dashed/outlined rather than filled — there's no real color value to paint
-   for "no color". */
-.swatchNone {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--sv-color-surface-sunken);
-  border: 2px dashed var(--sv-color-border-strong);
-  color: var(--sv-color-text-muted);
-}
-
-.swatchNone.swatchSelected {
-  border-style: solid;
-}
-
-/* Wraps the native color input so a decorative "+" glyph can sit on top of
-   it while it's empty (a native `<input type="color">` can't have DOM
-   children of its own) and so the same `.swatchSelected` ring used above can
-   be applied to the wrapper without fighting the input's own default
-   focus/border rendering. */
-.customWrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  border-radius: var(--sv-radius-md);
-  border: 2px solid transparent;
-}
-
-.customWrapper.swatchSelected {
-  /* Same visual treatment as .swatchSelected, but scoped to the wrapper —
-     the input itself is styled borderless below, so this is the only
-     border/outline actually rendered for the custom trigger. */
-  border-color: var(--sv-color-accent);
-}
-
-/* Before a custom color is actually chosen — same dashed/outlined treatment
-   as .swatchNone, since there's equally no real color value to paint yet. */
-.customWrapperEmpty {
-  background-color: var(--sv-color-surface-sunken);
-  border-style: dashed;
-  border-color: var(--sv-color-border-strong);
-}
-
-/* Reset the native control to a plain color swatch matching the curated
-   ones above — browsers default `<input type="color">` to its own chrome
-   (a bordered box with visible padding around the swatch). */
-.customInput {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: none;
-  border-radius: var(--sv-radius-md);
-  cursor: pointer;
-  background: none;
-}
-
-/* Invisible but still clickable/focusable while empty — the input always
-   holds *some* real hex internally (no true empty state), but that value
-   was never actually chosen by the user, so it must never render as this
-   trigger's own swatch color. Becomes visible again the moment a real
-   choice makes it into `value` (`.customWrapperEmpty` stops applying). */
-.customWrapperEmpty .customInput {
-  opacity: 0;
-}
-
-.customInput:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.customWrapperEmpty .customInput:disabled {
-  opacity: 0;
-}
-
-.customInput::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: var(--sv-radius-md);
-}
-
-.customInput::-webkit-color-swatch {
-  border: none;
-  border-radius: var(--sv-radius-md);
-}
-
-.customInput::-moz-color-swatch {
-  border: none;
-  border-radius: var(--sv-radius-md);
-}
-
-/* `inset: 0` alone doesn't center this — the icon already has an explicit
-   width/height (its own size class), so an absolutely positioned box with
-   all four insets pinned to 0 resolves against top/left rather than
-   stretching to let flex centering do anything, landing the glyph in the
-   corner instead of the middle. `top/left: 50%` + `translate(-50%, -50%)`
-   centers a fixed-size element regardless of its own dimensions. */
-.customPlusIcon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--sv-color-text-muted);
-  pointer-events: none;
-}

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ColorPicker } from './ColorPicker';
-
-const meta = {
-  title: 'Components/ColorPicker',
-  component: ColorPicker,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A row of curated swatch suggestions plus a native `<input type="color">` trigger for picking any color, not just the curated set — every browser\'s own full-spectrum picker, guaranteed valid hex output, no bespoke a11y work.',
-      },
-    },
-  },
-  args: {
-    swatches: [],
-    value: null,
-    onChange: () => {},
-    onSelectionComplete: () => {},
-    'aria-label': 'Color',
-  },
-} satisfies Meta<typeof ColorPicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const SWATCHES = [
-  { label: 'Sky', value: '#b5c9e8' },
-  { label: 'Sage', value: '#c9e0c4' },
-  { label: 'Sand', value: '#e8d3b5' },
-  { label: 'Clay', value: '#e0c4c4' },
-  { label: 'Lilac', value: '#d8c4e0' },
-  { label: 'Ink', value: '#3b5166' },
-  { label: 'Forest', value: '#3f5c4c' },
-];
-
-function ControlledColorPicker({
-  initial = null,
-  allowNone = false,
-}: {
-  initial?: string | null;
-  allowNone?: boolean;
-}) {
-  const [value, setValue] = useState<string | null>(initial);
-  return (
-    <ColorPicker
-      swatches={SWATCHES}
-      value={value}
-      onChange={setValue}
-      allowNone={allowNone}
-      aria-label="Board color"
-    />
-  );
-}
-
-export const Default: Story = {
-  render: () => <ControlledColorPicker initial="#c9e0c4" />,
-};
-
-export const WithNoColorOption: Story = {
-  render: () => <ControlledColorPicker allowNone />,
-};
-
-export const CustomColorSelected: Story = {
-  render: () => <ControlledColorPicker initial="#7a3fd6" />,
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <ColorPicker
-      swatches={SWATCHES}
-      value="#b5c9e8"
-      onChange={() => {}}
-      aria-label="Board color"
-      disabled
-    />
-  ),
-};

package/src/components/ColorPicker/ColorPicker.tsx

@@ -1,157 +0,0 @@
-'use client';
-
-import { Icon } from '../Icon/Icon';
-import styles from './ColorPicker.module.css';
-
-export interface ColorPickerSwatch {
-  /** Accessible name and tooltip, e.g. "Sky". */
-  label: string;
-  /** 6-digit hex, e.g. "#b5c9e8". */
-  value: string;
-}
-
-export interface ColorPickerProps {
-  /** Curated quick-pick suggestions, in display order. */
-  swatches: readonly ColorPickerSwatch[];
-  /** Current hex value, or `null` for no color. Compared case-insensitively
-   *  against `swatches` — a value that doesn't match any swatch renders as
-   *  the active "custom" selection instead. */
-  value: string | null;
-  onChange: (value: string | null) => void;
-  /**
-   * Fires once after a discrete, complete pick — a swatch click or the "no
-   * color" click. Optional; most callers don't need it. Deliberately NOT
-   * fired from the native custom-color `<input type="color">`'s `onChange`
-   * — that can fire repeatedly while the user is still dragging inside the
-   * browser's own color dialog, so a caller using this to auto-close a
-   * wrapping `Popover` would otherwise slam it shut mid-adjustment.
-   */
-  onSelectionComplete?: () => void;
-  /** Shows a leading "no color" option. Off by default — most consumers
-   *  (anything painting a fixed-size chip) always need a real color; only
-   *  a board canvas-style consumer typically wants "none" as a real choice. */
-  allowNone?: boolean;
-  noneLabel?: string;
-  /** Accessible name for the native color-input trigger that lets a user
-   *  pick any color, not just a curated swatch. */
-  customLabel?: string;
-  disabled?: boolean;
-  'aria-label': string;
-  className?: string;
-}
-
-function normalize(hex: string): string {
-  return hex.toLowerCase();
-}
-
-/**
- * ColorPicker — a row of curated swatch suggestions plus a native
- * `<input type="color">` trigger for picking any color, not just the
- * curated set. The native color input is deliberately not a custom-built
- * hue/saturation picker: it already gives every browser's own full-spectrum
- * picker (with an eyedropper tool in most), guarantees valid hex output, and
- * needs no bespoke a11y work of its own.
- *
- * `value` drives which affordance reads as selected: a hex matching a
- * swatch highlights that swatch; a hex matching none of them highlights the
- * custom trigger instead (its own dial shows that color); `null` (only
- * meaningful with `allowNone`) highlights the "no color" option.
- *
- * The custom trigger shows a plain "+" on a neutral dashed box until a
- * genuinely custom color is active — it never previews an arbitrary dial
- * color the user hasn't actually chosen. The underlying native color input
- * still needs *some* real hex to hold internally at all times (it has no
- * true empty state), so that starting value stays invisible (`opacity: 0`
- * on the input itself) rather than painted as this trigger's own swatch.
- */
-export function ColorPicker({
-  swatches,
-  value,
-  onChange,
-  onSelectionComplete,
-  allowNone = false,
-  noneLabel = 'No color',
-  customLabel = 'Custom color',
-  disabled = false,
-  'aria-label': ariaLabel,
-  className,
-}: ColorPickerProps) {
-  const normalizedValue = value ? normalize(value) : null;
-  const matchedSwatch = swatches.find((s) => normalize(s.value) === normalizedValue);
-  const isCustomActive = normalizedValue !== null && !matchedSwatch;
-  // The native input always needs a real hex to display (it has no "empty"
-  // state) — the active custom color when there is one, otherwise a neutral
-  // starting point for whenever it's next opened.
-  const customDialValue = isCustomActive && value ? value : (swatches[0]?.value ?? '#000000');
-
-  return (
-    <div
-      className={[styles.row, className].filter(Boolean).join(' ')}
-      role="group"
-      aria-label={ariaLabel}
-    >
-      {allowNone && (
-        <button
-          type="button"
-          role="radio"
-          aria-checked={value === null}
-          aria-label={noneLabel}
-          title={noneLabel}
-          disabled={disabled}
-          className={[styles.swatch, styles.swatchNone, value === null ? styles.swatchSelected : '']
-            .filter(Boolean)
-            .join(' ')}
-          onClick={() => {
-            onChange(null);
-            onSelectionComplete?.();
-          }}
-        >
-          <Icon name="x" size="sm" aria-hidden={true} />
-        </button>
-      )}
-      {swatches.map((s) => (
-        <button
-          key={s.value}
-          type="button"
-          role="radio"
-          aria-checked={normalize(s.value) === normalizedValue}
-          aria-label={s.label}
-          title={s.label}
-          disabled={disabled}
-          className={[
-            styles.swatch,
-            normalize(s.value) === normalizedValue ? styles.swatchSelected : '',
-          ]
-            .filter(Boolean)
-            .join(' ')}
-          style={{ backgroundColor: s.value }}
-          onClick={() => {
-            onChange(s.value);
-            onSelectionComplete?.();
-          }}
-        />
-      ))}
-      <span
-        className={[
-          styles.customWrapper,
-          isCustomActive ? styles.swatchSelected : styles.customWrapperEmpty,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <input
-          type="color"
-          className={styles.customInput}
-          aria-label={customLabel}
-          title={customLabel}
-          disabled={disabled}
-          value={customDialValue}
-          onChange={(e) => onChange(e.target.value)}
-        />
-        {!isCustomActive && (
-          <Icon name="plus" size="sm" aria-hidden={true} className={styles.customPlusIcon} />
-        )}
-      </span>
-    </div>
-  );
-}

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

@@ -1,117 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { ColorPicker } from '../ColorPicker';
-
-afterEach(cleanup);
-
-const SWATCHES = [
-  { label: 'Sky', value: '#b5c9e8' },
-  { label: 'Sage', value: '#c9e0c4' },
-];
-
-describe('ColorPicker', () => {
-  it('renders a swatch button per entry', () => {
-    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
-    expect(screen.getByRole('radio', { name: 'Sky' })).toBeTruthy();
-    expect(screen.getByRole('radio', { name: 'Sage' })).toBeTruthy();
-  });
-
-  it('marks the swatch matching value as checked', () => {
-    render(
-      <ColorPicker swatches={SWATCHES} value="#c9e0c4" onChange={() => {}} aria-label="Color" />,
-    );
-    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('true');
-    expect(screen.getByRole('radio', { name: 'Sky' }).getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('matches swatches case-insensitively', () => {
-    render(
-      <ColorPicker swatches={SWATCHES} value="#C9E0C4" onChange={() => {}} aria-label="Color" />,
-    );
-    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('calls onChange with the swatch value when clicked', () => {
-    const onChange = vi.fn();
-    render(<ColorPicker swatches={SWATCHES} value={null} onChange={onChange} aria-label="Color" />);
-    fireEvent.click(screen.getByRole('radio', { name: 'Sky' }));
-    expect(onChange).toHaveBeenCalledWith('#b5c9e8');
-  });
-
-  it('does not render a "no color" option by default', () => {
-    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
-    expect(screen.queryByRole('radio', { name: 'No color' })).toBeNull();
-  });
-
-  it('renders and wires up the "no color" option when allowNone is set', () => {
-    const onChange = vi.fn();
-    render(
-      <ColorPicker
-        swatches={SWATCHES}
-        value="#b5c9e8"
-        onChange={onChange}
-        allowNone
-        aria-label="Color"
-      />,
-    );
-    const noneOption = screen.getByRole('radio', { name: 'No color' });
-    expect(noneOption.getAttribute('aria-checked')).toBe('false');
-    fireEvent.click(noneOption);
-    expect(onChange).toHaveBeenCalledWith(null);
-  });
-
-  it('marks "no color" as checked when value is null', () => {
-    render(
-      <ColorPicker
-        swatches={SWATCHES}
-        value={null}
-        onChange={() => {}}
-        allowNone
-        aria-label="Color"
-      />,
-    );
-    expect(screen.getByRole('radio', { name: 'No color' }).getAttribute('aria-checked')).toBe(
-      'true',
-    );
-  });
-
-  it('renders the native color input trigger for custom colors', () => {
-    render(<ColorPicker swatches={SWATCHES} value={null} onChange={() => {}} aria-label="Color" />);
-    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
-    expect(custom.type).toBe('color');
-  });
-
-  it('shows the custom value on the native input when it matches no swatch', () => {
-    render(
-      <ColorPicker swatches={SWATCHES} value="#7a3fd6" onChange={() => {}} aria-label="Color" />,
-    );
-    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
-    expect(custom.value).toBe('#7a3fd6');
-    // Neither curated swatch should read as checked once a custom color is active.
-    expect(screen.getByRole('radio', { name: 'Sky' }).getAttribute('aria-checked')).toBe('false');
-    expect(screen.getByRole('radio', { name: 'Sage' }).getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('calls onChange with the picked value when the custom input changes', () => {
-    const onChange = vi.fn();
-    render(<ColorPicker swatches={SWATCHES} value={null} onChange={onChange} aria-label="Color" />);
-    const custom = screen.getByLabelText('Custom color') as HTMLInputElement;
-    fireEvent.change(custom, { target: { value: '#123456' } });
-    expect(onChange).toHaveBeenCalledWith('#123456');
-  });
-
-  it('disables every swatch and the custom input when disabled', () => {
-    render(
-      <ColorPicker
-        swatches={SWATCHES}
-        value={null}
-        onChange={() => {}}
-        disabled
-        aria-label="Color"
-      />,
-    );
-    expect((screen.getByRole('radio', { name: 'Sky' }) as HTMLButtonElement).disabled).toBe(true);
-    expect((screen.getByLabelText('Custom color') as HTMLInputElement).disabled).toBe(true);
-  });
-});