@godxjp/ui 20.2.1 → 22.0.0

package/dist/components/data-display/progress.js

@@ -1,8 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+const RING_BOX = 40;
+const RING_CENTRE = RING_BOX / 2;
+const RING_RADIUS = 16;
+const RING_ROTATION = `rotate(-90 ${RING_CENTRE} ${RING_CENTRE})`;
 function Progress(props) {
   const { t } = useTranslation();
   const labelId = React.useId();
@@ -12,6 +16,8 @@ function Progress(props) {
     segments,
     value,
     tone,
+    size,
+    shape,
     over = false,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -30,6 +36,7 @@ function Progress(props) {
       {
         className: cn("ui-progress", className),
         "data-breakdown": "",
+        "data-size": size === "sm" ? "sm" : void 0,
         role: "img",
         "aria-labelledby": ariaLabelledBy,
         "aria-label": ariaLabelledBy !== void 0 ? void 0 : ariaLabel !== void 0 ? `${ariaLabel}${separator}${spoken}` : label !== void 0 ? `${label}${separator}${spoken}` : spoken,
@@ -53,12 +60,14 @@ function Progress(props) {
   const isOver = over && meterValue > 100;
   const boundedValue = Math.max(0, Math.min(100, meterValue));
   const effectiveTone = tone ?? (isOver ? "destructive" : "success");
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("ui-progress", className),
       "data-tone": effectiveTone,
-      "data-over": isOver ? "" : void 0,
+      "data-size": size === "sm" ? "sm" : void 0,
+      "data-shape": shape === "ring" ? "ring" : void 0,
+      "data-over": isOver && shape !== "ring" ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
@@ -67,10 +76,53 @@ function Progress(props) {
       "aria-labelledby": labelledBy,
       "aria-label": labelledBy !== void 0 ? void 0 : named ? ariaLabel : t("dataDisplay.progress.ariaLabel"),
       ...domProps,
-      children: [
+      children: shape === "ring" ? (
+        /*
+         * The ARC is aria-hidden and the ring carries no text of its own for a screen reader: the
+         * element above is already `role="progressbar"` with `aria-valuenow`/`aria-valuetext`, so
+         * announcing the drawing as well would say the same number twice. `focusable="false"`
+         * because IE-era SVG semantics still reach some AT through the tab order.
+         */
+        /* @__PURE__ */ jsxs("div", { className: "ui-progress-ring", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "ui-progress-ring-svg",
+              viewBox: `0 0 ${RING_BOX} ${RING_BOX}`,
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-track",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-indicator",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100,
+                    transform: RING_ROTATION,
+                    strokeDasharray: `${boundedValue} 100`
+                  }
+                )
+              ]
+            }
+          ),
+          label !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ui-progress-ring-label", id: labelId, children: label }) : null
+        ] })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ui-progress-bar", style: { width: `${boundedValue}%` } }) }),
         caption
-      ]
+      ] })
     }
   );
 }

package/dist/components/data-display/scroll-area.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
@@ -112,6 +113,18 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
     };
   }, [viewport, enabled, offset]);
 }
+function useAmbientDirection(root, provided) {
+  const [ambient, setAmbient] = React.useState(void 0);
+  useLayoutEffect(() => {
+    if (provided !== void 0) return;
+    const parent = root?.parentElement;
+    if (!parent || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
+      return;
+    }
+    setAmbient(window.getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
+  }, [root, provided]);
+  return provided ?? ambient;
+}
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -121,9 +134,20 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
+    dir,
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
+    const [root, setRoot] = React.useState(null);
+    const attachRoot = React.useCallback(
+      (node) => {
+        setRoot(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const direction = useAmbientDirection(root, dir);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
@@ -137,7 +161,8 @@ const ScrollArea = React.forwardRef(
     return /* @__PURE__ */ jsxs(
       ScrollAreaPrimitive.Root,
       {
-        ref,
+        ref: attachRoot,
+        dir: direction,
         className: cn("relative overflow-hidden", className),
         ...props,
         children: [

package/dist/components/data-display/tree.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { TreeProp } from "../../props/components/data-display.prop.js";
+export type { TreeNodeProp, TreeProp, TreeProp as TreeProps, } from "../../props/components/data-display.prop.js";
+/**
+ * `ref` reaches the `role="tree"` container — the element a page scrolls to, measures, or
+ * focus-manages. Every unknown prop (`aria-*`, `data-*`) rides `...ariaProps` onto the same node.
+ */
+export declare const Tree: React.ForwardRefExoticComponent<TreeProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/tree.js

@@ -0,0 +1,426 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronRight, File as FileIcon, Folder, FolderOpen } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { CheckboxVisual } from "../data-entry/checkbox.js";
+import { Skeleton } from "../feedback/skeleton.js";
+import {
+  collectAllExpandableKeys,
+  flattenVisibleTree,
+  getDescendantValues,
+  normalizeTreeOptions,
+  reactNodeText
+} from "../../lib/tree.js";
+function toArray(value) {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function isTickable(node) {
+  return !node.disabled && !node.disableCheckbox;
+}
+function normalizeCheckedValues(nodes, source, out = /* @__PURE__ */ new Set()) {
+  for (const node of nodes) {
+    const children = node.children ?? [];
+    if (children.length === 0) {
+      if (source.has(node.value)) out.add(node.value);
+      continue;
+    }
+    normalizeCheckedValues(children, source, out);
+    const tickable = children.filter(isTickable);
+    const allOn = tickable.length > 0 && tickable.every((child) => out.has(child.value));
+    if (allOn || tickable.length === 0 && source.has(node.value)) out.add(node.value);
+  }
+  return out;
+}
+function indexTree(nodes, into = /* @__PURE__ */ new Map()) {
+  for (const node of nodes) {
+    into.set(node.value, node);
+    if (node.children?.length) indexTree(node.children, into);
+  }
+  return into;
+}
+function isRtl(element) {
+  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function TreeRoot({
+  treeData,
+  fieldNames,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  checkable: checkableProp = false,
+  checkStrictly = false,
+  checkedValues,
+  defaultCheckedValues,
+  onCheckedValuesChange,
+  expandedValues,
+  defaultExpandedValues,
+  onExpandedValuesChange,
+  defaultExpandAll = false,
+  loadData,
+  titleRender,
+  showLine = false,
+  showIcon = false,
+  variant = "default",
+  size = "md",
+  disabled = false,
+  className,
+  id,
+  forwardedRef,
+  ...ariaProps
+}) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const treeId = id ?? `${reactId}-tree`;
+  const options = React.useMemo(
+    () => normalizeTreeOptions(treeData, fieldNames),
+    [treeData, fieldNames]
+  );
+  const nodeIndex = React.useMemo(() => indexTree(options), [options]);
+  const [internalExpanded, setInternalExpanded] = React.useState(() => {
+    if (defaultExpandedValues) return [...defaultExpandedValues];
+    return defaultExpandAll ? collectAllExpandableKeys(options) : [];
+  });
+  const isExpandedControlled = expandedValues !== void 0;
+  const expanded = isExpandedControlled ? [...expandedValues] : internalExpanded;
+  const expandedSet = new Set(expanded);
+  const commitExpanded = (next) => {
+    if (!isExpandedControlled) setInternalExpanded(next);
+    onExpandedValuesChange?.(next);
+  };
+  const isValueControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(() => toArray(defaultValue));
+  const selected = isValueControlled ? toArray(value) : internalValue;
+  const commitValue = (next) => {
+    if (!isValueControlled) setInternalValue(next);
+    onValueChange?.(multiple ? next : next[0]);
+  };
+  const isCheckedControlled = checkedValues !== void 0;
+  const [internalChecked, setInternalChecked] = React.useState(
+    () => defaultCheckedValues ? [...defaultCheckedValues] : []
+  );
+  const checked = isCheckedControlled ? [...checkedValues] : internalChecked;
+  const checkedSet = checkStrictly ? new Set(checked) : normalizeCheckedValues(options, new Set(checked));
+  const commitChecked = (next) => {
+    const settled = checkStrictly ? next : [...normalizeCheckedValues(options, new Set(next))];
+    if (!isCheckedControlled) setInternalChecked(settled);
+    onCheckedValuesChange?.(settled);
+  };
+  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const [loadingValues, setLoadingValues] = React.useState(() => /* @__PURE__ */ new Set());
+  const requestLoad = (node) => {
+    if (!loadData) return;
+    if ((node.children?.length ?? 0) > 0 || node.isLeaf === true) return;
+    if (requestedLoads.current.has(node.value)) return;
+    requestedLoads.current.add(node.value);
+    setLoadingValues((prev) => new Set(prev).add(node.value));
+    void Promise.resolve(loadData(node)).finally(() => {
+      setLoadingValues((prev) => {
+        const next = new Set(prev);
+        next.delete(node.value);
+        return next;
+      });
+    });
+  };
+  const visible = flattenVisibleTree(options, expandedSet);
+  const visibleIndex = new Map(visible.map((entry, index) => [entry.node.value, index]));
+  const [activeValue, setActiveValue] = React.useState(null);
+  const rovingValue = (activeValue && visibleIndex.has(activeValue) ? activeValue : null) ?? visible.find((entry) => selected.includes(entry.node.value))?.node.value ?? visible[0]?.node.value ?? null;
+  const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
+  const pendingFocus = React.useRef(null);
+  React.useEffect(() => {
+    const target = pendingFocus.current;
+    if (!target) return;
+    pendingFocus.current = null;
+    nodeRefs.current.get(target)?.focus();
+  });
+  const moveTo = (index) => {
+    const entry = visible[index];
+    if (!entry) return;
+    setActiveValue(entry.node.value);
+    pendingFocus.current = entry.node.value;
+  };
+  const expandableOf = (node) => (node.children?.length ?? 0) > 0 && node.isLeaf !== true || Boolean(loadData && node.isLeaf === false && !node.children?.length);
+  const expandNode = (node) => {
+    if (disabled || expandedSet.has(node.value)) return;
+    requestLoad(node);
+    commitExpanded([...expanded, node.value]);
+  };
+  const collapseNode = (node) => {
+    if (disabled) return;
+    commitExpanded(expanded.filter((entry) => entry !== node.value));
+  };
+  const toggleExpand = (node) => {
+    if (expandedSet.has(node.value)) collapseNode(node);
+    else expandNode(node);
+  };
+  const checkStateOf = (node) => {
+    const children = node.children ?? [];
+    if (checkStrictly || children.length === 0) {
+      return checkedSet.has(node.value) ? "checked" : "unchecked";
+    }
+    if (checkedSet.has(node.value)) return "checked";
+    const descendants = getDescendantValues(node).slice(1);
+    return descendants.some((entry) => checkedSet.has(entry)) ? "indeterminate" : "unchecked";
+  };
+  const toggleCheck = (node) => {
+    if (disabled || node.disabled || node.disableCheckbox) return;
+    const isOn = checkStateOf(node) === "checked";
+    if (checkStrictly) {
+      commitChecked(
+        isOn ? checked.filter((entry) => entry !== node.value) : [...checked, node.value]
+      );
+      return;
+    }
+    const related = getDescendantValues(node).filter((entry) => {
+      const target = nodeIndex.get(entry);
+      return target ? isTickable(target) : false;
+    });
+    commitChecked(
+      isOn ? checked.filter((entry) => !related.includes(entry)) : [.../* @__PURE__ */ new Set([...checked, ...related])]
+    );
+  };
+  const select = (node) => {
+    if (disabled || node.disabled) return;
+    const isOn = selected.includes(node.value);
+    if (multiple) {
+      commitValue(
+        isOn ? selected.filter((entry) => entry !== node.value) : [...selected, node.value]
+      );
+      return;
+    }
+    commitValue(isOn ? [] : [node.value]);
+  };
+  const activate = (node) => {
+    if (checkableProp) toggleCheck(node);
+    else select(node);
+  };
+  const typeAhead = React.useRef({ buffer: "", at: 0 });
+  const jumpByLabel = (key, from) => {
+    const now = Date.now();
+    const state = typeAhead.current;
+    state.buffer = now - state.at > 800 ? key : state.buffer + key;
+    state.at = now;
+    const needle = state.buffer.toLowerCase();
+    for (let step = 1; step <= visible.length; step += 1) {
+      const index = (from + step) % visible.length;
+      if (reactNodeText(visible[index].node.label).toLowerCase().startsWith(needle)) {
+        moveTo(index);
+        return;
+      }
+    }
+  };
+  const siblingIndexes = (index, depth) => {
+    const out = [];
+    for (let i = index; i >= 0; i -= 1) {
+      if (visible[i].depth < depth) break;
+      if (visible[i].depth === depth) out.unshift(i);
+    }
+    for (let i = index + 1; i < visible.length; i += 1) {
+      if (visible[i].depth < depth) break;
+      if (visible[i].depth === depth) out.push(i);
+    }
+    return out;
+  };
+  const onNodeKeyDown = (event, node) => {
+    const index = visibleIndex.get(node.value);
+    if (index === void 0) return;
+    const depth = visible[index].depth;
+    const expandable = expandableOf(node);
+    const isOpen = expandable && expandedSet.has(node.value);
+    const rtl = isRtl(event.currentTarget);
+    const inward = rtl ? "ArrowLeft" : "ArrowRight";
+    const outward = rtl ? "ArrowRight" : "ArrowLeft";
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveTo(index + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveTo(index - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      moveTo(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      moveTo(visible.length - 1);
+      return;
+    }
+    if (event.key === inward) {
+      event.preventDefault();
+      if (expandable && !isOpen) expandNode(node);
+      else if (isOpen) moveTo(index + 1);
+      return;
+    }
+    if (event.key === outward) {
+      event.preventDefault();
+      if (isOpen) {
+        collapseNode(node);
+        return;
+      }
+      for (let i = index - 1; i >= 0; i -= 1) {
+        if (visible[i].depth < depth) {
+          moveTo(i);
+          return;
+        }
+      }
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      activate(node);
+      return;
+    }
+    if (event.key === "*") {
+      event.preventDefault();
+      const siblings = siblingIndexes(index, depth).map((i) => visible[i].node).filter((sibling) => expandableOf(sibling));
+      siblings.forEach(requestLoad);
+      commitExpanded([.../* @__PURE__ */ new Set([...expanded, ...siblings.map((sibling) => sibling.value)])]);
+      return;
+    }
+    if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      jumpByLabel(event.key, index);
+    }
+  };
+  const renderNodes = (nodes, depth) => nodes.flatMap((node, position) => {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    const expandable = expandableOf(node);
+    const isOpen = expandable && expandedSet.has(node.value);
+    const isLoading = loadingValues.has(node.value);
+    const isSelected = selected.includes(node.value);
+    const checkState = checkableProp ? checkStateOf(node) : "unchecked";
+    const nodeDisabled = disabled || Boolean(node.disabled);
+    const labelId = `${treeId}-${node.value}-label`;
+    const groupId = `${treeId}-${node.value}-group`;
+    const showGroup = isOpen && (hasChildren || isLoading);
+    const glyph = node.icon ?? (variant === "directory" ? hasChildren ? isOpen ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder, {}) : /* @__PURE__ */ jsx(FileIcon, {}) : null);
+    const item = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (element) => {
+          nodeRefs.current.set(node.value, element);
+        },
+        role: "treeitem",
+        "aria-labelledby": labelId,
+        "aria-level": depth + 1,
+        "aria-setsize": nodes.length,
+        "aria-posinset": position + 1,
+        "aria-selected": isSelected,
+        "aria-expanded": expandable ? isOpen : void 0,
+        "aria-owns": showGroup ? groupId : void 0,
+        "aria-checked": checkableProp ? checkState === "indeterminate" ? "mixed" : checkState === "checked" : void 0,
+        "aria-disabled": nodeDisabled || void 0,
+        "aria-busy": isLoading || void 0,
+        tabIndex: rovingValue === node.value ? 0 : -1,
+        onFocus: () => setActiveValue(node.value),
+        onKeyDown: (event) => onNodeKeyDown(event, node),
+        onClick: () => {
+          if (nodeDisabled) return;
+          select(node);
+        },
+        "data-selected": isSelected ? "true" : void 0,
+        "data-disabled": nodeDisabled ? "" : void 0,
+        className: "ui-tree-node ui-focus-ring",
+        style: { "--tree-node-level": depth },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-leaf": expandable ? void 0 : "",
+              className: "ui-tree-switcher",
+              title: expandable ? isOpen ? t("dataDisplay.tree.collapse") : t("dataDisplay.tree.expand") : void 0,
+              onClick: (event) => {
+                event.stopPropagation();
+                if (nodeDisabled || !expandable) return;
+                toggleExpand(node);
+              },
+              children: expandable ? isOpen ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}) : null
+            }
+          ),
+          checkableProp ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-tree-check",
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleCheck(node);
+              },
+              children: /* @__PURE__ */ jsx(
+                CheckboxVisual,
+                {
+                  checked: checkState === "checked",
+                  indeterminate: checkState === "indeterminate",
+                  disabled: nodeDisabled || Boolean(node.disableCheckbox)
+                }
+              )
+            }
+          ) : null,
+          showIcon && glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-tree-icon", children: glyph }) : null,
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-tree-label", children: titleRender ? titleRender(node) : node.label }),
+          isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.tree.selected") }) : null
+        ]
+      },
+      node.value
+    );
+    if (!showGroup) return [item];
+    return [
+      item,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: groupId,
+          role: "group",
+          className: "ui-tree-group",
+          style: { "--tree-node-level": depth + 1 },
+          children: hasChildren ? renderNodes(node.children, depth + 1) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ui-tree-loading",
+              style: { "--tree-node-level": depth + 1 },
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "ui-tree-loading-bar" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.tree.loading") })
+              ]
+            }
+          )
+        },
+        `${node.value}::group`
+      )
+    ];
+  });
+  const isEmpty = visible.length === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...ariaProps,
+        ref: forwardedRef,
+        id: treeId,
+        role: "tree",
+        "aria-multiselectable": multiple || checkableProp,
+        "aria-disabled": disabled || void 0,
+        "data-size": size,
+        "data-variant": variant,
+        "data-show-line": showLine ? "true" : void 0,
+        "data-empty": isEmpty ? "true" : void 0,
+        className: cn("ui-tree", className),
+        children: isEmpty ? null : renderNodes(options, 0)
+      }
+    ),
+    isEmpty ? /* @__PURE__ */ jsx("p", { role: "status", className: "ui-tree-empty", children: t("dataDisplay.tree.empty") }) : null
+  ] });
+}
+const Tree = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TreeRoot, { ...props, forwardedRef: ref }));
+Tree.displayName = "Tree";
+export {
+  Tree
+};

package/dist/components/data-entry/chat-composer.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+export type { ChatComposerProp, ChatComposerProp as ChatComposerProps, ChatComposerSubmitTypeProp, } from "../../props/components/data-entry.prop.js";
+/**
+ * ChatComposer — the message input of a conversation (Ant Design X `Sender`).
+ *
+ * ## Why a component and not a composition
+ *
+ * Three behaviours live here and nowhere else, and every app that hand-rolls a composer gets at
+ * least one of them wrong:
+ *
+ * 1. **An IME conversion is not a message.** Between `compositionstart` and `compositionend` the
+ *    text in the box is a CANDIDATE being converted, and the `Enter` that accepts it belongs to
+ *    the IME. A composer that reads that `Enter` as "send" makes Japanese and Vietnamese input
+ *    impossible — the first kanji conversion sends a half-written line. The guard is a ref, not
+ *    state, because it has to be readable inside the keydown that fires between the two events.
+ * 2. **One trailing action at a time.** While a response streams the send button IS the cancel
+ *    button — the same discipline as the picker trailing-action rule. Rendering both is how a
+ *    user cancels by aiming for send.
+ * 3. **The draft box is the focus target.** `ref`, `id`, `name` and the whole `FormField`
+ *    label/helper/error contract land on the `<textarea>`, not on the frame, so a composer inside
+ *    a `FormField` is labelled and described exactly like an `Input`.
+ *
+ * Everything visible is a real primitive: the draft box is `Textarea` (`variant="borderless"`, so
+ * the frame is the only boundary) and every action is a `Button`.
+ */
+export declare const ChatComposer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "onKeyDown" | "onSubmit" | "prefix"> & import("../../lib/field-a11y.js").FieldA11yProps & {
+    value?: import("../../props/index.js").ValueProp<string>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<string>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<string>;
+    onSubmit?: (value: string) => void;
+    onCancel?: () => void;
+    loading?: import("../../props/index.js").PendingProp;
+    submitType?: import("./chat-composer.js").ChatComposerSubmitTypeProp;
+    placeholder?: import("../../props/index.js").PlaceholderProp;
+    disabled?: import("../../props/index.js").DisabledProp;
+    readOnly?: boolean;
+    header?: React.ReactNode;
+    prefix?: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    size?: import("../../props/index.js").SizeProp;
+    maxLength?: number;
+    status?: import("../../props/index.js").ControlStatusProp;
+    submitLabel?: string;
+    cancelLabel?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    name?: import("../../props/index.js").NameProp;
+    id?: import("../../props/index.js").IdProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLTextAreaElement>>;