@7onic-ui/react 0.3.9 → 0.3.10

package/dist/chunk-MRUVGHGP.mjs

@@ -0,0 +1,375 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/chat-input.tsx
+import * as React from "react";
+import { cva } from "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 = 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 = React.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 ChatInput = React.forwardRef(
+  ({
+    className,
+    variant = "outline",
+    radius = "xl",
+    size = "default",
+    color = "default",
+    layout = "default",
+    disabled = false,
+    onSubmit,
+    children,
+    ...props
+  }, ref) => {
+    const [isEmpty, setIsEmpty] = React.useState(true);
+    const [charCount, setCharCount] = React.useState(0);
+    const [showCount, setShowCount] = React.useState(false);
+    const [maxLength, setMaxLength] = React.useState(void 0);
+    const fieldRef = React.useRef(null);
+    const handleSubmit = React.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 = React.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 = React.useCallback(
+      (e) => {
+        if (!disabled && !e.target.closest("button")) {
+          fieldRef.current?.focus();
+        }
+      },
+      [disabled]
+    );
+    return /* @__PURE__ */ React.createElement(ChatInputContext.Provider, { value: contextValue }, /* @__PURE__ */ React.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
+    ));
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInputField = React.forwardRef(
+  ({
+    className,
+    maxRows = 8,
+    showCount = false,
+    maxLength,
+    placeholder,
+    onChange,
+    onKeyDown,
+    disabled,
+    ...props
+  }, forwardedRef) => {
+    const ctx = React.useContext(ChatInputContext);
+    const internalRef = React.useRef(null);
+    const isDisabled = disabled ?? ctx.disabled;
+    React.useEffect(() => {
+      ctx._setShowCount(showCount);
+      ctx._setMaxLength(maxLength);
+    }, [showCount, maxLength]);
+    const setRef = React.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 = React.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 = React.useCallback(
+      (e) => {
+        const val = e.target.value;
+        ctx._setIsEmpty(val.trim() === "");
+        ctx._setCharCount(val.length);
+        autoResize();
+        onChange?.(e);
+      },
+      [ctx, autoResize, onChange]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          ctx._handleSubmit();
+        }
+        onKeyDown?.(e);
+      },
+      [ctx, onKeyDown]
+    );
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex-1 min-w-0", ctx.layout === "inline" && "flex items-center self-stretch") }, /* @__PURE__ */ React.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 = "ChatInputField";
+var ChatInputSubmit = React.forwardRef(
+  ({
+    className,
+    loading = false,
+    onStop,
+    children,
+    disabled,
+    onClick,
+    buttonRadius,
+    ...props
+  }, ref) => {
+    const ctx = React.useContext(ChatInputContext);
+    const isDisabled = (disabled ?? ctx.disabled) || !loading && ctx.isEmpty;
+    const handleClick = React.useCallback(
+      (e) => {
+        if (loading) {
+          onStop?.();
+        } else if (!isDisabled) {
+          ctx._handleSubmit();
+        }
+        onClick?.(e);
+      },
+      [ctx, isDisabled, loading, onStop, onClick]
+    );
+    return /* @__PURE__ */ React.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__ */ React.createElement("span", { className: cn("text-text-subtle select-none", countStyleMap[ctx.size]) }, ctx.charCount, " / ", ctx.maxLength), /* @__PURE__ */ React.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__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("flex items-center justify-center", submitIconSizeMap[ctx.size])
+        },
+        children ?? (loading ? /* @__PURE__ */ React.createElement(StopIcon, null) : /* @__PURE__ */ React.createElement(SendIcon, null))
+      )
+    ));
+  }
+);
+ChatInputSubmit.displayName = "ChatInputSubmit";
+function SendIcon() {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "w-full h-full"
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M22 2 11 13" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M22 2 15 22 11 13 2 9l20-7Z" })
+  );
+}
+function StopIcon() {
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-full h-full" }, /* @__PURE__ */ React.createElement("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }));
+}
+
+export {
+  chatInputVariants,
+  ChatInput,
+  ChatInputField,
+  ChatInputSubmit
+};
+//# sourceMappingURL=chunk-MRUVGHGP.mjs.map

package/dist/chunk-MRUVGHGP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/chat-input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ============================================================================\n// Size maps\n// ============================================================================\n\n/** Textarea padding per size */\nconst fieldPaddingMap = {\n  sm:      'pt-2.5 px-3 text-md',\n  default: 'pt-3 px-4 text-md',\n  lg:      'pt-4 px-5 text-base',\n} as const\n\n/** Submit row padding per size */\nconst submitWrapperMap = {\n  sm:      'px-2.5 pb-2.5',\n  default: 'px-3 pb-3',\n  lg:      'px-4 pb-4',\n} as const\n\n/** Submit button dimensions per size */\nconst submitSizeMap = {\n  sm:      'h-7 w-7',\n  default: 'h-8 w-8',\n  lg:      'h-9 w-9',\n} as const\n\n/** Submit button radius — auto-calculated from container radius (min rounded-md) */\nconst submitRadiusMap = {\n  sm:    'rounded-md',\n  md:    'rounded-md',\n  lg:    'rounded-md',\n  xl:    'rounded-lg',\n  '2xl': 'rounded-xl',\n  full:  'rounded-full',\n} as const\n\n/** Submit button radius — direct class map for explicit buttonRadius prop */\nconst buttonRadiusClassMap: Record<ChatInputRadius, string> = {\n  sm:    'rounded-sm',\n  md:    'rounded-md',\n  lg:    'rounded-lg',\n  xl:    'rounded-xl',\n  '2xl': 'rounded-2xl',\n  full:  'rounded-full',\n}\n\n/** Submit icon size class per size */\nconst submitIconSizeMap = {\n  sm:      'icon-xs',\n  default: 'icon-xs',\n  lg:      'icon-sm',\n} as const\n\n/** Character count text size per size */\nconst countStyleMap = {\n  sm:      'text-xs',\n  default: 'text-xs',\n  lg:      'text-sm',\n} as const\n\n/** Approximate line-height (px) per size for auto-resize */\nconst lineHeightMap = {\n  sm:      20,\n  default: 22,\n  lg:      24,\n} as const\n\n/** Field padding in inline layout — horizontal only (vertical centering via flex) */\nconst inlineFieldPaddingMap = {\n  sm:      'px-3 text-md',\n  default: 'px-4 text-md',\n  lg:      'px-5 text-base',\n} as const\n\n/** Submit wrapper padding in inline layout — symmetric vertical */\nconst submitWrapperInlineMap = {\n  sm:      'px-2.5 py-2.5',\n  default: 'px-3 py-3',\n  lg:      'px-4 py-4',\n} as const\n\n// ============================================================================\n// CVA — root container variants\n// ============================================================================\n\nconst chatInputVariants = cva(\n  [\n    'flex flex-col w-full overflow-hidden cursor-text',\n    'transition-colors duration-micro',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        outline: [\n          'border border-border bg-background',\n          'hover:border-border-strong',\n          'focus-within:border-border-strong focus-within:hover:border-border-strong',\n        ].join(' '),\n        filled: [\n          'border border-transparent bg-background-muted',\n          'focus-within:border-border',\n        ].join(' '),\n      },\n      radius: {\n        sm:    'rounded-sm',\n        md:    'rounded-md',\n        lg:    'rounded-lg',\n        xl:    'rounded-xl',\n        '2xl': 'rounded-2xl',\n        full:  'rounded-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n      radius:  'xl',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ChatInputSize    = 'sm' | 'default' | 'lg'\nexport type ChatInputVariant = 'outline' | 'filled'\nexport type ChatInputRadius  = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\nexport type ChatInputColor   = 'default' | 'primary'\nexport type ChatInputLayout  = 'default' | 'inline'\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface ChatInputContextValue {\n  size:           ChatInputSize\n  color:          ChatInputColor\n  layout:         ChatInputLayout\n  radius:         ChatInputRadius\n  disabled:       boolean\n  isEmpty:        boolean\n  charCount:      number\n  showCount:      boolean\n  maxLength:      number | undefined\n  _setIsEmpty:    React.Dispatch<React.SetStateAction<boolean>>\n  _setCharCount:  React.Dispatch<React.SetStateAction<number>>\n  _setShowCount:  React.Dispatch<React.SetStateAction<boolean>>\n  _setMaxLength:  React.Dispatch<React.SetStateAction<number | undefined>>\n  _fieldRef:      React.MutableRefObject<HTMLTextAreaElement | null>\n  _handleSubmit:  () => void\n}\n\nconst ChatInputContext = React.createContext<ChatInputContextValue>({\n  size:           'default',\n  color:          'default',\n  layout:         'default',\n  radius:         'xl',\n  disabled:       false,\n  isEmpty:        true,\n  charCount:      0,\n  showCount:      false,\n  maxLength:      undefined,\n  _setIsEmpty:    () => {},\n  _setCharCount:  () => {},\n  _setShowCount:  () => {},\n  _setMaxLength:  () => {},\n  _fieldRef:      { current: null },\n  _handleSubmit:  () => {},\n})\n\n// ============================================================================\n// Props interfaces\n// ============================================================================\n\nexport interface ChatInputRootProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'>,\n    VariantProps<typeof chatInputVariants> {\n  /** Visual style of the container */\n  variant?: ChatInputVariant\n  /** Corner radius */\n  radius?: ChatInputRadius\n  /** Size scale */\n  size?: ChatInputSize\n  /** Submit button color — default (dark) or primary (brand) */\n  color?: ChatInputColor\n  /** Layout direction — default (stacked) or inline (field + button side by side) */\n  layout?: ChatInputLayout\n  /** Disable all interaction */\n  disabled?: boolean\n  /** Called when the user submits (Enter key or Submit button) — receives current field value */\n  onSubmit?: (value: string) => void\n}\n\nexport interface ChatInputFieldProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {\n  /** Maximum visible rows before the field scrolls */\n  maxRows?: number\n  /** Show character counter — requires maxLength to be set */\n  showCount?: boolean\n}\n\nexport interface ChatInputSubmitProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Show loading/stop state — keeps button enabled so user can stop generation */\n  loading?: boolean\n  /** Called when clicked during loading state (e.g., stop generation) */\n  onStop?: () => void\n  /** Override the auto-calculated button radius */\n  buttonRadius?: ChatInputRadius\n}\n\n// ============================================================================\n// ChatInput — Root container\n// ============================================================================\n\nconst ChatInput = React.forwardRef<HTMLDivElement, ChatInputRootProps>(\n  (\n    {\n      className,\n      variant  = 'outline',\n      radius   = 'xl',\n      size     = 'default',\n      color    = 'default',\n      layout   = 'default',\n      disabled = false,\n      onSubmit,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [isEmpty,    setIsEmpty]    = React.useState(true)\n    const [charCount,  setCharCount]  = React.useState(0)\n    const [showCount,  setShowCount]  = React.useState(false)\n    const [maxLength,  setMaxLength]  = React.useState<number | undefined>(undefined)\n    const fieldRef = React.useRef<HTMLTextAreaElement | null>(null)\n\n    const handleSubmit = React.useCallback(() => {\n      const el = fieldRef.current\n      if (!el || disabled) return\n      const value = el.value.trim()\n      if (!value) return\n      onSubmit?.(value)\n      // Auto-clear in uncontrolled mode\n      // Controlled-mode users should clear value inside their onSubmit callback\n      el.value = ''\n      el.style.height = 'auto'\n      setIsEmpty(true)\n      setCharCount(0)\n    }, [disabled, onSubmit])\n\n    const contextValue = React.useMemo<ChatInputContextValue>(\n      () => ({\n        size,\n        color,\n        layout,\n        radius,\n        disabled,\n        isEmpty,\n        charCount,\n        showCount,\n        maxLength,\n        _setIsEmpty:   setIsEmpty,\n        _setCharCount: setCharCount,\n        _setShowCount: setShowCount,\n        _setMaxLength: setMaxLength,\n        _fieldRef:     fieldRef,\n        _handleSubmit: handleSubmit,\n      }),\n      [size, color, layout, radius, disabled, isEmpty, charCount, showCount, maxLength, handleSubmit]\n    )\n\n    const handleContainerClick = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        // Focus the textarea when clicking anywhere in the container (not on a button)\n        if (!disabled && !(e.target as HTMLElement).closest('button')) {\n          fieldRef.current?.focus()\n        }\n      },\n      [disabled]\n    )\n\n    return (\n      <ChatInputContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          data-disabled={disabled || undefined}\n          onClick={handleContainerClick}\n          className={cn(\n            chatInputVariants({ variant, radius }),\n            layout === 'inline' && 'flex-row',\n            disabled && 'opacity-50 pointer-events-none',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ChatInputContext.Provider>\n    )\n  }\n)\nChatInput.displayName = 'ChatInput'\n\n// ============================================================================\n// ChatInputField — Auto-resizing textarea\n// ============================================================================\n\nconst ChatInputField = React.forwardRef<HTMLTextAreaElement, ChatInputFieldProps>(\n  (\n    {\n      className,\n      maxRows   = 8,\n      showCount = false,\n      maxLength,\n      placeholder,\n      onChange,\n      onKeyDown,\n      disabled,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ctx = React.useContext(ChatInputContext)\n    const internalRef = React.useRef<HTMLTextAreaElement | null>(null)\n    const isDisabled = disabled ?? ctx.disabled\n\n    // Sync showCount + maxLength into root context on mount/update\n    React.useEffect(() => {\n      ctx._setShowCount(showCount)\n      ctx._setMaxLength(maxLength)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [showCount, maxLength])\n\n    // Merge forwarded ref + internal ref + context field ref\n    const setRef = React.useCallback(\n      (el: HTMLTextAreaElement | null) => {\n        internalRef.current = el\n        ctx._fieldRef.current = el\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(el)\n        } else if (forwardedRef) {\n          (forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el\n        }\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [forwardedRef]\n    )\n\n    // Adjust textarea height to content, bounded by maxRows\n    const autoResize = React.useCallback(() => {\n      const el = internalRef.current\n      if (!el) return\n      el.style.height = 'auto'\n      const maxHeight = maxRows * lineHeightMap[ctx.size]\n      const newHeight = Math.min(el.scrollHeight, maxHeight)\n      el.style.height = `${newHeight}px`\n      el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden'\n    }, [ctx.size, maxRows])\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const val = e.target.value\n        ctx._setIsEmpty(val.trim() === '')\n        ctx._setCharCount(val.length)\n        autoResize()\n        onChange?.(e)\n      },\n      [ctx, autoResize, onChange]\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // Enter = submit | Shift+Enter = new line\n        if (e.key === 'Enter' && !e.shiftKey) {\n          e.preventDefault()\n          ctx._handleSubmit()\n        }\n        onKeyDown?.(e)\n      },\n      [ctx, onKeyDown]\n    )\n\n    return (\n      <div className={cn('flex-1 min-w-0', ctx.layout === 'inline' && 'flex items-center self-stretch')}>\n        <textarea\n          ref={setRef}\n          rows={1}\n          placeholder={placeholder}\n          maxLength={maxLength}\n          disabled={isDisabled}\n          className={cn(\n            'w-full bg-transparent text-foreground placeholder:text-foreground/30',\n            'resize-none outline-none focus:outline-none',\n            'disabled:cursor-not-allowed',\n            'overflow-hidden',\n            ctx.layout === 'inline' ? inlineFieldPaddingMap[ctx.size] : fieldPaddingMap[ctx.size],\n            className\n          )}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nChatInputField.displayName = 'ChatInputField'\n\n// ============================================================================\n// ChatInputSubmit — Send / stop button\n// ============================================================================\n\nconst ChatInputSubmit = React.forwardRef<HTMLButtonElement, ChatInputSubmitProps>(\n  (\n    {\n      className,\n      loading      = false,\n      onStop,\n      children,\n      disabled,\n      onClick,\n      buttonRadius,\n      ...props\n    },\n    ref\n  ) => {\n    const ctx = React.useContext(ChatInputContext)\n\n    // Disabled: context disabled | user prop | empty field (only when not loading)\n    const isDisabled = (disabled ?? ctx.disabled) || (!loading && ctx.isEmpty)\n\n    const handleClick = React.useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        if (loading) {\n          onStop?.()\n        } else if (!isDisabled) {\n          ctx._handleSubmit()\n        }\n        onClick?.(e)\n      },\n      [ctx, isDisabled, loading, onStop, onClick]\n    )\n\n    return (\n      <div className={cn('flex items-center justify-end gap-2 shrink-0 cursor-default', ctx.layout === 'inline' ? submitWrapperInlineMap[ctx.size] : submitWrapperMap[ctx.size])}>\n        {ctx.showCount && ctx.maxLength != null && (\n          <span className={cn('text-text-subtle select-none', countStyleMap[ctx.size])}>\n            {ctx.charCount} / {ctx.maxLength}\n          </span>\n        )}\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={isDisabled && !loading}\n          aria-label={loading ? 'Stop generating' : 'Send message'}\n          className={cn(\n            'inline-flex items-center justify-center shrink-0',\n            buttonRadius ? buttonRadiusClassMap[buttonRadius] : submitRadiusMap[ctx.radius],\n            'transition-all duration-fast',\n            'focus-visible:outline-none focus-visible:focus-ring',\n            submitSizeMap[ctx.size],\n            // Loading state — enabled, pulsing\n            loading && ctx.color === 'default' && 'bg-foreground text-background animate-pulse cursor-pointer',\n            loading && ctx.color === 'primary' && 'bg-primary text-primary-foreground animate-pulse cursor-pointer',\n            // Enabled state\n            !loading && !isDisabled && ctx.color === 'default' && [\n              'bg-foreground text-background',\n              'hover:bg-foreground/90 active:bg-foreground/80 active:scale-pressed cursor-pointer',\n            ],\n            !loading && !isDisabled && ctx.color === 'primary' && [\n              'bg-primary text-primary-foreground',\n              'hover:bg-primary-hover active:scale-pressed cursor-pointer',\n            ],\n            // Disabled state\n            !loading && isDisabled && 'bg-background-muted text-text-subtle pointer-events-none',\n            className\n          )}\n          onClick={handleClick}\n          {...props}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={cn('flex items-center justify-center', submitIconSizeMap[ctx.size])}\n          >\n            {children ?? (loading ? <StopIcon /> : <SendIcon />)}\n          </span>\n        </button>\n      </div>\n    )\n  }\n)\nChatInputSubmit.displayName = 'ChatInputSubmit'\n\n// ============================================================================\n// Built-in SVG icons — no external icon dependency\n// ============================================================================\n\nfunction SendIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"w-full h-full\"\n    >\n      <path d=\"M22 2 11 13\" />\n      <path d=\"M22 2 15 22 11 13 2 9l20-7Z\" />\n    </svg>\n  )\n}\n\nfunction StopIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"w-full h-full\">\n      <rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"2\" />\n    </svg>\n  )\n}\n\nexport {\n  ChatInput,\n  ChatInputField,\n  ChatInputSubmit,\n  chatInputVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-N4K2BDGM.mjs

@@ -0,0 +1,153 @@
+"use client";
+import {
+  useFieldContext
+} from "./chunk-Z6JWWCNL.mjs";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/textarea.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var textareaVariants = cva(
+  [
+    "flex w-full bg-background text-foreground placeholder:text-foreground/30",
+    "border transition-colors duration-micro outline-transparent",
+    "focus:[outline:2px_solid_transparent]",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-border hover:border-border-strong",
+        filled: "border-transparent bg-background-muted"
+      },
+      focusRing: {
+        true: "",
+        false: ""
+      },
+      size: {
+        compact: "px-3 py-2 text-md",
+        // 12px padding / 14px font - compact spaces
+        default: "px-4 py-3 text-base"
+        // 16px padding / 16px font - standard
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-3xl"
+        // rounded-full looks unnatural on textarea, using 3xl instead
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      },
+      state: {
+        default: "",
+        error: "border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]"
+      }
+    },
+    compoundVariants: [
+      // focusRing: true → show custom focus ring
+      { focusRing: true, className: "focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]" },
+      // focusRing: false → keep same state as hover
+      { variant: "default", focusRing: false, className: "focus:border-border-strong" },
+      // filled + error
+      {
+        variant: "filled",
+        state: "error",
+        className: "border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      resize: "vertical",
+      state: "default",
+      focusRing: false
+    }
+  }
+);
+var Textarea = React.forwardRef(
+  ({ className, variant, size, radius, resize, state, error, focusRing, id, rows = 4, onPointerDown, onFocus, onBlur, ...props }, ref) => {
+    const fieldContext = useFieldContext();
+    const resolvedError = error ?? fieldContext?.error;
+    const resolvedState = resolvedError ? "error" : state;
+    const textareaId = id ?? fieldContext?.id;
+    const isDisabled = props.disabled ?? fieldContext?.disabled;
+    const pointerRef = React.useRef(false);
+    const windowBlurredRef = React.useRef(false);
+    const [keyboardFocus, setKeyboardFocus] = React.useState(false);
+    React.useEffect(() => {
+      const onBlur2 = () => {
+        windowBlurredRef.current = true;
+      };
+      const onFocus2 = () => {
+        requestAnimationFrame(() => {
+          windowBlurredRef.current = false;
+        });
+      };
+      window.addEventListener("blur", onBlur2);
+      window.addEventListener("focus", onFocus2);
+      return () => {
+        window.removeEventListener("blur", onBlur2);
+        window.removeEventListener("focus", onFocus2);
+      };
+    }, []);
+    const handlePointerDown = React.useCallback((e) => {
+      pointerRef.current = true;
+      onPointerDown?.(e);
+    }, [onPointerDown]);
+    const handleFocus = React.useCallback((e) => {
+      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {
+        setKeyboardFocus(true);
+      }
+      pointerRef.current = false;
+      onFocus?.(e);
+    }, [focusRing, onFocus]);
+    const handleBlur = React.useCallback((e) => {
+      setKeyboardFocus(false);
+      pointerRef.current = false;
+      onBlur?.(e);
+    }, [onBlur]);
+    const ariaDescribedBy = fieldContext ? [
+      resolvedError ? `${fieldContext.id}-error` : null
+    ].filter(Boolean).join(" ") || void 0 : void 0;
+    return /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        id: textareaId,
+        rows,
+        className: cn(
+          textareaVariants({ variant, size, radius, resize, state: resolvedState, focusRing }),
+          keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+          className
+        ),
+        "aria-invalid": resolvedError || void 0,
+        "aria-describedby": ariaDescribedBy,
+        disabled: isDisabled,
+        ref,
+        onPointerDown: handlePointerDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export {
+  textareaVariants,
+  Textarea
+};
+//# sourceMappingURL=chunk-N4K2BDGM.mjs.map

package/dist/chunk-N4K2BDGM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/textarea.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext } from './field'\n\nconst textareaVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border hover:border-border-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        compact: 'px-3 py-2 text-md',   // 12px padding / 14px font - compact spaces\n        default: 'px-4 py-3 text-base', // 16px padding / 16px font - standard\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-3xl', // rounded-full looks unnatural on textarea, using 3xl instead\n      },\n      resize: {\n        none: 'resize-none',\n        vertical: 'resize-y',\n        horizontal: 'resize-x',\n        both: 'resize',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      resize: 'vertical',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    VariantProps<typeof textareaVariants> {\n  error?: boolean\n  focusRing?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, variant, size, radius, resize, state, error, focusRing, id, rows = 4, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const textareaId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLTextAreaElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    return (\n      <textarea\n        id={textareaId}\n        rows={rows}\n        className={cn(\n          textareaVariants({ variant, size, radius, resize, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        onPointerDown={handlePointerDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea, textareaVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}