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

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

package/src/components/CommandPalette.tsx

@@ -0,0 +1,228 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Command } from 'cmdk';
+import { Search } from 'lucide-react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
+
+export type CommandItem = {
+  id: string;
+  title: ReactNode;
+  /** Where it lives: "Series A / Legal". */
+  subtitle?: ReactNode;
+  /** Right-aligned: a page ("p. 14"), a shortcut. */
+  meta?: ReactNode;
+  /** A line of matched text (full-text results). */
+  excerpt?: ReactNode;
+  icon?: ReactNode;
+  onSelect: () => void;
+};
+
+export type CommandSource = {
+  id: string;
+  /** Section heading: "Documents · titles", "Full text". */
+  label: string;
+  /** Results for the query. Aborted when the query changes. Throwing marks the source failed (it stops counting as pending). */
+  search: (query: string, signal: AbortSignal) => Promise<CommandItem[]>;
+  /** Characters needed before it runs. @default 1 */
+  minQuery?: number | undefined;
+};
+
+export type CommandPaletteLabels = {
+  /** @default "Search or run an action" */
+  placeholder?: string;
+  /** @default (q) => `Nothing matches “${q}”.` */
+  empty?: (query: string) => ReactNode;
+  /** Heading hint while a slower source has not returned. @default "arriving" */
+  arriving?: string;
+  /** @default "Actions" */
+  actions?: string;
+  /** Accessible name of the palette. @default "Command palette" */
+  title?: string;
+};
+
+export type CommandPaletteProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Searched in parallel; each section appears as its source returns, in this order. */
+  sources: CommandSource[];
+  /** Actions for the query ("Ask the Agent about “cap table”"), always listed after the results. */
+  actions?: ((query: string) => CommandItem[]) | undefined;
+  labels?: CommandPaletteLabels | undefined;
+  /** ms after typing before sources run. @default 150 */
+  debounce?: number | undefined;
+};
+
+const GROUP = '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-secondary';
+
+type SourceState = { status: 'pending' | 'done' | 'failed'; items: CommandItem[] };
+
+/**
+ * CommandPalette — ⌘K. Fast sources (titles) show at once, slower ones
+ * (full text with page and excerpt) fill in below; a spinner shows while
+ * any is out, and "nothing matches" only once every source has returned.
+ * Arrows, Enter, Esc (cmdk + Radix Dialog). Pair with useCommandPaletteHotkey.
+ */
+export function CommandPalette({ open, onOpenChange, sources, actions, labels = {}, debounce = 150 }: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Record<string, SourceState>>({});
+  // The highlighted row. Follows the first result as sections arrive,
+  // until the person moves with the arrows.
+  const [selected, setSelected] = useState('');
+  const moved = useRef(false);
+  const sourcesRef = useRef(sources);
+  sourcesRef.current = sources;
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      setResults({});
+    }
+  }, [open]);
+  useEffect(() => {
+    moved.current = false;
+  }, [query]);
+
+  useEffect(() => {
+    const q = query.trim();
+    const active = sourcesRef.current.filter((s) => q.length >= (s.minQuery ?? 1));
+    if (!q || active.length === 0) {
+      setResults({});
+      return;
+    }
+    setResults(Object.fromEntries(active.map((s) => [s.id, { status: 'pending', items: [] } satisfies SourceState])));
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      for (const s of active) {
+        s.search(q, controller.signal).then(
+          (items) => !controller.signal.aborted && setResults((r) => ({ ...r, [s.id]: { status: 'done', items } })),
+          () => !controller.signal.aborted && setResults((r) => ({ ...r, [s.id]: { status: 'failed', items: [] } })),
+        );
+      }
+    }, debounce);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query, debounce]);
+
+  const q = query.trim();
+  const states = Object.values(results);
+  const pending = states.some((s) => s.status === 'pending');
+  const found = states.some((s) => s.items.length > 0);
+  const actionItems = q && actions ? actions(q) : [];
+  const order = [
+    ...sourcesRef.current.flatMap((s) => (results[s.id]?.items ?? []).map((i) => `${s.id}:${i.id}`)),
+    ...actionItems.map((i) => `action:${i.id}`),
+  ];
+  const first = order[0] ?? '';
+  useEffect(() => {
+    if (!moved.current) setSelected(first);
+  }, [first]);
+  const run = (item: CommandItem) => {
+    onOpenChange(false);
+    item.onSelect();
+  };
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-scrim" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed top-[12vh] left-1/2 z-50 w-[calc(100%-32px)] max-w-[640px] -translate-x-1/2 overflow-hidden rounded-lg border border-rule bg-page font-sans text-fg outline-none"
+        >
+          <DialogPrimitive.Title className="sr-only">{labels.title ?? 'Command palette'}</DialogPrimitive.Title>
+          <Command
+            shouldFilter={false}
+            loop
+            label={labels.title ?? 'Command palette'}
+            value={selected}
+            onValueChange={setSelected}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') moved.current = true;
+            }}
+          >
+            <div className="flex items-center gap-2.5 border-b border-rule px-4">
+              <Search size={16} aria-hidden className="shrink-0 text-fg-secondary" />
+              <Command.Input
+                value={query}
+                onValueChange={setQuery}
+                placeholder={labels.placeholder ?? 'Search or run an action'}
+                className="h-12 min-w-0 flex-1 border-0 bg-transparent font-sans text-[15px] text-fg outline-none placeholder:text-fg-secondary"
+              />
+              {pending && <Spinner label="Searching" className="text-fg-secondary" />}
+            </div>
+            <Command.List className="max-h-[min(420px,60vh)] overflow-y-auto p-1.5">
+              {sourcesRef.current.map((s) => {
+                const st = results[s.id];
+                if (!st || (st.status !== 'pending' && st.items.length === 0)) return null;
+                return (
+                  <Command.Group
+                    key={s.id}
+                    className={GROUP}
+                    heading={
+                      <span className="flex items-center gap-1.5">
+                        {s.label}
+                        {st.status === 'pending' && <span className="font-normal">· {labels.arriving ?? 'arriving'}</span>}
+                      </span>
+                    }
+                  >
+                    {st.items.map((item) => (
+                      <PaletteItem key={`${s.id}:${item.id}`} value={`${s.id}:${item.id}`} item={item} onRun={run} />
+                    ))}
+                  </Command.Group>
+                );
+              })}
+              {q && !pending && !found && (
+                <div role="status" className="px-3 py-3 text-ui text-fg-secondary">
+                  {labels.empty ? labels.empty(q) : `Nothing matches “${q}”.`}
+                </div>
+              )}
+              {actionItems.length > 0 && (
+                <Command.Group className={GROUP} heading={labels.actions ?? 'Actions'}>
+                  {actionItems.map((item) => (
+                    <PaletteItem key={`action:${item.id}`} value={`action:${item.id}`} item={item} onRun={run} />
+                  ))}
+                </Command.Group>
+              )}
+            </Command.List>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+function PaletteItem({ item, value, onRun }: { item: CommandItem; value: string; onRun: (item: CommandItem) => void }) {
+  return (
+    <Command.Item
+      value={value}
+      onSelect={() => onRun(item)}
+      className={cn('flex cursor-pointer items-start gap-2.5 rounded-md px-3 py-2 outline-none', 'data-[selected=true]:bg-hover')}
+    >
+      {item.icon && <span className="mt-0.5 grid size-4 shrink-0 place-items-center text-fg-secondary">{item.icon}</span>}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="truncate text-ui">{item.title}</span>
+        {item.subtitle && <span className="truncate text-meta text-fg-secondary">{item.subtitle}</span>}
+        {item.excerpt && <span className="line-clamp-2 text-small text-fg-secondary">{item.excerpt}</span>}
+      </span>
+      {item.meta && <span className="mt-0.5 shrink-0 text-meta text-fg-secondary tabular-nums">{item.meta}</span>}
+    </Command.Item>
+  );
+}
+
+/** ⌘K / Ctrl+K toggles the palette (also from inside inputs). */
+export function useCommandPaletteHotkey(setOpen: (update: (open: boolean) => boolean) => void) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [setOpen]);
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,294 @@
+import { KeyRound } from 'lucide-react';
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+
+import { Button } from './Button';
+import { Dialog, DialogClose, DialogContent } from './Dialog';
+import { Icon } from './Icon';
+import { Input } from './Input';
+import { useButtonAction } from './useButtonAction';
+
+function errorText(e: unknown): string {
+  if (e instanceof Error) return e.message;
+  return typeof e === 'string' ? e : 'Something went wrong. Try again.';
+}
+
+type Base = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** A question or an action: "Revoke this share and 4 forwards?" */
+  title: ReactNode;
+  /** The consequence, in plain words: "Anna and the 4 people she forwarded it to lose access now." */
+  description?: ReactNode;
+  /** @default "Cancel" */
+  cancelLabel?: string | undefined;
+};
+
+export type ConfirmDialogProps = Base & {
+  /** The primary repeats the verb: "Revoke share", never "OK". */
+  confirmLabel: string;
+  /** Destructive: the primary is the red button. */
+  destructive?: boolean | undefined;
+  /** Type-to-confirm: the primary stays off until this word is typed (for what can't be undone at scale). */
+  confirmWord?: string | undefined;
+  /** Label of the type-to-confirm input. @default `Type ${confirmWord} to confirm` */
+  confirmWordLabel?: ReactNode;
+  /** Runs on confirm. While it runs the primary is busy; on success the dialog closes; a failure is shown in place. */
+  onConfirm: () => Promise<unknown> | unknown;
+};
+
+/**
+ * ConfirmDialog — a destructive or weighty action, confirmed before it
+ * happens (never undone after the fact). The primary names the action;
+ * with confirmWord the person types it first. Failures stay in the dialog.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  cancelLabel = 'Cancel',
+  confirmLabel,
+  destructive = false,
+  confirmWord,
+  confirmWordLabel,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [typed, setTyped] = useState('');
+  const action = useButtonAction(async () => {
+    await onConfirm();
+    onOpenChange(false);
+  });
+  useEffect(() => {
+    if (!open) setTyped('');
+  }, [open]);
+  const armed = !confirmWord || typed.trim().toLowerCase() === confirmWord.toLowerCase();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="sm"
+        title={title}
+        description={description}
+        footer={
+          <>
+            <DialogClose asChild>
+              <Button variant="secondary">{cancelLabel}</Button>
+            </DialogClose>
+            <Button
+              variant={destructive ? 'danger' : 'primary'}
+              disabled={!armed}
+              state={action.state === 'done' ? 'busy' : action.state}
+              onClick={() => void action.run()}
+            >
+              {confirmLabel}
+            </Button>
+          </>
+        }
+      >
+        {confirmWord && (
+          <Input
+            label={confirmWordLabel ?? `Type ${confirmWord} to confirm`}
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            autoComplete="off"
+            spellCheck={false}
+            autoFocus
+          />
+        )}
+        {action.error !== null && (
+          <p role="alert" className="mt-3 mb-0 text-small text-error-text">
+            {errorText(action.error)}
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export type PromptDialogProps = Base & {
+  /** The field's label: "Folder name". */
+  label: ReactNode;
+  defaultValue?: string | undefined;
+  /** "Rename", "Create folder". */
+  confirmLabel: string;
+  /** Return the problem in words, or null when fine. Checked on submit and then as they type. */
+  validate?: ((value: string) => string | null) | undefined;
+  /** Receives the trimmed value. Busy while it runs; closes on success; a failure shows under the field. */
+  onSubmit: (value: string) => Promise<unknown> | unknown;
+};
+
+/** PromptDialog — one value asked for (rename, new folder). The current
+ *  value is selected on open so typing replaces it; Enter submits. */
+export function PromptDialog({ open, onOpenChange, title, description, cancelLabel = 'Cancel', label, defaultValue = '', confirmLabel, validate, onSubmit }: PromptDialogProps) {
+  const [value, setValue] = useState(defaultValue);
+  const [problem, setProblem] = useState<string | null>(null);
+  const [touched, setTouched] = useState(false);
+  const input = useRef<HTMLInputElement | null>(null);
+  const formId = useId();
+  const action = useButtonAction(async (v: string) => {
+    await onSubmit(v);
+    onOpenChange(false);
+  });
+
+  useEffect(() => {
+    if (open) {
+      setValue(defaultValue);
+      setProblem(null);
+      setTouched(false);
+    }
+  }, [open, defaultValue]);
+
+  const check = (v: string) => validate?.(v.trim()) ?? (v.trim() ? null : 'Enter a name.');
+  const shownError = problem ?? (action.error !== null ? errorText(action.error) : null);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="sm"
+        title={title}
+        description={description}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          input.current?.focus();
+          input.current?.select();
+        }}
+        footer={
+          <>
+            <DialogClose asChild>
+              <Button variant="secondary">{cancelLabel}</Button>
+            </DialogClose>
+            <Button type="submit" form={formId} state={action.state === 'done' ? 'busy' : action.state}>
+              {confirmLabel}
+            </Button>
+          </>
+        }
+      >
+        <form
+          id={formId}
+          noValidate
+          onSubmit={(e) => {
+            e.preventDefault();
+            setTouched(true);
+            const p = check(value);
+            setProblem(p);
+            if (!p) void action.run(value.trim());
+          }}
+        >
+          <Input
+            ref={input}
+            label={label}
+            value={value}
+            error={shownError ?? undefined}
+            onChange={(e) => {
+              setValue(e.target.value);
+              if (touched) setProblem(check(e.target.value));
+            }}
+          />
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export type StepUpDialogProps = Omit<Base, 'title'> & {
+  /** @default "Confirm it's you" */
+  title?: ReactNode;
+  /** @default "Use passkey" */
+  passkeyLabel?: string | undefined;
+  /** @default "Use authenticator code instead" */
+  codeLabel?: string | undefined;
+  /** @default "Authenticator code" */
+  codeFieldLabel?: ReactNode;
+  /** @default "Confirm" */
+  confirmLabel?: string | undefined;
+  /** Starts the passkey ceremony; resolves when verified (the dialog closes), throws to show why not. */
+  onPasskey: () => Promise<unknown>;
+  /** Checks a 6-digit authenticator code; resolves when verified, throws to show why not. Omit when there is no authenticator. */
+  onCode?: ((code: string) => Promise<unknown>) | undefined;
+};
+
+/** StepUpDialog — a fresh check before a sensitive action (deleting a
+ *  workspace): passkey first, an authenticator code as the alternative.
+ *  UI only — the ceremony is the caller's. */
+export function StepUpDialog({
+  open,
+  onOpenChange,
+  title = "Confirm it's you",
+  description,
+  cancelLabel = 'Cancel',
+  passkeyLabel = 'Use passkey',
+  codeLabel = 'Use authenticator code instead',
+  codeFieldLabel = 'Authenticator code',
+  confirmLabel = 'Confirm',
+  onPasskey,
+  onCode,
+}: StepUpDialogProps) {
+  const [useCode, setUseCode] = useState(false);
+  const [code, setCode] = useState('');
+  const passkey = useButtonAction(async () => {
+    await onPasskey();
+    onOpenChange(false);
+  });
+  const byCode = useButtonAction(async (c: string) => {
+    await onCode?.(c);
+    onOpenChange(false);
+  });
+  useEffect(() => {
+    if (!open) {
+      setUseCode(false);
+      setCode('');
+    }
+  }, [open]);
+  const err = useCode ? byCode.error : passkey.error;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="sm"
+        title={title}
+        description={description}
+        footer={
+          <>
+            <DialogClose asChild>
+              <Button variant="secondary">{cancelLabel}</Button>
+            </DialogClose>
+            {useCode ? (
+              <Button disabled={!/^\d{6}$/.test(code)} state={byCode.state === 'done' ? 'busy' : byCode.state} onClick={() => void byCode.run(code)}>
+                {confirmLabel}
+              </Button>
+            ) : (
+              <Button iconLeft={<Icon icon={KeyRound} />} state={passkey.state === 'done' ? 'busy' : passkey.state} onClick={() => void passkey.run()}>
+                {passkeyLabel}
+              </Button>
+            )}
+          </>
+        }
+      >
+        {useCode ? (
+          <Input
+            label={codeFieldLabel}
+            value={code}
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            maxLength={6}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+            autoFocus
+          />
+        ) : (
+          onCode && (
+            <button
+              type="button"
+              onClick={() => setUseCode(true)}
+              className="cursor-pointer border-0 bg-transparent p-0 font-sans text-small text-fg underline underline-offset-3 outline-none focus-visible:shadow-(--focus-ring)"
+            >
+              {codeLabel}
+            </button>
+          )
+        )}
+        {err !== null && (
+          <p role="alert" className="mt-3 mb-0 text-small text-error-text">
+            {errorText(err)}
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}