import { t as e } from "../../chunks/clsx.js";
import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
import { FormControl as n } from "./FormControl.js";
import { useValue as r } from "../hooks/useValue.js";
import { useId as i } from "react";
import { Icon as a } from "@clubmed/trident-icons";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region lib/ui/forms/TextField.tsx
var c = (c) => {
	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !1, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = r({
		initialValue: p,
		onChange: D,
		formatter: O
	}), M = t({
		isDisabled: y,
		validationStatus: h
	}), N = !y && A !== "" && A != null && !!T;
	return /* @__PURE__ */ o(n, {
		id: u,
		label: f,
		className: S,
		description: m,
		dataName: "TextField",
		dataTestId: C,
		disabled: y,
		required: b,
		hideRequiredStar: x,
		validationStatus: h,
		errorMessage: v,
		children: /* @__PURE__ */ s("div", {
			className: "relative",
			children: [/* @__PURE__ */ o("input", {
				...k,
				id: u,
				name: d,
				disabled: y,
				required: b,
				value: A,
				onChange: (e) => j(e.target.value, e.nativeEvent),
				style: {
					"--nbIconsStart": Number(!!g && E),
					"--nbIconsEnd": Number(!!g && !E) + Number(N || w) + Number(M === "error" || M === "success")
				},
				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
					"border-middleGrey focus:border-black active:border-black": M === "default",
					"bg-white text-black": M !== "disabled",
					"bg-pearl border-middleGrey": M === "disabled",
					"border-red": M === "error",
					"border-green": M === "success"
				}),
				"aria-label": d
			}), /* @__PURE__ */ s("div", {
				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
					"text-grey": M === "disabled",
					"text-red": M === "error",
					"text-green": M === "success"
				}),
				children: [g && E && /* @__PURE__ */ o(a, {
					name: g,
					width: "24px"
				}), /* @__PURE__ */ s("span", {
					className: "ms-auto flex gap-x-8",
					children: [
						M === "error" && /* @__PURE__ */ o(a, {
							name: "CrossDefault",
							width: "24px",
							type: _
						}),
						M === "success" && /* @__PURE__ */ o(a, {
							name: "CheckDefault",
							width: "24px",
							type: _
						}),
						(w || N) && (N ? /* @__PURE__ */ o("button", {
							className: "pointer-events-auto",
							onClick: (e) => j("", e.nativeEvent),
							"aria-label": T,
							type: "reset",
							children: /* @__PURE__ */ o(a, {
								name: "CrossDefault",
								className: "text-black",
								width: "24px"
							})
						}) : /* @__PURE__ */ o(a, {
							name: "ArrowDefaultDown",
							className: "text-black",
							width: "24px"
						})),
						!E && g && /* @__PURE__ */ o(a, {
							name: g,
							width: "24px"
						})
					]
				})]
			})]
		})
	});
};
//#endregion
export { c as TextField };

//# sourceMappingURL=TextField.js.map