@sovereignfs/ui 0.21.3 → 0.23.0

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,68 @@
+'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>
+      <label
+        htmlFor={inputId}
+        className={[
+          styles.label,
+          strikeThrough && checked ? styles.struck : '',
+          disabled ? styles.disabled : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {label}
+      </label>
+    </span>
+  );
+}

package/src/components/DragHandleRow/DragHandleRow.module.css

@@ -0,0 +1,51 @@
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-1);
+  position: relative;
+}
+
+.row:not(:hover) .handle,
+.row:not(:focus-within) .handle {
+  opacity: 0;
+}
+
+.handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: 2px;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: var(--sv-radius-sm);
+  color: var(--sv-color-text-muted);
+  cursor: grab;
+  opacity: 1;
+  transition: opacity 0.1s ease;
+}
+
+.handle:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+
+.icon {
+  pointer-events: none;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.dragging {
+  opacity: 0.5;
+}

package/src/components/DragHandleRow/DragHandleRow.tsx

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './DragHandleRow.module.css';
+
+export interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  /** Pass drag-listener and drag-control props from dnd-kit here. */
+  handleProps?: HTMLAttributes<HTMLButtonElement>;
+  isDragging?: boolean;
+}
+
+/**
+ * A row wrapper that surfaces a drag handle on the left.
+ * Consumers attach dnd-kit's useSortable listeners to `handleProps`.
+ */
+export function DragHandleRow({
+  children,
+  handleProps,
+  isDragging,
+  className,
+  ...rest
+}: DragHandleRowProps) {
+  return (
+    <div
+      {...rest}
+      className={[styles.row, isDragging ? styles.dragging : '', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <button
+        type="button"
+        aria-label="Drag to reorder"
+        className={styles.handle}
+        tabIndex={-1}
+        {...handleProps}
+      >
+        <DragIcon />
+      </button>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+function DragIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      aria-hidden="true"
+      className={styles.icon}
+    >
+      {/* Two columns of three dots */}
+      {[3, 7, 11].map((cy) =>
+        [4, 10].map((cx) => (
+          <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.2} fill="currentColor" />
+        )),
+      )}
+    </svg>
+  );
+}

package/src/components/FormField/FormField.module.css

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--sv-space-1);
+  /* Every local .field/.fieldGroup class this component replaced set this
+     explicitly. Without it, a parent with align-items: flex-start (needed so
+     submit buttons don't stretch full-width) shrink-wraps this wrapper to its
+     content's intrinsic width instead of filling the available space. */
+  width: 100%;
 }
 
 .label {

package/src/components/FormField/FormField.tsx

@@ -2,32 +2,59 @@ import type { ReactNode } from 'react';
 import { useId } from 'react';
 import styles from './FormField.module.css';
 
+/** Props to spread onto the field's actual form control. */
+export interface FormFieldRenderProps {
+  id: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  required?: boolean;
+}
+
 export interface FormFieldProps {
   label: string;
   hint?: string;
   error?: string;
-  htmlFor?: string;
+  /** Explicit control id. Auto-generated via `useId()` when omitted. */
+  id?: string;
   required?: boolean;
-  children: ReactNode;
   className?: string;
+  /** Render prop — receives the props that must be spread onto the control
+   * so the label, hint, and error stay associated with it. */
+  children: (field: FormFieldRenderProps) => ReactNode;
 }
 
+/**
+ * FormField — accessible label + hint/error wrapper for a single form control.
+ * Wires `htmlFor`/`id` and `aria-describedby`/`aria-invalid` onto the control
+ * itself (via the render-prop `field` object), not a surrounding element, so
+ * screen readers reliably announce the hint or error as part of the control.
+ */
 export function FormField({
   label,
   hint,
   error,
-  htmlFor,
+  id,
   required = false,
-  children,
   className,
+  children,
 }: FormFieldProps) {
-  const hintId = useId();
-  const errorId = useId();
-  const describedBy = [hint && hintId, error && errorId].filter(Boolean).join(' ') || undefined;
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const hintId = `${fieldId}-hint`;
+  const errorId = `${fieldId}-error`;
+  const describedBy =
+    [hint && !error && hintId, error && errorId].filter(Boolean).join(' ') || undefined;
+
+  const field: FormFieldRenderProps = {
+    id: fieldId,
+    'aria-describedby': describedBy,
+    'aria-invalid': error ? true : undefined,
+    required: required || undefined,
+  };
 
   return (
     <div className={[styles.field, className].filter(Boolean).join(' ')}>
-      <label className={styles.label} htmlFor={htmlFor}>
+      <label className={styles.label} htmlFor={fieldId}>
         {label}
         {required && (
           <span className={styles.required} aria-hidden="true">
@@ -35,9 +62,7 @@ export function FormField({
           </span>
         )}
       </label>
-      {/* Clone the child to inject aria-describedby — or just render children
-          and let the consumer wire htmlFor/id themselves */}
-      <div aria-describedby={describedBy}>{children}</div>
+      {children(field)}
       {hint && !error && (
         <p id={hintId} className={styles.hint}>
           {hint}

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

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { FormField } from '../FormField';
+
+afterEach(cleanup);
+
+describe('FormField', () => {
+  it('associates the label with the control via htmlFor/id', () => {
+    render(
+      <FormField label="Email" id="email">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    expect(screen.getByLabelText('Email')).toBeDefined();
+  });
+
+  it('generates an id when none is provided', () => {
+    render(<FormField label="Email">{(field) => <input {...field} />}</FormField>);
+    const input = screen.getByLabelText('Email') as HTMLInputElement;
+    expect(input.id).toBeTruthy();
+  });
+
+  it('wires the hint to the control via aria-describedby', () => {
+    render(
+      <FormField label="Username" hint="Letters and numbers only." id="username">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    const input = screen.getByLabelText('Username');
+    const hint = screen.getByText('Letters and numbers only.');
+    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
+  });
+
+  it('wires the error to the control via aria-describedby and marks it invalid', () => {
+    render(
+      <FormField label="Password" error="Too short." id="password">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    const input = screen.getByLabelText('Password');
+    const error = screen.getByText('Too short.');
+    expect(input.getAttribute('aria-describedby')).toBe(error.id);
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('renders the error with role="alert"', () => {
+    render(
+      <FormField label="Password" error="Too short." id="password">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    expect(screen.getByRole('alert').textContent).toBe('Too short.');
+  });
+
+  it('hides the hint when an error is present', () => {
+    render(
+      <FormField label="Password" hint="At least 8 characters." error="Too short." id="password">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    expect(screen.queryByText('At least 8 characters.')).toBeNull();
+  });
+
+  it('shows a required indicator and sets required on the control', () => {
+    render(
+      <FormField label="Full name" required id="name">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    const input = screen.getByLabelText(/Full name/) as HTMLInputElement;
+    expect(input.required).toBe(true);
+  });
+
+  it('does not set aria-describedby when there is no hint or error', () => {
+    render(
+      <FormField label="Nickname" id="nickname">
+        {(field) => <input {...field} />}
+      </FormField>,
+    );
+    expect(screen.getByLabelText('Nickname').hasAttribute('aria-describedby')).toBe(false);
+  });
+});

package/src/components/Input/Input.module.css

@@ -14,6 +14,16 @@
     box-shadow 0.15s ease;
 }
 
+/* iOS Safari (tab and standalone PWA) auto-zooms the page whenever a focused
+   input's font-size is below 16px. The viewport intentionally allows pinch-zoom
+   (no maximum-scale — an accessibility requirement), so the only way to stop the
+   focus-zoom is to render the field at >=16px on touch devices. */
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
 .input::placeholder {
   color: var(--sv-color-text-muted);
 }

package/src/components/Select/Select.module.css

@@ -33,6 +33,15 @@
   border-radius: var(--sv-radius-sm);
 }
 
+/* iOS Safari zooms the page when a <select> under 16px receives focus, exactly
+   as it does for text inputs. Lift the default size to >=16px on touch devices;
+   the compact `.sm` variant is for dense desktop tables and is left untouched. */
+@media (pointer: coarse) {
+  .select {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
 .select:focus-visible {
   outline: none;
   border-color: var(--sv-color-accent);

package/src/components/Select/Select.tsx

@@ -12,13 +12,21 @@ export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>
  * Uses the native picker on mobile — no custom dropdown, maximum a11y coverage.
  *
  * RSC-safe: presentational, no hooks, forwards all native select props.
+ *
+ * `className` sizes the outer box (the wrapper), not the `<select>` itself —
+ * the chevron is absolutely positioned against the wrapper, so a className
+ * that constrains only the `<select>` (e.g. `max-width`) shrinks the select
+ * while the wrapper (and thus the chevron) stays full width, leaving the
+ * chevron stranded past the visible box.
  */
 export function Select({ className, size = 'md', children, ...rest }: SelectProps) {
   return (
     <div
-      className={[styles.wrapper, size === 'sm' ? styles.sm : undefined].filter(Boolean).join(' ')}
+      className={[styles.wrapper, size === 'sm' ? styles.sm : undefined, className]
+        .filter(Boolean)
+        .join(' ')}
     >
-      <select className={[styles.select, className].filter(Boolean).join(' ')} {...rest}>
+      <select className={styles.select} {...rest}>
         {children}
       </select>
       <svg

package/src/components/Textarea/Textarea.module.css

@@ -0,0 +1,39 @@
+.textarea {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  resize: vertical;
+  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 {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  border-color: var(--sv-color-border);
+  cursor: default;
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  resize: none;
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,15 @@
+import type { TextareaHTMLAttributes } from 'react';
+import styles from './Textarea.module.css';
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+/**
+ * Textarea — the primitive multi-line text field. Presentational and
+ * RSC-safe: it forwards all native textarea props to the underlying
+ * `<textarea>`. Styling references `--sv-*` tokens via CSS Modules; there
+ * are no hardcoded values.
+ */
+export function Textarea({ className, rows = 4, ...rest }: TextareaProps) {
+  const classes = [styles.textarea, className].filter(Boolean).join(' ');
+  return <textarea rows={rows} className={classes} {...rest} />;
+}

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

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Textarea } from '../Textarea';
+
+afterEach(cleanup);
+
+describe('Textarea', () => {
+  it('renders and forwards native props', () => {
+    render(<Textarea placeholder="Bio" defaultValue="Hello" />);
+    const textarea = screen.getByPlaceholderText('Bio') as HTMLTextAreaElement;
+    expect(textarea.value).toBe('Hello');
+  });
+
+  it('defaults to 4 rows', () => {
+    render(<Textarea aria-label="field" />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(4);
+  });
+
+  it('honours an explicit rows value', () => {
+    render(<Textarea aria-label="field" rows={8} />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(8);
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(<Textarea aria-label="field" disabled />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).disabled).toBe(true);
+  });
+});

package/src/components/Toast/Toast.module.css

@@ -80,7 +80,7 @@
 
 .message {
   font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-secondary);
+  color: var(--sv-color-text-muted);
   margin-top: var(--sv-space-1);
   line-height: 1.4;
 }
@@ -91,9 +91,9 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--sv-color-text-tertiary);
+  color: var(--sv-color-text-subtle);
   line-height: 1;
-  font-size: var(--sv-font-size-base);
+  font-size: var(--sv-font-size-md);
 }
 
 .close:hover {

package/src/components/Toggle/Toggle.module.css

@@ -40,7 +40,7 @@
   background: var(--sv-white);
   transition: transform 0.15s ease;
   left: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--sv-shadow-control);
 }
 
 .on .thumb {

package/src/index.ts

@@ -21,6 +21,8 @@ export { Button } from './components/Button/Button';
 export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button/Button';
 export { Input } from './components/Input/Input';
 export type { InputProps } from './components/Input/Input';
+export { Textarea } from './components/Textarea/Textarea';
+export type { TextareaProps } from './components/Textarea/Textarea';
 export { Dialog } from './components/Dialog/Dialog';
 export type { DialogProps, DialogSize } from './components/Dialog/Dialog';
 export { Drawer } from './components/Drawer/Drawer';
@@ -30,7 +32,7 @@ export type { ToastItem, ToastContextValue } from './components/Toast/Toast';
 export { Card } from './components/Card/Card';
 export type { CardProps } from './components/Card/Card';
 export { FormField } from './components/FormField/FormField';
-export type { FormFieldProps } from './components/FormField/FormField';
+export type { FormFieldProps, FormFieldRenderProps } from './components/FormField/FormField';
 export { PageHeader } from './components/PageHeader/PageHeader';
 export type { PageHeaderProps } from './components/PageHeader/PageHeader';
 export { EmptyState } from './components/EmptyState/EmptyState';
@@ -43,3 +45,7 @@ export { NavTabs } from './components/NavTabs/NavTabs';
 export type { NavTabsProps, NavTabItem } from './components/NavTabs/NavTabs';
 export { Tooltip } from './components/Tooltip/Tooltip';
 export type { TooltipProps } from './components/Tooltip/Tooltip';
+export { Checkbox } from './components/Checkbox/Checkbox';
+export type { CheckboxProps } from './components/Checkbox/Checkbox';
+export { DragHandleRow } from './components/DragHandleRow/DragHandleRow';
+export type { DragHandleRowProps } from './components/DragHandleRow/DragHandleRow';

package/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Checkbox } from '../components/Checkbox/Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onChange={setChecked} label="Task title" />;
+  },
+};
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return <Checkbox checked={checked} onChange={setChecked} label="Already done" />;
+  },
+};
+
+export const WithStrikeThrough: Story = {
+  name: 'Strike-through on complete',
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox checked={checked} onChange={setChecked} label="Click to complete" strikeThrough />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <Checkbox checked={false} onChange={() => {}} label="Cannot interact" disabled />,
+};
+
+export const DisabledChecked: Story = {
+  render: () => <Checkbox checked onChange={() => {}} label="Locked complete" disabled />,
+};