@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/primitives/MultiCombobox.tsx

@@ -1,327 +0,0 @@
-import {
-  forwardRef,
-  useId,
-  useImperativeHandle,
-  useRef,
-  type CSSProperties,
-  type KeyboardEvent,
-  type MouseEvent,
-  type ReactNode,
-} from "react";
-
-import { Chip, type ChipTone } from "./Chip";
-import {
-  COMBOBOX_DEFAULT_INVALID_HINT,
-  Combobox,
-  type ComboboxHandle,
-  type ComboboxProps,
-} from "./Combobox";
-
-/**
- * MultiCombobox — a Combobox that collects MANY values. The embedded
- * search input clears after every commit (`clearOnCommit`) and the
- * parent renders what it collected as a row of removable Chips below
- * the field. Exists so recipient lists (group share links: one URL,
- * N emails) and similar "pick several people / things" fields share
- * one interaction model with the single-value Combobox — same async
- * search, same free-entry gate, same blur auto-commit.
- *
- * Like Combobox, the value is PARENT-OWNED: `onCommit` hands the
- * parent each pick / free entry, the parent maps it onto its own
- * domain state and passes back `entries` for display. Splitting a
- * pasted "a@x.co, b@x.co" into several entries is the parent's job
- * inside `onCommit` (`allowFreeEntry` sees the whole raw string).
- *
- * Per entry: `title` (chip text), `subtitle` (native tooltip),
- * `tone` (e.g. `warning` for "still needs a name"), `editing` — the
- * one entry currently being edited renders `selected` and, when
- * `renderEntryEditor` is given, its editor mounts under the chip row
- * (the parent owns the editor's state; use the forwarded handle's
- * `focus()` to hand focus back to the search input when it closes).
- *
- * Keyboard: Backspace in the EMPTY search input removes the last
- * entry (`backspaceRemovesLast`, default true). The check is scoped
- * to the embedded Combobox's input, so Backspace inside an entry
- * editor never removes anything.
- *
- * Layouts (`layout`): `stacked` (default) — the search field, then
- * the chip row underneath. `inline` — a mail-client "To" field: one
- * Input-like frame (`.ck-multi-combobox-field`) whose `<ul>` is the
- * flex-wrap row: chips as `<li>`s and the bare search input in a last
- * presentational `<li>`, so typing continues after the last chip and
- * wraps with it. The label renders above as an eyebrow; the invalid
- * hint (aria-describedby on the input), editor and hint stay below.
- *
- * Compose with: Chip (entries), Input (inside `renderEntryEditor`),
- * dialogs collecting recipients.
- *
- * Visual: see docs/components/multi-combobox.
- *
- * Forwards a `MultiComboboxHandle` (= `ComboboxHandle`): `focus()`
- * the search input, `clear()` its text (e.g. after rejecting a
- * duplicate). Testids (from `testid`, default "multi-combobox"):
- * `${testid}` wrapper, `${testid}-combobox-input` / `-dropdown` /
- * `-free-entry` (the embedded Combobox), `${testid}-entries` (the
- * list), `${testid}-entry-${key}` (each chip), `${testid}-editor`.
- */
-
-export type MultiComboboxEntry = {
-  // Stable identity — list key, testid suffix, and the argument to
-  // `onRemoveEntry` / `onEntryClick`.
-  key: string;
-  // Chip text.
-  title: ReactNode;
-  // Native tooltip on the chip (e.g. the email behind a name).
-  subtitle?: string | undefined;
-  tone?: ChipTone | undefined;
-  // Marks the entry being edited: chip renders `selected`, and
-  // `renderEntryEditor(entry)` mounts below the chip row.
-  editing?: boolean | undefined;
-};
-
-export type MultiComboboxHandle = ComboboxHandle;
-
-export type MultiComboboxLayout = "stacked" | "inline";
-
-export type MultiComboboxProps = Omit<
-  ComboboxProps,
-  | "committed"
-  | "committedExtra"
-  | "onUncommit"
-  | "clearOnCommit"
-  | "bare"
-  | "inputId"
-  | "inputDescribedBy"
-> & {
-  entries: MultiComboboxEntry[];
-  // `stacked` (default): field, then chips underneath. `inline`:
-  // chips inside the field, input after the last chip.
-  layout?: MultiComboboxLayout | undefined;
-  onRemoveEntry: (key: string) => void;
-  // When set, chip labels become buttons (e.g. click-to-edit).
-  onEntryClick?: ((key: string) => void) | undefined;
-  // Inline editor for the entry with `editing: true`.
-  renderEntryEditor?: ((entry: MultiComboboxEntry) => ReactNode) | undefined;
-  // aria-label of the entries list. Default "Selected items".
-  entriesLabel?: string | undefined;
-  // Per-entry aria-label for the chip's × button. Default "Remove".
-  removeLabel?: ((entry: MultiComboboxEntry) => string) | undefined;
-  // Backspace in the empty search input removes the last entry.
-  // Default true.
-  backspaceRemovesLast?: boolean | undefined;
-  // Small tertiary line under the entries (counts, duplicate notices).
-  hint?: ReactNode | undefined;
-};
-
-// Inline layout: the host-drawn field mirrors Input's chrome. Focus
-// ring / invalid border / disabled dim come from styles/index.css
-// (`.ck-multi-combobox-field`).
-const INLINE_FIELD_STYLE: CSSProperties = {
-  position: "relative",
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: 6,
-  minHeight: 36,
-  padding: "4px 8px",
-  boxSizing: "border-box",
-  background: "var(--ck-bg-surface, #fff)",
-  border: "1px solid var(--ck-border-strong, #C5C9D2)",
-  borderRadius: "var(--ck-radius-sm, 6px)",
-  transition: "border-color var(--ck-dur-fast, 120ms) var(--ck-ease, ease)",
-};
-// The `<ul>` inside the frame is the actual flex-wrap row.
-const INLINE_LIST_STYLE: CSSProperties = {
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-  width: "100%",
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: 6,
-};
-// Last <li>: holds the bare Combobox (its root is `position: static`,
-// so the dropdown anchors to the frame) and takes the remaining width.
-const INLINE_COMBOBOX_ITEM: CSSProperties = {
-  flex: "1 1 140px",
-  minWidth: 140,
-  display: "flex",
-};
-
-export const MultiCombobox = forwardRef<MultiComboboxHandle, MultiComboboxProps>(
-  function MultiCombobox(
-    {
-      entries,
-      onRemoveEntry,
-      onEntryClick,
-      renderEntryEditor,
-      entriesLabel,
-      removeLabel,
-      backspaceRemovesLast = true,
-      hint,
-      layout = "stacked",
-      testid = "multi-combobox",
-      label,
-      ...comboboxProps
-    },
-    ref,
-  ) {
-    // Wraps ONLY the embedded Combobox so the Backspace handler can
-    // tell its input apart from any input inside `renderEntryEditor`.
-    // A <div> in stacked mode, the last <li> in inline mode.
-    const comboboxWrapRef = useRef<HTMLElement | null>(null);
-    const setComboboxWrap = (el: HTMLElement | null): void => {
-      comboboxWrapRef.current = el;
-    };
-    const listRef = useRef<HTMLUListElement | null>(null);
-    const handleRef = useRef<ComboboxHandle | null>(null);
-    useImperativeHandle(ref, () => ({
-      focus: () => handleRef.current?.focus(),
-      clear: () => handleRef.current?.clear(),
-    }));
-    const inputId = useId();
-    const hintId = useId();
-    const inline = layout === "inline";
-    const editing = entries.find((entry) => entry.editing);
-
-    const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>): void => {
-      if (!backspaceRemovesLast || e.key !== "Backspace") return;
-      const target = e.target;
-      if (!(target instanceof HTMLInputElement)) return;
-      if (!comboboxWrapRef.current?.contains(target)) return;
-      if (target.value !== "") return;
-      const last = entries[entries.length - 1];
-      if (!last) return;
-      onRemoveEntry(last.key);
-    };
-
-    // Clicking the field's empty area (inline) focuses the input, like
-    // a mail client's To field. Chip / input clicks handle themselves.
-    const handleFieldMouseDown = (e: MouseEvent<HTMLDivElement>): void => {
-      if (e.target !== e.currentTarget && e.target !== listRef.current) return;
-      e.preventDefault();
-      handleRef.current?.focus();
-    };
-
-    const comboboxEl = (
-      <Combobox
-        ref={handleRef}
-        {...comboboxProps}
-        label={inline ? undefined : label}
-        bare={inline}
-        inputId={inline ? inputId : undefined}
-        inputDescribedBy={inline ? hintId : undefined}
-        clearOnCommit
-        committed={null}
-        testid={`${testid}-combobox`}
-      />
-    );
-
-    const entriesList = (
-      <ul
-        ref={listRef}
-        role="list"
-        aria-label={entriesLabel ?? "Selected items"}
-        data-testid={`${testid}-entries`}
-        style={
-          inline
-            ? INLINE_LIST_STYLE
-            : {
-                listStyle: "none",
-                margin: entries.length > 0 ? "8px 0 0" : 0,
-                padding: 0,
-                display: "flex",
-                flexWrap: "wrap",
-                gap: 6,
-              }
-        }
-      >
-        {entries.map((entry) => (
-          <li key={entry.key} style={{ minWidth: 0, maxWidth: "100%" }}>
-            <Chip
-              data-testid={`${testid}-entry-${entry.key}`}
-              title={entry.subtitle}
-              tone={entry.tone}
-              selected={entry.editing}
-              disabled={comboboxProps.disabled}
-              onClick={onEntryClick ? () => onEntryClick(entry.key) : undefined}
-              onRemove={() => onRemoveEntry(entry.key)}
-              removeLabel={removeLabel?.(entry)}
-            >
-              {entry.title}
-            </Chip>
-          </li>
-        ))}
-        {inline ? (
-          // Not an entry: presentational so the list still counts N
-          // chips for assistive tech.
-          <li ref={setComboboxWrap} role="presentation" style={INLINE_COMBOBOX_ITEM}>
-            {comboboxEl}
-          </li>
-        ) : null}
-      </ul>
-    );
-
-    return (
-      <div data-testid={testid} onKeyDownCapture={handleKeyDownCapture}>
-        {inline ? (
-          <>
-            {label ? (
-              <label
-                htmlFor={inputId}
-                className="ck-eyebrow"
-                style={{ color: "var(--ck-text-secondary)", display: "block", marginBottom: 6 }}
-              >
-                {label}
-              </label>
-            ) : null}
-            <div
-              className="ck-multi-combobox-field"
-              data-testid={`${testid}-field`}
-              style={INLINE_FIELD_STYLE}
-              onMouseDown={handleFieldMouseDown}
-            >
-              {entriesList}
-            </div>
-            <div
-              id={hintId}
-              className="ck-multi-combobox-invalid-hint"
-              style={{
-                marginTop: 6,
-                font: "400 11px/1.4 var(--ck-font-sans)",
-                color: "var(--ck-critical)",
-              }}
-            >
-              {comboboxProps.invalidHint ?? COMBOBOX_DEFAULT_INVALID_HINT}
-            </div>
-          </>
-        ) : (
-          <>
-            <div ref={setComboboxWrap}>{comboboxEl}</div>
-            {entriesList}
-          </>
-        )}
-
-        {editing && renderEntryEditor ? (
-          <div data-testid={`${testid}-editor`} style={{ marginTop: 8 }}>
-            {renderEntryEditor(editing)}
-          </div>
-        ) : null}
-
-        {hint ? (
-          <div
-            style={{
-              marginTop: 6,
-              fontSize: 11,
-              lineHeight: 1.4,
-              color: "var(--ck-text-tertiary, #8B92A3)",
-            }}
-          >
-            {hint}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);

package/src/primitives/PageHeader.tsx

@@ -1,77 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-
-// Standard list-page header — eyebrow + title + optional
-// description + right-aligned action cluster. Wrap the top of
-// list / overview pages so visual rhythm stays consistent across
-// the app.
-
-export interface PageHeaderProps {
-  // Small uppercase mono cap above the title — "ACCESS · SHARES".
-  eyebrow?: string;
-  // Main heading (typically a sentence: "Bundles you've sent.").
-  title: ReactNode;
-  // Optional one-or-two-line caption under the title.
-  description?: ReactNode;
-  // Right-aligned cluster of buttons / chips / status items.
-  actions?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function PageHeader({
-  eyebrow,
-  title,
-  description,
-  actions,
-  className,
-  style,
-}: PageHeaderProps) {
-  return (
-    <header
-      className={className}
-      style={{
-        display: "flex",
-        alignItems: "flex-end",
-        gap: 16,
-        marginBottom: 24,
-        paddingBottom: 16,
-        borderBottom: "1px solid var(--ck-border-subtle)",
-        fontFamily: "var(--ck-font-sans)",
-        ...style,
-      }}
-    >
-      <div style={{ flex: 1, minWidth: 0 }}>
-        {eyebrow && (
-          <div className="ck-eyebrow" style={{ marginBottom: 6 }}>
-            {eyebrow}
-          </div>
-        )}
-        <h1
-          style={{
-            font: "500 22px/1.3 var(--ck-font-sans)",
-            letterSpacing: "-0.005em",
-            color: "var(--ck-text-primary)",
-            margin: 0,
-          }}
-        >
-          {title}
-        </h1>
-        {description && (
-          <p
-            style={{
-              font: "400 13px/1.55 var(--ck-font-sans)",
-              color: "var(--ck-text-tertiary)",
-              margin: "6px 0 0",
-              maxWidth: "44rem",
-            }}
-          >
-            {description}
-          </p>
-        )}
-      </div>
-      {actions && (
-        <div style={{ display: "flex", gap: 8, flex: "none" }}>{actions}</div>
-      )}
-    </header>
-  );
-}

package/src/primitives/Radio.tsx

@@ -1,131 +0,0 @@
-import { cn } from "../lib/cn";
-
-// Custom-styled radio — accent-bordered circle that becomes filled
-// accent + white dot when checked. Paired with Checkbox: same
-// disabled/label/suffix contract, same 16px hit target size. Use
-// this anywhere you'd reach for a `<input type="radio">` — the
-// native control renders as the OS accent (blue on macOS by
-// default) which doesn't respect --ck-accent per workspace, and the
-// unstyled defaults look inconsistent alongside our Checkbox.
-//
-// Radio is a single option in a group; the caller owns the group's
-// selection state and passes `checked` + `onChange` per option.
-// Radios with the same `name` still get the browser's native "one
-// selected at a time" behaviour if you need form-post semantics; we
-// forward it to a hidden native input so aria-pressed on the visual
-// button doesn't drift from the actual form value.
-
-export interface RadioProps {
-  checked: boolean;
-  onChange: (next: boolean) => void;
-  label?: React.ReactNode;
-  suffix?: React.ReactNode;
-  disabled?: boolean;
-  /**
-   * Native radio-group name. Optional but recommended: browsers
-   * enforce "only one checked at a time" for same-name radios, so
-   * passing a shared name is a belt-and-braces guard against a
-   * stale onChange handler leaving two visually-checked radios.
-   */
-  name?: string;
-  /**
-   * Value that lands in the form-post payload when this radio is
-   * checked. Only meaningful when `name` is also set.
-   */
-  value?: string;
-  className?: string;
-  /** Test hook forwarded to the visual button — see Checkbox. */
-  "data-testid"?: string;
-}
-
-export function Radio({
-  checked,
-  onChange,
-  label,
-  suffix,
-  disabled,
-  name,
-  value,
-  className,
-  "data-testid": testId,
-}: RadioProps) {
-  return (
-    <label
-      className={cn("ck-radio", className)}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 8,
-        font: "400 13px/1 var(--ck-font-sans)",
-        color: "var(--ck-text-secondary)",
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1,
-        userSelect: "none",
-      }}
-    >
-      <button
-        type="button"
-        role="radio"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={() => !disabled && !checked && onChange(true)}
-        data-testid={testId}
-        style={{
-          width: 16,
-          height: 16,
-          borderRadius: "50%",
-          border: "1.5px solid var(--ck-accent)",
-          background: "transparent",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 0,
-          cursor: disabled ? "not-allowed" : "pointer",
-          flexShrink: 0,
-        }}
-      >
-        {checked && (
-          <span
-            aria-hidden
-            style={{
-              width: 8,
-              height: 8,
-              borderRadius: "50%",
-              background: "var(--ck-accent)",
-              display: "inline-block",
-            }}
-          />
-        )}
-      </button>
-      {/* Hidden native input keeps the browser's same-name enforcement
-          + lets consumers use the surrounding <form> for post payload. */}
-      {name && (
-        <input
-          type="radio"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={(e) => !disabled && onChange(e.target.checked)}
-          disabled={disabled}
-          tabIndex={-1}
-          aria-hidden
-          style={{
-            position: "absolute",
-            width: 1,
-            height: 1,
-            padding: 0,
-            margin: -1,
-            overflow: "hidden",
-            clip: "rect(0,0,0,0)",
-            whiteSpace: "nowrap",
-            border: 0,
-          }}
-        />
-      )}
-      {label}
-      {suffix && (
-        <span style={{ color: "var(--ck-text-tertiary)" }}>{suffix}</span>
-      )}
-    </label>
-  );
-}

package/src/primitives/SegmentedControl.tsx

@@ -1,135 +0,0 @@
-import { cn } from "../lib/cn";
-
-// SegmentedControl — a horizontal set of mutually-exclusive options
-// rendered as one pill-shaped track with a raised "active" segment.
-// Use it where the choice swaps the content below it (mode switch,
-// filter scope), i.e. wherever a pair of radio buttons would be
-// semantically right but visually too quiet. For true page-level
-// navigation reach for router links instead; for on/off state use
-// ToggleSwitch.
-//
-// The caller owns the selection: pass `value` + `onChange`, one
-// option per segment. Per-option `disabled` renders the segment
-// non-interactive with a hint via `title` (a disabled option should
-// tell the user why — pass `disabledHint`).
-//
-// Semantics are a radiogroup (not tabs): arrow keys move selection
-// directly, matching native radio behaviour, and screen readers
-// announce "x of y" positioning for free.
-
-export interface SegmentedControlOption<V extends string = string> {
-  value: V;
-  label: React.ReactNode;
-  disabled?: boolean;
-  /** Shown as the native tooltip on a disabled segment — say WHY. */
-  disabledHint?: string;
-  "data-testid"?: string;
-}
-
-export interface SegmentedControlProps<V extends string = string> {
-  value: V;
-  onChange: (next: V) => void;
-  options: SegmentedControlOption<V>[];
-  /** Disables the whole control (per-option disabled still applies). */
-  disabled?: boolean;
-  /** "full" stretches the track and gives segments equal width. */
-  fit?: "auto" | "full";
-  "aria-label"?: string;
-  className?: string;
-  "data-testid"?: string;
-}
-
-export function SegmentedControl<V extends string = string>({
-  value,
-  onChange,
-  options,
-  disabled,
-  fit = "auto",
-  "aria-label": ariaLabel,
-  className,
-  "data-testid": testId,
-}: SegmentedControlProps<V>) {
-  // Arrow keys move selection to the nearest enabled neighbour,
-  // wrapping — the native radio-group keyboard model.
-  const move = (from: number, step: 1 | -1) => {
-    for (let i = 1; i <= options.length; i++) {
-      const next = options[(from + step * i + options.length * i) % options.length];
-      if (next && !next.disabled) {
-        onChange(next.value);
-        return;
-      }
-    }
-  };
-
-  return (
-    <div
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={cn("ck-segmented", className)}
-      data-testid={testId}
-      // The track is deliberately unfilled (owner feedback,
-      // 2026-08-19): a muted-filled track reads as a heavy block on
-      // warm canvases — the hairline border delimits the group and
-      // the raised selected segment carries ALL the contrast. This
-      // also makes the control look right on any surface (canvas,
-      // card, modal) without per-context tuning.
-      style={{
-        display: fit === "full" ? "flex" : "inline-flex",
-        alignItems: "stretch",
-        gap: 2,
-        padding: 2,
-        borderRadius: 8,
-        border: "1px solid var(--ck-border-subtle)",
-        background: "transparent",
-        opacity: disabled ? 0.5 : 1,
-      }}
-    >
-      {options.map((opt, i) => {
-        const selected = opt.value === value;
-        const optDisabled = disabled || opt.disabled;
-        return (
-          <button
-            key={opt.value}
-            type="button"
-            role="radio"
-            aria-checked={selected}
-            disabled={optDisabled}
-            title={opt.disabled ? opt.disabledHint : undefined}
-            data-testid={opt["data-testid"]}
-            // Roving tabindex: the group is one tab stop; arrows walk it.
-            tabIndex={selected ? 0 : -1}
-            onClick={() => !optDisabled && !selected && onChange(opt.value)}
-            onKeyDown={(e) => {
-              if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-                e.preventDefault();
-                move(i, 1);
-              } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-                e.preventDefault();
-                move(i, -1);
-              }
-            }}
-            style={{
-              flex: fit === "full" ? 1 : undefined,
-              padding: "6px 14px",
-              borderRadius: 6,
-              border: "1px solid transparent",
-              font: `500 13px/1.2 var(--ck-font-sans)`,
-              color: selected
-                ? "var(--ck-text-primary)"
-                : "var(--ck-text-secondary)",
-              background: selected ? "var(--ck-bg-surface)" : "transparent",
-              boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
-              borderColor: selected ? "var(--ck-border-subtle)" : "transparent",
-              cursor: optDisabled ? "not-allowed" : "pointer",
-              opacity: opt.disabled && !disabled ? 0.45 : 1,
-              whiteSpace: "nowrap",
-              transition: "background 120ms ease, color 120ms ease",
-            }}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}