@iamfiro/design 0.1.0 → 0.3.0

package/lib/components/ColorPicker/ColorPicker2.js

@@ -0,0 +1,610 @@
+"use client";
+const e = x;
+(function(e, t) {
+	let n = x, r = e();
+	for (;;) try {
+		if (parseInt(n(504)) / 1 * (-parseInt(n(506)) / 2) + parseInt(n(483)) / 3 * (-parseInt(n(516)) / 4) + -parseInt(n(480)) / 5 + -parseInt(n(513)) / 6 + -parseInt(n(491)) / 7 * (-parseInt(n(533)) / 8) + parseInt(n(496)) / 9 * (-parseInt(n(550)) / 10) + parseInt(n(508)) / 11 * (parseInt(n(541)) / 12) == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(N, 122873);
+import { Tooltip as t } from "../../primitives/Tooltip2.js";
+import { Text as n } from "../../primitives/Typography2.js";
+import { CopyButton as r } from "../../primitives/CopyButton2.js";
+import { Grid as i, Inline as a, Stack as o } from "../../primitives/Layout2.js";
+import { useControllableState as s } from "../../hooks/useControllableState.js";
+import { Button as c, Input as l, SegmentedControl as u, cx as d } from "../../primitives/index.js";
+import { Popover as ee } from "../Popover/Popover2.js";
+import { clamp as f, formatColor as p, formatHex as m, hslToRgb as h, hsvToRgb as g, isLight as _, parseColor as v, parseHex as te, rgbToHsl as y, rgbToHsv as b } from "./color.js";
+function x(e, t) {
+	e -= 453;
+	let n = N(), r = n[e];
+	x.vJhbET === void 0 && (x.PSJQHS = function(e) {
+		let t = "", n = "";
+		for (let n = 0, r, i, a = 0; i = e.charAt(a++); ~i && (r = n % 4 ? r * 64 + i : i, n++ % 4) && (t += String.fromCharCode(255 & r >> (-2 * n & 6)))) i = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(i);
+		for (let e = 0, r = t.length; e < r; e++) n += "%" + ("00" + t.charCodeAt(e).toString(16)).slice(-2);
+		return decodeURIComponent(n);
+	}, x.hujSHp = {}, x.vJhbET = !0);
+	let i = n[0];
+	x.MszUeX !== i && (x.hujSHp = {}, x.MszUeX = i);
+	let a = x.hujSHp[e];
+	return a === void 0 ? (r = x.PSJQHS(r), x.hujSHp[e] = r) : r = a, r;
+}
+/* empty css            */
+import { CHART_COLOR_PRESETS as S } from "./presets.js";
+import { useLayoutEffect as C, useRef as w, useState as T } from "react";
+import { Check as E, ChevronDown as ne, Pipette as D } from "lucide-react";
+import { Fragment as re, jsx as O, jsxs as k } from "react/jsx-runtime";
+var ie = "#3b82f6", A = (e) => {
+	let t = v(e);
+	return t ? b(t) : null;
+}, j = (e, t) => ({
+	...e,
+	h: e.s === 0 || e.v === 0 ? t.h : e.h,
+	s: e.v === 0 ? t.s : e.s
+}), M = (e) => Math.round(e * 100);
+function N() {
+	let e = /* @__PURE__ */ "y29SB3i.Dg9vChbLCKnHC2u.C2v0ug9PBNrLCKnHChr1CMu.AgfUzgXLCNm.z2v0uhjVCgvYDhLwywX1zq.y2XPzw50wa.zhjHz2DPBMC.zgLHBg9N.7lge64+ekcuP.zhmTy29SB3iTCgLJA2vYx19ZD2f0y2G.AhnSka.nZGXmdGWs1HVqMrh.7ioj7iobia.C3bSAxq.otnUzeHWq0S.zhmTy29SB3iTCgLJA2vYx190AhvTyIbKCY1JB2XVCI1WAwnRzxjFx3rODw1Ils10CMfJAW.7zMu66M07jEq7isCioYdIsdQS6dRPBtQUla.uKDc.yNv0Dg9U.zw5K.C3bHBG.7lsi66gDkddIGjmYntuP.mJy4mtiXExHRrKjP.CMDI.zMLSDgvY.BwfW.AhnS.mJDXENHfy3e.CMvSyxrLzfrHCMDLDa.6RIW67o4ioYdIq.AxndB21WB3nPBMC.67Ai7yIS66Qf64+ekcuP.zhmTy29SB3iTzMLLBgrFx2nOzxzYB24.rw5K.BgvUz3rO.mJGZzuDKy1jO.zhmTy29SB3iTCgLJA2vYx19MAwvSza.nZK0yMTjuwvr.jsWG67cD6RIWia.mtG3DLHQvKPy.Dw5KzwzPBMvK.zg9JDw1LBNrfBgvTzw50.y3vYCMvUDa.DMfSDwu.mte3mZu4mM9fseTLDq.zhmTy29SB3iTCgLJA2vYx19YywLS.zhmTy29SB3iTCgLJA2vY.mtaWzKjHCg9z.C3rYAw5N.CM91BMq.zhmTy29SB3iTzMLLBgrFx2nOAxa.zgL2.rxLLrhjVChbLCG.7iojioYeOo2dNq.Dg9mB3DLCKnHC2u.y29UDgfPBNm.BgvMDa.7yYm656rkddIGjmYntuP.7lwC6RE8ioYcRoYAQq.66Qf64+ekcuP.Dg9W.B3bLBG.C2vSzwn0.Cg9PBNrLCKLK.mtzkuhrywge.7lge64+e7jMaioUWNEQ4Sa.Agv4.BgfIzwWTEhm.ioYeOo2dNq.rxnJyxbL.mUYWQoYBKcdSIQZRNBZSNBtRJzq.67Ai7yIS66Qf64+eia.ndaWnZG4sMHdywzr.DMfYka.zhmTy29SB3iTzMLLBgq.7lge64+eia.yMv0D2vLBG.sevy.A2v5.sevyioQWKG.AM9PBG.mtG4ntKWy3HoD1jM.y2XPzw50wq.C3rHCNrZv2L0Aa.zhmTy29SB3iTCgLJA2vYx190CMfJAYbKCY1JB2XVCI1WAwnRzxjFx3rYywnRls1ODwu.DgfYz2v0.C2HPzNrlzxK.DgvZDa.ChjLDMvUDerLzMf1Bhq.y3vYCMvUDfrHCMDLDa.y2fUy2vS.C2XPy2u.CMvWBgfJzq.Ag9YAxPVBNrHBa.7ioj7iobkddIGjmZnJaP.BwLUBwf4kdaSidfMCIKGnJrWEa.zhmTy29SB3iTCgLJA2vYx190CMfJAYbKCY1JB2XVCI1WAwnRzxjFx3rYywnRls1HBhbOyq.C2XPzgvY.C2vJB25Kyxj5.DhjPBq.Aw5WDxq.z2HVC3q.zhmTy29SB3iTCgLJA2vYx19WCMv2Awv3.AgvPz2H0.C3rHCNq.z3jVDxa.DgvYDgLHCNK".split(".");
+	return N = function() {
+		return e;
+	}, N();
+}
+function P({ ref: e, thumbRef: t, disabled: n, onMove: r, onStart: i, onEnd: a, onCancel: o }) {
+	let s = w(!1), [c, l] = T(!1), u = (e) => {
+		let t = x;
+		s[t(511)] = e, l(e);
+	}, d = (t) => {
+		let n = x, i = e.current.getBoundingClientRect();
+		r(f((t[n(474)] - i[n(525)]) / i.width, 0, 1), f((t[n(551)] - i[n(529)]) / i[n(465)], 0, 1));
+	};
+	return {
+		dragging: c,
+		handlers: {
+			onPointerDown: (e) => {
+				let r = x;
+				n || e[r(487)] !== 0 || (e[r(557)](), e[r(558)][r(471)](e[r(532)]), u(!0), i(), d(e), t.current?.focus({ preventScroll: !0 }));
+			},
+			onPointerMove: (e) => {
+				s[x(511)] && d(e);
+			},
+			onPointerUp: () => {
+				s[x(511)] && (u(!1), a());
+			},
+			onPointerCancel: () => {
+				s[x(511)] && (u(!1), a());
+			}
+		},
+		cancel: () => s[x(511)] ? (u(!1), o(), !0) : !1
+	};
+}
+function F({ display: e, parse: t, onPreview: r, onSettle: i, onRevert: a, onBegin: s, label: c, caption: u, leading: d, disabled: ee, maxLength: f }) {
+	let p = x, [m, h] = T(null), g = m !== null && t(m) === null, _ = () => {
+		h(null), i();
+	}, v = O(l, {
+		size: "sm",
+		value: m ?? e,
+		"aria-label": c,
+		invalid: g,
+		disabled: ee,
+		leading: d,
+		maxLength: f,
+		spellCheck: !1,
+		autoComplete: "off",
+		wrapperClassName: p(505),
+		onFocus: (e) => {
+			let t = p;
+			s(), e[t(558)][t(531)]();
+		},
+		onChange: (e) => {
+			let n = p, i = e[n(554)][n(512)];
+			h(i);
+			let a = t(i);
+			a && r(a);
+		},
+		onBlur: _,
+		onKeyDown: (e) => {
+			let t = p;
+			e.nativeEvent[t(499)] || (e.key === "Enter" ? (e[t(557)](), _()) : e[t(547)] === t(538) && m !== null && (e[t(557)](), h(null), a()));
+		}
+	});
+	return u ? k(o, {
+		gap: 1,
+		align: "center",
+		children: [v, O(n, {
+			variant: "caption",
+			tone: p(468),
+			children: u
+		})]
+	}) : v;
+}
+function I({ css: e, rgb: n, label: r, selected: i, disabled: a, onPick: o }) {
+	let s = x;
+	return O(t, {
+		content: r,
+		children: O(s(487), {
+			type: s(487),
+			className: s(478),
+			style: { "--_c": e },
+			"aria-label": r,
+			"aria-pressed": i,
+			disabled: a,
+			"data-light": n && _(n) || void 0,
+			onClick: o,
+			children: O(E, { className: "ds-color-picker__check" })
+		})
+	});
+}
+var ae = () => typeof window !== e(509) && e(521) in window ? window[e(521)] : null, oe = [
+	{
+		value: "hex",
+		label: e(546)
+	},
+	{
+		value: "rgb",
+		label: e(486)
+	},
+	{
+		value: e(495),
+		label: "HSL"
+	}
+];
+function se({ value: l, defaultValue: ee = ie, onValueChange: _, onValueCommit: S, alpha: E = !1, format: ne, defaultFormat: re = "hex", onFormatChange: N, presets: se, presetsLabel: L = e(498), recentColors: le, defaultRecentColors: ue = [], onRecentColorsChange: de, showRecent: fe = !0, maxRecent: pe = 8, eyeDropper: me = !0, copyable: he = !0, disabled: R, className: ge, style: _e, "aria-label": ve = e(522) }) {
+	let z = e, [B, ye] = s(l, ee, _), [V, be] = s(ne, re, N), [xe, Se] = s(le, ue, de), [H, Ce] = T(() => A(B) ?? A(ie)), [we, Te] = T(B);
+	if (B !== we) {
+		Te(B);
+		let e = A(B);
+		e && Ce(j(e, H));
+	}
+	let U = w(H);
+	C(() => {
+		let e = x;
+		U[e(511)] = H;
+	});
+	let W = (e) => m(g(e), E), G = (e) => {
+		let t = E ? e : {
+			...e,
+			a: 1
+		};
+		U.current = t, Ce(t);
+		let n = W(t);
+		Te(n), n !== B && ye(n);
+	}, K = () => S?.(W(U[z(511)])), q = w(H), J = () => {
+		let e = z;
+		q[e(511)] = U[e(511)];
+	}, Ee = () => {
+		let e = z;
+		W(q[e(511)]) !== W(U[e(511)]) && K(), q[e(511)] = U[e(511)];
+	}, Y = () => G(q[z(511)]), X = g(H), De = m({
+		...X,
+		a: 1
+	}, !1), Oe = z(479) + H.h + " 100% 50%)", ke = w(null), Ae = w(null), je = w(null), Me = w(null), Ne = w(null), Pe = w(null), Fe = P({
+		ref: ke,
+		thumbRef: Ae,
+		disabled: R,
+		onStart: J,
+		onMove: (e, t) => G({
+			...U[z(511)],
+			s: e,
+			v: 1 - t
+		}),
+		onEnd: K,
+		onCancel: Y
+	}), Ie = P({
+		ref: je,
+		thumbRef: Me,
+		disabled: R,
+		onStart: J,
+		onMove: (e) => G({
+			...U[z(511)],
+			h: e * 360
+		}),
+		onEnd: K,
+		onCancel: Y
+	}), Le = P({
+		ref: Ne,
+		thumbRef: Pe,
+		disabled: R,
+		onStart: J,
+		onMove: (e) => G({
+			...U.current,
+			a: Math[z(518)](e * 100) / 100
+		}),
+		onEnd: K,
+		onCancel: Y
+	}), Re = (e, t) => (n) => {
+		let r = z;
+		if (n[r(547)] === "Escape") {
+			e[r(559)]() && n[r(557)]();
+			return;
+		}
+		if (e[r(475)] || R) return;
+		let i = n[r(555)] ? 10 : 1, a = {
+			ArrowRight: [i, 0],
+			ArrowLeft: [-i, 0],
+			ArrowUp: [0, i],
+			ArrowDown: [0, -i],
+			PageUp: [0, 10],
+			PageDown: [0, -10]
+		}, o;
+		if (n.key in a) o = t(U[r(511)], ...a[n[r(547)]]);
+		else if (n.key === "Home" || n[r(547)] === r(502)) o = t(U[r(511)], 0, 0, n.key === "Home" ? r(466) : r(488));
+		else return;
+		n.preventDefault(), G(o), K();
+	}, ze = Re(Fe, (e, t, n, r) => r ? {
+		...e,
+		s: r === z(466) ? 0 : 1
+	} : {
+		...e,
+		s: f(e.s + t / 100, 0, 1),
+		v: f(e.v + n / 100, 0, 1)
+	}), Be = Re(Ie, (e, t, n, r) => ({
+		...e,
+		h: r ? r === z(466) ? 0 : 360 : f(Math[z(518)](e.h) + t + n, 0, 360)
+	})), Ve = Re(Le, (e, t, n, r) => ({
+		...e,
+		a: r ? r === z(466) ? 0 : 1 : f(Math.round(e.a * 100 + t + n) / 100, 0, 1)
+	})), He = y(X), Z = (e) => j(b(e), U[z(511)]), Ue = (e) => (t) => {
+		let n = z, r = t.trim()[n(454)](/%$/, "");
+		if (!/^\d+(\.\d+)?$/[n(556)](r)) return null;
+		let i = Number(r);
+		return i >= 0 && i <= e ? i : null;
+	}, We = (e, t, n) => {
+		let r = Ue(255);
+		return O(F, {
+			display: String(Math.round(X[e])),
+			parse: (t) => {
+				let n = x, i = r(t);
+				return i === null ? null : Z({
+					...g(U[n(511)]),
+					[e]: i
+				});
+			},
+			...Q,
+			label: n,
+			caption: t,
+			maxLength: 3
+		}, e);
+	}, Ge = (e, t, n) => {
+		let r = z, i = Ue(e === "h" ? 360 : 100), a = e === "h" ? Math[r(518)](H.h) % 360 : Math.round(He[e] * 100);
+		return O(F, {
+			display: String(a),
+			parse: (t) => {
+				let n = r, a = i(t);
+				if (a === null) return null;
+				let o = y(g(U.current)), s = e === "h" ? {
+					...o,
+					h: a
+				} : {
+					...o,
+					[e]: a / 100
+				}, c = b(h(s));
+				return e === "h" ? {
+					...c,
+					h: a % 360
+				} : j(c, U[n(511)]);
+			},
+			...Q,
+			label: n,
+			caption: t,
+			maxLength: 3
+		}, e);
+	}, Q = {
+		onPreview: G,
+		onSettle: Ee,
+		onRevert: Y,
+		onBegin: J,
+		disabled: R
+	}, Ke = O(F, {
+		display: De[z(453)](1)[z(470)](),
+		parse: (e) => {
+			let t = z, n = te(e);
+			if (!n) return null;
+			let r = e[t(461)]()[t(454)]("#", "")[t(503)], i = r === 4 || r === 8;
+			return {
+				...Z(n),
+				a: E && i ? n.a : U[t(511)].a
+			};
+		},
+		...Q,
+		label: z(548),
+		caption: V === z(535) && E ? z(546) : void 0,
+		leading: O(z(489), {
+			className: "ds-color-picker__hash",
+			children: "#"
+		}),
+		maxLength: 9
+	}), qe = E && O(F, {
+		display: M(H.a) + "%",
+		parse: (e) => {
+			let t = z, n = Ue(100)(e);
+			return n === null ? null : {
+				...U[t(511)],
+				a: n / 100
+			};
+		},
+		...Q,
+		label: z(500),
+		caption: "A",
+		maxLength: 4
+	}), Je = w(null), Ye = (se ?? [])[z(494)]((e) => typeof e === z(517) ? { color: e } : e), Xe = ce(Je, Ye[z(494)]((e) => e[z(469)])), Ze = (e) => {
+		let t = v(e);
+		t && (J(), G({
+			...Z(t),
+			a: E ? t.a : 1
+		}), K());
+	}, Qe = W(H), $ = w(null), $e = (e) => {
+		let t = z;
+		e[t(558)][t(524)](e.relatedTarget) || ($.current = W(U[t(511)]));
+	}, et = (e) => {
+		let t = z;
+		if (e.currentTarget[t(524)](e[t(497)])) return;
+		let n = W(U.current);
+		$[t(511)] !== null && $[t(511)] !== n && Se([n, ...xe[t(493)]((e) => e[t(523)]() !== n)][t(453)](0, pe)), $.current = null;
+	}, [tt] = T(() => ae() !== null), nt = async () => {
+		let e = z, t = ae();
+		if (t) try {
+			let { sRGBHex: n } = await new t()[e(530)](), r = v(n);
+			if (!r) return;
+			J(), G({
+				...Z(r),
+				a: U[e(511)].a
+			}), K();
+		} catch {}
+	}, rt = p(X, V, E);
+	return k(o, {
+		ref: Je,
+		gap: 3,
+		role: z(467),
+		"aria-label": ve,
+		className: d(z(515), ge),
+		style: _e,
+		"data-disabled": R || void 0,
+		onFocus: $e,
+		onBlur: et,
+		children: [
+			O(z(520), {
+				ref: ke,
+				className: "ds-color-picker__area",
+				style: { "--_hue": Oe },
+				"data-dragging": Fe[z(475)] || void 0,
+				...Fe[z(472)],
+				children: O(z(520), {
+					ref: Ae,
+					role: z(459),
+					tabIndex: R ? -1 : 0,
+					"aria-label": z(534),
+					"aria-roledescription": z(539),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": M(H.s),
+					"aria-valuetext": z(544) + M(H.s) + z(507) + M(H.v) + "%",
+					"aria-disabled": R || void 0,
+					className: "ds-color-picker__thumb",
+					style: {
+						left: H.s * 100 + "%",
+						top: (1 - H.v) * 100 + "%",
+						"--_c": De
+					},
+					onKeyDown: ze
+				})
+			}),
+			k(a, {
+				gap: 3,
+				wrap: !1,
+				children: [O(z(489), {
+					className: z(464),
+					style: { "--_c": Qe },
+					"aria-hidden": !0
+				}), k(o, {
+					gap: E ? 2 : 0,
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [O("div", {
+						className: z(553),
+						"data-dragging": Ie[z(475)] || void 0,
+						...Ie.handlers,
+						children: O(z(520), {
+							ref: je,
+							className: z(514),
+							children: O(z(520), {
+								ref: Me,
+								role: "slider",
+								tabIndex: R ? -1 : 0,
+								"aria-label": "색상",
+								"aria-orientation": z(455),
+								"aria-valuemin": 0,
+								"aria-valuemax": 360,
+								"aria-valuenow": Math.round(H.h),
+								"aria-valuetext": z(481) + Math[z(518)](H.h) + "도",
+								"aria-disabled": R || void 0,
+								className: z(484),
+								style: {
+									left: H.h / 360 * 100 + "%",
+									"--_c": Oe
+								},
+								onKeyDown: Be
+							})
+						})
+					}), E && O(z(520), {
+						className: z(458),
+						style: { "--_c": De },
+						"data-dragging": Le[z(475)] || void 0,
+						...Le.handlers,
+						children: O("div", {
+							ref: Ne,
+							className: z(514),
+							children: O("div", {
+								ref: Pe,
+								role: z(459),
+								tabIndex: R ? -1 : 0,
+								"aria-label": "불투명도",
+								"aria-orientation": "horizontal",
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-valuenow": M(H.a),
+								"aria-valuetext": z(540) + M(H.a) + "%",
+								"aria-disabled": R || void 0,
+								className: z(484),
+								style: {
+									left: H.a * 100 + "%",
+									"--_c": Qe
+								},
+								onKeyDown: Ve
+							})
+						})
+					})]
+				})]
+			}),
+			k(a, {
+				justify: z(545),
+				wrap: !1,
+				children: [O(u, {
+					options: oe,
+					value: V,
+					onChange: be,
+					ariaLabel: "값 형식"
+				}), k(a, {
+					gap: 1,
+					wrap: !1,
+					children: [me && tt && O(t, {
+						content: z(485),
+						children: O(c, {
+							variant: z(463),
+							size: "sm",
+							iconOnly: !0,
+							icon: O(D, {}),
+							"aria-label": "화면에서 색 고르기",
+							disabled: R,
+							onClick: nt
+						})
+					}), he && O(r, {
+						value: rt,
+						disabled: R
+					})]
+				})]
+			}),
+			V === z(535) ? E ? k(i, {
+				columns: z(457),
+				gap: 2,
+				align: z(466),
+				children: [Ke, qe]
+			}) : Ke : k(i, {
+				columns: E ? 4 : 3,
+				gap: 2,
+				align: z(466),
+				children: [V === z(492) ? [
+					We("r", "R", "빨강(0–255)"),
+					We("g", "G", z(490)),
+					We("b", "B", z(526))
+				] : [
+					Ge("h", "H", z(456)),
+					Ge("s", "S", z(477)),
+					Ge("l", "L", z(528))
+				], qe]
+			}),
+			Ye[z(503)] > 0 && k(o, {
+				gap: 2,
+				children: [O(n, {
+					variant: z(536),
+					tone: "secondary",
+					children: L
+				}), O(z(520), {
+					className: "ds-color-picker__swatches",
+					children: Ye[z(494)]((e, t) => {
+						let n = z, r = Xe[t] ? v(Xe[t]) : null;
+						return O(I, {
+							css: e[n(469)][n(552)]("--") ? n(542) + e[n(469)] + ")" : e.color,
+							rgb: r,
+							label: e.label ?? e[n(469)],
+							selected: r !== null && m(r, E) === Qe,
+							disabled: R,
+							onPick: () => Xe[t] && Ze(Xe[t])
+						}, e[n(469)]);
+					})
+				})]
+			}),
+			fe && xe[z(503)] > 0 && k(o, {
+				gap: 2,
+				children: [O(n, {
+					variant: z(536),
+					tone: z(460),
+					children: z(527)
+				}), O("div", {
+					className: "ds-color-picker__swatches",
+					children: xe.map((e) => {
+						let t = z, n = v(e);
+						return O(I, {
+							css: e,
+							rgb: n,
+							label: e[t(470)](),
+							selected: n !== null && m(n, E) === Qe,
+							disabled: R,
+							onPick: () => Ze(e)
+						}, e);
+					})
+				})]
+			})
+		]
+	});
+}
+function ce(t, n) {
+	let r = e, i = n[r(549)]("|"), [a, o] = T(() => n[r(494)]((e) => e[r(552)]("--") ? "" : e));
+	return C(() => {
+		let e = r, n = t[e(511)] ?? document[e(510)], a = getComputedStyle(n), s = i ? i[e(482)]("|")[e(494)]((t) => t[e(552)]("--") ? a[e(473)](t)[e(461)]() : t) : [];
+		o((t) => t.join("|") === s[e(549)]("|") ? t : s);
+	}, [t, i]), a;
+}
+function L({ value: t, defaultValue: n = ie, onValueChange: r, format: i, defaultFormat: a = e(535), onFormatChange: o, recentColors: c, defaultRecentColors: l = [], onRecentColorsChange: u, open: f, defaultOpen: m = !1, onOpenChange: h, size: g = "md", invalid: _, popoverWidth: te = 264, name: y, id: b, className: x, disabled: S, alpha: C, "aria-label": w = "색", "aria-labelledby": T, ...E }) {
+	let D = e, [A, j] = s(t, n, r), [M, N] = s(i, a, o), [P, F] = s(c, l, u), [I, ae] = s(f, m, h), oe = v(A), ce = oe ? p(oe, M, C) : A, L = M === D(535) ? ce[D(470)]() : ce;
+	return k(re, { children: [O(ee, {
+		open: I,
+		onOpenChange: (e) => !S && ae(e),
+		width: te,
+		"aria-label": w + D(537),
+		trigger: k(D(487), {
+			id: b,
+			type: D(487),
+			"aria-haspopup": D(476),
+			"aria-expanded": I,
+			"aria-label": T ? void 0 : w + ": " + L,
+			"aria-labelledby": T,
+			"aria-invalid": _ || void 0,
+			disabled: S,
+			className: d("ds-control", D(543), g !== "md" && "ds-color-field--" + g, x),
+			"data-open": I || void 0,
+			"data-invalid": _ || void 0,
+			"data-disabled": S || void 0,
+			children: [
+				O("span", {
+					className: D(519),
+					style: { "--_c": A }
+				}),
+				O(D(489), {
+					className: "ds-color-field__value",
+					children: L
+				}),
+				O(ne, { className: D(501) })
+			]
+		}),
+		children: O(se, {
+			...E,
+			value: A,
+			onValueChange: j,
+			alpha: C,
+			format: M,
+			onFormatChange: N,
+			recentColors: P,
+			onRecentColorsChange: F,
+			disabled: S,
+			"aria-label": w + D(537)
+		})
+	}), y && O(D(462), {
+		type: "hidden",
+		name: y,
+		value: A
+	})] });
+}
+export { S as CHART_COLOR_PRESETS, L as ColorField, se as ColorPicker };