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

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

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Check } from 'lucide-react';
-import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 import { cn } from '../lib/cn';
 import { Spinner } from './Spinner';
@@ -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' },
   },
@@ -63,7 +76,7 @@ export type ButtonProps = Omit<ComponentProps<'button'>, 'disabled'> & {
   shortcut?: string | undefined;
   /** A count at the end (Comments 12). Hidden at zero, 99+ above 99. */
   count?: number | undefined;
-  /** Async state: busy locks the width and shows a spinner; done confirms in place. See useButtonAction. */
+  /** Async state: busy shows a spinner, done confirms in place; the width never changes. See useButtonAction. */
   state?: ButtonState | undefined;
   /** Label shown while state="done". @default the children */
   doneLabel?: ReactNode;
@@ -106,15 +119,6 @@ export function Button({
   ref,
   ...rest
 }: ButtonProps) {
-  const inner = useRef<HTMLButtonElement | null>(null);
-  const [lockedWidth, setLockedWidth] = useState<number | null>(null);
-
-  // Lock the idle width so busy / done never resize the button.
-  useLayoutEffect(() => {
-    if (state === 'idle') setLockedWidth(null);
-    else if (lockedWidth === null && inner.current) setLockedWidth(inner.current.getBoundingClientRect().width);
-  }, [state, lockedWidth]);
-
   const classes = cn(button({ variant, size, ground: ground ?? 'auto' }), className);
   if (asChild) {
     return (
@@ -125,23 +129,22 @@ export function Button({
   }
 
   const busy = state === 'busy';
+  // Busy and done keep the idle content in place (hidden) and draw on top of
+  // it, so the button never resizes — also when it first renders busy.
+  const overlaid = state !== 'idle';
   const blocked = Boolean(disabledReason) && disabled;
   const shownCount = count === undefined ? null : formatCount(count);
-  const setRefs = (el: HTMLButtonElement | null) => {
-    inner.current = el;
-    if (typeof ref === 'function') ref(el);
-    else if (ref) ref.current = el;
-  };
-
   return (
     <button
       type="button"
       {...rest}
-      ref={setRefs}
+      ref={ref}
       className={classes}
-      style={lockedWidth ? { ...style, width: lockedWidth } : style}
+      style={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) => {
@@ -152,27 +155,32 @@ export function Button({
         onClick?.(e);
       }}
     >
-      {busy ? (
-        <Spinner />
-      ) : state === 'done' ? (
-        <>
-          <Check size={14} strokeWidth={2} aria-hidden />
-          {doneLabel ?? children}
-        </>
-      ) : (
-        <>
-          {iconLeft}
-          {children}
-          {iconRight}
-          {shownCount && <span className="font-medium tabular-nums opacity-70">{shownCount}</span>}
-          {shortcut && (
-            <kbd className="ml-0.5 font-sans text-[12px] font-medium opacity-60" aria-hidden>
-              {shortcut}
-            </kbd>
+      <span className={cn('contents', overlaid && 'invisible')} aria-hidden={overlaid || undefined} data-button-content="">
+        {iconLeft}
+        {children}
+        {iconRight}
+        {shownCount && <span className="font-medium tabular-nums opacity-70">{shownCount}</span>}
+        {shortcut && (
+          <kbd className="ml-0.5 font-sans text-[12px] font-medium opacity-60" aria-hidden>
+            {shortcut}
+          </kbd>
+        )}
+      </span>
+      {overlaid && (
+        <span className="absolute inset-0 flex items-center justify-center gap-2" data-button-overlay="">
+          {busy ? (
+            <>
+              <Spinner />
+              <span className="sr-only">{children}</span>
+            </>
+          ) : (
+            <>
+              <Check size={14} strokeWidth={2} aria-hidden />
+              {doneLabel ?? children}
+            </>
           )}
-        </>
+        </span>
       )}
-      {busy && <span className="sr-only">{children}</span>}
     </button>
   );
 }

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