import { t as e } from "../../utils-B7XIe3qq.js";
import * as t from "react";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region src/react/primitives/color-picker.tsx
function i(e, t, n) {
	return Math.max(t, Math.min(n, e));
}
function a(e) {
	let t = e.replace(/^#/, "");
	(t.length === 3 || t.length === 4) && (t = t.split("").map((e) => e + e).join(""));
	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
	return {
		r: isNaN(n) ? 0 : n,
		g: isNaN(r) ? 0 : r,
		b: isNaN(i) ? 0 : i,
		a: isNaN(a) ? 1 : a
	};
}
function o(e, t) {
	let n = i(Math.round(e.r), 0, 255).toString(16).padStart(2, "0"), r = i(Math.round(e.g), 0, 255).toString(16).padStart(2, "0"), a = i(Math.round(e.b), 0, 255).toString(16).padStart(2, "0");
	return t && e.a < 1 ? `#${n}${r}${a}${i(Math.round(e.a * 255), 0, 255).toString(16).padStart(2, "0")}` : `#${n}${r}${a}`;
}
function s(e) {
	let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = Math.min(t, n, r), o = (i + a) / 2, s = 0, c = 0;
	if (i !== a) {
		let e = i - a;
		c = o > .5 ? e / (2 - i - a) : e / (i + a), s = i === t ? ((n - r) / e + (n < r ? 6 : 0)) / 6 : i === n ? ((r - t) / e + 2) / 6 : ((t - n) / e + 4) / 6;
	}
	return {
		h: s * 360,
		s: c * 100,
		l: o * 100,
		a: e.a
	};
}
function c(e) {
	let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
	a !== 0 && (o = i === t ? ((n - r) / a + (n < r ? 6 : 0)) * 60 : i === n ? ((r - t) / a + 2) * 60 : ((t - n) / a + 4) * 60);
	let s = i === 0 ? 0 : a / i;
	return {
		h: o,
		s,
		v: i
	};
}
function l(e, t, n, r) {
	let i = Math.floor(e / 60) % 6, a = e / 60 - Math.floor(e / 60), o = n * (1 - t), s = n * (1 - a * t), c = n * (1 - (1 - a) * t), l, u, d;
	switch (i) {
		case 0:
			l = n, u = c, d = o;
			break;
		case 1:
			l = s, u = n, d = o;
			break;
		case 2:
			l = o, u = n, d = c;
			break;
		case 3:
			l = o, u = s, d = n;
			break;
		case 4:
			l = c, u = o, d = n;
			break;
		default:
			l = n, u = o, d = s;
			break;
	}
	return {
		r: Math.round(l * 255),
		g: Math.round(u * 255),
		b: Math.round(d * 255),
		a: r
	};
}
function u(e, t, n) {
	switch (t) {
		case "rgb": return e.a < 1 ? `rgba(${Math.round(e.r)}, ${Math.round(e.g)}, ${Math.round(e.b)}, ${Math.round(e.a * 100) / 100})` : `rgb(${Math.round(e.r)}, ${Math.round(e.g)}, ${Math.round(e.b)})`;
		case "hsl": {
			let t = s(e);
			return t.a < 1 ? `hsla(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.l)}%, ${Math.round(t.a * 100) / 100})` : `hsl(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.l)}%)`;
		}
		default: return o(e, n);
	}
}
function d({ value: s = "#000000", format: d = "hex", showAlpha: f = !1, presets: p, className: m, onChange: h }) {
	let [g, _] = t.useState(!1), v = t.useRef(null), y = t.useMemo(() => a(s), [s]), b = t.useMemo(() => c(y), [y]), [x, S] = t.useState(b.h), [C, w] = t.useState(b.s), [T, E] = t.useState(b.v), [D, O] = t.useState(y.a), [k, A] = t.useState(s);
	t.useEffect(() => {
		let e = a(s), t = c(e);
		S(t.h), w(t.s), E(t.v), O(e.a), A(s);
	}, [s]);
	let j = t.useMemo(() => l(x, C, T, D), [
		x,
		C,
		T,
		D
	]), M = t.useMemo(() => o(j, f), [j, f]);
	function N(e) {
		h?.(u(e, d, f));
	}
	t.useEffect(() => {
		if (!g) return;
		function e(e) {
			v.current && !v.current.contains(e.target) && _(!1);
		}
		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
	}, [g]);
	let P = t.useRef(null);
	function F(e) {
		if (!P.current) return;
		let t = P.current.getBoundingClientRect(), n = i((e - t.left) / t.width, 0, 1) * 360;
		S(n);
		let r = l(n, C, T, D);
		A(o(r, f)), N(r);
	}
	let I = t.useRef(null);
	function L(e) {
		if (!I.current) return;
		let t = I.current.getBoundingClientRect(), n = i((e - t.left) / t.width, 0, 1);
		O(n);
		let r = l(x, C, T, n);
		A(o(r, f)), N(r);
	}
	let R = t.useRef(null);
	function z(e, t) {
		if (!R.current) return;
		let n = R.current.getBoundingClientRect(), r = i((e - n.left) / n.width, 0, 1), a = i(1 - (t - n.top) / n.height, 0, 1);
		w(r), E(a);
		let s = l(x, r, a, D);
		A(o(s, f)), N(s);
	}
	function B(e) {
		return (t) => {
			t.preventDefault(), e(t.clientX, t.clientY);
			function n(t) {
				t.preventDefault(), e(t.clientX, t.clientY);
			}
			function r() {
				document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", r);
			}
			document.addEventListener("mousemove", n), document.addEventListener("mouseup", r);
		};
	}
	function V() {
		let e = k.trim(), t = e.startsWith("#") ? e : `#${e}`;
		if (/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(t)) {
			let e = a(t), n = c(e);
			S(n.h), w(n.s), E(n.v), O(e.a), N(e);
		}
	}
	function H(e, t) {
		let n = {
			...j,
			[e]: i(t, 0, 255)
		}, r = c(n);
		S(r.h), w(r.s), E(r.v), A(o(n, f)), N(n);
	}
	function U(e) {
		let t = a(e), n = c(t);
		S(n.h), w(n.s), E(n.v), O(t.a), A(e), N(t);
	}
	let W = o(l(x, 1, 1, 1), !1), G = e("border-border-glass bg-glass h-8 w-full rounded-lg border px-2 text-[12px] text-foreground", "outline-none transition-all duration-200 focus:border-primary focus:shadow-glow backdrop-blur-[20px]");
	return /* @__PURE__ */ r("div", {
		ref: v,
		"data-slot": "color-picker",
		className: e("relative inline-block", m),
		children: [/* @__PURE__ */ n("button", {
			type: "button",
			"aria-label": "Open color picker",
			"aria-expanded": g,
			onClick: () => _((e) => !e),
			className: e("h-10 w-10 rounded-xl border border-border-glass shadow-sm transition-all duration-200", "hover:shadow-glow focus:border-primary focus:shadow-glow focus:outline-none"),
			style: { backgroundColor: M }
		}), g && /* @__PURE__ */ r("div", {
			className: e("absolute top-full left-0 z-50 mt-2 w-64 rounded-xl border border-border-glass bg-glass p-3 shadow-lg backdrop-blur-[20px]", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"),
			onClick: (e) => e.stopPropagation(),
			children: [
				/* @__PURE__ */ r("div", {
					ref: R,
					className: "relative mb-3 h-40 w-full cursor-crosshair overflow-hidden rounded-lg",
					style: { backgroundColor: W },
					onMouseDown: B((e, t) => z(e, t)),
					children: [
						/* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-r from-white to-transparent" }),
						/* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-black" }),
						/* @__PURE__ */ n("div", {
							className: "pointer-events-none absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
							style: {
								left: `${C * 100}%`,
								top: `${(1 - T) * 100}%`
							}
						})
					]
				}),
				/* @__PURE__ */ n("div", {
					ref: P,
					className: "relative mb-2 h-3 w-full cursor-pointer rounded-full",
					style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
					onMouseDown: B((e) => F(e)),
					children: /* @__PURE__ */ n("div", {
						className: "pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
						style: { left: `${x / 360 * 100}%` }
					})
				}),
				f && /* @__PURE__ */ n("div", {
					ref: I,
					className: "relative mb-2 h-3 w-full cursor-pointer rounded-full",
					style: { backgroundImage: `linear-gradient(to right, transparent, ${o({
						...j,
						a: 1
					}, !1)}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 8px 8px` },
					onMouseDown: B((e) => L(e)),
					children: /* @__PURE__ */ n("div", {
						className: "pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
						style: { left: `${D * 100}%` }
					})
				}),
				/* @__PURE__ */ r("div", {
					className: "mt-3 grid grid-cols-4 gap-2",
					children: [
						/* @__PURE__ */ r("div", {
							className: "col-span-1",
							children: [/* @__PURE__ */ n("label", {
								className: "mb-1 block text-[10px] font-medium text-foreground-muted",
								children: "Hex"
							}), /* @__PURE__ */ n("input", {
								type: "text",
								className: G,
								value: k,
								maxLength: 9,
								onChange: (e) => A(e.target.value),
								onBlur: V,
								onKeyDown: (e) => e.key === "Enter" && V()
							})]
						}),
						/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
							className: "mb-1 block text-[10px] font-medium text-foreground-muted",
							children: "R"
						}), /* @__PURE__ */ n("input", {
							type: "number",
							className: G,
							min: 0,
							max: 255,
							value: Math.round(j.r),
							onChange: (e) => H("r", parseInt(e.target.value, 10) || 0)
						})] }),
						/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
							className: "mb-1 block text-[10px] font-medium text-foreground-muted",
							children: "G"
						}), /* @__PURE__ */ n("input", {
							type: "number",
							className: G,
							min: 0,
							max: 255,
							value: Math.round(j.g),
							onChange: (e) => H("g", parseInt(e.target.value, 10) || 0)
						})] }),
						/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
							className: "mb-1 block text-[10px] font-medium text-foreground-muted",
							children: "B"
						}), /* @__PURE__ */ n("input", {
							type: "number",
							className: G,
							min: 0,
							max: 255,
							value: Math.round(j.b),
							onChange: (e) => H("b", parseInt(e.target.value, 10) || 0)
						})] })
					]
				}),
				p && p.length > 0 && /* @__PURE__ */ n("div", {
					className: "mt-3 flex flex-wrap gap-1.5",
					children: p.map((e) => /* @__PURE__ */ n("button", {
						type: "button",
						"aria-label": `Select color ${e}`,
						className: "h-6 w-6 rounded-md border border-border-glass transition-all duration-200 hover:scale-110 hover:shadow-glow",
						style: { backgroundColor: e },
						onClick: () => U(e)
					}, e))
				})
			]
		})]
	});
}
//#endregion
export { d as ColorPicker };

//# sourceMappingURL=color-picker.js.map