import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { createSafeContext } from "./index21.js";
import { useDropZone } from "./index384.js";
import { FileUploadItem } from "./index385.js";
import { cva } from "class-variance-authority";
import { ArrowDown, ArrowUp, X } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AIInput/AIInput.tsx
var textareaClasses = "flex-1 h-[40px] resize-none overflow-y-auto bg-transparent text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground";
var compactTextareaClasses = "flex-1 h-[40px] resize-none overflow-y-auto bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground";
var inputVariants = cva("flex items-center w-full transition-[color,background-color,border-color,box-shadow,opacity] shadow-[0_8px_32px_rgba(0,0,0,0.1)]", {
	variants: {
		state: {
			default: "",
			focused: "",
			withText: "",
			disabled: "cursor-not-allowed",
			attachments: "",
			dragover: ""
		},
		variant: {
			default: "flex-col gap-2 py-4 px-4 rounded-3xl",
			compact: "flex-col gap-2 p-3 rounded-2xl",
			inline: "flex-row gap-2 px-[13px] py-1 rounded-2xl"
		}
	},
	compoundVariants: [
		{
			variant: "default",
			state: "default",
			className: "shadow-md"
		},
		{
			variant: "default",
			state: "focused",
			className: "shadow-lg"
		},
		{
			variant: "default",
			state: "withText",
			className: "shadow-lg"
		},
		{
			variant: "default",
			state: "disabled",
			className: "shadow-md"
		},
		{
			variant: "default",
			state: "attachments",
			className: "shadow-lg"
		},
		{
			variant: "default",
			state: "dragover",
			className: "shadow-lg"
		},
		{
			variant: "compact",
			state: "dragover",
			className: "shadow-lg"
		},
		{
			variant: "inline",
			state: "dragover",
			className: "shadow-lg"
		}
	],
	defaultVariants: {
		state: "default",
		variant: "default"
	}
});
function DropOverlay({ isDefault, dropText }) {
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-input-drop-overlay",
		role: "status",
		"aria-live": "polite",
		className: cn("delight-drop-enter absolute inset-1.5 border-2 border-dashed border-primary/50 dark:border-primary/60 pointer-events-none flex flex-col items-center justify-center gap-1.5 z-10", isDefault ? "rounded-[calc(1.5rem-8px)]" : "rounded-[calc(1rem-8px)]"),
		children: [/* @__PURE__ */ jsx(ArrowDown, { className: "size-4 text-primary/70 delight-drop-icon" }), /* @__PURE__ */ jsx("span", {
			className: "text-sm text-muted-foreground font-medium",
			children: dropText
		})]
	});
}
DropOverlay.displayName = "AIInput.DropOverlay";
var [AIInputContext, useAIInputContext] = createSafeContext("AIInput");
function ActionButton({ icon: Icon, onClick, disabled, tooltip, className, ...props }) {
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"data-slot": "action-button",
		onClick,
		disabled,
		title: tooltip,
		"aria-label": tooltip,
		className: cn("p-2 rounded-full hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed", className),
		...props,
		children: /* @__PURE__ */ jsx(Icon, { className: "size-5 text-quaternary-foreground" })
	});
}
ActionButton.displayName = "AIInput.ActionButton";
function SubmitButton({ icon: Icon = ArrowUp, className, onClick, disabled, ...props }) {
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		"data-slot": "submit-button",
		size: "icon",
		onClick,
		disabled,
		"aria-label": "Send message",
		className: cn("rounded-full bg-primary hover:bg-primary/90 text-primary-foreground disabled:bg-accent disabled:text-muted-foreground transition-colors duration-150 ease-out", className),
		...props,
		children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
	});
}
SubmitButton.displayName = "AIInput.SubmitButton";
/**
* @deprecated Use `ActionButton` instead. CompactActionButton will be removed in a future major version.
*/
function CompactActionButton({ icon: Icon, className, onClick, disabled, ...props }) {
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		"data-slot": "compact-action-button",
		onClick,
		disabled,
		appearance: "outline",
		variant: "secondary",
		size: "icon",
		className: cn("rounded-full border-border text-foreground hover:bg-muted", className),
		...props,
		children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
	});
}
CompactActionButton.displayName = "AIInput.CompactActionButton";
function RemoveAllButton({ onClick }) {
	return /* @__PURE__ */ jsxs("button", {
		type: "button",
		onClick,
		"aria-label": "Remove all attached files",
		className: "flex items-center gap-1.5 h-5 px-2 py-1 rounded-full bg-accent border border-border text-xs font-medium text-foreground hover:bg-accent/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors",
		children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), "Remove all"]
	});
}
RemoveAllButton.displayName = "AIInput.RemoveAllButton";
function AIInputRoot({ children, variant = "default", value: controlledValue, defaultValue = "", onChange, onSubmit, uploadingFiles = [], onRemoveFile, onCancelUpload, onRetryUpload, onRemoveAllFiles, disabled = false, className, onFilesSelected, accept, multiple = true, dropText = "Drop files to attach" }) {
	const [internalValue, setInternalValue] = React.useState(defaultValue);
	const [isFocused, setIsFocused] = React.useState(false);
	const textareaRef = React.useRef(null);
	const inputRef = React.useRef(null);
	const rootRef = React.useRef(null);
	const { isDragging, dropZoneProps, openFilePicker } = useDropZone({
		onFilesSelected,
		accept,
		multiple,
		disabled,
		containerRef: rootRef
	});
	const isControlled = controlledValue !== void 0;
	const value = isControlled ? controlledValue : internalValue;
	const hasText = value.trim().length > 0;
	const hasAttachments = uploadingFiles.length > 0;
	const setValue = React.useCallback((newValue) => {
		if (onChange) onChange(newValue);
		if (!isControlled) setInternalValue(newValue);
	}, [onChange, isControlled]);
	const handleSubmit = React.useCallback(() => {
		if (hasText && onSubmit) {
			onSubmit(value);
			if (!isControlled) setInternalValue("");
		}
	}, [
		hasText,
		onSubmit,
		value,
		isControlled
	]);
	const handleKeyDown = React.useCallback((e) => {
		if (e.key === "Enter" && !e.shiftKey) {
			e.preventDefault();
			handleSubmit();
		}
	}, [handleSubmit]);
	const handleClear = React.useCallback(() => {
		setValue("");
		if (variant === "inline") inputRef.current?.focus();
		else textareaRef.current?.focus();
	}, [setValue, variant]);
	const getState = () => {
		if (disabled) return "disabled";
		if (isDragging) return "dragover";
		if (hasAttachments) return "attachments";
		if (hasText) return "withText";
		if (isFocused) return "focused";
		return "default";
	};
	const borderWidth = isFocused || hasText ? 2 : 1.25;
	const contextValue = React.useMemo(() => ({
		value,
		hasText,
		isFocused,
		disabled,
		variant,
		uploadingFiles,
		hasAttachments,
		setValue,
		setIsFocused,
		handleSubmit,
		handleKeyDown,
		handleClear,
		onRemoveFile,
		onCancelUpload,
		onRetryUpload,
		onRemoveAllFiles,
		isDragging,
		openFilePicker,
		onFilesSelected,
		textareaRef,
		inputRef
	}), [
		value,
		hasText,
		isFocused,
		disabled,
		variant,
		uploadingFiles,
		hasAttachments,
		setValue,
		handleSubmit,
		handleKeyDown,
		handleClear,
		onRemoveFile,
		onCancelUpload,
		onRetryUpload,
		onRemoveAllFiles,
		isDragging,
		openFilePicker,
		onFilesSelected
	]);
	const isDefault = variant === "default";
	const isInline = variant === "inline";
	return /* @__PURE__ */ jsx(AIInputContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx("div", {
			ref: rootRef,
			"data-slot": "ai-input",
			"data-gradient-active": !disabled && (isDragging || !hasAttachments && (isFocused || hasText)),
			"data-dragging": isDragging,
			...dropZoneProps,
			...onFilesSelected ? { "aria-label": "Chat input with file drop zone" } : {},
			className: cn("relative w-full p-[1.25px] delight-gradient-border", isDefault ? "rounded-3xl max-w-[850px]" : "rounded-2xl", disabled ? "bg-border" : isDragging ? "bg-primary" : hasAttachments ? "bg-primary" : "bg-primary/50 hover:bg-primary", className),
			style: { padding: `${borderWidth}px` },
			children: /* @__PURE__ */ jsxs("div", {
				"data-slot": "ai-input-inner",
				className: cn(inputVariants({
					state: getState(),
					variant
				}), "relative", isInline && hasAttachments && "flex-col py-3", disabled && !isDefault ? "bg-muted" : "bg-background", isDefault ? cn("rounded-[calc(1.5rem-1.25px)]", (isFocused || hasText) && "rounded-[calc(1.5rem-2px)]") : cn("rounded-[calc(1rem-1.25px)]", (isFocused || hasText) && "rounded-[calc(1rem-2px)]"), disabled && isDefault && "bg-muted"),
				children: [isDragging && /* @__PURE__ */ jsx(DropOverlay, {
					isDefault,
					dropText
				}), children]
			})
		})
	});
}
AIInputRoot.displayName = "AIInput.Root";
function AIInputTextArea({ placeholder = "How can HUMAIN ONE help you today?", className, showClearButton = true }) {
	const ctx = useAIInputContext();
	const isInline = ctx.variant === "inline";
	const handleChange = (e) => {
		ctx.setValue(e.target.value);
	};
	if (isInline) return /* @__PURE__ */ jsx("input", {
		ref: ctx.inputRef,
		"data-slot": "ai-input-text",
		type: "text",
		value: ctx.value,
		onChange: handleChange,
		onFocus: () => ctx.setIsFocused(true),
		onBlur: () => ctx.setIsFocused(false),
		onKeyDown: ctx.handleKeyDown,
		placeholder,
		"aria-label": placeholder,
		disabled: ctx.disabled,
		className: cn("flex-1 min-w-0 bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground", className)
	});
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-input-text-area",
		className: "flex items-start gap-2 w-full",
		children: [/* @__PURE__ */ jsx("textarea", {
			ref: ctx.textareaRef,
			"data-slot": "ai-input-textarea",
			value: ctx.value,
			onChange: handleChange,
			onFocus: () => ctx.setIsFocused(true),
			onBlur: () => ctx.setIsFocused(false),
			onKeyDown: ctx.handleKeyDown,
			placeholder,
			"aria-label": placeholder,
			disabled: ctx.disabled,
			rows: 1,
			className: cn(ctx.variant === "compact" ? compactTextareaClasses : textareaClasses, className)
		}), showClearButton && ctx.hasText && !ctx.disabled && /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: ctx.handleClear,
			"aria-label": "Clear input",
			className: "p-2 rounded-full hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out shrink-0",
			children: /* @__PURE__ */ jsx(X, { className: "size-5 text-muted-foreground" })
		})]
	});
}
AIInputTextArea.displayName = "AIInput.TextArea";
function AIInputLeadingIcon({ children, className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-input-leading-icon",
		"aria-hidden": "true",
		className: cn("flex items-center justify-center shrink-0 size-9 rounded-xl bg-foreground/4 border border-border", className),
		children
	});
}
AIInputLeadingIcon.displayName = "AIInput.LeadingIcon";
function AIInputSendButton({ icon, className, ...props }) {
	const ctx = useAIInputContext();
	const Icon = icon ?? ArrowUp;
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		"data-slot": "ai-input-send-button",
		size: "icon",
		onClick: ctx.handleSubmit,
		disabled: ctx.disabled || !ctx.hasText,
		"aria-label": "Send message",
		className: cn("rounded-full bg-primary hover:bg-primary/90 text-primary-foreground disabled:bg-accent disabled:text-muted-foreground", "transition-all duration-150 ease-out active:scale-90 motion-reduce:active:scale-100", className),
		...props,
		children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
	});
}
AIInputSendButton.displayName = "AIInput.SendButton";
function AIInputAttachButton({ icon: Icon, tooltip, className, onClick, ...props }) {
	const ctx = useAIInputContext();
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"data-slot": "ai-input-attach-button",
		onClick: React.useCallback((e) => {
			if (onClick) onClick(e);
			else if (ctx.onFilesSelected) ctx.openFilePicker();
		}, [
			onClick,
			ctx.onFilesSelected,
			ctx.openFilePicker
		]),
		disabled: ctx.disabled,
		title: tooltip,
		"aria-label": tooltip ?? "Attach file",
		className: cn("p-2.5 min-h-11 min-w-11 flex items-center justify-center rounded-full hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed", className),
		...props,
		children: /* @__PURE__ */ jsx(Icon, { className: "size-5 text-quaternary-foreground" })
	});
}
AIInputAttachButton.displayName = "AIInput.AttachButton";
function AIInputActions({ children, position = "leading", className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-input-actions",
		"data-position": position,
		className: cn("flex items-center gap-2", className),
		children
	});
}
AIInputActions.displayName = "AIInput.Actions";
function AIInputActionBar({ children, className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-input-action-bar",
		className: cn("flex items-center justify-between w-full", className),
		children
	});
}
AIInputActionBar.displayName = "AIInput.ActionBar";
function AIInputFilePreview({ className }) {
	const ctx = useAIInputContext();
	if (!ctx.hasAttachments) return null;
	const completedFiles = ctx.uploadingFiles.filter((f) => f.status === "complete" || f.progress >= 100);
	if (ctx.variant !== "default") return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-input-file-preview",
		className: cn("w-full flex flex-col gap-2", className),
		children: [
			/* @__PURE__ */ jsx("div", {
				className: "flex gap-2 w-full overflow-x-auto",
				children: ctx.uploadingFiles.map((file, index) => /* @__PURE__ */ jsx(FileUploadItem, {
					progressType: "compact",
					fileName: file.name,
					fileExtension: file.fileExtension ?? file.name.split(".").pop(),
					progress: file.progress,
					status: file.status,
					className: "shrink-0 delight-stagger",
					style: { "--delight-delay": `${index * 60}ms` },
					onRemove: () => ctx.onRemoveFile?.(file.id),
					onCancel: () => ctx.onCancelUpload?.(file.id),
					onRetry: () => ctx.onRetryUpload?.(file.id)
				}, file.id))
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center justify-between w-full",
				children: [/* @__PURE__ */ jsxs("span", {
					className: "text-xs text-card-foreground",
					children: [
						completedFiles.length,
						" file",
						completedFiles.length !== 1 ? "s" : "",
						" added"
					]
				}), /* @__PURE__ */ jsx(RemoveAllButton, { onClick: ctx.onRemoveAllFiles })]
			}),
			/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-border" })
		]
	});
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-input-file-preview",
		className: cn("w-full flex flex-col gap-2", className),
		children: [
			/* @__PURE__ */ jsx("div", {
				className: "flex items-start gap-2 w-full overflow-x-auto",
				children: ctx.uploadingFiles.map((file, index) => /* @__PURE__ */ jsx(FileUploadItem, {
					fileName: file.name,
					fileSize: file.size,
					fileExtension: file.fileExtension ?? file.name.split(".").pop(),
					progress: file.progress,
					status: file.status,
					progressType: "fill",
					className: "flex-1 min-w-0 delight-stagger",
					style: { "--delight-delay": `${index * 60}ms` },
					onRemove: () => ctx.onRemoveFile?.(file.id),
					onCancel: () => ctx.onCancelUpload?.(file.id),
					onRetry: () => ctx.onRetryUpload?.(file.id)
				}, file.id))
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-end justify-between w-full",
				children: [/* @__PURE__ */ jsxs("span", {
					className: "text-xs text-card-foreground",
					children: [
						completedFiles.length,
						" file",
						completedFiles.length !== 1 ? "s" : "",
						" added"
					]
				}), /* @__PURE__ */ jsx(RemoveAllButton, { onClick: ctx.onRemoveAllFiles })]
			}),
			/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-border" })
		]
	});
}
AIInputFilePreview.displayName = "AIInput.FilePreview";
function AIInputDefault({ variant = "default", placeholder = "How can HUMAIN ONE help you today?", value, onChange, onSubmit, uploadingFiles = [], onRemoveFile, onCancelUpload, onRetryUpload, onRemoveAllFiles, onFilesSelected, accept, multiple = true, dropText = "Drop files to attach", disabled = false, className, leadingActions, trailingActions, submitButton, defaultButton, leadingIcon }) {
	const [internalValue, setInternalValue] = React.useState("");
	const [isFocused, setIsFocused] = React.useState(false);
	const textareaRef = React.useRef(null);
	const inputRef = React.useRef(null);
	const rootRef = React.useRef(null);
	const { isDragging, dropZoneProps } = useDropZone({
		onFilesSelected,
		accept,
		multiple,
		disabled,
		containerRef: rootRef
	});
	const inputValue = value !== void 0 ? value : internalValue;
	const hasText = inputValue.trim().length > 0;
	const hasAttachments = uploadingFiles.length > 0;
	const isInline = variant === "inline";
	const isDefault = variant === "default";
	const getState = () => {
		if (disabled) return "disabled";
		if (isDragging) return "dragover";
		if (hasAttachments) return "attachments";
		if (hasText) return "withText";
		if (isFocused) return "focused";
		return "default";
	};
	const handleChange = (e) => {
		const newValue = e.target.value;
		if (onChange) onChange(newValue);
		else setInternalValue(newValue);
	};
	const handleSubmit = () => {
		if (hasText && onSubmit) {
			onSubmit(inputValue);
			if (!value) setInternalValue("");
		}
	};
	const handleKeyDown = (e) => {
		if (e.key === "Enter" && !e.shiftKey) {
			e.preventDefault();
			handleSubmit();
		}
	};
	const handleClear = () => {
		if (onChange) onChange("");
		else setInternalValue("");
		if (variant === "inline") inputRef.current?.focus();
		else textareaRef.current?.focus();
	};
	const borderWidth = isFocused || hasText ? 2 : 1.25;
	const renderSubmitButton = () => {
		const buttonProps = {
			onClick: handleSubmit,
			disabled: disabled || !hasText
		};
		if (submitButton) return submitButton(buttonProps);
		return /* @__PURE__ */ jsx(SubmitButton, { ...buttonProps });
	};
	const renderDefaultButton = () => {
		const buttonProps = { disabled: disabled || !hasText };
		if (defaultButton) return defaultButton(buttonProps);
		return /* @__PURE__ */ jsx(SubmitButton, {
			icon: ArrowUp,
			...buttonProps
		});
	};
	const completedCount = uploadingFiles.filter((f) => f.status === "complete" || f.progress >= 100).length;
	const compactFilePreview = !isDefault && hasAttachments && /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-input-file-preview",
		className: "w-full flex flex-col gap-2",
		children: [
			/* @__PURE__ */ jsx("div", {
				className: "flex gap-2 w-full overflow-x-auto",
				children: uploadingFiles.map((file, index) => /* @__PURE__ */ jsx(FileUploadItem, {
					progressType: "compact",
					fileName: file.name,
					fileExtension: file.fileExtension ?? file.name.split(".").pop(),
					progress: file.progress,
					status: file.status,
					className: "shrink-0 delight-stagger",
					style: { "--delight-delay": `${index * 60}ms` },
					onRemove: () => onRemoveFile?.(file.id),
					onCancel: () => onCancelUpload?.(file.id),
					onRetry: () => onRetryUpload?.(file.id)
				}, file.id))
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center justify-between w-full",
				children: [/* @__PURE__ */ jsxs("span", {
					className: "text-xs text-card-foreground",
					children: [
						completedCount,
						" file",
						completedCount !== 1 ? "s" : "",
						" added"
					]
				}), /* @__PURE__ */ jsx(RemoveAllButton, { onClick: onRemoveAllFiles })]
			}),
			/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-border" })
		]
	});
	if (isInline) return /* @__PURE__ */ jsx("div", {
		ref: rootRef,
		"data-slot": "ai-input",
		"data-gradient-active": !disabled && (isDragging || !hasAttachments && (isFocused || hasText)),
		"data-dragging": isDragging,
		...dropZoneProps,
		...onFilesSelected ? { "aria-label": "Chat input with file drop zone" } : {},
		className: cn("relative rounded-2xl w-full p-[1.25px] delight-gradient-border", disabled ? "bg-border" : isDragging ? "bg-primary" : hasAttachments ? "bg-primary" : "bg-primary/50 hover:bg-primary", className),
		style: { padding: `${borderWidth}px` },
		children: /* @__PURE__ */ jsxs("div", {
			"data-slot": "ai-input-inner",
			className: cn(inputVariants({
				state: getState(),
				variant: "inline"
			}), "relative", hasAttachments && "flex-col py-3", disabled ? "bg-muted" : "bg-background", "rounded-[calc(1rem-1.25px)]", (isFocused || hasText) && "rounded-[calc(1rem-2px)]"),
			children: [
				isDragging && /* @__PURE__ */ jsx(DropOverlay, {
					isDefault,
					dropText
				}),
				compactFilePreview,
				/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-2 w-full",
					children: [
						/* @__PURE__ */ jsx(AIInputLeadingIcon, { children: leadingIcon }),
						/* @__PURE__ */ jsx("input", {
							ref: inputRef,
							"data-slot": "ai-input-text",
							type: "text",
							value: inputValue,
							onChange: handleChange,
							onFocus: () => setIsFocused(true),
							onBlur: () => setIsFocused(false),
							onKeyDown: handleKeyDown,
							placeholder,
							"aria-label": placeholder,
							disabled,
							className: "flex-1 min-w-0 bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:text-muted-foreground"
						}),
						renderSubmitButton()
					]
				})
			]
		})
	});
	if (!isDefault) return /* @__PURE__ */ jsx("div", {
		ref: rootRef,
		"data-slot": "ai-input",
		"data-gradient-active": !disabled && (isDragging || !hasAttachments && (isFocused || hasText)),
		"data-dragging": isDragging,
		...dropZoneProps,
		...onFilesSelected ? { "aria-label": "Chat input with file drop zone" } : {},
		className: cn("relative rounded-2xl w-full p-[1.25px] delight-gradient-border", disabled ? "bg-border" : isDragging ? "bg-primary" : hasAttachments ? "bg-primary" : "bg-primary/50 hover:bg-primary", className),
		style: { padding: `${borderWidth}px` },
		children: /* @__PURE__ */ jsxs("div", {
			"data-slot": "ai-input-inner",
			className: cn(inputVariants({
				state: getState(),
				variant: "compact"
			}), "relative", disabled ? "bg-muted" : "bg-background", "rounded-[calc(1rem-1.25px)]", (isFocused || hasText) && "rounded-[calc(1rem-2px)]"),
			children: [
				isDragging && /* @__PURE__ */ jsx(DropOverlay, {
					isDefault,
					dropText
				}),
				compactFilePreview,
				/* @__PURE__ */ jsxs("div", {
					"data-slot": "ai-input-text-area",
					className: "flex items-start gap-2 w-full",
					children: [/* @__PURE__ */ jsx("textarea", {
						ref: textareaRef,
						"data-slot": "ai-input-textarea",
						value: inputValue,
						onChange: handleChange,
						onFocus: () => setIsFocused(true),
						onBlur: () => setIsFocused(false),
						onKeyDown: handleKeyDown,
						placeholder,
						"aria-label": placeholder,
						disabled,
						rows: 1,
						className: compactTextareaClasses
					}), hasText && !disabled && /* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: handleClear,
						"aria-label": "Clear input",
						className: "p-2 rounded-full hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out shrink-0",
						children: /* @__PURE__ */ jsx(X, { className: "size-5 text-muted-foreground" })
					})]
				}),
				/* @__PURE__ */ jsxs("div", {
					"data-slot": "ai-input-action-bar",
					className: "flex items-center justify-between w-full",
					children: [/* @__PURE__ */ jsx("div", {
						"data-slot": "ai-input-actions",
						className: "flex items-center gap-2",
						children: leadingActions
					}), /* @__PURE__ */ jsxs("div", {
						"data-slot": "ai-input-actions",
						className: "flex items-center gap-2",
						children: [trailingActions, hasText ? renderSubmitButton() : renderDefaultButton()]
					})]
				})
			]
		})
	});
	return /* @__PURE__ */ jsx("div", {
		ref: rootRef,
		"data-slot": "ai-input",
		"data-gradient-active": !disabled && (isDragging || !hasAttachments && (isFocused || hasText)),
		"data-dragging": isDragging,
		...dropZoneProps,
		...onFilesSelected ? { "aria-label": "Chat input with file drop zone" } : {},
		className: cn("relative rounded-3xl w-full max-w-[850px] p-[1.25px] delight-gradient-border", disabled ? "bg-border" : isDragging ? "bg-primary" : hasAttachments ? "bg-primary" : "bg-primary/50 hover:bg-primary", className),
		style: { padding: `${borderWidth}px` },
		children: /* @__PURE__ */ jsxs("div", {
			"data-slot": "ai-input-inner",
			className: cn(inputVariants({
				state: getState(),
				variant: "default"
			}), "relative bg-background rounded-[calc(1.5rem-1.25px)]", (isFocused || hasText) && "rounded-[calc(1.5rem-2px)]", disabled && "bg-muted"),
			children: [
				isDragging && /* @__PURE__ */ jsx(DropOverlay, {
					isDefault,
					dropText
				}),
				hasAttachments && /* @__PURE__ */ jsxs("div", {
					"data-slot": "ai-input-file-preview",
					className: "w-full flex flex-col gap-2",
					children: [
						/* @__PURE__ */ jsx("div", {
							className: "flex items-start gap-2 w-full overflow-x-auto",
							children: uploadingFiles.map((file, index) => /* @__PURE__ */ jsx(FileUploadItem, {
								fileName: file.name,
								fileSize: file.size,
								fileExtension: file.fileExtension ?? file.name.split(".").pop(),
								progress: file.progress,
								status: file.status,
								className: "flex-1 min-w-0 delight-stagger",
								style: { "--delight-delay": `${index * 60}ms` },
								onRemove: () => onRemoveFile?.(file.id),
								onCancel: () => onCancelUpload?.(file.id),
								onRetry: () => onRetryUpload?.(file.id)
							}, file.id))
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-end justify-between w-full",
							children: [/* @__PURE__ */ jsxs("span", {
								className: "text-xs text-card-foreground",
								children: [
									completedCount,
									" file",
									completedCount !== 1 ? "s" : "",
									" added"
								]
							}), /* @__PURE__ */ jsx(RemoveAllButton, { onClick: onRemoveAllFiles })]
						}),
						/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-border" })
					]
				}),
				/* @__PURE__ */ jsxs("div", {
					"data-slot": "ai-input-text-area",
					className: "flex items-start gap-2 w-full",
					children: [/* @__PURE__ */ jsx("textarea", {
						ref: textareaRef,
						"data-slot": "ai-input-textarea",
						value: inputValue,
						onChange: handleChange,
						onFocus: () => setIsFocused(true),
						onBlur: () => setIsFocused(false),
						onKeyDown: handleKeyDown,
						placeholder,
						"aria-label": placeholder,
						disabled,
						rows: 1,
						className: textareaClasses
					}), hasText && !disabled && /* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: handleClear,
						"aria-label": "Clear input",
						className: "p-2 rounded-full hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out shrink-0",
						children: /* @__PURE__ */ jsx(X, { className: "size-5 text-muted-foreground" })
					})]
				}),
				/* @__PURE__ */ jsxs("div", {
					"data-slot": "ai-input-action-bar",
					className: "flex items-center justify-between w-full",
					children: [/* @__PURE__ */ jsx("div", {
						"data-slot": "ai-input-actions",
						className: "flex items-center gap-2",
						children: leadingActions
					}), /* @__PURE__ */ jsxs("div", {
						"data-slot": "ai-input-actions",
						className: "flex items-center gap-2",
						children: [trailingActions, hasText ? renderSubmitButton() : renderDefaultButton()]
					})]
				})
			]
		})
	});
}
AIInputDefault.displayName = "AIInput";
/**
* AIInput - Dual-API component for AI chat input.
*
* Supports two usage patterns:
*
* 1. **Monolithic API (batteries-included)**:
* ```tsx
* <AIInput
*   placeholder="Ask anything..."
*   onSubmit={handleSubmit}
*   leadingActions={<AIInput.ActionButton icon={Plus} />}
* />
* ```
*
* 2. **Composable API (full customization)**:
* ```tsx
* <AIInput.Root onSubmit={handleSubmit}>
*   <AIInput.TextArea placeholder="Ask anything..." />
*   <AIInput.ActionBar>
*     <AIInput.Actions position="leading">
*       <AIInput.AttachButton icon={Plus} tooltip="Add file" />
*     </AIInput.Actions>
*     <AIInput.Actions position="trailing">
*       <AIInput.SendButton />
*     </AIInput.Actions>
*   </AIInput.ActionBar>
*   <AIInput.FilePreview />
* </AIInput.Root>
* ```
*/
var AIInput = Object.assign(AIInputDefault, {
	Root: AIInputRoot,
	TextArea: AIInputTextArea,
	LeadingIcon: AIInputLeadingIcon,
	SendButton: AIInputSendButton,
	AttachButton: AIInputAttachButton,
	Actions: AIInputActions,
	ActionBar: AIInputActionBar,
	FilePreview: AIInputFilePreview,
	ActionButton,
	SubmitButton,
	CompactActionButton
});
//#endregion
export { AIInput, AIInputActionBar, AIInputActions, AIInputAttachButton, AIInputFilePreview, AIInputLeadingIcon, AIInputRoot, AIInputSendButton, AIInputTextArea, ActionButton, CompactActionButton, SubmitButton, inputVariants, useAIInputContext };

//# sourceMappingURL=index415.js.map