@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/ColorPicker/ColorPicker.mjs

@@ -0,0 +1,554 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { IconButton as a } from "../../primitives/Button/Button.mjs";
+import { CheckIcon as o, ErrorIcon as s, EyeDropperIcon as c } from "../../primitives/Icon/icons.mjs";
+import { useFieldContext as l, useFieldControl as u } from "../Field/FieldContext.mjs";
+import { Input as d } from "../Input/Input.mjs";
+import { colorsEqual as f, describeColor as p, formatColor as m, getHueName as h, getLuminance as g, hslToHsv as _, hsvToHsl as v, hsvToRgb as y, isValidColor as b, parseColor as x, rgbToHsv as S, toHex as C } from "./colorUtils.mjs";
+import w from "./ColorPicker.module.css.mjs";
+import { useEffect as T, useId as ee, useRef as E, useState as D } from "react";
+import { Fragment as te, jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/components/forms/ColorPicker/ColorPicker.tsx
+function ne(e) {
+	let { colors: t } = e.colorPicker;
+	return {
+		...e.colorPicker,
+		describeColor: (e) => p(e, t),
+		hueName: (e) => h(e, t)
+	};
+}
+var re = ne(e), ie = "#1d4ed8", ae = {
+	h: 224,
+	s: 87,
+	v: 85,
+	a: 1
+}, oe = {
+	sm: w.sizeSm,
+	md: w.sizeMd,
+	lg: w.sizeLg
+}, se = {
+	panel: w.panel,
+	plain: w.plain
+}, A = (e, t, n) => Math.min(n, Math.max(t, e)), ce = "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))", j = (e) => m(e, "rgb");
+function le(e, t) {
+	let n = e.shiftKey ? 10 : 1, r = t !== "y", i = t !== "x";
+	switch (e.key) {
+		case "ArrowRight": return r ? {
+			dx: n,
+			dy: 0
+		} : {
+			dx: 0,
+			dy: n
+		};
+		case "ArrowLeft": return r ? {
+			dx: -n,
+			dy: 0
+		} : {
+			dx: 0,
+			dy: -n
+		};
+		case "ArrowUp": return i ? {
+			dx: 0,
+			dy: n
+		} : {
+			dx: n,
+			dy: 0
+		};
+		case "ArrowDown": return i ? {
+			dx: 0,
+			dy: -n
+		} : {
+			dx: -n,
+			dy: 0
+		};
+		case "PageUp": return i ? {
+			dx: 0,
+			dy: 10
+		} : {
+			dx: 10,
+			dy: 0
+		};
+		case "PageDown": return i ? {
+			dx: 0,
+			dy: -10
+		} : {
+			dx: -10,
+			dy: 0
+		};
+		case "Home": return {
+			dx: 0,
+			dy: 0,
+			to: "min"
+		};
+		case "End": return {
+			dx: 0,
+			dy: 0,
+			to: "max"
+		};
+		default: return null;
+	}
+}
+function ue() {
+	if (!(typeof window > "u")) return window.EyeDropper;
+}
+function de({ value: e, defaultValue: n, onValueChange: r, onValueCommit: i, format: a, alpha: o }) {
+	let [s, c] = t({
+		value: e,
+		defaultValue: n ?? ie,
+		onChange: r
+	}), l = (e) => o ? e : {
+		...e,
+		a: 1
+	}, u = (e) => m(e, a, { alpha: o }), [d, f] = D(() => l(x(s) ?? ae)), [p, h] = D(s), g = E(d), _ = d;
+	if (s !== p) {
+		h(s);
+		let e = x(s, d.h);
+		e && u(l(e)) !== u(d) && (_ = l(e), f(_));
+	}
+	return _ = l(_), g.current = _, {
+		hsva: _,
+		hsvaRef: g,
+		str: u(_),
+		update: (e) => {
+			let t = l({
+				h: A(e.h, 0, 360),
+				s: A(e.s, 0, 100),
+				v: A(e.v, 0, 100),
+				a: A(e.a, 0, 1)
+			});
+			g.current = t, f(t);
+			let n = u(t);
+			h(n), c(n);
+		},
+		commit: () => i?.(u(g.current)),
+		fmt: u
+	};
+}
+function fe({ label: e, value: t, max: n, valueText: i, trackStyle: a, checkered: o, interactive: s, disabled: c, readOnly: l, ariaProps: u, onChange: d, onCommit: f }) {
+	let p = E(null), m = E(null), [h, g] = D(!1), _ = E(!1), v = (e) => {
+		let r = p.current?.getBoundingClientRect();
+		return !r || r.width <= 0 ? t : A((e - r.left) / r.width, 0, 1) * n;
+	}, y = (e) => {
+		s && e.button === 0 && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), g(!0), m.current?.focus({ preventScroll: !0 }), d(v(e.clientX)));
+	}, b = (e) => {
+		h && d(v(e.clientX));
+	}, x = (e) => {
+		h && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), g(!1), f());
+	}, S = (e) => {
+		if (!s) return;
+		let r = le(e, "x");
+		r && (e.preventDefault(), _.current = !0, d(r.to === "min" ? 0 : r.to === "max" ? n : A(Math.round(t) + r.dx, 0, n)));
+	}, C = () => {
+		_.current && (_.current = !1, f());
+	}, T = Math.round(t);
+	return /* @__PURE__ */ O("div", {
+		className: w.channel,
+		"data-dragging": h || void 0,
+		onPointerDown: y,
+		onPointerMove: b,
+		onPointerUp: x,
+		onPointerCancel: x,
+		onLostPointerCapture: (e) => {
+			h && x(e);
+		},
+		children: /* @__PURE__ */ k("div", {
+			ref: p,
+			className: w.rail,
+			children: [/* @__PURE__ */ O("div", {
+				className: r(w.track, o && w.checkered),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ O("div", {
+					className: w.trackFill,
+					style: a
+				})
+			}), /* @__PURE__ */ O("span", {
+				ref: m,
+				role: "slider",
+				tabIndex: c ? -1 : 0,
+				className: w.thumb,
+				style: { left: `${A(t, 0, n) / n * 100}%` },
+				"aria-label": e,
+				"aria-valuemin": 0,
+				"aria-valuemax": n,
+				"aria-valuenow": T,
+				"aria-valuetext": i,
+				"aria-orientation": "horizontal",
+				"aria-disabled": c || void 0,
+				"aria-readonly": l || void 0,
+				...u,
+				"aria-required": void 0,
+				onKeyDown: S,
+				onKeyUp: C
+			})]
+		})
+	});
+}
+function pe({ colors: e, current: t, label: n, disabled: r, readOnly: i, ariaProps: a, withAlpha: s, onSelect: c, describe: l }) {
+	let u = E([]), d = e.findIndex((e) => f(e, t)), [p, m] = D(null), h = p ?? (d >= 0 ? d : 0), g = (t) => {
+		let n = (t + e.length) % e.length;
+		m(n), u.current[n]?.focus(), i || c(e[n]);
+	}, _ = (t) => {
+		if (r) return;
+		let n = u.current.findIndex((e) => e === document.activeElement);
+		if (n === -1) return;
+		let i = null;
+		t.key === "ArrowRight" || t.key === "ArrowDown" ? i = n + 1 : t.key === "ArrowLeft" || t.key === "ArrowUp" ? i = n - 1 : t.key === "Home" ? i = 0 : t.key === "End" && (i = e.length - 1), i !== null && (t.preventDefault(), g(i));
+	}, v = ee();
+	return /* @__PURE__ */ k("div", {
+		className: w.swatchSection,
+		children: [/* @__PURE__ */ O("span", {
+			id: v,
+			className: w.swatchCaption,
+			children: n
+		}), /* @__PURE__ */ O("div", {
+			role: "radiogroup",
+			"aria-labelledby": v,
+			"aria-readonly": i || void 0,
+			"aria-disabled": r || void 0,
+			...a,
+			className: w.swatches,
+			onKeyDown: _,
+			onBlur: (e) => {
+				e.currentTarget.contains(e.relatedTarget) || m(null);
+			},
+			children: e.map((e, t) => {
+				let n = t === d;
+				return /* @__PURE__ */ k("button", {
+					ref: (e) => {
+						u.current[t] = e;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": n,
+					"aria-label": `${l(e)}, ${C(e, s)}`,
+					tabIndex: t === h ? 0 : -1,
+					disabled: r,
+					className: w.swatch,
+					"data-checked": n || void 0,
+					onFocus: () => m(t),
+					onClick: () => {
+						i || c(e);
+					},
+					children: [/* @__PURE__ */ O("span", {
+						className: w.swatchColor,
+						style: { background: j(e) },
+						"aria-hidden": "true"
+					}), n && /* @__PURE__ */ O("span", {
+						className: w.swatchCheck,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ O(o, {
+							size: "xs",
+							strokeWidth: 3
+						})
+					})]
+				}, `${C(e)}-${t}`);
+			})
+		})]
+	});
+}
+function me(e) {
+	let t = n(), { value: o, defaultValue: f, onValueChange: p, onValueCommit: m, format: h = "hex", alpha: g = !1, swatches: _, eyeDropper: v = !0, size: y, disabled: b, readOnly: S, invalid: re, name: ie, labels: ae, variant: me = "panel", swatchesOnly: he = !1, "aria-label": ge, "aria-labelledby": _e, "aria-describedby": ve, className: ye, style: be, ...xe } = e, M = {
+		...ne(t),
+		...ae
+	}, N = l(), P = u({
+		invalid: re,
+		disabled: b,
+		readOnly: S,
+		size: y,
+		"aria-describedby": ve
+	}, { nativeRequired: !1 }), { disabled: F, readOnly: I, invalid: Se } = P, Ce = P.size ?? "md", L = !F && !I, R = {
+		...P.ariaProps,
+		"aria-required": void 0
+	}, { hsva: z, hsvaRef: B, str: V, update: H, commit: U, fmt: we } = de({
+		value: o,
+		defaultValue: f,
+		onValueChange: p,
+		onValueCommit: m,
+		format: h,
+		alpha: g
+	}), W = ee(), G = `${W}-input-label`, Te = `${W}-input-error`, Ee = N && !N.isGroup ? N.controlId : `${W}-input`, [De, Oe] = D(!1);
+	T(() => Oe(!!ue()), []);
+	let [ke, Ae] = D(""), je = E(null), K = E(null), q = E(null), [Me, Ne] = D("s"), [J, Pe] = D(!1), Fe = E(!1), Ie = (e, t) => {
+		let n = je.current?.getBoundingClientRect();
+		if (!n || n.width <= 0 || n.height <= 0) return;
+		let r = A((e - n.left) / n.width, 0, 1) * 100, i = A((n.bottom - t) / n.height, 0, 1) * 100;
+		H({
+			...B.current,
+			s: r,
+			v: i
+		});
+	}, Le = (e) => {
+		L && e.button === 0 && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), Pe(!0), (Me === "s" ? K : q).current?.focus({ preventScroll: !0 }), Ie(e.clientX, e.clientY));
+	}, Re = (e) => {
+		J && Ie(e.clientX, e.clientY);
+	}, ze = (e) => {
+		J && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), Pe(!1), U());
+	}, Be = (e) => {
+		if (!L) return;
+		let t = le(e, "both");
+		if (!t) return;
+		e.preventDefault(), Fe.current = !0;
+		let n = B.current, r = e.currentTarget === q.current ? "v" : "s";
+		if (t.to) {
+			let e = t.to === "min" ? 0 : 100;
+			H(r === "s" ? {
+				...n,
+				s: e
+			} : {
+				...n,
+				v: e
+			});
+			return;
+		}
+		let i = t.dx === 0 ? "v" : "s";
+		H({
+			...n,
+			s: Math.round(n.s) + t.dx,
+			v: Math.round(n.v) + t.dy
+		}), i !== r && (Ne(i), (i === "s" ? K : q).current?.focus({ preventScroll: !0 }));
+	}, Ve = (e, t) => {
+		if (!L) return;
+		let n = B.current;
+		H(e === "s" ? {
+			...n,
+			s: t
+		} : {
+			...n,
+			v: t
+		}), U();
+	}, He = () => {
+		Fe.current && (Fe.current = !1, U());
+	}, [Y, X] = D(null), [Ue, Z] = D(!1), We = E(V);
+	T(() => {
+		We.current !== V && (We.current = V, Z(!1), X(null));
+	}, [V]);
+	let Q = () => {
+		if (Y === null) return;
+		let e = x(Y, B.current.h);
+		if (X(null), !e) {
+			Z(!0);
+			return;
+		}
+		Z(!1);
+		let t = we(B.current);
+		H(e), we(B.current) !== t && U();
+	}, Ge = E(Q);
+	Ge.current = Q, T(() => () => Ge.current(), []);
+	let Ke = (_ ?? []).map((e) => x(e)).filter((e) => e !== null).map((e) => g ? e : {
+		...e,
+		a: 1
+	}), qe = (e) => {
+		H(e), U();
+	}, Je = async () => {
+		let e = ue();
+		if (e && L) try {
+			let t = await new e().open(), n = x(t.sRGBHex, B.current.h);
+			if (!n) return;
+			qe({
+				...n,
+				a: B.current.a
+			}), Ae(M.eyeDropperPicked(`${M.describeColor(n)}, ${C(n, !1)}`));
+		} catch {}
+	}, Ye = M.describeColor(z), Xe = {
+		...z,
+		a: 1
+	}, Ze = {
+		h: z.h,
+		s: 100,
+		v: 100,
+		a: 1
+	}, $ = _e ?? N?.labelId, Qe = !he || Ke.length === 0, $e = {
+		...be,
+		"--cp-color": j(z)
+	};
+	return /* @__PURE__ */ k("div", {
+		...xe,
+		role: "group",
+		"aria-labelledby": $,
+		"aria-label": $ ? void 0 : ge,
+		className: r(w.root, oe[Ce], se[me], ye),
+		style: $e,
+		"data-disabled": F || void 0,
+		"data-readonly": I || void 0,
+		"data-invalid": Se || void 0,
+		"data-dragging": J || void 0,
+		children: [
+			Qe && /* @__PURE__ */ k(te, { children: [
+				/* @__PURE__ */ O("div", {
+					ref: je,
+					className: w.area,
+					style: { background: `linear-gradient(to top, ${j({
+						h: 0,
+						s: 0,
+						v: 0,
+						a: 1
+					})}, transparent), linear-gradient(to right, ${j({
+						h: 0,
+						s: 0,
+						v: 100,
+						a: 1
+					})}, ${j(Ze)})` },
+					onPointerDown: Le,
+					onPointerMove: Re,
+					onPointerUp: ze,
+					onPointerCancel: ze,
+					onLostPointerCapture: (e) => {
+						J && ze(e);
+					},
+					children: /* @__PURE__ */ O("span", {
+						role: "group",
+						"aria-label": M.area,
+						"aria-roledescription": M.areaRoleDescription,
+						className: r(w.thumb, w.areaThumb),
+						style: {
+							left: `${z.s}%`,
+							top: `${100 - z.v}%`,
+							background: j(Xe)
+						},
+						children: ["s", "v"].map((e) => /* @__PURE__ */ O("input", {
+							ref: e === "s" ? K : q,
+							type: "range",
+							className: w.axisInput,
+							min: 0,
+							max: 100,
+							step: 1,
+							value: Math.round(e === "s" ? z.s : z.v),
+							tabIndex: e === Me ? 0 : -1,
+							disabled: F,
+							"aria-label": e === "s" ? M.saturation : M.brightness,
+							"aria-orientation": e === "s" ? "horizontal" : "vertical",
+							"aria-valuetext": `${e === "s" ? M.saturation : M.brightness} ${Math.round(e === "s" ? z.s : z.v)}%, ${Ye}`,
+							"aria-readonly": I || void 0,
+							...R,
+							onFocus: () => Ne(e),
+							onChange: (t) => Ve(e, Number(t.target.value)),
+							onKeyDown: Be,
+							onKeyUp: He
+						}, e))
+					})
+				}),
+				/* @__PURE__ */ k("div", {
+					className: w.sliderRow,
+					children: [/* @__PURE__ */ O("span", {
+						className: r(w.preview, w.checkered),
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ O("span", { className: w.previewFill })
+					}), /* @__PURE__ */ k("div", {
+						className: w.sliders,
+						children: [/* @__PURE__ */ O(fe, {
+							label: M.hue,
+							value: z.h,
+							max: 360,
+							valueText: `${M.hue} ${Math.round(z.h)} ${M.degrees}, ${M.hueName(z.h)}`,
+							trackStyle: { background: ce },
+							interactive: L,
+							disabled: F,
+							readOnly: I,
+							ariaProps: R,
+							onChange: (e) => H({
+								...B.current,
+								h: e
+							}),
+							onCommit: U
+						}), g && /* @__PURE__ */ O(fe, {
+							label: M.alpha,
+							value: z.a * 100,
+							max: 100,
+							valueText: `${M.alpha} ${Math.round(z.a * 100)}%`,
+							trackStyle: { background: `linear-gradient(to right, transparent, ${j(Xe)})` },
+							checkered: !0,
+							interactive: L,
+							disabled: F,
+							readOnly: I,
+							ariaProps: R,
+							onChange: (e) => H({
+								...B.current,
+								a: Math.round(e) / 100
+							}),
+							onCommit: U
+						})]
+					})]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: w.inputRow,
+					children: [
+						v && De && /* @__PURE__ */ O(a, {
+							"aria-label": M.eyeDropper,
+							variant: "ghost",
+							tone: "neutral",
+							size: Ce,
+							disabled: !L,
+							onClick: Je,
+							children: /* @__PURE__ */ O(c, { size: "sm" })
+						}),
+						/* @__PURE__ */ k("span", {
+							id: G,
+							className: w.formatTag,
+							children: [/* @__PURE__ */ k(i, { children: [M.input, ", "] }), h.toUpperCase()]
+						}),
+						/* @__PURE__ */ O(d, {
+							id: Ee,
+							className: w.input,
+							size: Ce,
+							value: Y ?? V,
+							invalid: Se || Ue,
+							disabled: F,
+							readOnly: I,
+							spellCheck: !1,
+							autoComplete: "off",
+							autoCapitalize: "off",
+							"aria-labelledby": $ ? `${$} ${G}` : G,
+							"aria-describedby": Ue ? Te : void 0,
+							startIcon: /* @__PURE__ */ O("span", { className: r(w.inputSwatch, w.checkered) }),
+							onChange: (e) => {
+								X(e.target.value), Z(!1);
+							},
+							onBlur: Q,
+							onKeyDown: (e) => {
+								e.key === "Enter" && Y !== null ? (e.preventDefault(), Q()) : e.key === "Escape" && Y !== null && (e.stopPropagation(), X(null), Z(!1));
+							}
+						})
+					]
+				}),
+				/* @__PURE__ */ O("div", {
+					className: w.message,
+					"aria-live": "polite",
+					children: Ue && /* @__PURE__ */ k("p", {
+						id: Te,
+						className: w.error,
+						children: [/* @__PURE__ */ O(s, {
+							size: "sm",
+							className: w.errorIcon
+						}), /* @__PURE__ */ O("span", { children: M.invalidInput })]
+					})
+				})
+			] }),
+			Ke.length > 0 && /* @__PURE__ */ O(pe, {
+				colors: Ke,
+				current: z,
+				label: M.swatches,
+				disabled: F,
+				readOnly: I,
+				ariaProps: he ? R : {},
+				withAlpha: g,
+				onSelect: qe,
+				describe: M.describeColor
+			}),
+			/* @__PURE__ */ O(i, {
+				"aria-live": "polite",
+				children: ke
+			}),
+			ie && /* @__PURE__ */ O("input", {
+				type: "hidden",
+				name: ie,
+				value: V,
+				disabled: F
+			})
+		]
+	});
+}
+//#endregion
+export { me as ColorPicker, ne as colorPickerLabelsFrom, f as colorsEqual, re as defaultColorPickerLabels, p as describeColor, m as formatColor, h as getHueName, g as getLuminance, _ as hslToHsv, v as hsvToHsl, y as hsvToRgb, b as isValidColor, x as parseColor, S as rgbToHsv, C as toHex };

package/dist/components/forms/ColorPicker/ColorPicker.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_sizeSm_1fh45_35`,t=`_sizeMd_1fh45_55`,n=`_sizeLg_1fh45_75`,r=`_root_1fh45_103`,i=`_panel_1fh45_127`,a=`_plain_1fh45_143`,o=`_checkered_1fh45_169`,s=`_swatch_1fh45_171`,c=`_area_1fh45_201`,l=`_thumb_1fh45_249`,u=`_areaThumb_1fh45_327`,d=`_axisInput_1fh45_355`,f=`_channel_1fh45_407`,p=`_sliderRow_1fh45_435`,m=`_preview_1fh45_449`,h=`_previewFill_1fh45_469`,g=`_sliders_1fh45_485`,_=`_rail_1fh45_523`,v=`_track_1fh45_533`,y=`_trackFill_1fh45_553`,b=`_inputRow_1fh45_583`,x=`_formatTag_1fh45_597`,S=`_input_1fh45_583`,C=`_inputSwatch_1fh45_647`,w=`_message_1fh45_687`,T=`_error_1fh45_703`,E=`_errorIcon_1fh45_727`,D=`_swatchSection_1fh45_745`,O=`_swatchCaption_1fh45_771`,k=`_swatches_1fh45_789`,A=`_swatchColor_1fh45_903`,j=`_swatchCheck_1fh45_917`,M=`_trigger_1fh45_1045`,N=`_triggerSm_1fh45_1105`,P=`_triggerMd_1fh45_1119`,F=`_triggerLg_1fh45_1133`,I=`_triggerFullWidth_1fh45_1147`,L=`_triggerSwatch_1fh45_1225`,R=`_triggerValue_1fh45_1271`,z=`_triggerChevron_1fh45_1287`,B={sizeSm:e,sizeMd:t,sizeLg:n,root:r,panel:i,plain:a,checkered:o,swatch:s,area:c,thumb:l,areaThumb:u,axisInput:d,channel:f,sliderRow:p,preview:m,previewFill:h,sliders:g,rail:_,track:v,trackFill:y,inputRow:b,formatTag:x,input:S,inputSwatch:C,message:w,error:T,errorIcon:E,swatchSection:D,swatchCaption:O,swatches:k,swatchColor:A,swatchCheck:j,trigger:M,triggerSm:N,triggerMd:P,triggerLg:F,triggerFullWidth:I,triggerSwatch:L,triggerValue:R,triggerChevron:z};exports.area=c,exports.areaThumb=u,exports.axisInput=d,exports.channel=f,exports.checkered=o,exports.default=B,exports.error=T,exports.errorIcon=E,exports.formatTag=x,exports.input=S,exports.inputRow=b,exports.inputSwatch=C,exports.message=w,exports.panel=i,exports.plain=a,exports.preview=m,exports.previewFill=h,exports.rail=_,exports.root=r,exports.sizeLg=n,exports.sizeMd=t,exports.sizeSm=e,exports.sliderRow=p,exports.sliders=g,exports.swatch=s,exports.swatchCaption=O,exports.swatchCheck=j,exports.swatchColor=A,exports.swatchSection=D,exports.swatches=k,exports.thumb=l,exports.track=v,exports.trackFill=y,exports.trigger=M,exports.triggerChevron=z,exports.triggerFullWidth=I,exports.triggerLg=F,exports.triggerMd=P,exports.triggerSm=N,exports.triggerSwatch=L,exports.triggerValue=R;

package/dist/components/forms/ColorPicker/ColorPicker.module.css.mjs

@@ -0,0 +1,45 @@
+//#region src/components/forms/ColorPicker/ColorPicker.module.css
+var e = "_sizeSm_1fh45_35", t = "_sizeMd_1fh45_55", n = "_sizeLg_1fh45_75", r = "_root_1fh45_103", i = "_panel_1fh45_127", a = "_plain_1fh45_143", o = "_checkered_1fh45_169", s = "_swatch_1fh45_171", c = "_area_1fh45_201", l = "_thumb_1fh45_249", u = "_areaThumb_1fh45_327", d = "_axisInput_1fh45_355", f = "_channel_1fh45_407", p = "_sliderRow_1fh45_435", m = "_preview_1fh45_449", h = "_previewFill_1fh45_469", g = "_sliders_1fh45_485", _ = "_rail_1fh45_523", v = "_track_1fh45_533", y = "_trackFill_1fh45_553", b = "_inputRow_1fh45_583", x = "_formatTag_1fh45_597", S = "_input_1fh45_583", C = "_inputSwatch_1fh45_647", w = "_message_1fh45_687", T = "_error_1fh45_703", E = "_errorIcon_1fh45_727", D = "_swatchSection_1fh45_745", O = "_swatchCaption_1fh45_771", k = "_swatches_1fh45_789", A = "_swatchColor_1fh45_903", j = "_swatchCheck_1fh45_917", M = "_trigger_1fh45_1045", N = "_triggerSm_1fh45_1105", P = "_triggerMd_1fh45_1119", F = "_triggerLg_1fh45_1133", I = "_triggerFullWidth_1fh45_1147", L = "_triggerSwatch_1fh45_1225", R = "_triggerValue_1fh45_1271", z = "_triggerChevron_1fh45_1287", B = {
+	sizeSm: e,
+	sizeMd: t,
+	sizeLg: n,
+	root: r,
+	panel: i,
+	plain: a,
+	checkered: o,
+	swatch: s,
+	area: c,
+	thumb: l,
+	areaThumb: u,
+	axisInput: d,
+	channel: f,
+	sliderRow: p,
+	preview: m,
+	previewFill: h,
+	sliders: g,
+	rail: _,
+	track: v,
+	trackFill: y,
+	inputRow: b,
+	formatTag: x,
+	input: S,
+	inputSwatch: C,
+	message: w,
+	error: T,
+	errorIcon: E,
+	swatchSection: D,
+	swatchCaption: O,
+	swatches: k,
+	swatchColor: A,
+	swatchCheck: j,
+	trigger: M,
+	triggerSm: N,
+	triggerMd: P,
+	triggerLg: F,
+	triggerFullWidth: I,
+	triggerSwatch: L,
+	triggerValue: R,
+	triggerChevron: z
+};
+//#endregion
+export { c as area, u as areaThumb, d as axisInput, f as channel, o as checkered, B as default, T as error, E as errorIcon, x as formatTag, S as input, b as inputRow, C as inputSwatch, w as message, i as panel, a as plain, m as preview, h as previewFill, _ as rail, r as root, n as sizeLg, t as sizeMd, e as sizeSm, p as sliderRow, g as sliders, s as swatch, O as swatchCaption, j as swatchCheck, A as swatchColor, D as swatchSection, k as swatches, l as thumb, v as track, y as trackFill, M as trigger, z as triggerChevron, I as triggerFullWidth, F as triggerLg, P as triggerMd, N as triggerSm, L as triggerSwatch, R as triggerValue };

package/dist/components/forms/ColorPicker/colorUtils.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js");var t=(e,t,n)=>Math.min(n,Math.max(t,e)),n=(e,t=0)=>{let n=10**t;return Math.round(e*n)/n};function r({h:e,s:n,v:r,a:i}){let a=t(n,0,100)/100,o=t(r,0,100)/100,s=(e%360+360)%360/60,c=e=>{let t=(e+s)%6;return o-o*a*Math.max(0,Math.min(t,4-t,1))};return{r:c(5)*255,g:c(3)*255,b:c(1)*255,a:i}}function i({r:e,g:n,b:r,a:i},a=0){let o=t(e,0,255)/255,s=t(n,0,255)/255,c=t(r,0,255)/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=a;return u>0&&(d=l===o?(s-c)/u%6:l===s?(c-o)/u+2:(o-s)/u+4,d*=60,d<0&&(d+=360)),{h:d,s:l===0?0:u/l*100,v:l*100,a:i}}function a({h:e,s:t,v:n,a:r}){let i=t/100,a=n/100,o=a*(1-i/2);return{h:e,s:(o===0||o===1?0:(a-o)/Math.min(o,1-o))*100,l:o*100,a:r}}function o({h:e,s:t,l:n,a:r}){let i=t/100,a=n/100,o=a+i*Math.min(a,1-a);return{h:e,s:(o===0?0:2*(1-a/o))*100,v:o*100,a:r}}var s=/^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,c=/^(rgba?|hsla?)\(\s*([^)]*)\)$/i;function l(e){let t=e.replace(/\//g,` / `).split(/[\s,]+/).filter(Boolean),n=t.indexOf(`/`);return n===-1?t:n!==3||t.length!==5?null:[t[0],t[1],t[2],t[4]]}var u=/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i;function d(e,t){if(e.endsWith(`%`)){let n=e.slice(0,-1);return u.test(n)?Number(n)/100*t:null}return u.test(e)?Number(e):null}function f(e){if(e===void 0)return 1;let n=d(e,1);return n===null?null:t(n,0,1)}function p(e){let t=/^(.*?)(deg|turn|rad|grad)?$/i.exec(e);if(!t||!u.test(t[1]))return null;let n=Number(t[1]),r=(t[2]??`deg`).toLowerCase();return r===`turn`?n*=360:r===`rad`?n=n*180/Math.PI:r===`grad`&&(n*=.9),(n%360+360)%360}function m(e,n=0){let r=e.trim();if(!r)return null;let a=s.exec(r);if(a){let e=a[1];e.length<=4&&(e=e.replace(/./g,e=>e+e));let t=t=>parseInt(e.slice(t,t+2),16),r=e.length===8?t(6)/255:1;return i({r:t(0),g:t(2),b:t(4),a:r},n)}let u=c.exec(r);if(!u)return null;let m=u[1].toLowerCase().startsWith(`rgb`)?`rgb`:`hsl`,h=l(u[2]);if(!h||h.length<3||h.length>4)return null;let g=f(h[3]);if(g===null)return null;if(m===`rgb`){let[e,r,a]=h.slice(0,3).map(e=>d(e,255));return e===null||r===null||a===null?null:i({r:t(e,0,255),g:t(r,0,255),b:t(a,0,255),a:g},n)}let _=p(h[0]),v=d(h[1].endsWith(`%`)?h[1]:`${h[1]}%`,100),y=d(h[2].endsWith(`%`)?h[2]:`${h[2]}%`,100);return _===null||v===null||y===null?null:o({h:_,s:t(v,0,100),l:t(y,0,100),a:g})}function h(e){return m(e)!==null}var g=e=>Math.round(t(e,0,255)).toString(16).padStart(2,`0`);function _(e,t=!0){let{r:n,g:i,b:a,a:o}=r(e),s=`#${g(n)}${g(i)}${g(a)}`;return t&&o<1?`${s}${g(o*255)}`:s}function v(e,i=`hex`,{alpha:o=!0}={}){let s=o&&e.a<1,c=n(t(e.a,0,1),2);if(i===`hex`)return _(e,o);if(i===`rgb`){let{r:t,g:n,b:i}=r(e),a=`${Math.round(t)}, ${Math.round(n)}, ${Math.round(i)}`;return s?`rgba(${a}, ${c})`:`rgb(${a})`}let{h:l,s:u,l:d}=a(e),f=`${Math.round(l)%360}, ${Math.round(u)}%, ${Math.round(d)}%`;return s?`hsla(${f}, ${c})`:`hsl(${f})`}function y(e,t){return _({...e,a:n(e.a,2)})===_({...t,a:n(t.a,2)})}var b=[[15,`red`],[40,`orange`],[55,`gold`],[65,`yellow`],[90,`yellowGreen`],[150,`green`],[175,`teal`],[200,`cyan`],[250,`blue`],[280,`purple`],[320,`magenta`],[345,`pink`],[361,`red`]],x=e=>{let t=(e%360+360)%360;return b.find(([e])=>t<e)?.[1]??`red`};function S(t,n=e.en.colorPicker.colors){return n.hues[x(t)]}function C(t,n=e.en.colorPicker.colors){let{s:r,l:i}=a(t),o;if(i<8)o=n.black;else if(i>96)o=n.white;else if(r<10||t.s<8)o=i<30?n.dark(n.gray):i>70?n.light(n.gray):n.gray;else{let e=x(t.h);if((e===`orange`||e===`red`||e===`yellow`)&&i<35&&r<75)o=e===`yellow`?n.olive:n.brown;else{let t=i<30?n.dark:i>72?n.light:void 0,a=r<35?n.muted:!t&&r>85?n.vivid:void 0;o=n.hues[e],a&&(o=a(o)),t&&(o=t(o))}}return t.a<1&&(o=n.withOpacity(o,Math.round(t.a*100))),o}function w(e){let{r:t,g:n,b:i,a}=r(e),o=e=>{let t=(e*a+255*(1-a))/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return .2126*o(t)+.7152*o(n)+.0722*o(i)}exports.colorsEqual=y,exports.describeColor=C,exports.formatColor=v,exports.getHueName=S,exports.getLuminance=w,exports.hslToHsv=o,exports.hsvToHsl=a,exports.hsvToRgb=r,exports.isValidColor=h,exports.parseColor=m,exports.rgbToHsv=i,exports.toHex=_;