@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/CheckableListRow/CheckableListRow.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import type { KeyboardEvent, ReactNode } from 'react';
-import styles from './CheckableListRow.module.css';
-
-export interface CheckableListRowProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  label: string;
-  /** Leading icon, e.g. a per-item `<Icon>`. */
-  icon?: ReactNode;
-  /** Trailing content, e.g. a quantity, a `QuantityStepper`, or a badge. */
-  trailing?: ReactNode;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * CheckableListRow — a whole-row tap target that toggles a checked state,
- * with strike-through on the label when checked. Built for "tap the row to
- * mark it done" lists (Sovereign Shopper's tap-to-buy, SHP-07) where the
- * checkbox itself is too small a target on mobile and the row already has
- * nothing else competing for the tap.
- *
- * Renders as `role="checkbox"` on the row itself rather than composing
- * `Checkbox`'s native `<input>` — nesting a real checkbox input inside the
- * row's own click handler would mean two overlapping interactive elements
- * (invalid HTML, and the input's own click would double-fire the row's
- * toggle). The visual box matches `Checkbox`'s styling for consistency.
- *
- * `trailing` content (e.g. a `QuantityStepper`) is rendered outside the
- * `role="checkbox"` element so its own interactive controls (+/- buttons)
- * don't sit inside another interactive element either — clicking those
- * doesn't toggle the row.
- */
-export function CheckableListRow({
-  checked,
-  onCheckedChange,
-  label,
-  icon,
-  trailing,
-  disabled = false,
-  className,
-}: CheckableListRowProps) {
-  function toggle() {
-    if (!disabled) onCheckedChange(!checked);
-  }
-
-  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      toggle();
-    }
-  }
-
-  return (
-    <div className={[styles.row, className].filter(Boolean).join(' ')}>
-      <div
-        role="checkbox"
-        aria-checked={checked}
-        aria-label={label}
-        aria-disabled={disabled || undefined}
-        tabIndex={disabled ? -1 : 0}
-        className={styles.tapTarget}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-      >
-        <span className={[styles.box, checked ? styles.checked : ''].filter(Boolean).join(' ')}>
-          {checked && (
-            <svg className={styles.tick} viewBox="0 0 10 8" fill="none" aria-hidden="true">
-              <path
-                d="M1 4l3 3 5-6"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-        </span>
-        {icon && <span className={styles.icon}>{icon}</span>}
-        <span className={[styles.label, checked ? styles.struck : ''].filter(Boolean).join(' ')}>
-          {label}
-        </span>
-      </div>
-      {trailing && <span className={styles.trailing}>{trailing}</span>}
-    </div>
-  );
-}

package/src/components/Checkbox/Checkbox.module.css

@@ -1,111 +0,0 @@
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  cursor: pointer;
-}
-
-/* The visual box. Sizing audit: reviewed against the rest of this scale's
-   compact controls. Kept the 18px box unchanged — deliberately on the
-   larger side for touch-friendliness, not a gap to close. */
-.box {
-  --checkbox-box-size: 18px;
-  position: relative;
-  flex-shrink: 0;
-  width: var(--checkbox-box-size);
-  height: var(--checkbox-box-size);
-  border-radius: var(--sv-radius-sm);
-  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 {
-  background-color: var(--sv-color-accent);
-  border-color: var(--sv-color-accent);
-  color: var(--sv-white);
-}
-
-/* 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 box — consumers (e.g. task rows) align the box to the
-   pixel against header icons, so its visual footprint and layout must stay
-   identical. Gated to (pointer: coarse), the *primary* pointer, so a
-   touchscreen laptop with mouse/trackpad as primary keeps desktop density. */
-@media (pointer: coarse) {
-  .input {
-    inset: calc((var(--checkbox-box-size) - var(--sv-touch-target-min, 44px)) / 2);
-  }
-}
-
-.input:focus-visible + .tick,
-.input:focus-visible {
-  outline: none;
-}
-
-.box:has(.input:focus-visible) {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.tick {
-  width: 10px;
-  height: 8px;
-  pointer-events: none;
-}
-
-/* Label */
-.label {
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.15s ease;
-  /* Strike-through animates via clip-path on a pseudo-element */
-  position: relative;
-}
-
-.label::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 100%;
-  height: 1.5px;
-  background: var(--sv-color-text-muted);
-  transform: scaleX(0);
-  transform-origin: left center;
-  transition: transform 0.2s ease;
-}
-
-.struck {
-  color: var(--sv-color-text-muted);
-}
-
-.struck::after {
-  transform: scaleX(1);
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import type { InputHTMLAttributes } from 'react';
-import styles from './Checkbox.module.css';
-
-export interface CheckboxProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'onChange'
-> {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label: string;
-  /** Renders the label with a strike-through when checked. */
-  strikeThrough?: boolean;
-  disabled?: boolean;
-}
-
-export function Checkbox({
-  checked,
-  onChange,
-  label,
-  strikeThrough = false,
-  disabled,
-  className,
-  id,
-  ...rest
-}: CheckboxProps) {
-  const inputId = id ?? `checkbox-${label.toLowerCase().replace(/\s+/g, '-')}`;
-
-  return (
-    <span className={[styles.root, className].filter(Boolean).join(' ')}>
-      <span className={[styles.box, checked ? styles.checked : ''].filter(Boolean).join(' ')}>
-        <input
-          {...rest}
-          id={inputId}
-          type="checkbox"
-          checked={checked}
-          disabled={disabled}
-          className={styles.input}
-          onChange={(e) => onChange(e.target.checked)}
-        />
-        {checked && (
-          <svg className={styles.tick} viewBox="0 0 10 8" fill="none" aria-hidden="true">
-            <path
-              d="M1 4l3 3 5-6"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-      </span>
-      {/* Callers pass label="" for icon-only/screen-reader-only usage (an
-          aria-label on the Checkbox's own root covers accessibility in that
-          case) — omitting the element entirely, rather than rendering an
-          empty <label>, matters because .root's flex `gap` still applies
-          between .box and a rendered-but-empty label, silently adding an
-          extra --sv-space-2 of invisible space after the checkbox that
-          every icon-only consumer was unknowingly stacking on top of their
-          own layout's spacing. */}
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={[
-            styles.label,
-            strikeThrough && checked ? styles.struck : '',
-            disabled ? styles.disabled : '',
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          {label}
-        </label>
-      )}
-    </span>
-  );
-}

package/src/components/CodeTextarea/CodeTextarea.module.css

@@ -1,53 +0,0 @@
-.textarea {
-  display: block;
-  width: 100%;
-  min-height: 180px;
-  max-height: min(70vh, 720px);
-  padding: var(--sv-space-3);
-  font-family: var(--sv-font-family-mono);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.6;
-  color: var(--sv-color-text-primary);
-  tab-size: 2;
-  white-space: pre;
-  overflow: auto;
-  resize: vertical;
-  background: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.textarea::placeholder {
-  color: var(--sv-color-text-muted);
-}
-
-.textarea:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.textarea:read-only {
-  color: var(--sv-color-text-muted);
-  background: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border);
-  cursor: default;
-}
-
-.textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  resize: none;
-}
-
-.invalid {
-  border-color: var(--sv-color-error-border);
-}
-
-.invalid:focus-visible {
-  border-color: var(--sv-color-error-border);
-  box-shadow: 0 0 0 2px var(--sv-color-error-border);
-}

package/src/components/CodeTextarea/CodeTextarea.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CodeTextarea } from './CodeTextarea';
-import { FormField } from '../FormField/FormField';
-
-const sampleMarkdown = `---
-title: Editorial calendar
-tags:
-  - planning
-  - launch
----
-
-# Launch notes
-
-Draft the announcement and verify links before publishing.`;
-
-const meta = {
-  title: 'Components/CodeTextarea',
-  component: CodeTextarea,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Monospace textarea for Markdown, YAML, JSON, and other whitespace-sensitive content.',
-      },
-    },
-  },
-  args: {
-    defaultValue: sampleMarkdown,
-    'aria-label': 'Markdown source',
-  },
-} satisfies Meta<typeof CodeTextarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithFormField: Story = {
-  render: () => (
-    <FormField label="Frontmatter" hint="YAML is saved exactly as typed." id="frontmatter-source">
-      {(field) => <CodeTextarea {...field} defaultValue={sampleMarkdown} />}
-    </FormField>
-  ),
-};
-
-export const Error: Story = {
-  render: () => (
-    <FormField label="Raw YAML" error="Line 3: expected a value." id="yaml-source">
-      {(field) => <CodeTextarea {...field} invalid defaultValue={'title:\ntags:\n  -'} />}
-    </FormField>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    defaultValue: sampleMarkdown,
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    defaultValue: Array.from({ length: 24 }, (_, index) => `- item-${index + 1}: pending`).join(
-      '\n',
-    ),
-  },
-};
-
-export const Mobile: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  args: {
-    defaultValue: sampleMarkdown,
-  },
-};

package/src/components/CodeTextarea/CodeTextarea.tsx

@@ -1,36 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react';
-import styles from './CodeTextarea.module.css';
-
-export interface CodeTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  invalid?: boolean;
-}
-
-/**
- * CodeTextarea — monospace textarea for Markdown, YAML, JSON, and other
- * whitespace-sensitive content. Pair with FormField for labels, hints, and
- * validation text.
- */
-export function CodeTextarea({
-  className,
-  rows = 12,
-  spellCheck = false,
-  wrap = 'off',
-  invalid = false,
-  'aria-invalid': ariaInvalid,
-  ...rest
-}: CodeTextareaProps) {
-  const classes = [styles.textarea, invalid ? styles.invalid : undefined, className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <textarea
-      rows={rows}
-      spellCheck={spellCheck}
-      wrap={wrap}
-      className={classes}
-      aria-invalid={ariaInvalid ?? (invalid || undefined)}
-      {...rest}
-    />
-  );
-}

package/src/components/Collapsible/Collapsible.module.css

@@ -1,70 +0,0 @@
-.root {
-  border-bottom: 1px solid var(--sv-color-border);
-}
-
-.trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-2);
-  width: 100%;
-  padding: var(--sv-space-3) 0;
-  border: none;
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  text-align: left;
-  cursor: pointer;
-}
-
-.trigger:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--sv-radius-sm);
-}
-
-.triggerLabel {
-  min-width: 0;
-}
-
-.chevron {
-  flex-shrink: 0;
-  color: var(--sv-color-text-muted);
-  transition: transform 0.2s ease;
-}
-
-.chevronOpen {
-  transform: rotate(180deg);
-}
-
-/* Expand/collapse via grid-template-rows (0fr closed, 1fr open) instead of
-   animating height, which can't transition to/from auto in CSS. The inner
-   wrapper clips content during the transition. */
-.contentWrapper {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.2s ease;
-}
-
-.contentWrapper[data-open='true'] {
-  grid-template-rows: 1fr;
-}
-
-.contentInner {
-  overflow: hidden;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-primary);
-}
-
-.contentWrapper[data-open='true'] .contentInner {
-  padding-bottom: var(--sv-space-3);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .contentWrapper,
-  .chevron {
-    transition: none;
-  }
-}

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,62 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Collapsible } from './Collapsible';
-
-const meta = {
-  title: 'Components/Collapsible',
-  component: Collapsible,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Single expand/collapse primitive. Independently useful (e.g. a "show more" toggle), and composed internally by Accordion.',
-      },
-    },
-  },
-  args: { open: false, onOpenChange: () => {}, trigger: 'Trigger', children: 'Content' },
-} satisfies Meta<typeof Collapsible>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <Collapsible open={open} onOpenChange={setOpen} trigger="What plugins are installed?">
-        Sovereign ships with the platform plugins (Console, Launcher, Account) plus whatever you've
-        declared in your own sovereign.plugins.json — nothing else is bundled by default.
-      </Collapsible>
-    );
-  },
-};
-
-export const StartsOpen: Story = {
-  render: () => {
-    const [open, setOpen] = useState(true);
-    return (
-      <Collapsible open={open} onOpenChange={setOpen} trigger="Advanced settings">
-        These settings are rarely needed — change them only if you know what you're doing.
-      </Collapsible>
-    );
-  },
-};
-
-export const LongContent: Story = {
-  render: () => {
-    const [open, setOpen] = useState(true);
-    return (
-      <Collapsible open={open} onOpenChange={setOpen} trigger="Full changelog">
-        <ul style={{ margin: 0, paddingLeft: 20 }}>
-          <li>Added component sizing alignment across the design system</li>
-          <li>Added RadioGroup, Slider, Progress, Table, Alert primitives</li>
-          <li>Added Breadcrumb, Pagination, and Kbd primitives</li>
-          <li>Added Accordion and Collapsible primitives</li>
-        </ul>
-      </Collapsible>
-    );
-  },
-};

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>
-  );
-}