@godxjp/ui 20.2.0 → 21.0.0

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>>;

package/dist/components/data-entry/chat-composer.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SendHorizontal, Square } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { omitFieldA11y, pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
+import { Button } from "../general/button.js";
+import { Textarea } from "./textarea.js";
+import { controlSurfaceAttrs, resolveAriaInvalid } from "./control-surface.js";
+function isSendable(text) {
+  return text.trim().length > 0;
+}
+const ChatComposer = React.forwardRef(
+  ({
+    className,
+    id,
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    onCancel,
+    loading = false,
+    submitType = "enter",
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    header,
+    prefix,
+    footer,
+    actions,
+    size,
+    maxLength,
+    status,
+    submitLabel,
+    cancelLabel,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [draft, setDraft] = React.useState(() => String(value ?? defaultValue ?? ""));
+    React.useEffect(() => {
+      if (value !== void 0) setDraft(String(value));
+    }, [value]);
+    const composing = React.useRef(false);
+    const fieldA11y = pickFieldA11y(props);
+    const rest = omitFieldA11y(props);
+    const identity = useFieldIdentity({ id, name, "data-field": props["data-field"] });
+    const surface = controlSurfaceAttrs({ status, size });
+    const canSubmit = isSendable(draft) && !disabled && !readOnly && !loading;
+    const submit = React.useCallback(() => {
+      const text = innerRef.current?.value ?? draft;
+      if (!isSendable(text) || disabled || readOnly || loading) return;
+      onSubmit?.(text);
+    }, [draft, disabled, readOnly, loading, onSubmit]);
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key !== "Enter") return;
+      if (composing.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) {
+        return;
+      }
+      const wantsSend = submitType === "enter" ? !event.shiftKey : event.shiftKey;
+      if (!wantsSend) return;
+      event.preventDefault();
+      submit();
+    };
+    const sendName = submitLabel ?? t("dataEntry.chatComposer.send");
+    const cancelName = cancelLabel ?? t("dataEntry.chatComposer.cancel");
+    const actionSize = size === "xs" ? "icon-xs" : size === "sm" ? "icon-sm" : size === "lg" ? "icon-lg" : "icon";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-composer",
+        "data-disabled": disabled ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
+        "data-submit-type": submitType,
+        "aria-busy": loading || void 0,
+        className: cn("ui-chat-composer ui-control-surface", className),
+        ...rest,
+        ...surface,
+        children: [
+          header ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-composer-header", className: "ui-chat-composer-header", children: header }) : null,
+          /* @__PURE__ */ jsxs("div", { "data-slot": "chat-composer-row", className: "ui-chat-composer-row", children: [
+            prefix ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-composer-prefix", className: "ui-chat-composer-prefix", children: prefix }) : null,
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ref: setRefs,
+                id,
+                name,
+                variant: "borderless",
+                autoGrow: true,
+                className: "ui-chat-composer-field",
+                value,
+                defaultValue,
+                placeholder: placeholder ?? t("dataEntry.chatComposer.placeholder"),
+                disabled,
+                readOnly,
+                maxLength,
+                status,
+                "aria-invalid": resolveAriaInvalid(fieldA11y["aria-invalid"], status),
+                onValueChange: (next) => {
+                  if (value === void 0) setDraft(next);
+                  onValueChange?.(next);
+                },
+                onKeyDown: handleKeyDown,
+                onCompositionStart: () => {
+                  composing.current = true;
+                },
+                onCompositionEnd: () => {
+                  composing.current = false;
+                },
+                ...fieldA11y,
+                ...identity
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { "data-slot": "chat-composer-actions", className: "ui-chat-composer-actions", children: [
+              actions,
+              loading ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: actionSize,
+                  variant: "secondary",
+                  "aria-label": cancelName,
+                  onClick: onCancel,
+                  disabled,
+                  children: /* @__PURE__ */ jsx(Square, { "aria-hidden": "true" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: actionSize,
+                  "aria-label": sendName,
+                  onClick: submit,
+                  disabled: !canSubmit,
+                  children: /* @__PURE__ */ jsx(SendHorizontal, { "aria-hidden": "true" })
+                }
+              )
+            ] })
+          ] }),
+          footer ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-composer-footer", className: "ui-chat-composer-footer", children: footer }) : null
+        ]
+      }
+    );
+  }
+);
+ChatComposer.displayName = "ChatComposer";
+export {
+  ChatComposer
+};

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { ChatSuggestionProp } from "../../props/components/data-entry.prop.js";
+export type { ChatSuggestionProp, ChatSuggestionProp as ChatSuggestionProps, ChatSuggestionItemProp, ChatSuggestionRenderProp, } from "../../props/components/data-entry.prop.js";
+/**
+ * ChatSuggestion — trigger-character autocomplete over a `ChatComposer` (Ant Design X
+ * `Suggestion`).
+ *
+ * ## What it owns, and what it deliberately does not
+ *
+ * The list is the existing `Command` (cmdk) inside a `Popover`: the listbox/option roles, the
+ * active-row bookkeeping and the scroll-into-view all come from a primitive that already ships
+ * them, so there is no hand-rolled listbox here. What this component owns is the part `Command`
+ * cannot know about — a `<textarea>` it does not render:
+ *
+ * - **Detecting the trigger at the CARET**, not merely anywhere in the text, so a `/` in the
+ *   middle of a URL opens nothing and a caret moved out of a token closes the list.
+ * - **Driving the list from a box that keeps focus.** Focus never leaves the textarea (the popover
+ *   is opened with `onOpenAutoFocus` prevented), so arrows/Enter are forwarded through the render
+ *   prop and the active row is announced through `aria-activedescendant` — the APG combobox
+ *   pattern, rather than moving focus into the panel and stranding the draft.
+ * - **`Escape` costs nothing.** It closes the list, returns focus to the textarea and leaves the
+ *   typed text exactly as it was; a suggestion list that eats the draft on dismiss is the defect
+ *   this guards.
+ */
+export declare function ChatSuggestion({ items, onValueChange, triggerCharacter, open, defaultOpen, onOpenChange, children, emptyMessage, listLabel: listLabelProp, id, className, }: ChatSuggestionProp): React.JSX.Element;
+export declare namespace ChatSuggestion {
+    var displayName: string;
+}