@duskmoon-dev/components 0.4.1 → 0.5.0

package/dist/components/chat/index.js

@@ -1,7 +1,21 @@
 "use client";
 
 // src/components/chat/Chat.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/chat/ChatComposer.tsx
+import {
+  forwardRef as forwardRef2,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -28,6 +42,1063 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  accent: "btn-accent",
+  neutral: "btn-neutral",
+  base: "btn-base",
+  info: "btn-info",
+  success: "btn-success",
+  warning: "btn-warning",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle btn-icon",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  confirm,
+  onClick,
+  ...props
+}) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
+      }),
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
+    ]
+  });
+}
+// src/components/input/Input.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+
+// src/classes/input.ts
+var inputBaseClass = "input";
+var inputWrapperClass = "input-wrapper";
+var inputAffixWrapperClass = "input-affix-wrapper";
+var inputPrefixClass = "input-prefix";
+var inputSuffixClass = "input-suffix";
+var inputClearClass = "input-clear";
+var inputSearchClass = "input-search";
+var inputSearchButtonClass = "input-search-button";
+var inputPasswordClass = "input-password";
+var inputPasswordToggleClass = "input-password-toggle";
+var inputGroupClass = "input-group";
+var textAreaBaseClass = "textarea";
+var textAreaWrapperClass = "textarea-wrapper";
+var textAreaCountClass = "textarea-counter";
+var textAreaCountExceededClass = "textarea-counter-exceeded";
+var textAreaAutoSizeClass = "textarea-auto-resize";
+var inputVariantClasses = {
+  filled: "input-filled",
+  outlined: "input-outlined"
+};
+var inputSizeClasses = {
+  sm: "input-sm",
+  md: "input-md",
+  lg: "input-lg"
+};
+var inputStatusClasses = {
+  error: "input-error",
+  success: "input-success"
+};
+var textAreaVariantClasses = {
+  filled: "textarea-filled",
+  outlined: "textarea-outlined"
+};
+var textAreaSizeClasses = {
+  sm: "textarea-sm",
+  md: "",
+  lg: "textarea-lg"
+};
+var textAreaStatusClasses = {
+  error: "textarea-error",
+  success: "textarea-success"
+};
+var textAreaResizeClasses = {
+  none: "textarea-resize-none",
+  both: "textarea-resize-both",
+  horizontal: "textarea-resize-horizontal",
+  vertical: "textarea-resize-vertical"
+};
+function getInputClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  className
+}) {
+  return cn(inputBaseClass, inputVariantClasses[variant], inputSizeClasses[size], status && inputStatusClasses[status], className);
+}
+function getInputWrapperClasses({
+  affixed,
+  className
+}) {
+  return cn(inputWrapperClass, affixed && inputAffixWrapperClass, className);
+}
+function getSearchWrapperClasses({ className }) {
+  return cn(inputSearchClass, className);
+}
+function getPasswordWrapperClasses({
+  className
+}) {
+  return cn(inputPasswordClass, className);
+}
+function getTextAreaClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  resize = "vertical",
+  autoSize,
+  className
+}) {
+  return cn(textAreaBaseClass, textAreaVariantClasses[variant], textAreaSizeClasses[size], status && textAreaStatusClasses[status], textAreaResizeClasses[resize], autoSize && textAreaAutoSizeClass, className);
+}
+function getTextAreaCountClasses({ exceeded }) {
+  return cn(textAreaCountClass, exceeded && textAreaCountExceededClass);
+}
+
+// src/components/input/Input.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function toTextValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(",");
+  }
+  return value == null ? "" : String(value);
+}
+var InputRoot = forwardRef(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  onChange,
+  prefix,
+  size = "md",
+  status,
+  suffix,
+  type = "text",
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const hasAffix = prefix != null || suffix != null || allowClear;
+  useImperativeHandle(ref, () => inputRef.current);
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  function handleClear() {
+    const input = inputRef.current;
+    if (!input || disabled) {
+      return;
+    }
+    input.value = "";
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onChange?.({
+      currentTarget: input,
+      target: input,
+      type: "change"
+    });
+    input.focus();
+  }
+  const control = /* @__PURE__ */ jsx2("input", {
+    ...props,
+    ref: inputRef,
+    type,
+    className: getInputClasses({ size, status, variant, className }),
+    disabled,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!hasAffix) {
+    return control;
+  }
+  const showClear = allowClear && !disabled && currentValue.length > 0;
+  return /* @__PURE__ */ jsxs2("span", {
+    className: getInputWrapperClasses({ affixed: hasAffix }),
+    children: [
+      prefix != null ? /* @__PURE__ */ jsx2("span", {
+        className: inputPrefixClass,
+        children: prefix
+      }) : null,
+      control,
+      showClear ? /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: inputClearClass,
+        "aria-label": "Clear input",
+        onClick: handleClear,
+        children: "x"
+      }) : null,
+      suffix != null ? /* @__PURE__ */ jsx2("span", {
+        className: inputSuffixClass,
+        children: suffix
+      }) : null
+    ]
+  });
+});
+InputRoot.displayName = "Input";
+var Search = forwardRef(({
+  className,
+  disabled,
+  enterButton,
+  loading,
+  onKeyDown,
+  onSearch,
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  function emitSearch(event) {
+    onSearch?.(inputRef.current?.value ?? "", event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter") {
+      emitSearch(event);
+    }
+  }
+  const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
+  return /* @__PURE__ */ jsxs2("span", {
+    className: getSearchWrapperClasses({ className }),
+    children: [
+      /* @__PURE__ */ jsx2(InputRoot, {
+        ...props,
+        ref: inputRef,
+        disabled,
+        onKeyDown: handleKeyDown
+      }),
+      enterButton || loading ? /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: inputSearchButtonClass,
+        disabled: disabled || loading,
+        "aria-busy": loading || undefined,
+        onClick: emitSearch,
+        children: loading ? "Loading" : buttonContent
+      }) : null
+    ]
+  });
+});
+Search.displayName = "Input.Search";
+var Password = forwardRef(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState(false);
+  const type = visible ? "text" : "password";
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx2("button", {
+    type: "button",
+    className: inputPasswordToggleClass,
+    disabled,
+    "aria-label": visible ? "Hide password" : "Show password",
+    onClick: () => {
+      setVisible((current) => !current);
+    },
+    children: visible ? "Hide" : "Show"
+  }) : undefined;
+  return /* @__PURE__ */ jsx2("span", {
+    className: getPasswordWrapperClasses({ className }),
+    children: /* @__PURE__ */ jsx2(InputRoot, {
+      ...props,
+      ref,
+      disabled,
+      type,
+      suffix: toggle
+    })
+  });
+});
+Password.displayName = "Input.Password";
+var TextArea = forwardRef(({
+  autoSize,
+  className,
+  defaultValue,
+  maxLength,
+  onChange,
+  resize = "vertical",
+  showCount,
+  size = "md",
+  status,
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const count = currentValue.length;
+  const exceeded = maxLength !== undefined && count > maxLength;
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  const control = /* @__PURE__ */ jsx2("textarea", {
+    ...props,
+    ref,
+    className: getTextAreaClasses({
+      size,
+      status,
+      variant,
+      resize,
+      autoSize: Boolean(autoSize),
+      className
+    }),
+    maxLength,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!showCount) {
+    return control;
+  }
+  return /* @__PURE__ */ jsxs2("span", {
+    className: textAreaWrapperClass,
+    children: [
+      control,
+      /* @__PURE__ */ jsxs2("span", {
+        className: getTextAreaCountClasses({ exceeded }),
+        children: [
+          count,
+          maxLength !== undefined ? ` / ${maxLength}` : null
+        ]
+      })
+    ]
+  });
+});
+TextArea.displayName = "Input.TextArea";
+var Group = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx2("div", {
+  ...props,
+  ref,
+  className: cn(inputGroupClass, className),
+  children
+}));
+Group.displayName = "Input.Group";
+var Input = Object.assign(InputRoot, {
+  Search,
+  Password,
+  TextArea,
+  Group
+});
+// src/components/chat/ChatComposer.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
+function AttachmentPreview({ file }) {
+  const imageRef = useRef2(null);
+  useEffect(() => {
+    const image = imageRef.current;
+    if (!image || !file.type.startsWith("image/") || !URL.createObjectURL)
+      return;
+    const objectUrl = URL.createObjectURL(file);
+    image.src = objectUrl;
+    image.hidden = false;
+    return () => {
+      image.hidden = true;
+      image.removeAttribute("src");
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return file.type.startsWith("image/") ? /* @__PURE__ */ jsx3("img", {
+    ref: imageRef,
+    alt: file.name,
+    hidden: true
+  }) : null;
+}
+function AttachmentContent({
+  file,
+  renderAttachment,
+  context
+}) {
+  return renderAttachment(file, context);
+}
+function ExtraActions({
+  children,
+  context
+}) {
+  return typeof children === "function" ? children(context) : children;
+}
+var ChatComposer = forwardRef2(({
+  value,
+  onValueChange,
+  onSubmit,
+  attachments = [],
+  onAttachmentsChange,
+  accept,
+  multiple = true,
+  allowAttachmentOnly = false,
+  disabled = false,
+  busy = false,
+  generating = false,
+  canSubmit = true,
+  onStop,
+  error,
+  onSubmitError,
+  clearOnSubmit = true,
+  completion,
+  minRows = 1,
+  maxRows = 6,
+  textareaProps,
+  attachLabel = "Attach files",
+  sendLabel = "Send",
+  stopLabel = "Stop",
+  renderAttachment,
+  children,
+  className,
+  ...props
+}, ref) => {
+  const id = useId();
+  const editorRef = useRef2(null);
+  const pickerRef = useRef2(null);
+  const mountedRef = useRef2(false);
+  const composingRef = useRef2(false);
+  const submittingRef = useRef2(false);
+  const revisionRef = useRef2(0);
+  const observedValueRef = useRef2(value);
+  const entriesRef = useRef2([]);
+  const nextEntryRef = useRef2(0);
+  const [submitting, setSubmitting] = useState2(false);
+  const [submitError, setSubmitError] = useState2();
+  const [activeId, setActiveId] = useState2();
+  const [dismissed, setDismissed] = useState2(false);
+  const latestRef = useRef2({
+    value,
+    onValueChange,
+    attachments,
+    onAttachmentsChange,
+    onSubmitError,
+    clearOnSubmit
+  });
+  function reconcileEntries(files) {
+    const previous = [...entriesRef.current];
+    entriesRef.current = files.map((file) => {
+      const index = previous.findIndex((entry) => entry.file === file);
+      if (index < 0)
+        return { file, id: nextEntryRef.current++ };
+      return previous.splice(index, 1)[0];
+    });
+  }
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (observedValueRef.current !== value) {
+      revisionRef.current++;
+      observedValueRef.current = value;
+    }
+    reconcileEntries(attachments);
+    latestRef.current = {
+      value,
+      onValueChange,
+      attachments,
+      onAttachmentsChange,
+      onSubmitError,
+      clearOnSubmit
+    };
+  });
+  const minimumRows = Math.max(1, Math.floor(minRows));
+  const maximumRows = Math.max(minimumRows, Math.floor(maxRows));
+  useLayoutEffect(() => {
+    const editor = editorRef.current;
+    if (!editor)
+      return;
+    function measure() {
+      if (!editor)
+        return;
+      const style = getComputedStyle(editor);
+      const lineHeight = parseFloat(style.lineHeight) || 24;
+      const padding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+      const borders = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
+      const adjustment = style.boxSizing === "border-box" ? padding + borders : 0;
+      editor.style.height = "auto";
+      const minimum = minimumRows * lineHeight + adjustment;
+      const maximum = maximumRows * lineHeight + adjustment;
+      const content = editor.scrollHeight - padding + adjustment;
+      editor.style.height = `${Math.min(maximum, Math.max(minimum, content))}px`;
+      editor.style.overflowY = content > maximum ? "auto" : "hidden";
+    }
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measure);
+    observer?.observe(editor);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [value, minimumRows, maximumRows, textareaProps?.style]);
+  const eligible = canSubmit && !disabled && !busy && !submitting && (value.trim().length > 0 || allowAttachmentOnly && attachments.length > 0);
+  const candidates = completion?.items ?? [];
+  const enabledCandidates = candidates.filter((item) => !item.disabled);
+  const active = enabledCandidates.find((item) => item.id === activeId) ?? enabledCandidates[0];
+  const showCompletion = !disabled && !dismissed && candidates.length > 0;
+  const visibleError = error ?? submitError;
+  const hasError = visibleError !== undefined && visibleError !== null && visibleError !== false;
+  function openAttachments() {
+    if (!disabled && onAttachmentsChange)
+      pickerRef.current?.click();
+  }
+  function changeAttachments(files) {
+    reconcileEntries(files);
+    latestRef.current.attachments = files;
+    onAttachmentsChange?.(files);
+  }
+  function removeAttachment(index) {
+    if (disabled || !onAttachmentsChange)
+      return;
+    entriesRef.current.splice(index, 1);
+    changeAttachments(attachments.filter((_, fileIndex) => fileIndex !== index));
+  }
+  function selectCompletion(item) {
+    if (!completion || item.disabled || disabled)
+      return;
+    const editor = editorRef.current;
+    completion.onSelect(item, {
+      value,
+      selectionStart: editor?.selectionStart ?? value.length,
+      selectionEnd: editor?.selectionEnd ?? value.length
+    });
+    setDismissed(true);
+    editor?.focus();
+  }
+  async function submit() {
+    if (!eligible || submittingRef.current)
+      return;
+    submittingRef.current = true;
+    setSubmitting(true);
+    setSubmitError(undefined);
+    const snapshot = { value, files: [...attachments] };
+    const submittedRevision = revisionRef.current;
+    const submittedEntries = new Set(entriesRef.current.map((entry) => entry.id));
+    try {
+      const accepted = await onSubmit(snapshot);
+      if (!mountedRef.current || accepted === false)
+        return;
+      const current = latestRef.current;
+      if (current.clearOnSubmit) {
+        if (revisionRef.current === submittedRevision)
+          current.onValueChange("");
+        const retained = entriesRef.current.filter((entry) => !submittedEntries.has(entry.id));
+        if (retained.length !== entriesRef.current.length) {
+          entriesRef.current = retained;
+          current.onAttachmentsChange?.(retained.map((entry) => entry.file));
+        }
+      }
+    } catch (cause) {
+      if (!mountedRef.current)
+        return;
+      setSubmitError("Unable to send message. Please try again.");
+      latestRef.current.onSubmitError?.(cause);
+    } finally {
+      submittingRef.current = false;
+      if (mountedRef.current)
+        setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs3("div", {
+    ...props,
+    ref,
+    className: cn("chat-composer", className),
+    children: [
+      attachments.length > 0 ? /* @__PURE__ */ jsx3("ul", {
+        className: "chat-composer-attachments",
+        "aria-label": "Attachments",
+        children: attachments.map((file, index) => /* @__PURE__ */ jsx3("li", {
+          className: "chat-composer-attachment",
+          children: renderAttachment ? /* @__PURE__ */ jsx3(AttachmentContent, {
+            file,
+            renderAttachment,
+            context: {
+              remove: () => removeAttachment(index),
+              disabled: disabled || !onAttachmentsChange
+            }
+          }) : /* @__PURE__ */ jsxs3(Fragment2, {
+            children: [
+              /* @__PURE__ */ jsx3(AttachmentPreview, {
+                file
+              }),
+              /* @__PURE__ */ jsx3("span", {
+                className: "chat-composer-filename",
+                children: file.name
+              }),
+              onAttachmentsChange ? /* @__PURE__ */ jsx3(Button, {
+                type: "button",
+                size: "sm",
+                color: "base",
+                appearance: "ghost",
+                disabled,
+                "aria-label": `Remove ${file.name}`,
+                onClick: () => removeAttachment(index),
+                children: "Remove"
+              }) : null
+            ]
+          })
+        }, index))
+      }) : null,
+      /* @__PURE__ */ jsx3(Input.TextArea, {
+        ...textareaProps,
+        ref: editorRef,
+        className: cn("chat-composer-editor", textareaProps?.className),
+        value,
+        disabled,
+        rows: minimumRows,
+        resize: "none",
+        "aria-label": textareaProps?.["aria-label"] ?? (textareaProps?.["aria-labelledby"] ? undefined : "Message"),
+        "aria-describedby": cn(textareaProps?.["aria-describedby"], hasError && `${id}-error`) || undefined,
+        "aria-invalid": hasError ? true : textareaProps?.["aria-invalid"],
+        "aria-controls": showCompletion ? `${id}-completions` : undefined,
+        "aria-autocomplete": completion ? "list" : undefined,
+        "aria-haspopup": completion ? "listbox" : undefined,
+        "aria-activedescendant": showCompletion && active ? `${id}-option-${candidates.indexOf(active)}` : undefined,
+        onChange: (event) => {
+          revisionRef.current++;
+          observedValueRef.current = event.currentTarget.value;
+          setSubmitError(undefined);
+          setDismissed(false);
+          setActiveId(undefined);
+          onValueChange(event.currentTarget.value);
+        },
+        onCompositionStart: (event) => {
+          composingRef.current = true;
+          textareaProps?.onCompositionStart?.(event);
+        },
+        onCompositionEnd: (event) => {
+          composingRef.current = false;
+          textareaProps?.onCompositionEnd?.(event);
+        },
+        onKeyDown: (event) => {
+          textareaProps?.onKeyDown?.(event);
+          if (event.defaultPrevented || composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229)
+            return;
+          if (showCompletion) {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              setDismissed(true);
+              return;
+            }
+            if (enabledCandidates.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+              event.preventDefault();
+              const position = enabledCandidates.findIndex((item) => item.id === active?.id);
+              const direction = event.key === "ArrowDown" ? 1 : -1;
+              setActiveId(enabledCandidates[(position + direction + enabledCandidates.length) % enabledCandidates.length].id);
+              return;
+            }
+            if (active && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && (event.key === "Enter" || event.key === "Tab")) {
+              event.preventDefault();
+              selectCompletion(active);
+              return;
+            }
+          }
+          if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            submit();
+          }
+        }
+      }),
+      showCompletion ? /* @__PURE__ */ jsx3("ul", {
+        id: `${id}-completions`,
+        role: "listbox",
+        "aria-label": completion?.label ?? "Suggestions",
+        className: "chat-composer-completions",
+        children: candidates.map((item, index) => /* @__PURE__ */ jsxs3("li", {
+          id: `${id}-option-${index}`,
+          role: "option",
+          "aria-selected": item.id === active?.id,
+          "aria-disabled": item.disabled || undefined,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => selectCompletion(item),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              selectCompletion(item);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx3("span", {
+              children: item.label
+            }),
+            item.description ? /* @__PURE__ */ jsx3("span", {
+              className: "chat-composer-description",
+              children: item.description
+            }) : null
+          ]
+        }, item.id))
+      }) : null,
+      hasError ? /* @__PURE__ */ jsx3("div", {
+        id: `${id}-error`,
+        role: "alert",
+        className: "chat-composer-error",
+        children: visibleError
+      }) : null,
+      /* @__PURE__ */ jsxs3("div", {
+        className: "chat-composer-actions",
+        children: [
+          onAttachmentsChange ? /* @__PURE__ */ jsxs3(Fragment2, {
+            children: [
+              /* @__PURE__ */ jsx3("input", {
+                ref: pickerRef,
+                type: "file",
+                accept,
+                multiple,
+                disabled,
+                hidden: true,
+                "aria-label": attachLabel,
+                onChange: (event) => {
+                  const files = Array.from(event.currentTarget.files ?? []);
+                  event.currentTarget.value = "";
+                  if (files.length > 0)
+                    changeAttachments([...attachments, ...files]);
+                }
+              }),
+              /* @__PURE__ */ jsx3(Button, {
+                type: "button",
+                color: "base",
+                appearance: "ghost",
+                disabled,
+                onClick: openAttachments,
+                children: attachLabel
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx3(ExtraActions, {
+            context: {
+              submit: () => {
+                submit();
+              },
+              submitting,
+              canSubmit: eligible,
+              disabled,
+              generating,
+              openAttachments
+            },
+            children
+          }),
+          generating && onStop ? /* @__PURE__ */ jsx3(Button, {
+            type: "button",
+            disabled,
+            onClick: onStop,
+            children: stopLabel
+          }) : null,
+          /* @__PURE__ */ jsx3(Button, {
+            type: "button",
+            color: "primary",
+            disabled: !eligible,
+            "aria-busy": busy || submitting || undefined,
+            onClick: () => {
+              submit();
+            },
+            children: sendLabel
+          })
+        ]
+      })
+    ]
+  });
+});
+ChatComposer.displayName = "Chat.Composer";
+
 // src/classes/chat.ts
 var chatBaseClass = "chat";
 var chatAvatarClass = "chat-avatar";
@@ -103,20 +1174,20 @@ function getChatToolClasses({
 }
 
 // src/components/chat/Chat.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ChatAvatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatAvatar = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatAvatarClass, className)
 }));
 ChatAvatar.displayName = "Chat.Avatar";
-var ChatHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatHeaderClass, className)
 }));
 ChatHeader.displayName = "Chat.Header";
-var ChatBubble = forwardRef(({ color, size = "md", filled, streaming, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+var ChatBubble = forwardRef3(({ color, size = "md", filled, streaming, className, children, ...props }, ref) => /* @__PURE__ */ jsxs4("div", {
   ...props,
   ref,
   className: getChatBubbleClasses({
@@ -128,62 +1199,62 @@ var ChatBubble = forwardRef(({ color, size = "md", filled, streaming, className,
   }),
   children: [
     children,
-    streaming ? /* @__PURE__ */ jsx("span", {
+    streaming ? /* @__PURE__ */ jsx4("span", {
       className: "chat-bubble-content chat-bubble-streaming",
       "aria-hidden": "true"
     }) : null
   ]
 }));
 ChatBubble.displayName = "Chat.Bubble";
-var ChatFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatFooterClass, className)
 }));
 ChatFooter.displayName = "Chat.Footer";
-var ChatStatus = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatStatus = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatStatusClass, className)
 }));
 ChatStatus.displayName = "Chat.Status";
-var ChatStatusItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+var ChatStatusItem = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
   ...props,
   ref,
   className: cn(chatStatusItemClass, className)
 }));
 ChatStatusItem.displayName = "Chat.StatusItem";
-var ChatStatusValue = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+var ChatStatusValue = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
   ...props,
   ref,
   className: cn(chatStatusValueClass, className)
 }));
 ChatStatusValue.displayName = "Chat.StatusValue";
-var ChatActions = forwardRef(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatActions = forwardRef3(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatActionsClass, hover && chatActionsHoverClass, className)
 }));
 ChatActions.displayName = "Chat.Actions";
-var ChatScroll = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatScroll = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatScrollClass, className)
 }));
 ChatScroll.displayName = "Chat.Scroll";
-var ChatScrollBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatScrollBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatScrollBodyClass, className)
 }));
 ChatScrollBody.displayName = "Chat.ScrollBody";
-var ChatScrollTrack = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatScrollTrack = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatScrollTrackClass, className)
 }));
 ChatScrollTrack.displayName = "Chat.ScrollTrack";
-var ChatScrollIndicator = forwardRef(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", {
+var ChatScrollIndicator = forwardRef3(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx4("button", {
   ...props,
   ref,
   type,
@@ -205,59 +1276,59 @@ var ChatScrollIndicator = forwardRef(({ targetId, timeline, type = "button", cla
   }
 }));
 ChatScrollIndicator.displayName = "Chat.ScrollIndicator";
-var ChatReasoning = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("details", {
+var ChatReasoning = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("details", {
   ...props,
   ref,
   className: cn(chatReasoningClass, className)
 }));
 ChatReasoning.displayName = "Chat.Reasoning";
-var ChatTool = forwardRef(({ status, className, ...props }, ref) => /* @__PURE__ */ jsx("details", {
+var ChatTool = forwardRef3(({ status, className, ...props }, ref) => /* @__PURE__ */ jsx4("details", {
   ...props,
   ref,
   className: getChatToolClasses({ status, className })
 }));
 ChatTool.displayName = "Chat.Tool";
-var ChatToolHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("summary", {
+var ChatToolHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("summary", {
   ...props,
   ref,
   className: cn(chatToolHeaderClass, className)
 }));
 ChatToolHeader.displayName = "Chat.ToolHeader";
-var ChatToolStatus = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+var ChatToolStatus = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
   ...props,
   ref,
   className: cn(chatToolStatusClass, className)
 }));
 ChatToolStatus.displayName = "Chat.ToolStatus";
-var ChatToolCall = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatToolCall = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatToolCallClass, className)
 }));
 ChatToolCall.displayName = "Chat.ToolCall";
-var ChatToolResult = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatToolResult = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(chatToolResultClass, className)
 }));
 ChatToolResult.displayName = "Chat.ToolResult";
-var ChatTyping = forwardRef(({
+var ChatTyping = forwardRef3(({
   className,
   role = "status",
   "aria-label": ariaLabel = "Assistant is typing",
   ...props
-}, ref) => /* @__PURE__ */ jsx("span", {
+}, ref) => /* @__PURE__ */ jsx4("span", {
   ...props,
   ref,
   role,
   "aria-label": ariaLabel,
   className: cn(chatTypingClass, className),
-  children: /* @__PURE__ */ jsx("span", {
+  children: /* @__PURE__ */ jsx4("span", {
     "aria-hidden": "true"
   })
 }));
 ChatTyping.displayName = "Chat.Typing";
-var ChatRoot = forwardRef(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatRoot = forwardRef3(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   "data-chat-tl": timeline ?? props["data-chat-tl"],
@@ -265,6 +1336,7 @@ var ChatRoot = forwardRef(({ placement = "start", timeline, className, ...props
 }));
 ChatRoot.displayName = "Chat";
 var Chat = Object.assign(ChatRoot, {
+  Composer: ChatComposer,
   Avatar: ChatAvatar,
   Header: ChatHeader,
   Bubble: ChatBubble,
@@ -290,6 +1362,7 @@ export {
   ChatActions,
   ChatAvatar,
   ChatBubble,
+  ChatComposer,
   ChatFooter,
   ChatHeader,
   ChatReasoning,