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/Select.tsx
var c = (c) => {
	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", iconType: g, errorMessage: _, disabled: v = !1, required: y = !1, hideRequiredStar: b, className: x, dataTestId: S = u, onChange: C, children: w, ...T } = c, { value: E, setValue: D } = r({
		initialValue: p,
		onChange: C
	}), O = t({
		isDisabled: v,
		validationStatus: h
	});
	return /* @__PURE__ */ o(n, {
		id: u,
		className: x,
		label: f,
		description: m,
		dataName: "TextField",
		dataTestId: S,
		disabled: v,
		required: y,
		hideRequiredStar: b,
		validationStatus: h,
		errorMessage: _,
		children: /* @__PURE__ */ s("div", {
			className: e("relative rounded-pill z-0", {
				"bg-white": O !== "disabled",
				"bg-pearl border-middleGrey": O === "disabled"
			}),
			children: [/* @__PURE__ */ o("select", {
				...T,
				id: u,
				name: d,
				disabled: v,
				required: y,
				value: E,
				onChange: (e) => {
					D(e.target.value, e.nativeEvent);
				},
				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none appearance-none bg-transparent", {
					"border-middleGrey focus:border-black active:border-black pe-[52px]": O === "default",
					"pe-[84px]": O === "error" || O === "success",
					"text-black": O !== "disabled",
					"bg-pearl border-middleGrey": O === "disabled",
					"border-red": O === "error",
					"border-green": O === "success"
				}),
				"aria-label": d,
				children: w
			}), /* @__PURE__ */ o("div", {
				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1", {
					"text-grey": O === "disabled",
					"text-red": O === "error",
					"text-green": O === "success"
				}),
				children: /* @__PURE__ */ s("span", {
					className: "ms-auto flex gap-x-8",
					children: [
						O === "error" && /* @__PURE__ */ o(a, {
							name: "CrossDefault",
							width: "24px",
							type: g
						}),
						O === "success" && /* @__PURE__ */ o(a, {
							name: "CheckDefault",
							width: "24px",
							type: g
						}),
						/* @__PURE__ */ o("button", {
							className: "pointer-events-auto inline-flex",
							children: /* @__PURE__ */ o(a, {
								name: "ArrowDefaultDown",
								type: "svg",
								width: "24px",
								color: "black"
							})
						})
					]
				})
			})]
		})
	});
};
//#endregion
export { c as Select };

//# sourceMappingURL=Select.js.map