@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/src/components/ActivityTimeline.tsx

@@ -0,0 +1,77 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type ActivityEvent = {
+  id: string;
+  /** Who did it. Initials default from the name (first letters of up to two words; a single CJK name → its first character). */
+  actor: { name: string; initials?: string | undefined };
+  /** What they did, without the name: "viewed Cap table.xlsx for 6 min". */
+  action: ReactNode;
+  /** Shown time ("14:02"); `dateTime` makes it a <time>. */
+  time: ReactNode;
+  dateTime?: string | undefined;
+  /** Extra detail after the time: "pages 2–4 most". */
+  detail?: ReactNode;
+};
+
+export type ActivityGroup = { label: ReactNode; events: ActivityEvent[] };
+
+export type ActivityTimelineProps = Omit<ComponentProps<'section'>, 'children'> & {
+  /** Grouped by time, newest first: Today, Yesterday, then dates. */
+  groups: ActivityGroup[];
+  /** Above the groups: the scope switch ("This share / Whole chain"). */
+  scope?: ReactNode;
+  /** Heading level of the group labels. @default 3 */
+  level?: 2 | 3 | 4 | undefined;
+  /** When there is nothing yet. */
+  empty?: ReactNode;
+};
+
+export function initialsOf(name: string): string {
+  const t = name.trim();
+  if (!t) return '?';
+  if (/[㐀-鿿]/.test(t[0]!)) return t[0]!;
+  return t
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}
+
+/** ActivityTimeline — who did what, grouped by time. */
+export function ActivityTimeline({ groups, scope, level = 3, empty, className, ...rest }: ActivityTimelineProps) {
+  const H = `h${level}` as const;
+  const any = groups.some((g) => g.events.length > 0);
+  return (
+    <section className={cn('flex flex-col gap-3', className)} {...rest}>
+      {scope}
+      {!any && empty}
+      {groups
+        .filter((g) => g.events.length > 0)
+        .map((g, gi) => (
+          <div key={gi} className="flex flex-col gap-2">
+            <H className="m-0 text-meta font-medium text-fg-secondary">{g.label}</H>
+            <ol className="m-0 flex list-none flex-col gap-3 p-0">
+              {g.events.map((e) => (
+                <li key={e.id} className="flex gap-2.5">
+                  <span aria-hidden className="grid size-6 shrink-0 place-items-center rounded-pill bg-sunk text-[10px] font-semibold text-fg">
+                    {e.actor.initials ?? initialsOf(e.actor.name)}
+                  </span>
+                  <div className="flex min-w-0 flex-col">
+                    <span className="text-ui text-fg">
+                      <span className="font-medium">{e.actor.name}</span> {e.action}
+                    </span>
+                    <span className="text-meta text-fg-secondary">
+                      {e.dateTime ? <time dateTime={e.dateTime}>{e.time}</time> : e.time}
+                      {e.detail && <> · {e.detail}</>}
+                    </span>
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </div>
+        ))}
+    </section>
+  );
+}

package/src/components/AsyncSelect.tsx

@@ -0,0 +1,205 @@
+import * as Popover from '@radix-ui/react-popover';
+import { Search, X } from 'lucide-react';
+import { useId, useRef, useState, type KeyboardEvent } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+import { controlFrame, controlInner } from './forms-control';
+import { Avatar, DEFAULT_LABELS, ListboxBody, type ListboxLabels, type ListItem } from './inputs-listbox';
+import { useDebouncedSearch } from './inputs-search';
+import { Spinner } from './Spinner';
+
+export type AsyncSelectProps = {
+  /** Look up matches; the signal aborts when newer input arrives. */
+  search: (query: string, signal: AbortSignal) => Promise<ListItem[]>;
+  value?: ListItem | null | undefined;
+  onChange?: ((item: ListItem | null) => void) | undefined;
+  /** Offer “Create …” for text that matches nothing exactly. */
+  onCreate?: ((query: string) => void | ListItem | Promise<ListItem | void>) | undefined;
+  /** @default "Search" */
+  placeholder?: string | undefined;
+  /** ms. @default 250 */
+  debounce?: number | undefined;
+  labels?: Partial<ListboxLabels> & { clear?: string | undefined };
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Start with this search typed and its results open. */
+  defaultQuery?: string | undefined;
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  id?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * AsyncSelect — choose one from a large or remote set (a customer, a
+ * project). Typing searches after a short pause and drops stale answers;
+ * a spinner shows until the answer comes, then results with their meta, a
+ * Create row, “nothing matches”, or an error with Retry. The choice
+ * becomes a card that clears with ×.
+ */
+export function AsyncSelect({
+  search,
+  value,
+  onChange,
+  onCreate,
+  placeholder = 'Search',
+  debounce = 250,
+  labels: labelsIn,
+  invalid,
+  disabled,
+  defaultQuery = '',
+  size,
+  id,
+  className,
+  ...aria
+}: AsyncSelectProps) {
+  const field = useField();
+  const auto = useId();
+  const listId = `as${auto}-list`;
+  const optionId = (i: number) => `as${auto}-o${i}`;
+  const labels = { ...DEFAULT_LABELS, ...labelsIn };
+  const [own, setOwn] = useState<ListItem | null>(null);
+  const chosen = value === undefined ? own : value;
+  const [query, setQuery] = useState(defaultQuery);
+  const [open, setOpen] = useState(defaultQuery !== '');
+  const [active, setActive] = useState(0);
+  const input = useRef<HTMLInputElement | null>(null);
+  const { status, result, retry } = useDebouncedSearch(query, search, { delay: debounce });
+  const items = status === 'done' ? (result ?? []) : [];
+  const q = query.trim();
+  const canCreate = Boolean(onCreate) && q.length > 0 && !items.some((i) => i.label.toLowerCase() === q.toLowerCase());
+  const count = items.length + (canCreate ? 1 : 0);
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const pick = (item: ListItem | null) => {
+    if (value === undefined) setOwn(item);
+    onChange?.(item);
+    setQuery('');
+    setOpen(false);
+  };
+  const choose = async (i: number) => {
+    if (i < items.length) return pick(items[i]!);
+    if (i === items.length && canCreate) {
+      const made = await onCreate!(q);
+      if (made && typeof made === 'object') pick(made);
+      else {
+        setQuery('');
+        setOpen(false);
+      }
+    }
+  };
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setOpen(true);
+      setActive((a) => Math.min(count - 1, a + 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActive((a) => Math.max(0, a - 1));
+    } else if (e.key === 'Enter' && open && count > 0) {
+      e.preventDefault();
+      void choose(active);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  };
+
+  if (chosen) {
+    return (
+      <div
+        className={cn(
+          'flex min-h-[38px] items-center gap-2.5 rounded-md border bg-sunk px-2 py-1.5 font-sans text-ui text-fg',
+          bad ? 'border-error' : 'border-rule-soft',
+          off && 'bg-well text-fg-secondary',
+          className,
+        )}
+      >
+        <Avatar item={chosen} className="size-8 rounded-sm bg-ink text-linen ink:bg-yellow-accent ink:text-ink" />
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span id={id ?? field?.id} className="truncate font-medium">
+            {chosen.label}
+          </span>
+          {chosen.meta && <span className="truncate text-meta text-fg-secondary">{chosen.meta}</span>}
+        </span>
+        {!off && (
+          <button
+            type="button"
+            aria-label={`${labelsIn?.clear ?? 'Clear'} ${chosen.label}`}
+            onClick={() => {
+              pick(null);
+              requestAnimationFrame(() => input.current?.focus());
+            }}
+            className="inline-grid shrink-0 cursor-pointer place-items-center rounded-xs p-0.5 text-fg-secondary outline-none hover:text-fg focus-visible:shadow-(--focus-ring)"
+          >
+            <X size={13} aria-hidden />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  const showList = open && q.length > 0;
+  return (
+    <Popover.Root open={showList} onOpenChange={setOpen}>
+      <Popover.Anchor asChild>
+        <div className={cn(controlFrame({ size, invalid: bad, disabled: off }), className)}>
+          <Search size={14} aria-hidden className="shrink-0 text-fg-secondary" />
+          <input
+            ref={input}
+            id={id ?? field?.id}
+            role="combobox"
+            aria-expanded={showList}
+            aria-controls={showList ? listId : undefined}
+            aria-autocomplete="list"
+            aria-activedescendant={showList && status === 'done' && count > 0 ? optionId(active) : undefined}
+            aria-invalid={bad || undefined}
+            aria-describedby={field?.describedBy}
+            aria-label={aria['aria-label']}
+            disabled={off}
+            value={query}
+            placeholder={placeholder}
+            autoComplete="off"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActive(0);
+              setOpen(true);
+            }}
+            onFocus={() => q && setOpen(true)}
+            onKeyDown={onKey}
+            className={controlInner}
+          />
+          {status === 'searching' && <Spinner size={12} className="text-fg-secondary" />}
+        </div>
+      </Popover.Anchor>
+      <Popover.Portal>
+        <Popover.Content
+          align="start"
+          sideOffset={6}
+          collisionPadding={12}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            if (e.target instanceof Node && input.current?.parentElement?.contains(e.target)) e.preventDefault();
+          }}
+          className="rise z-60 rounded-lg border border-rule bg-page p-1 font-sans [--motion-reveal:200ms]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <ListboxBody
+            id={listId}
+            optionId={optionId}
+            items={items}
+            active={active}
+            status={status}
+            query={q}
+            canCreate={canCreate}
+            labels={labels}
+            onActive={setActive}
+            onChoose={(i) => void choose(i)}
+            onRetry={retry}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,129 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type BreadcrumbItem = {
+  label: ReactNode;
+  /** A link; or use onSelect for in-app navigation. */
+  href?: string | undefined;
+  onSelect?: (() => void) | undefined;
+  /** A trailing tag on the current page: its format (PDF). */
+  tag?: ReactNode;
+};
+
+export type BreadcrumbProps = Omit<ComponentProps<'nav'>, 'children'> & {
+  items: BreadcrumbItem[];
+  /** What starts the trail — the workspace brand (on a customer domain it replaces the platform name). */
+  root?: ReactNode;
+  /** Beyond this many segments the middle folds into a menu. @default 4 */
+  max?: number | undefined;
+  /** @default "Breadcrumb" */
+  label?: string | undefined;
+  /** Accessible name of the fold button. @default "Show hidden folders" */
+  foldLabel?: string | undefined;
+  /** A line under the trail: the current item's status. */
+  status?: ReactNode;
+};
+
+const linkClass = 'cursor-pointer text-fg-secondary outline-none hover:text-fg hover:underline underline-offset-2 focus-visible:shadow-(--focus-ring) rounded-xs';
+
+function Crumb({ item }: { item: BreadcrumbItem }) {
+  if (item.href)
+    return (
+      <a href={item.href} onClick={item.onSelect} className={linkClass}>
+        {item.label}
+      </a>
+    );
+  if (item.onSelect)
+    return (
+      <button type="button" onClick={item.onSelect} className={linkClass}>
+        {item.label}
+      </button>
+    );
+  return <span className="text-fg-secondary">{item.label}</span>;
+}
+
+const Sep = () => (
+  <span aria-hidden className="text-fg-secondary">
+    /
+  </span>
+);
+
+/**
+ * Breadcrumb — where this page sits. The current page is the last segment
+ * and not a link; beyond four segments the middle folds into a menu. On a
+ * customer domain the trail starts at the workspace brand (root).
+ */
+export function Breadcrumb({ items, root, max = 4, label = 'Breadcrumb', foldLabel = 'Show hidden folders', status, className, ...rest }: BreadcrumbProps) {
+  const last = items[items.length - 1];
+  const before = items.slice(0, -1);
+  const total = items.length + (root ? 1 : 0);
+  const fold = total > max && before.length > 1;
+  // Folded: [root or the first ancestor] / … / parent / current.
+  const head = fold ? (root ? [] : before.slice(0, 1)) : before;
+  const folded = fold ? before.slice(root ? 0 : 1, -1) : [];
+  const tail = fold ? before.slice(-1) : [];
+  const segment = 'flex items-center gap-2';
+
+  return (
+    <nav aria-label={label} className={cn('flex flex-col gap-1.5', className)} {...rest}>
+      <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-ui">
+        {root && (
+          <li className={segment}>
+            {root}
+            {items.length > 0 && <Sep />}
+          </li>
+        )}
+        {head.map((it, i) => (
+          <li key={`h${i}`} className={segment}>
+            <Crumb item={it} />
+            <Sep />
+          </li>
+        ))}
+        {folded.length > 0 && (
+          <li className={segment}>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger
+                aria-label={foldLabel}
+                className="inline-grid h-6 min-w-6 cursor-pointer place-items-center rounded-sm bg-sunk px-1.5 text-meta font-semibold text-fg outline-none hover:bg-well focus-visible:shadow-(--focus-ring)"
+              >
+                …
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content align="start" sideOffset={6} className="z-50 min-w-[180px] rounded-lg border border-rule bg-page p-1.5 text-ui text-fg">
+                  {folded.map((it, i) => (
+                    <DropdownMenu.Item
+                      key={i}
+                      onSelect={() => {
+                        if (it.href) window.location.assign(it.href);
+                        else it.onSelect?.();
+                      }}
+                      className="flex h-8 cursor-pointer items-center rounded-md px-2.5 outline-none data-[highlighted]:bg-hover"
+                    >
+                      {it.label}
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+            <Sep />
+          </li>
+        )}
+        {tail.map((it, i) => (
+          <li key={`t${i}`} className={segment}>
+            <Crumb item={it} />
+            <Sep />
+          </li>
+        ))}
+        {last && (
+          <li aria-current="page" className="flex items-center gap-2 font-medium text-fg">
+            {last.label}
+            {last.tag && <span className="rounded-sm bg-sunk px-1.5 py-0.5 text-[11px] font-semibold text-fg">{last.tag}</span>}
+          </li>
+        )}
+      </ol>
+      {status && <div className="text-meta text-fg-secondary">{status}</div>}
+    </nav>
+  );
+}

package/src/components/Button.tsx

@@ -17,7 +17,9 @@ const button = cva(
     'rounded-md border border-transparent font-sans font-semibold leading-none',
     'transition-[background-color,border-color,color] duration-[120ms] ease-standard',
     'cursor-pointer outline-none focus-visible:shadow-(--focus-ring)',
-    'disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:opacity-40',
+    // Disabled sinks: the well with grey text (3.0 readme and design.cosx.co;
+    // the 3.0 Button source used opacity). "!" so hover never lifts it back.
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
   ],
   {
     variants: {
@@ -45,6 +47,17 @@ const button = cva(
       // Focus ring follows the ground.
       { ground: 'yellow', class: 'focus-visible:shadow-[0_0_0_3px_var(--yellow),0_0_0_5px_var(--ink)]' },
       { ground: 'ink', class: 'focus-visible:shadow-[0_0_0_3px_var(--ink),0_0_0_5px_var(--yellow)]' },
+      // Disabled: filled types sink into the well; outlined and text-only turn grey.
+      {
+        variant: ['primary', 'yellow', 'ink', 'danger'],
+        class:
+          'disabled:border-transparent! disabled:bg-well! disabled:text-fg-secondary! aria-disabled:border-transparent! aria-disabled:bg-well! aria-disabled:text-fg-secondary!',
+      },
+      {
+        variant: ['secondary', 'ghost'],
+        class:
+          'disabled:bg-transparent! disabled:text-fg-secondary! aria-disabled:bg-transparent! aria-disabled:text-fg-secondary! disabled:hover:border-[rgba(17,17,17,.18)] aria-disabled:hover:border-[rgba(17,17,17,.18)]',
+      },
     ],
     defaultVariants: { size: 'md', variant: 'primary', ground: 'auto' },
   },
@@ -141,7 +154,9 @@ export function Button({
       className={classes}
       style={lockedWidth ? { ...style, width: lockedWidth } : style}
       disabled={disabled && !disabledReason ? true : undefined}
-      aria-disabled={blocked || busy ? true : undefined}
+      // Busy is not disabled (spec: "busy and disabled are different states"):
+      // it keeps its look; aria-busy says so and repeat clicks are ignored below.
+      aria-disabled={blocked ? true : undefined}
       aria-busy={busy || undefined}
       title={blocked ? disabledReason : rest.title}
       onClick={(e) => {

package/src/components/ChoiceCards.tsx

@@ -0,0 +1,68 @@
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
+import { useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { definedAria } from './inputs-aria';
+
+export type Choice = {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** A glyph at the start (an Icon). */
+  icon?: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+export type ChoiceCardsProps = {
+  choices: Choice[];
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** Cards per row on wide screens; they stack on phones. @default 2 */
+  columns?: 2 | 3 | undefined;
+  'aria-label'?: string | undefined;
+  'aria-labelledby'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * ChoiceCards — a few weighty options, each a card with a title and a
+ * sentence (Add a person · Add an organisation). Radio semantics; the
+ * chosen card sits on the brand colour with an ink edge.
+ */
+export function ChoiceCards({ choices, value, defaultValue, onChange, columns = 2, className, ...aria }: ChoiceCardsProps) {
+  const [own, setOwn] = useState(defaultValue);
+  const current = value ?? own;
+  return (
+    <RadioPrimitive.Root
+      value={current ?? ''}
+      onValueChange={(v) => {
+        if (value === undefined) setOwn(v);
+        onChange?.(v);
+      }}
+      loop
+      {...definedAria(aria)}
+      className={cn('grid grid-cols-1 gap-3', columns === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2', className)}
+    >
+      {choices.map((c) => (
+        <RadioPrimitive.Item
+          key={c.value}
+          value={c.value}
+          disabled={c.disabled}
+          className={cn(
+            'group flex cursor-pointer items-start gap-3 rounded-lg border border-rule bg-page p-4 text-left font-sans text-fg outline-none',
+            'transition-[background-color,border-color] duration-[120ms] ease-standard hover:border-fg focus-visible:shadow-(--focus-ring)',
+            'data-[state=checked]:border-fg data-[state=checked]:bg-hover',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-rule',
+          )}
+        >
+          {c.icon && <span className="mt-0.5 flex shrink-0">{c.icon}</span>}
+          <span className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="text-ui font-medium">{c.title}</span>
+            {c.description && <span className="text-meta leading-normal text-fg-secondary">{c.description}</span>}
+          </span>
+        </RadioPrimitive.Item>
+      ))}
+    </RadioPrimitive.Root>
+  );
+}

package/src/components/CodeInput.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+
+export type CodeInputProps = {
+  /** Number of cells. @default 6 */
+  length?: number | undefined;
+  value?: string | undefined;
+  onChange?: ((code: string) => void) | undefined;
+  /** Called once every cell is filled — typing the last digit or pasting the whole code. */
+  onComplete?: ((code: string) => void) | undefined;
+  /** Digits only (default) or letters and digits. */
+  mode?: 'numeric' | 'alphanumeric' | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Seconds until the code can be sent again; the countdown runs here. */
+  resendIn?: number | undefined;
+  onResend?: (() => void) | undefined;
+  /** @default (s) => `Resend in ${s} s` */
+  formatCountdown?: ((seconds: number) => ReactNode) | undefined;
+  /** @default "Send a new code" */
+  resendLabel?: string | undefined;
+  /** Name of the group for screen readers when there is no Field label. @default "Verification code" */
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * CodeInput — one cell per character of a one-time code. Typing moves on,
+ * Backspace moves back, arrows move; pasting the whole code fills every
+ * cell and completes. The first cell carries autocomplete=one-time-code
+ * so phones offer the code from the message.
+ */
+export function CodeInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  mode = 'numeric',
+  invalid,
+  disabled,
+  resendIn,
+  onResend,
+  formatCountdown = (s) => `Resend in ${s} s`,
+  resendLabel = 'Send a new code',
+  'aria-label': ariaLabel = 'Verification code',
+  className,
+}: CodeInputProps) {
+  const field = useField();
+  const [own, setOwn] = useState('');
+  const code = (value ?? own).slice(0, length);
+  const cells = useRef<Array<HTMLInputElement | null>>([]);
+  const allowed = mode === 'numeric' ? /\d/ : /[a-z0-9]/i;
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const [left, setLeft] = useState(resendIn ?? 0);
+  useEffect(() => setLeft(resendIn ?? 0), [resendIn]);
+  useEffect(() => {
+    if (left <= 0) return;
+    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
+    return () => clearTimeout(t);
+  }, [left]);
+
+  const set = (next: string) => {
+    const clean = next.slice(0, length);
+    if (value === undefined) setOwn(clean);
+    onChange?.(clean);
+    if (clean.length === length && !clean.includes(' ')) onComplete?.(clean);
+  };
+  const focus = (i: number) => cells.current[Math.max(0, Math.min(length - 1, i))]?.focus();
+  const chars = Array.from({ length }, (_, i) => code[i] ?? '');
+
+  const put = (i: number, raw: string) => {
+    const typed = [...raw].filter((c) => allowed.test(c)).map((c) => c.toUpperCase());
+    if (!typed.length) return;
+    const next = [...chars];
+    typed.forEach((c, k) => {
+      if (i + k < length) next[i + k] = c;
+    });
+    // Empty cells are a space inside; the value has no trailing spaces.
+    set(next.map((c) => c || ' ').join('').trimEnd());
+    focus(i + typed.length);
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-2 font-sans', className)}>
+      <div role="group" aria-label={field?.labelId ? undefined : ariaLabel} aria-labelledby={field?.labelId} className="flex gap-2">
+        {chars.map((c, i) => (
+          <input
+            key={i}
+            ref={(el) => {
+              cells.current[i] = el;
+            }}
+            id={i === 0 ? field?.id : undefined}
+            value={c.trim()}
+            inputMode={mode === 'numeric' ? 'numeric' : 'text'}
+            autoComplete={i === 0 ? 'one-time-code' : 'off'}
+            maxLength={length}
+            disabled={off}
+            aria-label={`${i + 1} of ${length}`}
+            aria-invalid={bad || undefined}
+            aria-describedby={field?.describedBy}
+            onFocus={(e) => e.currentTarget.select()}
+            onChange={(e) => put(i, e.target.value)}
+            onPaste={(e) => {
+              e.preventDefault();
+              put(0, e.clipboardData.getData('text'));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Backspace') {
+                e.preventDefault();
+                const next = [...chars];
+                const at = c.trim() ? i : i - 1;
+                if (at < 0) return;
+                next[at] = ' ';
+                set(next.map((ch) => ch || ' ').join('').trimEnd());
+                focus(at);
+              } else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                focus(i - 1);
+              } else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                focus(i + 1);
+              }
+            }}
+            className={cn(
+              'h-[52px] w-11 rounded-md border bg-sunk text-center font-sans text-[20px] font-medium text-fg tabular-nums outline-none',
+              'transition-[border-color] duration-[120ms] ease-standard focus:border-fg focus:shadow-(--focus-ring)',
+              bad ? 'border-transparent bg-error-wash focus:border-error' : 'border-transparent',
+              off && 'cursor-not-allowed bg-well text-fg-secondary',
+            )}
+          />
+        ))}
+      </div>
+      {resendIn !== undefined && (
+        <div className="text-meta text-fg-secondary" aria-live="polite">
+          {left > 0 ? (
+            formatCountdown(left)
+          ) : (
+            <button type="button" onClick={onResend} className="cursor-pointer rounded-xs font-medium text-fg underline underline-offset-3 outline-none focus-visible:shadow-(--focus-ring)">
+              {resendLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}