@godxjp/ui 20.2.1 → 22.0.0

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

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

@@ -0,0 +1,285 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../data-display/popover.js";
+import { Command, CommandEmpty, CommandItem, CommandList } from "./command.js";
+function matchTrigger(text, caret, trigger) {
+  if (!trigger) return null;
+  const before = text.slice(0, caret);
+  const start = before.lastIndexOf(trigger);
+  if (start === -1) return null;
+  const query = before.slice(start + trigger.length);
+  if (/\s/.test(query)) return null;
+  const preceding = start === 0 ? "" : before[start - 1];
+  if (preceding !== "" && !/\s/.test(preceding)) return null;
+  return { query };
+}
+function levelItems(items, path) {
+  let current = items;
+  for (const step of path) {
+    const next = current.find((item) => item.value === step)?.children;
+    if (!next) return current;
+    current = next;
+  }
+  return current;
+}
+function labelOf(item) {
+  return item.label ?? item.value;
+}
+function matches(item, query) {
+  if (!query) return true;
+  const needle = query.toLocaleLowerCase();
+  return labelOf(item).toLocaleLowerCase().includes(needle) || item.value.toLocaleLowerCase().includes(needle) || (item.description?.toLocaleLowerCase().includes(needle) ?? false);
+}
+function ChatSuggestion({
+  items,
+  onValueChange,
+  triggerCharacter = "/",
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  emptyMessage,
+  listLabel: listLabelProp,
+  id,
+  className
+}) {
+  const { t } = useTranslation();
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolledOpen;
+  const [query, setQuery] = React.useState("");
+  const [path, setPath] = React.useState([]);
+  const [activeValue, setActiveValue] = React.useState("");
+  const [activeId, setActiveId] = React.useState(void 0);
+  const anchorRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [listId, setListId] = React.useState(void 0);
+  const field = React.useCallback(() => anchorRef.current?.querySelector("textarea") ?? null, []);
+  const openRef = React.useRef(isOpen);
+  openRef.current = isOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openRef.current === next) return;
+      openRef.current = next;
+      if (open === void 0) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+      if (!next) {
+        setQuery("");
+        setPath([]);
+      }
+    },
+    [open, onOpenChange]
+  );
+  const visible = React.useMemo(() => {
+    return levelItems(items, path).filter((item) => matches(item, query));
+  }, [items, path, query]);
+  const enabled = React.useMemo(() => visible.filter((item) => !item.disabled), [visible]);
+  React.useEffect(() => {
+    if (enabled.length === 0) {
+      setActiveValue("");
+      return;
+    }
+    setActiveValue(
+      (current) => enabled.some((item) => item.value === current) ? current : enabled[0].value
+    );
+  }, [enabled]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setListId(void 0);
+      setActiveId(void 0);
+      return;
+    }
+    const content = contentRef.current;
+    setListId(content?.querySelector("[cmdk-list]")?.id || void 0);
+    setActiveId(content?.querySelector('[cmdk-item][aria-selected="true"]')?.id || void 0);
+  });
+  const close = React.useCallback(() => {
+    setOpen(false);
+    field()?.focus();
+  }, [field, setOpen]);
+  const evaluate = React.useCallback(() => {
+    const node = field();
+    if (!node) return;
+    const caret = node.selectionStart ?? node.value.length;
+    const hit = matchTrigger(node.value, caret, triggerCharacter);
+    if (!hit) {
+      setOpen(false);
+      return;
+    }
+    setQuery(hit.query);
+    setOpen(true);
+  }, [field, setOpen, triggerCharacter]);
+  const onTrigger = React.useCallback(
+    (next) => {
+      if (next === false) {
+        setOpen(false);
+        return;
+      }
+      if (next === void 0) {
+        setQuery("");
+        setOpen(true);
+        return;
+      }
+      window.setTimeout(evaluate, 0);
+    },
+    [evaluate, setOpen]
+  );
+  const pick = React.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (item.children && item.children.length > 0) {
+        setPath((current) => [...current, item.value]);
+        setQuery("");
+        field()?.focus();
+        return;
+      }
+      onValueChange?.(item.value);
+      setOpen(false);
+      field()?.focus();
+    },
+    [field, onValueChange, setOpen]
+  );
+  const move = React.useCallback(
+    (direction) => {
+      if (enabled.length === 0) return;
+      const index = enabled.findIndex((item) => item.value === activeValue);
+      const from = index === -1 ? direction === 1 ? -1 : 0 : index;
+      const next = (from + direction + enabled.length) % enabled.length;
+      setActiveValue(enabled[next].value);
+    },
+    [activeValue, enabled]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (!openRef.current) {
+        if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+          window.setTimeout(evaluate, 0);
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          move(1);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          move(-1);
+          return;
+        case "Enter":
+        case "Tab": {
+          const item = enabled.find((candidate) => candidate.value === activeValue);
+          if (!item) return;
+          event.preventDefault();
+          pick(item);
+          return;
+        }
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          close();
+          return;
+        default:
+          if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+            window.setTimeout(evaluate, 0);
+          }
+      }
+    },
+    [activeValue, close, enabled, evaluate, move, pick]
+  );
+  const listLabel = listLabelProp ?? t("dataEntry.chatSuggestion.label");
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverAnchor,
+      {
+        ref: anchorRef,
+        id,
+        "data-slot": "chat-suggestion",
+        className: cn("block w-full", className),
+        onPointerUp: () => window.setTimeout(evaluate, 0),
+        onBlurCapture: (event) => {
+          const next = event.relatedTarget;
+          if (next && anchorRef.current?.contains(next)) return;
+          if (openRef.current) setOpen(false);
+        },
+        children: [
+          children({
+            onTrigger,
+            onKeyDown
+          }),
+          /* @__PURE__ */ jsx(FieldPopupWiring, { field, open: isOpen, listId, activeId }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: isOpen ? t("dataEntry.chatSuggestion.count", { count: visible.length }) : "" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        ref: contentRef,
+        flush: true,
+        align: "start",
+        "aria-label": listLabel,
+        className: "ui-chat-suggestion-panel",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            value: activeValue,
+            onValueChange: setActiveValue,
+            shouldFilter: false,
+            label: listLabel,
+            children: /* @__PURE__ */ jsxs(CommandList, { label: listLabel, children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage ?? t("dataEntry.chatSuggestion.empty") }),
+              visible.map((item) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: item.value,
+                  disabled: item.disabled,
+                  onSelect: () => pick(item),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: item.icon }) : null,
+                    /* @__PURE__ */ jsxs("span", { className: "ui-chat-suggestion-item-text", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: labelOf(item) }),
+                      item.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: item.description }) : null
+                    ] })
+                  ]
+                },
+                item.value
+              ))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+ChatSuggestion.displayName = "ChatSuggestion";
+function FieldPopupWiring({
+  field,
+  open,
+  listId,
+  activeId
+}) {
+  React.useEffect(() => {
+    const node = field();
+    if (!node) return;
+    node.setAttribute("aria-haspopup", "listbox");
+    node.setAttribute("aria-autocomplete", "list");
+    if (open && listId) {
+      node.setAttribute("aria-controls", listId);
+      if (activeId) node.setAttribute("aria-activedescendant", activeId);
+      else node.removeAttribute("aria-activedescendant");
+    } else {
+      node.removeAttribute("aria-controls");
+      node.removeAttribute("aria-activedescendant");
+    }
+  }, [activeId, field, listId, open]);
+  return null;
+}
+export {
+  ChatSuggestion
+};

package/dist/components/data-entry/date-picker.d.ts

@@ -2,8 +2,15 @@ import * as React from "react";
 import type { DatePickerProp } from "../../props/components/data-entry.prop.js";
 export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an ISO-8601
- * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
- * screen-reader friendly, and e2e-testable by simply filling the input.
+ * DatePicker — ONE date control, WAI-ARIA date combobox. A real, typeable `<input>` holds the
+ * value (form-submittable via `name`, screen-reader friendly, e2e-testable by filling the input);
+ * the panel is the visual affordance.
+ *
+ * Two axes: `picker` sets the GRANULARITY (day · week · month · quarter · year), `range` sets the
+ * CARDINALITY (one date, `multiple` dates, or a two-endpoint `DateRange`). This replaces the four
+ * components this package used to ship — `DateRangePicker`, `MonthPicker`, `MonthRangePicker` were
+ * separate copies of this same machine, and every one of them had drifted: a disabled picker that
+ * still opened, bounds that greyed a chevron and clamped nothing, an unhandled Enter key, and a
+ * `name` that submitted `2026/03`. Written once, those are fixed on all eight combinations.
  */
 export declare function DatePicker(props: DatePickerProp): React.JSX.Element;