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

package/src/components/Checkbox.tsx

@@ -0,0 +1,67 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+import { useId, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type CheckboxProps = Omit<ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'onChange' | 'children'> & {
+  /** true · false · "indeterminate" (some children selected). */
+  checked?: boolean | 'indeterminate' | undefined;
+  onChange?: ((checked: boolean) => void) | undefined;
+  /** The label; clicking it toggles too. */
+  label?: ReactNode;
+  /** A line below the label — say why when disabled. */
+  description?: ReactNode;
+  /** Class for the whole row (className goes to the box). */
+  rowClassName?: string | undefined;
+};
+
+/**
+ * Checkbox — a choice in a form that applies on Save or Send (a setting
+ * that applies at once is a Switch). Sunk box, ink when checked; the mixed
+ * state means some children are selected. The whole row toggles.
+ */
+export function Checkbox({ checked, onChange, label, description, disabled, id, className, rowClassName, ...rest }: CheckboxProps) {
+  const auto = useId();
+  const boxId = id ?? `cb${auto}`;
+  const descId = description ? `${boxId}-desc` : undefined;
+  const box = (
+    <CheckboxPrimitive.Root
+      id={boxId}
+      {...(checked !== undefined && { checked })}
+      onCheckedChange={(v) => onChange?.(v === true)}
+      disabled={disabled}
+      aria-describedby={descId}
+      className={cn(
+        'peer mt-0.5 grid size-4 shrink-0 cursor-pointer place-items-center rounded-xs border border-fg-secondary bg-sunk text-page',
+        'transition-[background-color,border-color] duration-[120ms] ease-standard outline-none focus-visible:shadow-(--focus-ring)',
+        'data-[state=checked]:border-fg data-[state=checked]:bg-fg data-[state=indeterminate]:border-fg data-[state=indeterminate]:bg-fg',
+        'disabled:cursor-not-allowed',
+        className,
+      )}
+      {...rest}
+    >
+      <CheckboxPrimitive.Indicator className="grid place-items-center">
+        {checked === 'indeterminate' ? <Minus size={11} strokeWidth={2.5} aria-hidden /> : <Check size={11} strokeWidth={2.5} aria-hidden />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+  if (!label && !description) return box;
+  return (
+    <div className={cn('inline-flex items-start gap-2.5 font-sans', disabled && 'opacity-40', rowClassName)}>
+      {box}
+      <span className="flex flex-col gap-0.5">
+        {label && (
+          <label htmlFor={boxId} className={cn('text-small leading-[1.45] text-fg', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+            {label}
+          </label>
+        )}
+        {description && (
+          <span id={descId} className="text-meta leading-normal text-fg-secondary">
+            {description}
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}

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

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