import { cn } from "./index3.js";
import { GradientBorder } from "./index4.js";
import { Spinner } from "./index5.js";
import { FieldTooltip } from "./index19.js";
import { hasFieldProps, splitFieldProps } from "./index20.js";
import { Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight } from "./index22.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Input } from "@base-ui/react/input";
//#region src/components/atoms/forms/Input/Input.tsx
var sizeClasses = {
	xs: "h-[26px] px-3 py-0.5 text-sm",
	sm: "h-8 px-3 py-1 text-sm",
	md: "h-9 px-3 py-1 text-base md:text-sm",
	lg: "h-10 px-3 py-1 text-base"
};
var shapeClasses = {
	rounded: "rounded-xl",
	round: "rounded-full"
};
var stateClasses = {
	default: "",
	success: "border-success ring-success/20 ring-[3px]",
	destructive: "border-destructive ring-destructive/20 ring-[3px]"
};
var iconSizeClasses = {
	xs: "[&>svg]:size-4",
	sm: "[&>svg]:size-4",
	md: "[&>svg]:size-5",
	lg: "[&>svg]:size-5"
};
var InputControl = React.forwardRef(({ className, type, state = "default", shape = "rounded", startIcon, endIcon, startAddon, endAddon, hasOutline, size = "md", disabled, appearance = "default", animated, loading, onFocus, onBlur, ...props }, ref) => {
	const isAi = appearance === "ai";
	const [isFocused, setIsFocused] = React.useState(false);
	const isAnimated = isAi ? animated ?? loading : false;
	const handleFocus = isAi ? (e) => {
		setIsFocused(true);
		onFocus?.(e);
	} : onFocus;
	const handleBlur = isAi ? (e) => {
		setIsFocused(false);
		onBlur?.(e);
	} : onBlur;
	if (isAi) return /* @__PURE__ */ jsx(GradientBorder, {
		animated: isAnimated,
		focused: isFocused,
		disabled,
		className: cn("motion-reduce:animate-none", className),
		children: /* @__PURE__ */ jsxs("div", {
			"data-slot": "input",
			className: "relative flex items-center w-full",
			children: [/* @__PURE__ */ jsx("input", {
				ref,
				type,
				disabled,
				onFocus: handleFocus,
				onBlur: handleBlur,
				className: cn("w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", sizeClasses[size], loading && "pe-10"),
				...props
			}), loading && /* @__PURE__ */ jsx("span", {
				className: "absolute end-3 top-1/2 -translate-y-1/2 text-quaternary-foreground",
				"aria-hidden": "true",
				children: /* @__PURE__ */ jsx(Spinner, { className: "motion-reduce:animate-none" })
			})]
		})
	});
	const hasAddons = startAddon || endAddon;
	const hasStartIcon = !!startIcon;
	const hasEndIcon = !!endIcon;
	const hasIconsOrAddons = hasStartIcon || hasEndIcon || hasAddons;
	const isDestructive = state === "destructive";
	const inputStyles = cn("bg-extra-shadow border-input focus-visible:border-ring focus-visible:ring-ring/50 border shadow-xs transition-[color,box-shadow] duration-200 ease-smooth motion-reduce:transition-none file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted read-only:bg-muted read-only:border-border read-only:cursor-default", sizeClasses[size], shapeClasses[shape], stateClasses[state], hasOutline && "border-border ring-1 ring-border focus-visible:ring-2 focus-visible:ring-ring", hasStartIcon && "ps-11", hasEndIcon && "pe-11", hasAddons && startAddon && "rounded-s-none", hasAddons && endAddon && "rounded-e-none");
	if (!hasIconsOrAddons) return /* @__PURE__ */ jsx(Input, {
		ref,
		type,
		"data-slot": "input",
		"data-state": state,
		"aria-invalid": isDestructive || void 0,
		disabled,
		onFocus,
		onBlur,
		className: cn(inputStyles, className),
		...props
	});
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "input",
		"data-state": state,
		className: cn("relative flex", className),
		children: [
			startAddon && /* @__PURE__ */ jsx("span", {
				className: "inline-flex items-center rounded-s-xl border border-e-0 border-border bg-muted px-3 text-base text-muted-foreground",
				children: startAddon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "relative flex-1",
				children: [
					hasStartIcon && /* @__PURE__ */ jsx("span", {
						className: cn("absolute start-3.5 top-1/2 -translate-y-1/2 text-quaternary-foreground pointer-events-none", iconSizeClasses[size]),
						children: startIcon
					}),
					/* @__PURE__ */ jsx(Input, {
						ref,
						type,
						"data-slot": "input-element",
						"data-state": state,
						"aria-invalid": isDestructive || void 0,
						disabled,
						onFocus,
						onBlur,
						className: inputStyles,
						...props
					}),
					hasEndIcon && /* @__PURE__ */ jsx("span", {
						className: cn("absolute end-3.5 top-1/2 -translate-y-1/2 text-quaternary-foreground pointer-events-none", iconSizeClasses[size]),
						children: endIcon
					})
				]
			}),
			endAddon && /* @__PURE__ */ jsx("span", {
				className: "inline-flex items-center rounded-e-xl border border-s-0 border-border bg-muted px-3 text-base text-muted-foreground",
				children: endAddon
			})
		]
	});
});
InputControl.displayName = "InputControl";
var Input$1 = React.forwardRef((props, ref) => {
	const [fieldPropsObj, controlProps] = splitFieldProps(props);
	if (!hasFieldProps(fieldPropsObj)) return /* @__PURE__ */ jsx(InputControl, {
		ref,
		...controlProps,
		required: fieldPropsObj.required
	});
	const { label, required, labelIcon, tooltip, topRight, description, bottomRight, error, fieldClassName } = fieldPropsObj;
	const cp = controlProps;
	const resolvedState = error ? "destructive" : cp.state;
	const hasTopRow = label || topRight;
	const hasBottomRow = description || bottomRight || error;
	return /* @__PURE__ */ jsxs(Field, {
		state: resolvedState,
		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: (ctrlProps) => /* @__PURE__ */ jsx(InputControl, {
				ref,
				...cp,
				...ctrlProps,
				required,
				state: resolvedState
			}) }),
			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
				})
			] })
		]
	});
});
Input$1.displayName = "Input";
//#endregion
export { Input$1 as Input, sizeClasses, stateClasses };

//# sourceMappingURL=index29.js.map