@cosxai/ui 0.24.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Chip.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import {
+  forwardRef,
+  type CSSProperties,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 
 import { cn } from "../lib/cn";
 
@@ -99,6 +105,12 @@ export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(
   ref,
 ) {
   const clickable = !!onClick && !disabled;
+  // Chip buttons act on click but must NOT take focus on mousedown:
+  // when a host has an inline editor open for another chip, the
+  // editor's blur (commit + unmount) would otherwise run before this
+  // click lands and the click is lost. Keyboard focus via Tab is
+  // unaffected.
+  const keepFocus = (e: MouseEvent<HTMLButtonElement>): void => e.preventDefault();
   return (
     <span
       ref={ref}
@@ -131,6 +143,7 @@ export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(
         <button
           type="button"
           className="ck-chip-label"
+          onMouseDown={keepFocus}
           onClick={onClick}
           disabled={disabled}
           style={{ ...LABEL_STYLE, cursor: clickable ? "pointer" : "default" }}
@@ -147,6 +160,7 @@ export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(
           type="button"
           className="ck-chip-remove"
           aria-label={removeLabel ?? "Remove"}
+          onMouseDown={keepFocus}
           onClick={onRemove}
           disabled={disabled}
           style={{

package/src/primitives/Combobox.tsx

@@ -104,9 +104,25 @@ export interface ComboboxProps {
   // and typically passes `committed={null}`. Default false — the
   // single-value echo-into-input behaviour is unchanged.
   clearOnCommit?: boolean | undefined;
+  // Bare mode: the input renders without its own field chrome (see
+  // Input `bare`) and the root wrapper is `position: static` +
+  // `flex: 1 1 140px`, so a host that draws the field (MultiCombobox
+  // inline layout) can place this after its chips and the dropdown
+  // anchors to the host's `position: relative` container. `label`
+  // and the inline error text are not rendered (the host draws them;
+  // `aria-invalid` is still set on the input). Default false.
+  bare?: boolean | undefined;
+  // id for the <input>, so a host-drawn <label htmlFor> can target it.
+  inputId?: string | undefined;
+  // Extra aria-describedby id(s) for the <input> (e.g. a host-drawn
+  // invalid hint in bare mode). Merged with Input's own error/helper
+  // association, never replacing it.
+  inputDescribedBy?: string | undefined;
   testid?: string | undefined;
 }
 
+export const COMBOBOX_DEFAULT_INVALID_HINT = "Pick from the list to continue.";
+
 // Imperative handle — `focus()` returns focus to the input (e.g. after
 // an inline editor closes); `clear()` wipes the typed text + dropdown
 // (e.g. a parent rejecting a duplicate commit).
@@ -144,6 +160,9 @@ export const Combobox = forwardRef<ComboboxHandle, ComboboxProps>(function Combo
   onCommit,
   onUncommit,
   clearOnCommit = false,
+  bare = false,
+  inputId,
+  inputDescribedBy,
   testid = "combobox",
   },
   ref,
@@ -252,6 +271,10 @@ export const Combobox = forwardRef<ComboboxHandle, ComboboxProps>(function Combo
   // blurs first) still lands on the row handler.
   const handleBlur = useCallback(() => {
     setTimeout(() => {
+      // Re-focused within the delay (e.g. a host frame click handing
+      // focus straight back, MultiCombobox inline): still editing —
+      // neither close the list nor auto-commit.
+      if (inputRef.current && document.activeElement === inputRef.current) return;
       setFocused(false);
       if (isCommitted) return;
       const raw = trimmed;
@@ -322,9 +345,18 @@ export const Combobox = forwardRef<ComboboxHandle, ComboboxProps>(function Combo
     focused && !isCommitted && (results.length > 0 || offerFree || (hasNoResults && !!emptyHint));
 
   return (
-    <div style={{ position: "relative" }}>
+    <div
+      style={
+        bare
+          ? { position: "static", flex: "1 1 140px", minWidth: 140 }
+          : { position: "relative" }
+      }
+    >
       <Input
         ref={inputRef}
+        id={inputId}
+        aria-describedby={inputDescribedBy}
+        bare={bare}
         label={label}
         data-testid={`${testid}-input`}
         value={query}
@@ -339,7 +371,7 @@ export const Combobox = forwardRef<ComboboxHandle, ComboboxProps>(function Combo
         placeholder={placeholder}
         autoFocus={autoFocus}
         autoComplete="off"
-        error={invalid ? (invalidHint ?? "Pick from the list to continue.") : null}
+        error={invalid ? (invalidHint ?? COMBOBOX_DEFAULT_INVALID_HINT) : null}
       />
 
       {showDropdown ? (

package/src/primitives/Input.tsx

@@ -33,6 +33,14 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   // currency symbols, unit labels, search icons, etc.
   prefix?: ReactNode;
   suffix?: ReactNode;
+  // Bare mode: render ONLY the <input> — no wrapper, label, helper,
+  // error text, or field chrome (border / background / height). For
+  // hosts that draw the field themselves (MultiCombobox's inline
+  // layout, where chips and the input share one frame). `label`,
+  // `helper`, `error` text, `prefix`, `suffix` and `fit` are ignored;
+  // `aria-invalid` is still set from `error` so the host can react.
+  // Default false.
+  bare?: boolean;
 }
 
 const ADDON_STYLE = {
@@ -52,12 +60,47 @@ const ADDON_STYLE = {
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, helper, error, fit = "full", prefix, suffix, className, id, style, ...rest },
+  { label, helper, error, fit = "full", prefix, suffix, bare = false, className, id, style, ...rest },
   ref,
 ) {
   const autoId = useId();
   const inputId = id ?? autoId;
-  const hasAddon = prefix != null || suffix != null;
+  const hasAddon = !bare && (prefix != null || suffix != null);
+  // `...rest` is spread FIRST so the `error`-derived aria-invalid (and,
+  // non-bare, the helper/error text association) stays authoritative;
+  // a consumer aria-describedby is merged with ours, not replaced.
+  const ownDescribedBy = !bare && (helper || error) ? `${inputId}-helper` : undefined;
+  const describedBy =
+    [rest["aria-describedby"], ownDescribedBy].filter(Boolean).join(" ") || undefined;
+
+  if (bare) {
+    // Chrome presets restyle .ck-input with !important; the matching
+    // .ck-input--bare rule in styles/index.css strips that again.
+    return (
+      <input
+        ref={ref}
+        id={inputId}
+        {...rest}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={describedBy}
+        className={cn("ck-input", "ck-input--bare", className)}
+        style={{
+          minWidth: 0,
+          width: "100%",
+          height: 28,
+          padding: "0 4px",
+          font: "400 13px/1 var(--ck-font-sans)",
+          background: "transparent",
+          color: "var(--ck-text-primary)",
+          border: "none",
+          borderRadius: 0,
+          boxShadow: "none",
+          outline: "none",
+          ...(style ?? {}),
+        }}
+      />
+    );
+  }
 
   // Border / radius live on the WRAPPER when there's an addon so the
   // addon + input share one continuous frame. Otherwise the input
@@ -69,9 +112,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     <input
       ref={ref}
       id={inputId}
-      aria-invalid={error ? true : undefined}
-      aria-describedby={(helper || error) ? `${inputId}-helper` : undefined}
       {...rest}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={describedBy}
       className={cn("ck-input", hasAddon ? "ck-input--with-addon" : undefined)}
       style={{
         flex: hasAddon ? "1 1 auto" : undefined,

package/src/primitives/MultiCombobox.tsx

@@ -1,7 +1,21 @@
-import { forwardRef, useRef, type KeyboardEvent, type ReactNode } from "react";
+import {
+  forwardRef,
+  useId,
+  useImperativeHandle,
+  useRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 
 import { Chip, type ChipTone } from "./Chip";
-import { Combobox, type ComboboxHandle, type ComboboxProps } from "./Combobox";
+import {
+  COMBOBOX_DEFAULT_INVALID_HINT,
+  Combobox,
+  type ComboboxHandle,
+  type ComboboxProps,
+} from "./Combobox";
 
 /**
  * MultiCombobox — a Combobox that collects MANY values. The embedded
@@ -30,6 +44,14 @@ import { Combobox, type ComboboxHandle, type ComboboxProps } from "./Combobox";
  * 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.
  *
@@ -59,11 +81,22 @@ export type MultiComboboxEntry = {
 
 export type MultiComboboxHandle = ComboboxHandle;
 
+export type MultiComboboxLayout = "stacked" | "inline";
+
 export type MultiComboboxProps = Omit<
   ComboboxProps,
-  "committed" | "committedExtra" | "onUncommit" | "clearOnCommit"
+  | "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;
@@ -80,6 +113,42 @@ export type MultiComboboxProps = Omit<
   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(
     {
@@ -91,14 +160,29 @@ export const MultiCombobox = forwardRef<MultiComboboxHandle, MultiComboboxProps>
       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`.
-    const comboboxWrapRef = useRef<HTMLDivElement | null>(null);
+    // 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 => {
@@ -112,48 +196,112 @@ export const MultiCombobox = forwardRef<MultiComboboxHandle, MultiComboboxProps>
       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}>
-        <div ref={comboboxWrapRef}>
-          <Combobox
-            ref={ref}
-            {...comboboxProps}
-            clearOnCommit
-            committed={null}
-            testid={`${testid}-combobox`}
-          />
-        </div>
-
-        <ul
-          role="list"
-          aria-label={entriesLabel ?? "Selected items"}
-          data-testid={`${testid}-entries`}
-          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)}
+        {inline ? (
+          <>
+            {label ? (
+              <label
+                htmlFor={inputId}
+                className="ck-eyebrow"
+                style={{ color: "var(--ck-text-secondary)", display: "block", marginBottom: 6 }}
               >
-                {entry.title}
-              </Chip>
-            </li>
-          ))}
-        </ul>
+                {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 }}>

package/src/primitives/index.ts

@@ -25,7 +25,12 @@ export type {
 export { Chip } from "./Chip";
 export type { ChipProps, ChipTone } from "./Chip";
 export { MultiCombobox } from "./MultiCombobox";
-export type { MultiComboboxProps, MultiComboboxEntry, MultiComboboxHandle } from "./MultiCombobox";
+export type {
+  MultiComboboxProps,
+  MultiComboboxEntry,
+  MultiComboboxHandle,
+  MultiComboboxLayout,
+} from "./MultiCombobox";
 export { Textarea } from "./Textarea";
 export type { TextareaProps } from "./Textarea";
 export { Checkbox } from "./Checkbox";

package/src/styles/index.css

@@ -304,3 +304,40 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
     animation: none;
   }
 }
+
+/* ---------- Input bare mode + MultiCombobox inline field ----------
+   `.ck-input--bare` is an <input> whose FIELD is drawn by its host
+   (MultiCombobox inline layout: chips + input in one frame). Chrome
+   presets restyle `.ck-input` with !important at up to (0,5,1)
+   specificity, so this rule uses `:not(#\#)` to out-rank them and
+   strip every trace of field chrome back off. */
+.ck-input.ck-input--bare:not(#\#) {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  height: 28px !important;
+  padding: 0 4px !important;
+}
+
+/* The host-drawn field: looks like .ck-input, carries the focus ring
+   via :focus-within, the invalid border via :has([aria-invalid]) and
+   the disabled dim via :has(:disabled). */
+.ck-multi-combobox-field:focus-within {
+  border-color: var(--ck-accent) !important;
+  box-shadow: 0 0 0 3px var(--ck-accent-muted);
+}
+.ck-multi-combobox-field:has(.ck-input[aria-invalid="true"]) {
+  border-color: var(--ck-critical) !important;
+}
+.ck-multi-combobox-field:has(.ck-input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ck-multi-combobox-invalid-hint {
+  display: none;
+}
+.ck-multi-combobox-field:has(.ck-input[aria-invalid="true"]) + .ck-multi-combobox-invalid-hint {
+  display: block;
+}