"use client";
import { cn } from "./index3.js";
import { FieldTooltip } from "./index19.js";
import { hasFieldProps, splitFieldProps } from "./index20.js";
import { Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight, useFieldControlProps } from "./index22.js";
import { CloudUpload, Trash2 } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/atoms/forms/FileInput/FileInput.tsx
var fileInputSizeClasses = {
	xs: "h-[26px]",
	sm: "h-8",
	md: "h-9",
	lg: "h-10"
};
var buttonSizeClasses = {
	xs: "rounded-[10px] px-2 text-xs gap-1.5",
	sm: "rounded-[10px] px-2 text-xs gap-1.5",
	md: "rounded-lg px-2 text-xs gap-1.5",
	lg: "rounded-lg px-2 text-xs gap-1.5"
};
var buttonBaseClasses = "relative flex items-center justify-center h-full font-medium disabled:cursor-not-allowed before:absolute before:-inset-y-1.5 before:inset-x-0 before:min-h-11 transition-[background-color,transform,box-shadow] duration-150 motion-reduce:transition-none not-disabled:hover:-translate-y-px not-disabled:hover:shadow-sm not-disabled:active:scale-[0.97] motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-none motion-reduce:active:scale-100";
var FileInputControl = React.forwardRef(({ className, size = "md", success = false, disabled: disabledProp, value, onChange, defaultValue, accept, placeholder = "Choose a file", browseLabel = "Browse", browseIcon, deleteLabel = "Delete", deleteIcon, ...props }, ref) => {
	const fieldProps = useFieldControlProps();
	const disabled = disabledProp ?? fieldProps.disabled;
	const hasError = fieldProps["aria-invalid"];
	const ariaDescribedBy = fieldProps["aria-describedby"];
	const fieldId = fieldProps.id;
	const [internalFile, setInternalFile] = React.useState(defaultValue ?? null);
	const isControlled = value !== void 0;
	const currentFile = isControlled ? value : internalFile;
	const hasFile = currentFile !== null;
	const inputRef = React.useRef(null);
	const handleBrowseClick = () => {
		if (!disabled) inputRef.current?.click();
	};
	const handleFileChange = (e) => {
		const file = e.target.files?.[0] ?? null;
		if (!isControlled) setInternalFile(file);
		onChange?.(file);
	};
	const handleDelete = () => {
		if (!isControlled) setInternalFile(null);
		onChange?.(null);
		if (inputRef.current) inputRef.current.value = "";
	};
	const resolvedBrowseIcon = browseIcon ?? /* @__PURE__ */ jsx(CloudUpload, { className: "size-4 transition-transform duration-150 group-hover/browse:-translate-y-px motion-reduce:group-hover/browse:translate-y-0" });
	const resolvedDeleteIcon = deleteIcon ?? /* @__PURE__ */ jsx(Trash2, { className: "size-4 transition-transform duration-150 group-hover/delete:translate-y-px motion-reduce:group-hover/delete:translate-y-0" });
	return /* @__PURE__ */ jsxs("div", {
		ref,
		id: fieldId,
		"data-slot": "file-input",
		className: cn("flex flex-col w-full", disabled && "opacity-50", className),
		...props,
		children: [/* @__PURE__ */ jsx("input", {
			ref: inputRef,
			type: "file",
			accept,
			disabled,
			onChange: handleFileChange,
			className: "sr-only",
			tabIndex: -1,
			"aria-label": placeholder
		}), /* @__PURE__ */ jsxs("div", {
			"data-slot": "file-input-control",
			"aria-invalid": hasError || void 0,
			"aria-describedby": ariaDescribedBy,
			className: cn("flex items-center gap-0.5 rounded-xl border bg-background/50 transition-[colors,box-shadow] duration-150 motion-reduce:transition-none", "pl-0.5 pr-3 py-0.5", fileInputSizeClasses[size], hasError ? "border-destructive" : success ? "border-success" : "border-input", "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", !disabled && "hover:border-ring/30 hover:shadow-[0_0_0_3px_var(--ring)/0.08]", disabled && "cursor-not-allowed"),
			children: [hasFile ? /* @__PURE__ */ jsxs("button", {
				type: "button",
				onClick: handleDelete,
				disabled,
				"aria-label": `${deleteLabel} ${currentFile?.name}`,
				className: cn("group/delete", buttonBaseClasses, "bg-destructive/10 text-destructive hover:bg-destructive/15", buttonSizeClasses[size]),
				children: [resolvedDeleteIcon, /* @__PURE__ */ jsx("span", { children: deleteLabel })]
			}) : /* @__PURE__ */ jsxs("button", {
				type: "button",
				onClick: handleBrowseClick,
				disabled,
				className: cn("group/browse", buttonBaseClasses, "bg-primary/10 text-primary hover:bg-primary/15", buttonSizeClasses[size]),
				children: [resolvedBrowseIcon, /* @__PURE__ */ jsx("span", { children: browseLabel })]
			}), /* @__PURE__ */ jsx("span", {
				className: cn("flex-1 truncate text-sm", hasFile ? "text-foreground" : "text-muted-foreground"),
				title: hasFile ? currentFile.name : void 0,
				children: hasFile ? currentFile.name : placeholder
			})]
		})]
	});
});
FileInputControl.displayName = "FileInputControl";
var FileInput = React.forwardRef((props, ref) => {
	const [fieldPropsObj, controlProps] = splitFieldProps(props);
	if (!hasFieldProps(fieldPropsObj)) return /* @__PURE__ */ jsx(FileInputControl, {
		ref,
		...controlProps
	});
	const { label, required, labelIcon, tooltip, topRight, description, bottomRight, error, fieldClassName } = fieldPropsObj;
	const cp = controlProps;
	const hasTopRow = label || topRight;
	const hasBottomRow = description || bottomRight || error;
	return /* @__PURE__ */ jsxs(Field, {
		state: error ? "destructive" : void 0,
		disabled: cp.disabled,
		className: fieldClassName,
		children: [
			hasTopRow && /* @__PURE__ */ jsxs(FieldTop, { children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
				required,
				labelIcon,
				children: [label, tooltip && /* @__PURE__ */ jsx(FieldTooltip, { content: tooltip })]
			}), topRight && /* @__PURE__ */ jsx(FieldTopRight, { children: topRight })] }),
			/* @__PURE__ */ jsx(FieldControl, { children: () => /* @__PURE__ */ jsx(FileInputControl, {
				ref,
				...cp
			}) }),
			hasBottomRow && /* @__PURE__ */ jsxs(FieldBottom, { children: [
				error && /* @__PURE__ */ jsx(FieldError, { children: error }),
				!error && description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
				bottomRight && /* @__PURE__ */ jsx(FieldBottomRight, {
					className: "ms-auto",
					children: bottomRight
				})
			] })
		]
	});
});
FileInput.displayName = "FileInput";
//#endregion
export { FileInput, fileInputSizeClasses };

//# sourceMappingURL=index28.js.map