@7onic-ui/react 0.2.2 → 0.2.4

package/dist/index.js

@@ -72,6 +72,15 @@ __export(ui_exports, {
   CardHeader: () => CardHeader,
   CardImage: () => CardImage,
   CardTitle: () => CardTitle,
+  ChatInput: () => ChatInput,
+  ChatInputField: () => ChatInputField,
+  ChatInputRoot: () => ChatInputRoot,
+  ChatInputSubmit: () => ChatInputSubmit,
+  ChatMessage: () => ChatMessage,
+  ChatMessageAvatar: () => ChatMessageAvatar,
+  ChatMessageContent: () => ChatMessageContent,
+  ChatMessageFooter: () => ChatMessageFooter,
+  ChatMessageRoot: () => ChatMessageRoot,
   Checkbox: () => Checkbox,
   Divider: () => Divider,
   Drawer: () => Drawer,
@@ -152,6 +161,9 @@ __export(ui_exports, {
   PopoverRoot: () => PopoverRoot,
   PopoverTrigger: () => PopoverTrigger,
   Progress: () => Progress,
+  QuickReply: () => QuickReply,
+  QuickReplyItem: () => QuickReplyItem,
+  QuickReplyRoot: () => QuickReplyRoot,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
   Segmented: () => Segmented,
@@ -192,6 +204,7 @@ __export(ui_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipRoot: () => TooltipRoot,
   TooltipTrigger: () => TooltipTrigger,
+  TypingIndicator: () => TypingIndicator,
   accordionTriggerVariants: () => accordionTriggerVariants,
   accordionVariants: () => accordionVariants,
   alertModalContentVariants: () => alertModalContentVariants,
@@ -202,6 +215,7 @@ __export(ui_exports, {
   breadcrumbSizeMap: () => breadcrumbSizeMap,
   buttonVariants: () => buttonVariants,
   cardVariants: () => cardVariants,
+  chatInputVariants: () => chatInputVariants,
   checkboxVariants: () => checkboxVariants,
   dividerVariants: () => dividerVariants,
   drawerSizeHorizontal: () => drawerSizeHorizontal,
@@ -217,6 +231,8 @@ __export(ui_exports, {
   paginationItemVariants: () => paginationItemVariants,
   paginationSizeMap: () => paginationSizeMap,
   popoverContentVariants: () => popoverContentVariants,
+  quickReplyItemVariants: () => quickReplyItemVariants,
+  quickReplyRootVariants: () => quickReplyRootVariants,
   radioGroupVariants: () => radioGroupVariants,
   radioItemVariants: () => radioItemVariants,
   segmentedItemVariants: () => segmentedItemVariants,
@@ -234,6 +250,7 @@ __export(ui_exports, {
   toggleGroupVariants: () => toggleGroupVariants,
   toggleVariants: () => toggleVariants,
   tooltipContentVariants: () => tooltipContentVariants,
+  typingIndicatorVariants: () => typingIndicatorVariants,
   useButtonGroup: () => useButtonGroup,
   useFieldContext: () => useFieldContext,
   usePagination: () => usePagination
@@ -3784,7 +3801,7 @@ var CardTitle = React22.forwardRef(
       {
         ref,
         className: cn(
-          "font-semibold text-foreground leading-none tracking-tight",
+          "text-base font-semibold text-foreground tracking-tight",
           icon && "flex items-center gap-2",
           className
         ),
@@ -4902,10 +4919,9 @@ var PaginationRoot = React26.forwardRef(
     color = "default",
     radius = "md",
     disabled = false,
-    withControls = true,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-    withEdges = false,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
+    // Pre-declared API; conditional auto-rendering is tracked in COMPONENT-IMPROVEMENTS.md.
+    withControls: _withControls = true,
+    withEdges: _withEdges = false,
     loop = false,
     children,
     ...props
@@ -5871,9 +5887,9 @@ var alertVariants = (0, import_class_variance_authority26.cva)(
   {
     variants: {
       size: {
-        sm: "gap-2 p-3 text-sm",
-        default: "gap-2.5 p-4 text-md",
-        lg: "gap-3 p-5 text-md"
+        sm: "gap-2 p-2.5 text-sm",
+        default: "gap-2.5 p-3.5 text-md",
+        lg: "gap-3 p-4 text-md"
       },
       radius: {
         none: "rounded-none",
@@ -5901,15 +5917,20 @@ var ICON_SIZE_MAP = {
   lg: "icon-md"
   // 20px
 };
+var ICON_LINE_MAP = {
+  sm: "text-sm",
+  default: "text-md",
+  lg: "text-base"
+};
 var TITLE_SIZE_MAP = {
-  sm: "text-sm font-semibold leading-4 tracking-tight",
-  default: "font-semibold leading-[18px] tracking-tight",
-  lg: "text-base font-semibold leading-5 tracking-tight"
+  sm: "text-sm font-semibold tracking-tight",
+  default: "text-md font-semibold tracking-tight",
+  lg: "text-base font-semibold tracking-tight"
 };
 var DESC_SIZE_MAP = {
   sm: "text-xs mt-0.5",
-  default: "text-sm mt-1",
-  lg: "text-md mt-1.5"
+  default: "text-sm mt-0.5",
+  lg: "text-md mt-0.5"
 };
 var AlertContext = React31.createContext({
   variant: "default",
@@ -5949,7 +5970,7 @@ var AlertRoot = React31.forwardRef(
         ),
         ...props
       },
-      !hideIcon && /* @__PURE__ */ React31.createElement("span", { className: "shrink-0" }, icon || /* @__PURE__ */ React31.createElement(StatusIcon, { className: ICON_SIZE_MAP[size] })),
+      !hideIcon && /* @__PURE__ */ React31.createElement("span", { className: cn("shrink-0 flex items-center min-h-[1lh]", ICON_LINE_MAP[size]) }, icon || /* @__PURE__ */ React31.createElement(StatusIcon, { className: ICON_SIZE_MAP[size] })),
       /* @__PURE__ */ React31.createElement("div", { className: "flex-1 min-w-0" }, children),
       closable && /* @__PURE__ */ React31.createElement(
         "button",
@@ -6200,7 +6221,6 @@ var ToastItem = React32.memo(function ToastItem2({
 }) {
   const [isExiting, setIsExiting] = React32.useState(false);
   const [isEntered, setIsEntered] = React32.useState(false);
-  const [isPaused, setIsPaused] = React32.useState(false);
   const timerRef = React32.useRef(null);
   const remainingRef = React32.useRef(0);
   const startTimeRef = React32.useRef(0);
@@ -6239,7 +6259,6 @@ var ToastItem = React32.memo(function ToastItem2({
   }, [duration, handleAutoClose]);
   const handleMouseEnter = React32.useCallback(() => {
     if (duration <= 0) return;
-    setIsPaused(true);
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       remainingRef.current -= Date.now() - startTimeRef.current;
@@ -6247,7 +6266,6 @@ var ToastItem = React32.memo(function ToastItem2({
   }, [duration]);
   const handleMouseLeave = React32.useCallback(() => {
     if (duration <= 0) return;
-    setIsPaused(false);
     startTimeRef.current = Date.now();
     timerRef.current = setTimeout(handleAutoClose, Math.max(remainingRef.current, TOAST_MIN_RESUME_MS));
   }, [duration, handleAutoClose]);
@@ -7080,6 +7098,862 @@ var Skeleton = React35.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
+
+// src/components/ui/typing-indicator.tsx
+var React36 = __toESM(require("react"));
+var import_class_variance_authority31 = require("class-variance-authority");
+var DOT_SIZES2 = { sm: 4, default: 6, lg: 8 };
+var DOT_GAP2 = { sm: 3, default: 4, lg: 5 };
+var SPEED_MS2 = { slow: 1600, default: 1100, fast: 700 };
+var DOT_COUNT2 = 3;
+var bgColorMap2 = {
+  default: "bg-foreground",
+  primary: "bg-primary",
+  muted: "bg-text-subtle"
+};
+var typingIndicatorVariants = (0, import_class_variance_authority31.cva)(
+  "inline-flex items-center",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 text-xs",
+        default: "gap-2 text-sm",
+        lg: "gap-2.5 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var TypingIndicator = React36.forwardRef(
+  ({
+    className,
+    variant = "dots",
+    size,
+    color = "muted",
+    speed = "default",
+    label = "Typing",
+    showLabel = false,
+    ...props
+  }, ref) => {
+    const resolvedSize = size ?? "default";
+    return /* @__PURE__ */ React36.createElement(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": label,
+        className: cn(typingIndicatorVariants({ size }), className),
+        ...props
+      },
+      variant === "dots" && /* @__PURE__ */ React36.createElement(DotsIndicator, { size: resolvedSize, color, speed }),
+      variant === "cursor" && /* @__PURE__ */ React36.createElement(CursorIndicator, { size: resolvedSize, color }),
+      showLabel && /* @__PURE__ */ React36.createElement("span", { className: "text-text-muted select-none" }, label)
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+function DotsIndicator({
+  size,
+  color,
+  speed
+}) {
+  const dotSize = DOT_SIZES2[size];
+  const gap = DOT_GAP2[size];
+  const duration = SPEED_MS2[speed];
+  return /* @__PURE__ */ React36.createElement("div", { className: "inline-flex items-center", style: { gap } }, Array.from({ length: DOT_COUNT2 }, (_, i) => /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      key: i,
+      className: cn(
+        "rounded-full animate-spinner-dot motion-reduce:animate-none motion-reduce:opacity-60",
+        bgColorMap2[color]
+      ),
+      style: {
+        width: dotSize,
+        height: dotSize,
+        animationDuration: `${duration}ms`,
+        animationDelay: `${i * (duration / DOT_COUNT2 / 1.5)}ms`
+      }
+    }
+  )));
+}
+var CURSOR_SIZE = {
+  sm: { width: 2, height: 14 },
+  default: { width: 2.5, height: 20 },
+  lg: { width: 3, height: 26 }
+};
+function CursorIndicator({
+  size,
+  color
+}) {
+  const { width, height } = CURSOR_SIZE[size];
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "rounded-full animate-typing-cursor motion-reduce:animate-none motion-reduce:opacity-60",
+        bgColorMap2[color]
+      ),
+      style: { width, height, animationDuration: "1200ms" }
+    }
+  );
+}
+
+// src/components/ui/quick-reply.tsx
+var React37 = __toESM(require("react"));
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_class_variance_authority32 = require("class-variance-authority");
+var colorMap5 = {
+  default: {
+    outline: "border border-border text-foreground bg-background hover:bg-background-muted",
+    filled: "bg-background-muted text-foreground hover:bg-background-elevated",
+    ghost: "text-foreground hover:bg-background-muted"
+  },
+  primary: {
+    outline: "border border-primary text-text-primary bg-background hover:bg-primary-tint",
+    filled: "bg-primary-tint text-text-primary hover:bg-primary/20",
+    ghost: "text-text-primary hover:bg-primary-tint"
+  }
+};
+var QuickReplyContext = React37.createContext({
+  size: "default",
+  variant: "outline",
+  color: "default",
+  radius: "full"
+});
+var quickReplyRootVariants = (0, import_class_variance_authority32.cva)(
+  "flex items-center",
+  {
+    variants: {
+      layout: {
+        scroll: "overflow-x-auto",
+        wrap: "flex-wrap"
+      },
+      gap: {
+        sm: "gap-1.5",
+        default: "gap-2",
+        lg: "gap-2.5"
+      }
+    },
+    defaultVariants: {
+      layout: "scroll",
+      gap: "default"
+    }
+  }
+);
+var quickReplyItemVariants = (0, import_class_variance_authority32.cva)(
+  [
+    "inline-flex items-center justify-center",
+    "whitespace-nowrap font-semibold shrink-0",
+    "transition-colors duration-fast cursor-pointer",
+    "focus-visible:outline-none focus-visible:focus-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "select-none"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2.5 text-xs gap-1.5",
+        // 28px
+        default: "h-8 px-3 text-sm gap-1.5",
+        // 32px
+        lg: "h-9 px-3.5 text-md gap-1.5"
+        // 36px
+      },
+      radius: {
+        md: "rounded-md",
+        // 6px
+        lg: "rounded-lg",
+        // 8px
+        full: "rounded-full"
+        // 9999px
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      radius: "full"
+    }
+  }
+);
+var iconSizeMap = {
+  sm: "icon-xs",
+  // 14px
+  default: "icon-xs",
+  // 14px
+  lg: "icon-sm"
+  // 16px
+};
+var QuickReplyRoot = React37.forwardRef(
+  ({
+    className,
+    layout = "scroll",
+    gap = "default",
+    variant = "outline",
+    color = "default",
+    size = "default",
+    radius = "full",
+    role = "group",
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React37.useMemo(
+      () => ({ size, variant, color, radius }),
+      [size, variant, color, radius]
+    );
+    return /* @__PURE__ */ React37.createElement(QuickReplyContext.Provider, { value: contextValue }, /* @__PURE__ */ React37.createElement(
+      "div",
+      {
+        ref,
+        role,
+        className: cn(quickReplyRootVariants({ layout, gap }), className),
+        ...props
+      },
+      children
+    ));
+  }
+);
+QuickReplyRoot.displayName = "QuickReply";
+var QuickReplyItem = React37.forwardRef(
+  ({ className, icon, asChild = false, children, ...props }, ref) => {
+    const { size, variant, color, radius } = React37.useContext(QuickReplyContext);
+    const Comp = asChild ? import_react_slot7.Slot : "button";
+    const colorClasses = colorMap5[color][variant];
+    return /* @__PURE__ */ React37.createElement(
+      Comp,
+      {
+        ref,
+        type: !asChild ? "button" : void 0,
+        ...props,
+        className: cn(
+          quickReplyItemVariants({ size, radius }),
+          colorClasses,
+          className
+        )
+      },
+      icon && /* @__PURE__ */ React37.createElement(
+        "span",
+        {
+          className: cn("shrink-0 [&>svg]:w-full [&>svg]:h-full", iconSizeMap[size]),
+          "aria-hidden": "true"
+        },
+        icon
+      ),
+      children
+    );
+  }
+);
+QuickReplyItem.displayName = "QuickReply.Item";
+var QuickReply = Object.assign(QuickReplyRoot, {
+  Item: QuickReplyItem
+});
+
+// src/components/ui/chat-input.tsx
+var React38 = __toESM(require("react"));
+var import_class_variance_authority33 = require("class-variance-authority");
+var fieldPaddingMap = {
+  sm: "pt-2.5 px-3 text-md",
+  default: "pt-3 px-4 text-md",
+  lg: "pt-4 px-5 text-base"
+};
+var submitWrapperMap = {
+  sm: "px-2.5 pb-2.5",
+  default: "px-3 pb-3",
+  lg: "px-4 pb-4"
+};
+var submitSizeMap = {
+  sm: "h-7 w-7",
+  default: "h-8 w-8",
+  lg: "h-9 w-9"
+};
+var submitRadiusMap = {
+  sm: "rounded-md",
+  md: "rounded-md",
+  lg: "rounded-md",
+  xl: "rounded-lg",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
+};
+var buttonRadiusClassMap = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+var submitIconSizeMap = {
+  sm: "icon-xs",
+  default: "icon-xs",
+  lg: "icon-sm"
+};
+var countStyleMap = {
+  sm: "text-xs",
+  default: "text-xs",
+  lg: "text-sm"
+};
+var lineHeightMap = {
+  sm: 20,
+  default: 22,
+  lg: 24
+};
+var inlineFieldPaddingMap = {
+  sm: "px-3 text-md",
+  default: "px-4 text-md",
+  lg: "px-5 text-base"
+};
+var submitWrapperInlineMap = {
+  sm: "px-2.5 py-2.5",
+  default: "px-3 py-3",
+  lg: "px-4 py-4"
+};
+var chatInputVariants = (0, import_class_variance_authority33.cva)(
+  [
+    "flex flex-col w-full overflow-hidden cursor-text",
+    "transition-colors duration-micro"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        outline: [
+          "border border-border bg-background",
+          "hover:border-border-strong",
+          "focus-within:border-border-strong focus-within:hover:border-border-strong"
+        ].join(" "),
+        filled: [
+          "border border-transparent bg-background-muted",
+          "focus-within:border-border"
+        ].join(" ")
+      },
+      radius: {
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      radius: "xl"
+    }
+  }
+);
+var ChatInputContext = React38.createContext({
+  size: "default",
+  color: "default",
+  layout: "default",
+  radius: "xl",
+  disabled: false,
+  isEmpty: true,
+  charCount: 0,
+  showCount: false,
+  maxLength: void 0,
+  _setIsEmpty: () => {
+  },
+  _setCharCount: () => {
+  },
+  _setShowCount: () => {
+  },
+  _setMaxLength: () => {
+  },
+  _fieldRef: { current: null },
+  _handleSubmit: () => {
+  }
+});
+var ChatInputRoot = React38.forwardRef(
+  ({
+    className,
+    variant = "outline",
+    radius = "xl",
+    size = "default",
+    color = "default",
+    layout = "default",
+    disabled = false,
+    onSubmit,
+    children,
+    ...props
+  }, ref) => {
+    const [isEmpty, setIsEmpty] = React38.useState(true);
+    const [charCount, setCharCount] = React38.useState(0);
+    const [showCount, setShowCount] = React38.useState(false);
+    const [maxLength, setMaxLength] = React38.useState(void 0);
+    const fieldRef = React38.useRef(null);
+    const handleSubmit = React38.useCallback(() => {
+      const el = fieldRef.current;
+      if (!el || disabled) return;
+      const value = el.value.trim();
+      if (!value) return;
+      onSubmit?.(value);
+      el.value = "";
+      el.style.height = "auto";
+      setIsEmpty(true);
+      setCharCount(0);
+    }, [disabled, onSubmit]);
+    const contextValue = React38.useMemo(
+      () => ({
+        size,
+        color,
+        layout,
+        radius,
+        disabled,
+        isEmpty,
+        charCount,
+        showCount,
+        maxLength,
+        _setIsEmpty: setIsEmpty,
+        _setCharCount: setCharCount,
+        _setShowCount: setShowCount,
+        _setMaxLength: setMaxLength,
+        _fieldRef: fieldRef,
+        _handleSubmit: handleSubmit
+      }),
+      [size, color, layout, radius, disabled, isEmpty, charCount, showCount, maxLength, handleSubmit]
+    );
+    const handleContainerClick = React38.useCallback(
+      (e) => {
+        if (!disabled && !e.target.closest("button")) {
+          fieldRef.current?.focus();
+        }
+      },
+      [disabled]
+    );
+    return /* @__PURE__ */ React38.createElement(ChatInputContext.Provider, { value: contextValue }, /* @__PURE__ */ React38.createElement(
+      "div",
+      {
+        ref,
+        "data-disabled": disabled || void 0,
+        onClick: handleContainerClick,
+        className: cn(
+          chatInputVariants({ variant, radius }),
+          layout === "inline" && "flex-row",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ChatInputRoot.displayName = "ChatInput";
+var ChatInputField = React38.forwardRef(
+  ({
+    className,
+    maxRows = 8,
+    showCount = false,
+    maxLength,
+    placeholder,
+    onChange,
+    onKeyDown,
+    disabled,
+    ...props
+  }, forwardedRef) => {
+    const ctx = React38.useContext(ChatInputContext);
+    const internalRef = React38.useRef(null);
+    const isDisabled = disabled ?? ctx.disabled;
+    React38.useEffect(() => {
+      ctx._setShowCount(showCount);
+      ctx._setMaxLength(maxLength);
+    }, [showCount, maxLength]);
+    const setRef = React38.useCallback(
+      (el) => {
+        internalRef.current = el;
+        ctx._fieldRef.current = el;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(el);
+        } else if (forwardedRef) {
+          forwardedRef.current = el;
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [forwardedRef]
+    );
+    const autoResize = React38.useCallback(() => {
+      const el = internalRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      const maxHeight = maxRows * lineHeightMap[ctx.size];
+      const newHeight = Math.min(el.scrollHeight, maxHeight);
+      el.style.height = `${newHeight}px`;
+      el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+    }, [ctx.size, maxRows]);
+    const handleChange = React38.useCallback(
+      (e) => {
+        const val = e.target.value;
+        ctx._setIsEmpty(val.trim() === "");
+        ctx._setCharCount(val.length);
+        autoResize();
+        onChange?.(e);
+      },
+      [ctx, autoResize, onChange]
+    );
+    const handleKeyDown = React38.useCallback(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          ctx._handleSubmit();
+        }
+        onKeyDown?.(e);
+      },
+      [ctx, onKeyDown]
+    );
+    return /* @__PURE__ */ React38.createElement("div", { className: cn("flex-1 min-w-0", ctx.layout === "inline" && "flex items-center self-stretch") }, /* @__PURE__ */ React38.createElement(
+      "textarea",
+      {
+        ref: setRef,
+        rows: 1,
+        placeholder,
+        maxLength,
+        disabled: isDisabled,
+        className: cn(
+          "w-full bg-transparent text-foreground placeholder:text-foreground/30",
+          "resize-none outline-none focus:outline-none",
+          "disabled:cursor-not-allowed",
+          "overflow-hidden",
+          ctx.layout === "inline" ? inlineFieldPaddingMap[ctx.size] : fieldPaddingMap[ctx.size],
+          className
+        ),
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ...props
+      }
+    ));
+  }
+);
+ChatInputField.displayName = "ChatInput.Field";
+var ChatInputSubmit = React38.forwardRef(
+  ({
+    className,
+    loading = false,
+    onStop,
+    children,
+    disabled,
+    onClick,
+    buttonRadius,
+    ...props
+  }, ref) => {
+    const ctx = React38.useContext(ChatInputContext);
+    const isDisabled = (disabled ?? ctx.disabled) || !loading && ctx.isEmpty;
+    const handleClick = React38.useCallback(
+      (e) => {
+        if (loading) {
+          onStop?.();
+        } else if (!isDisabled) {
+          ctx._handleSubmit();
+        }
+        onClick?.(e);
+      },
+      [ctx, isDisabled, loading, onStop, onClick]
+    );
+    return /* @__PURE__ */ React38.createElement("div", { className: cn("flex items-center justify-end gap-2 shrink-0 cursor-default", ctx.layout === "inline" ? submitWrapperInlineMap[ctx.size] : submitWrapperMap[ctx.size]) }, ctx.showCount && ctx.maxLength != null && /* @__PURE__ */ React38.createElement("span", { className: cn("text-text-subtle select-none", countStyleMap[ctx.size]) }, ctx.charCount, " / ", ctx.maxLength), /* @__PURE__ */ React38.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: isDisabled && !loading,
+        "aria-label": loading ? "Stop generating" : "Send message",
+        className: cn(
+          "inline-flex items-center justify-center shrink-0",
+          buttonRadius ? buttonRadiusClassMap[buttonRadius] : submitRadiusMap[ctx.radius],
+          "transition-all duration-fast",
+          "focus-visible:outline-none focus-visible:focus-ring",
+          submitSizeMap[ctx.size],
+          // Loading state — enabled, pulsing
+          loading && ctx.color === "default" && "bg-foreground text-background animate-pulse cursor-pointer",
+          loading && ctx.color === "primary" && "bg-primary text-primary-foreground animate-pulse cursor-pointer",
+          // Enabled state
+          !loading && !isDisabled && ctx.color === "default" && [
+            "bg-foreground text-background",
+            "hover:bg-foreground/90 active:bg-foreground/80 active:scale-pressed cursor-pointer"
+          ],
+          !loading && !isDisabled && ctx.color === "primary" && [
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary-hover active:scale-pressed cursor-pointer"
+          ],
+          // Disabled state
+          !loading && isDisabled && "bg-background-muted text-text-subtle pointer-events-none",
+          className
+        ),
+        onClick: handleClick,
+        ...props
+      },
+      /* @__PURE__ */ React38.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("flex items-center justify-center", submitIconSizeMap[ctx.size])
+        },
+        children ?? (loading ? /* @__PURE__ */ React38.createElement(StopIcon, null) : /* @__PURE__ */ React38.createElement(SendIcon, null))
+      )
+    ));
+  }
+);
+ChatInputSubmit.displayName = "ChatInput.Submit";
+function SendIcon() {
+  return /* @__PURE__ */ React38.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "w-full h-full"
+    },
+    /* @__PURE__ */ React38.createElement("path", { d: "M22 2 11 13" }),
+    /* @__PURE__ */ React38.createElement("path", { d: "M22 2 15 22 11 13 2 9l20-7Z" })
+  );
+}
+function StopIcon() {
+  return /* @__PURE__ */ React38.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-full h-full" }, /* @__PURE__ */ React38.createElement("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }));
+}
+var ChatInput = Object.assign(ChatInputRoot, {
+  Field: ChatInputField,
+  Submit: ChatInputSubmit
+});
+
+// src/components/ui/chat-message.tsx
+var React39 = __toESM(require("react"));
+var ChatMessageContext = React39.createContext({
+  role: "assistant",
+  variant: "bubble",
+  color: "default",
+  size: "default",
+  radius: "2xl",
+  tail: true,
+  typing: false,
+  actions: void 0
+});
+var bubblePaddingMap = {
+  sm: "px-3 py-1.5",
+  default: "px-3.5 py-2",
+  lg: "px-4 py-2.5"
+};
+var bubbleTextMap = {
+  sm: "text-sm",
+  default: "text-md",
+  lg: "text-base"
+};
+var footerTextMap = {
+  sm: "text-2xs",
+  default: "text-2xs",
+  lg: "text-xs"
+};
+var rowGapMap = {
+  sm: "gap-2",
+  default: "gap-2.5",
+  lg: "gap-3"
+};
+var avatarGapMap = {
+  sm: "gap-1.5",
+  md: "gap-2.5",
+  lg: "gap-3"
+};
+var chatAvatarSizeMap = {
+  sm: "w-6 h-6",
+  // 24px
+  md: "w-7 h-7",
+  // 28px
+  lg: "w-8 h-8"
+  // 32px
+};
+var chatAvatarFontMap = {
+  sm: "text-2xs",
+  md: "text-2xs",
+  lg: "text-xs"
+};
+var bubbleRadiusTailMap = {
+  md: { assistant: "rounded-tl-md   rounded-tr-md   rounded-br-md   rounded-bl-none", user: "rounded-tl-md   rounded-tr-md   rounded-br-none rounded-bl-md" },
+  lg: { assistant: "rounded-tl-lg   rounded-tr-lg   rounded-br-lg   rounded-bl-none", user: "rounded-tl-lg   rounded-tr-lg   rounded-br-none rounded-bl-lg" },
+  xl: { assistant: "rounded-tl-xl   rounded-tr-xl   rounded-br-xl   rounded-bl-none", user: "rounded-tl-xl   rounded-tr-xl   rounded-br-none rounded-bl-xl" },
+  "2xl": { assistant: "rounded-tl-2xl  rounded-tr-2xl  rounded-br-2xl  rounded-bl-none", user: "rounded-tl-2xl  rounded-tr-2xl  rounded-br-none rounded-bl-2xl" }
+};
+var bubbleRadiusSymMap = {
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl"
+};
+function getBubbleColors(color, variant) {
+  if (variant === "flat") {
+    return color === "muted" ? "bg-background-muted" : "";
+  }
+  switch (color) {
+    case "default":
+      return "bg-background-paper border border-border text-foreground";
+    case "muted":
+      return "bg-background-muted text-foreground";
+    case "primary":
+      return "bg-primary text-primary-foreground";
+    case "dark":
+      return "bg-foreground text-background";
+  }
+}
+var builtInStatusLabels = {
+  sending: { label: "Sending...", className: "text-text-subtle" },
+  sent: { label: "Sent", className: "text-text-subtle" },
+  read: { label: "Read", className: "text-text-subtle" },
+  error: { label: "Failed", className: "text-error" }
+};
+var typingSizeMap = {
+  sm: "sm",
+  default: "sm",
+  lg: "default"
+};
+var typingMinWidthMap = {
+  sm: "min-w-12",
+  default: "min-w-12",
+  lg: "min-w-16"
+};
+var ChatMessageRoot = React39.forwardRef(
+  ({
+    className,
+    role = "assistant",
+    variant = "bubble",
+    color = "default",
+    size = "default",
+    radius = "2xl",
+    tail = true,
+    typing = false,
+    avatarSize,
+    actions,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React39.useMemo(
+      () => ({ role, variant, color, size, radius, tail, typing, actions }),
+      [role, variant, color, size, radius, tail, typing, actions]
+    );
+    const gapClass = avatarSize ? avatarGapMap[avatarSize] : rowGapMap[size];
+    return /* @__PURE__ */ React39.createElement(ChatMessageContext.Provider, { value: ctx }, /* @__PURE__ */ React39.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group/message flex items-end",
+          gapClass,
+          role === "user" && variant !== "flat" ? "flex-row-reverse" : "flex-row",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ChatMessageRoot.displayName = "ChatMessage";
+function DefaultAiIcon() {
+  return /* @__PURE__ */ React39.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3/5 h-3/5", "aria-hidden": "true" }, /* @__PURE__ */ React39.createElement("path", { d: "M12 3l1.8 5.4 5.4 1.8-5.4 1.8L12 17.4l-1.8-5.4L4.8 10.2l5.4-1.8z" }), /* @__PURE__ */ React39.createElement("path", { d: "M19.5 3.5l.8 2.4 2.4.8-2.4.8L19.5 10l-.8-2.5-2.4-.8 2.4-.8z", opacity: ".6" }), /* @__PURE__ */ React39.createElement("path", { d: "M4.5 14.5l.7 2 2 .7-2 .7L4.5 20l-.7-2-2-.7 2-.7z", opacity: ".4" }));
+}
+var ChatMessageAvatar = React39.forwardRef(
+  ({ className, size: avatarSize = "md", src, alt = "Avatar", initials, icon }, ref) => /* @__PURE__ */ React39.createElement(
+    Avatar,
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(chatAvatarSizeMap[avatarSize], "shrink-0", className)
+    },
+    src && /* @__PURE__ */ React39.createElement(AvatarImage, { src, alt }),
+    /* @__PURE__ */ React39.createElement(AvatarFallback, { className: cn("font-semibold", chatAvatarFontMap[avatarSize]) }, icon ?? (initials || /* @__PURE__ */ React39.createElement(DefaultAiIcon, null)))
+  )
+);
+ChatMessageAvatar.displayName = "ChatMessage.Avatar";
+var ChatMessageContent = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { role, variant, color, size, radius, tail, typing, actions } = React39.useContext(ChatMessageContext);
+    const isTyping = !!typing;
+    const typingProps = typeof typing === "object" ? typing : {};
+    const isDarkBg = color === "primary" || color === "dark";
+    const invertDots = variant === "bubble" && isDarkBg;
+    const effectiveTail = variant === "flat" ? false : tail;
+    const radiusClasses2 = effectiveTail ? bubbleRadiusTailMap[radius][role] : bubbleRadiusSymMap[radius];
+    const bubble = /* @__PURE__ */ React39.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          bubbleTextMap[size],
+          variant === "bubble" && "max-w-[75%]",
+          isTyping && [typingMinWidthMap[size], "text-center"],
+          getBubbleColors(color, variant),
+          (variant === "bubble" || variant === "flat") && bubblePaddingMap[size],
+          (variant === "bubble" || variant === "flat" && color === "muted") && radiusClasses2,
+          className
+        ),
+        ...props
+      },
+      isTyping ? /* @__PURE__ */ React39.createElement(
+        TypingIndicator,
+        {
+          size: typingSizeMap[size],
+          color: "muted",
+          ...typingProps,
+          className: cn("align-middle", invertDots && "[&>div>div]:bg-current")
+        }
+      ) : children
+    );
+    if (!actions) return bubble;
+    return /* @__PURE__ */ React39.createElement("div", { className: cn("flex items-end gap-1.5", role === "user" && variant !== "flat" ? "flex-row-reverse" : "flex-row") }, bubble, /* @__PURE__ */ React39.createElement("div", { className: cn(
+      "shrink-0 flex items-center gap-1 pb-0.5",
+      "opacity-0 group-hover/message:opacity-100",
+      "transition-opacity duration-normal"
+    ) }, actions));
+  }
+);
+ChatMessageContent.displayName = "ChatMessage.Content";
+var ChatMessageFooter = React39.forwardRef(
+  ({
+    className,
+    timestamp,
+    status,
+    role: roleProp,
+    size: sizeProp,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React39.useContext(ChatMessageContext);
+    const role = roleProp ?? ctx.role;
+    const size = sizeProp ?? ctx.size;
+    const variant = ctx.variant;
+    const statusContent = React39.useMemo(() => {
+      if (status == null) return null;
+      if (typeof status === "string" && status in builtInStatusLabels) {
+        const { label, className: cls } = builtInStatusLabels[status];
+        return /* @__PURE__ */ React39.createElement("span", { className: cls }, label);
+      }
+      return status;
+    }, [status]);
+    return /* @__PURE__ */ React39.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-1 select-none",
+          footerTextMap[size],
+          "text-text-subtle",
+          role === "user" && variant !== "flat" ? "justify-end" : "justify-start",
+          className
+        ),
+        ...props
+      },
+      children,
+      statusContent,
+      timestamp && /* @__PURE__ */ React39.createElement("span", null, timestamp)
+    );
+  }
+);
+ChatMessageFooter.displayName = "ChatMessage.Footer";
+var ChatMessage = Object.assign(ChatMessageRoot, {
+  Avatar: ChatMessageAvatar,
+  Content: ChatMessageContent,
+  Footer: ChatMessageFooter
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -7124,6 +7998,15 @@ Skeleton.displayName = "Skeleton";
   CardHeader,
   CardImage,
   CardTitle,
+  ChatInput,
+  ChatInputField,
+  ChatInputRoot,
+  ChatInputSubmit,
+  ChatMessage,
+  ChatMessageAvatar,
+  ChatMessageContent,
+  ChatMessageFooter,
+  ChatMessageRoot,
   Checkbox,
   Divider,
   Drawer,
@@ -7204,6 +8087,9 @@ Skeleton.displayName = "Skeleton";
   PopoverRoot,
   PopoverTrigger,
   Progress,
+  QuickReply,
+  QuickReplyItem,
+  QuickReplyRoot,
   RadioGroup,
   RadioGroupItem,
   Segmented,
@@ -7244,6 +8130,7 @@ Skeleton.displayName = "Skeleton";
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
+  TypingIndicator,
   accordionTriggerVariants,
   accordionVariants,
   alertModalContentVariants,
@@ -7254,6 +8141,7 @@ Skeleton.displayName = "Skeleton";
   breadcrumbSizeMap,
   buttonVariants,
   cardVariants,
+  chatInputVariants,
   checkboxVariants,
   dividerVariants,
   drawerSizeHorizontal,
@@ -7269,6 +8157,8 @@ Skeleton.displayName = "Skeleton";
   paginationItemVariants,
   paginationSizeMap,
   popoverContentVariants,
+  quickReplyItemVariants,
+  quickReplyRootVariants,
   radioGroupVariants,
   radioItemVariants,
   segmentedItemVariants,
@@ -7286,6 +8176,7 @@ Skeleton.displayName = "Skeleton";
   toggleGroupVariants,
   toggleVariants,
   tooltipContentVariants,
+  typingIndicatorVariants,
   useButtonGroup,
   useFieldContext,
   usePagination