"use client";
import { t as e } from "../../chunks/clsx.js";
import { FormControlError as t } from "./FormControlError.js";
import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
import { useValue as r } from "../hooks/useValue.js";
import { useId as i, useRef as a, useState as o } from "react";
import { Icon as s } from "@clubmed/trident-icons";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region lib/ui/forms/FloatingLabelTextField.tsx
var u = (u) => {
	let d = i(), { id: f = d, name: p = f, label: m, labelClassName: h, value: g, validationStatus: _ = "default", errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, description: S, icon: C, iconType: w, iconFirst: T = !0, hasDropdown: E = !1, clear: D = "", className: O, dataTestId: k, dataName: A, "data-testid": j, onChange: M, formatter: N, ...P } = u, { value: F, setValue: I } = r({
		initialValue: g,
		onChange: M,
		formatter: N
	}), L = n({
		isDisabled: y,
		validationStatus: _
	}), [R, z] = o(!1), B = a(null), V = R || F !== "" && F != null, H = L === "error" && v, U = !y && F !== "" && F != null && !!D, W = Number(!!C && T), G = Number(!!C && !T) + Number(U || E) + Number(L === "error" || L === "success");
	return /* @__PURE__ */ l("div", {
		className: e("flex flex-col gap-4", O),
		"data-name": A ?? "FloatingLabelTextField",
		"data-testid": j ?? k,
		children: [
			/* @__PURE__ */ l("div", {
				className: "relative",
				children: [
					/* @__PURE__ */ c("input", {
						...P,
						ref: B,
						id: f,
						name: p,
						disabled: y,
						required: b,
						value: F,
						onChange: (e) => I(e.target.value, e.nativeEvent),
						onFocus: () => z(!0),
						onBlur: () => z(!1),
						style: {
							"--nbIconsStart": W,
							"--nbIconsEnd": G
						},
						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
							"pt-[26px] pb-[8px]": V && m,
							"py-12": !(V && m),
							"border-middleGrey focus:border-black active:border-black": L === "default",
							"bg-white text-black": L !== "disabled",
							"bg-pearl border-middleGrey": L === "disabled",
							"border-red": L === "error",
							"border-green": L === "success"
						}),
						"aria-label": m ? void 0 : p,
						"aria-invalid": L === "error",
						"aria-describedby": H ? `${f}-error` : void 0
					}),
					m && /* @__PURE__ */ l("label", {
						htmlFor: f,
						style: { left: `calc(20px + ${W} * 32px)` },
						className: e("pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
							"top-[10px] text-b6 font-semibold": V,
							"top-1/2 -translate-y-1/2 text-b3 font-normal": !V,
							"text-red": L === "error" && V,
							"text-middleGrey": L !== "error" && V,
							"text-black": !V && L !== "disabled",
							"text-grey": L === "disabled"
						}, h),
						children: [m, b && !x && /* @__PURE__ */ c("span", {
							className: "text-red ms-4",
							"aria-hidden": "true",
							children: "*"
						})]
					}),
					/* @__PURE__ */ l("div", {
						className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
							"text-grey": L === "disabled",
							"text-red": L === "error",
							"text-green": L === "success"
						}),
						children: [C && T && /* @__PURE__ */ c(s, {
							name: C,
							width: "24px"
						}), /* @__PURE__ */ l("span", {
							className: "ms-auto flex gap-x-8",
							children: [
								L === "error" && /* @__PURE__ */ c(s, {
									name: "CrossDefault",
									width: "24px",
									type: w
								}),
								L === "success" && /* @__PURE__ */ c(s, {
									name: "CheckDefault",
									width: "24px",
									type: w
								}),
								(E || U) && (U ? /* @__PURE__ */ c("button", {
									className: "pointer-events-auto",
									onClick: (e) => I("", e.nativeEvent),
									"aria-label": D,
									type: "reset",
									children: /* @__PURE__ */ c(s, {
										name: "CrossDefault",
										className: "text-black",
										width: "24px"
									})
								}) : /* @__PURE__ */ c(s, {
									name: "ArrowDefaultDown",
									className: "text-black",
									width: "24px"
								})),
								!T && C && /* @__PURE__ */ c(s, {
									name: C,
									width: "24px"
								})
							]
						})]
					})
				]
			}),
			S && /* @__PURE__ */ c("span", {
				className: "text-b4 text-darkGrey font-normal px-20",
				children: S
			}),
			H && /* @__PURE__ */ c(t, {
				id: `${f}-error`,
				children: v
			})
		]
	});
};
//#endregion
export { u as FloatingLabelTextField };

//# sourceMappingURL=FloatingLabelTextField.js.map