@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectChoiceCard.js

@@ -0,0 +1,113 @@
+/* empty css           */
+import { safeHref as e } from "./internal/safeHref.js";
+import { SelectIcon as t } from "./SelectIcon.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Link as o } from "react-router-dom";
+//#region src/SelectChoiceCard.tsx
+var s = n(function({ icon: n, media: s, accent: c, title: l, description: u, badge: d, meta: f, cta: p, to: m, onClick: h, selected: g, disabled: _ = !1, className: v, ...y }, b) {
+	let x = `select-choicecard${g ? " is-selected" : ""}${_ ? " is-disabled" : ""}${v ? " " + v : ""}`, S = c ? { "--select-choice-accent": c } : void 0, C = /* @__PURE__ */ a(r, { children: [
+		s == null ? /* @__PURE__ */ a("span", {
+			className: "select-choicecard__top",
+			children: [n != null && /* @__PURE__ */ i("span", {
+				className: "select-choicecard__icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i(t, {
+					size: "1.375rem",
+					children: n
+				})
+			}), d != null && /* @__PURE__ */ i("span", {
+				className: "select-choicecard__badge",
+				children: d
+			})]
+		}) : /* @__PURE__ */ a("span", {
+			className: "select-choicecard__media",
+			"aria-hidden": "true",
+			children: [s, d != null && /* @__PURE__ */ i("span", {
+				className: "select-choicecard__badge",
+				children: d
+			})]
+		}),
+		/* @__PURE__ */ i("span", {
+			className: "select-choicecard__title",
+			children: l
+		}),
+		u != null && /* @__PURE__ */ i("span", {
+			className: "select-choicecard__desc",
+			children: u
+		}),
+		(f != null || p != null) && /* @__PURE__ */ a("span", {
+			className: "select-choicecard__foot",
+			children: [/* @__PURE__ */ i("span", {
+				className: "select-choicecard__meta",
+				children: f
+			}), p != null && /* @__PURE__ */ a("span", {
+				className: "select-choicecard__cta",
+				children: [
+					p,
+					" ",
+					/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						children: "→"
+					})
+				]
+			})]
+		})
+	] }), w = _ ? void 0 : e(m);
+	return w ? /* @__PURE__ */ i(o, {
+		ref: b,
+		to: w,
+		className: x,
+		style: S,
+		"data-tour": y["data-tour"],
+		children: C
+	}) : /* @__PURE__ */ i("button", {
+		ref: b,
+		type: "button",
+		className: x,
+		style: S,
+		onClick: h,
+		disabled: _,
+		"aria-pressed": g ?? void 0,
+		"data-tour": y["data-tour"],
+		children: C
+	});
+});
+function c({ badge: e = !0 }) {
+	return /* @__PURE__ */ a("div", {
+		className: "select-choicecard select-choicecard--skeleton",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "select-choicecard__top",
+				children: [/* @__PURE__ */ i("span", { className: "select-skeleton select-choicecard__skelicon" }), e && /* @__PURE__ */ i("span", { className: "select-skeleton select-choicecard__skelbadge" })]
+			}),
+			/* @__PURE__ */ i("span", { className: "select-skeleton select-choicecard__skeltitle" }),
+			/* @__PURE__ */ a("span", {
+				className: "select-choicecard__skeldesc",
+				children: [/* @__PURE__ */ i("span", { className: "select-skeleton" }), /* @__PURE__ */ i("span", { className: "select-skeleton" })]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "select-choicecard__foot",
+				children: [/* @__PURE__ */ i("span", { className: "select-skeleton select-choicecard__skelmeta" }), /* @__PURE__ */ i("span", { className: "select-skeleton select-choicecard__skelcta" })]
+			})
+		]
+	});
+}
+var l = n(function({ children: e, minCardWidth: t = "15rem", loading: n = !1, skeletonCount: r = 4, listOnPhone: a = !1, className: o, style: s, ...l }, u) {
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		...l,
+		"aria-busy": n || void 0,
+		className: `select-choicegrid${a ? " select-choicegrid--phone-list" : ""}${o ? " " + o : ""}`,
+		style: {
+			"--select-choice-min": t,
+			...s
+		},
+		children: n ? Array.from({ length: r }, (e, t) => /* @__PURE__ */ i(c, {}, t)) : e
+	});
+});
+//#endregion
+export { s as SelectChoiceCard, c as SelectChoiceCardSkeleton, l as SelectChoiceGrid };
+
+//# sourceMappingURL=SelectChoiceCard.js.map

package/dist/SelectChord.js

@@ -0,0 +1,93 @@
+/* empty css           */
+import { chartColor as e, donutSegment as t, formatCompact as n } from "./chartUtils.js";
+import { ChartTooltip as r, useChartTooltip as i } from "./chartTip.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectChord.tsx
+var c = a(function({ matrix: a, labels: c, size: l = 240, format: u = n, padAngle: d = .05, className: f, ...p }, m) {
+	let h = i(), g = c.length, _ = l / 2, v = l / 2, y = l / 2 - 22, b = y - 9, x = a.map((e) => e.reduce((e, t) => e + t, 0)), S = x.reduce((e, t) => e + t, 0) || 1, C = (2 * Math.PI - g * d) / S, w = [], T = 0;
+	for (let e = 0; e < g; e++) {
+		let t = T, n = T + x[e] * C;
+		w.push({
+			a0: t,
+			a1: n
+		}), T = n + d;
+	}
+	let E = a.map(() => []);
+	for (let e = 0; e < g; e++) {
+		let t = w[e].a0;
+		for (let n = 0; n < g; n++) {
+			let r = a[e][n] * C;
+			E[e][n] = [t, t + r], t += r;
+		}
+	}
+	let D = (e, t) => [_ + t * Math.cos(e - Math.PI / 2), v + t * Math.sin(e - Math.PI / 2)], O = (e, t, n, r) => {
+		let [i, a] = D(e, b), [o, s] = D(t, b), [c, l] = D(n, b), [u, d] = D(r, b);
+		return `M${i.toFixed(2)},${a.toFixed(2)} A${b},${b} 0 0 1 ${o.toFixed(2)},${s.toFixed(2)} Q${_},${v} ${c.toFixed(2)},${l.toFixed(2)} A${b},${b} 0 0 1 ${u.toFixed(2)},${d.toFixed(2)} Q${_},${v} ${i.toFixed(2)},${a.toFixed(2)} Z`;
+	}, k = (e) => e * 180 / Math.PI, A = [];
+	for (let t = 0; t < g; t++) for (let n = t; n < g; n++) {
+		if (t === n || a[t][n] + a[n][t] <= 0) continue;
+		let [r, i] = E[t][n], [o, s] = E[n][t];
+		A.push({
+			d: O(r, i, o, s),
+			color: e(t),
+			i: t,
+			j: n,
+			value: a[t][n] + a[n][t]
+		});
+	}
+	return /* @__PURE__ */ o("div", {
+		ref: m,
+		...p,
+		className: `select-donut-wrap${f ? " " + f : ""}`,
+		children: /* @__PURE__ */ s("div", {
+			className: "select-radial",
+			style: {
+				width: l,
+				aspectRatio: "1"
+			},
+			children: [/* @__PURE__ */ s("svg", {
+				width: l,
+				height: l,
+				viewBox: `0 0 ${l} ${l}`,
+				className: "select-chart",
+				"aria-hidden": "true",
+				children: [A.map((e, t) => /* @__PURE__ */ o("path", {
+					d: e.d,
+					fill: e.color,
+					className: "select-chord__ribbon",
+					onMouseEnter: () => h.show({
+						x: _,
+						y: v,
+						place: "top",
+						title: `${c[e.i]} ↔ ${c[e.j]}`,
+						rows: [{
+							label: "Fluxo",
+							value: u(e.value),
+							color: e.color
+						}]
+					}),
+					onMouseLeave: h.hide
+				}, t)), w.map((n, r) => {
+					let i = (n.a0 + n.a1) / 2, [a, l] = D(i, y + 12);
+					return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("path", {
+						d: t(_, v, y, b, k(n.a0), k(n.a1)),
+						fill: e(r),
+						className: "select-chord__arc"
+					}), /* @__PURE__ */ o("text", {
+						x: a,
+						y: l,
+						className: "select-chart__xlabel",
+						dominantBaseline: "middle",
+						textAnchor: Math.abs(a - _) < 6 ? "middle" : a > _ ? "start" : "end",
+						children: c[r]
+					})] }, r);
+				})]
+			}), /* @__PURE__ */ o(r, { tip: h.tip })]
+		})
+	});
+});
+//#endregion
+export { c as SelectChord };
+
+//# sourceMappingURL=SelectChord.js.map

package/dist/SelectCirclePack.js

@@ -0,0 +1,111 @@
+/* empty css           */
+import { chartColor as e, formatCompact as t } from "./chartUtils.js";
+import { ChartTooltip as n, useChartTooltip as r } from "./chartTip.js";
+import { forwardRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectCirclePack.tsx
+var c = i(function({ data: i, size: c = 260, format: l = t, className: u, ...d }, f) {
+	let p = r(), [m, h] = a(null), g = Math.max(1, ...i.map((e) => e.value)), _ = i.map((e, t) => ({
+		d: e,
+		i: t,
+		r: 8 + Math.sqrt(e.value / g) * 40
+	})).sort((e, t) => t.r - e.r), v = [];
+	for (let e of _) {
+		if (v.length === 0) {
+			v.push({
+				d: e.d,
+				i: e.i,
+				x: 0,
+				y: 0,
+				r: e.r
+			});
+			continue;
+		}
+		let t = 0, n = 0, r = null;
+		for (let i = 0; i < 8e3; i++) {
+			let i = Math.cos(t) * n, a = Math.sin(t) * n, o = !0;
+			for (let t of v) if (Math.hypot(i - t.x, a - t.y) < t.r + e.r + 2) {
+				o = !1;
+				break;
+			}
+			if (o) {
+				r = [i, a];
+				break;
+			}
+			t += .5, n += .7;
+		}
+		r && v.push({
+			d: e.d,
+			i: e.i,
+			x: r[0],
+			y: r[1],
+			r: e.r
+		});
+	}
+	let y = Math.min(...v.map((e) => e.x - e.r)), b = Math.max(...v.map((e) => e.x + e.r)), x = Math.min(...v.map((e) => e.y - e.r)), S = Math.max(...v.map((e) => e.y + e.r)), C = b - y || 1, w = S - x || 1, T = Math.min((c - 16) / C, (c - 16) / w), E = (c - C * T) / 2 - y * T, D = (c - w * T) / 2 - x * T, O = (e) => e * T + E, k = (e) => e * T + D;
+	return /* @__PURE__ */ s("div", {
+		ref: f,
+		...d,
+		className: `select-donut-wrap${u ? " " + u : ""}`,
+		children: [/* @__PURE__ */ o("div", {
+			className: "select-radial",
+			style: {
+				width: c,
+				aspectRatio: "1"
+			},
+			children: /* @__PURE__ */ o("svg", {
+				width: c,
+				height: c,
+				viewBox: `0 0 ${c} ${c}`,
+				className: "select-chart",
+				onMouseLeave: () => {
+					h(null), p.hide();
+				},
+				children: v.map((t) => {
+					let n = t.d.color ?? e(t.i), r = t.r * T;
+					return /* @__PURE__ */ s("g", {
+						style: { opacity: m === null || m === t.i ? 1 : .5 },
+						children: [/* @__PURE__ */ o("circle", {
+							cx: O(t.x),
+							cy: k(t.y),
+							r,
+							fill: n,
+							fillOpacity: .3,
+							stroke: n,
+							strokeWidth: 1.5,
+							className: "select-pack__circle",
+							onMouseEnter: () => {
+								h(t.i), p.show({
+									x: O(t.x),
+									y: k(t.y) - r,
+									place: k(t.y) - r < 40 ? "bottom" : "top",
+									title: t.d.label,
+									rows: [{
+										label: "Valor",
+										value: l(t.d.value),
+										color: n
+									}]
+								});
+							},
+							onMouseLeave: () => {
+								h(null), p.hide();
+							}
+						}), r > 18 && /* @__PURE__ */ o("text", {
+							x: O(t.x),
+							y: k(t.y),
+							className: "select-chart__xlabel",
+							textAnchor: "middle",
+							dominantBaseline: "middle",
+							style: { fontWeight: 600 },
+							children: t.d.label
+						})]
+					}, t.i);
+				})
+			})
+		}), /* @__PURE__ */ o(n, { tip: p.tip })]
+	});
+});
+//#endregion
+export { c as SelectCirclePack };
+
+//# sourceMappingURL=SelectCirclePack.js.map

package/dist/SelectCodeBlock.js

@@ -0,0 +1,51 @@
+/* empty css           */
+import { CheckIcon as e, CopyIcon as t } from "./icons.js";
+import { useSelectMessages as n } from "./SelectLocale.js";
+import { SelectIconButton as r } from "./SelectIconButton.js";
+import { forwardRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectCodeBlock.tsx
+function c(e) {
+	try {
+		return JSON.stringify(JSON.parse(e), null, 2);
+	} catch {
+		return e;
+	}
+}
+var l = i(function({ value: i, label: l, pretty: u = !1, maxHeight: d = 14, copyable: f = !0, tone: p = "neutral", className: m, style: h, ...g }, _) {
+	let v = n(), [y, b] = a(!1), x = u ? c(i) : i, S = () => {
+		var e;
+		(e = navigator.clipboard) == null || e.writeText(x).then(() => {
+			b(!0), setTimeout(() => b(!1), 1200);
+		});
+	};
+	return /* @__PURE__ */ s("div", {
+		ref: _,
+		...g,
+		className: `select-codeblock${p === "critical" ? " select-codeblock--critical" : ""}${m ? " " + m : ""}`,
+		style: h,
+		children: [l != null && /* @__PURE__ */ o("span", {
+			className: "select-codeblock__label",
+			children: l
+		}), /* @__PURE__ */ s("div", {
+			className: "select-codeblock__box",
+			children: [/* @__PURE__ */ o("pre", {
+				className: "select-codeblock__pre",
+				style: { maxHeight: `${d}rem` },
+				children: x
+			}), f && /* @__PURE__ */ o("span", {
+				className: "select-codeblock__copy",
+				children: /* @__PURE__ */ o(r, {
+					size: "sm",
+					icon: o(y ? e : t, {}),
+					label: y ? v.common.copied : v.common.copy,
+					onClick: S
+				})
+			})]
+		})]
+	});
+});
+//#endregion
+export { l as SelectCodeBlock, c as prettyCode };
+
+//# sourceMappingURL=SelectCodeBlock.js.map

package/dist/SelectCollapsible.js

@@ -0,0 +1,40 @@
+import { ChevronDownIcon as e } from "./icons.js";
+import { forwardRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectCollapsible.tsx
+var a = t(function({ title: t, children: a, defaultOpen: o = !1, plain: s = !1, className: c, ...l }, u) {
+	let [d, f] = n(o);
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		...l,
+		className: `select-collapsible${s ? " select-collapsible--plain" : ""}${d ? " is-open" : ""}${c ? " " + c : ""}`,
+		children: [/* @__PURE__ */ i("button", {
+			type: "button",
+			className: "select-collapsible__header",
+			onClick: () => f((e) => !e),
+			"aria-expanded": d,
+			children: [/* @__PURE__ */ r("span", {
+				className: "select-collapsible__title",
+				children: t
+			}), /* @__PURE__ */ r("span", {
+				className: "select-collapsible__chevron",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ r(e, {})
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "select-collapsible__bodywrap",
+			children: /* @__PURE__ */ r("div", {
+				className: "select-collapsible__bodyclip",
+				"aria-hidden": !d,
+				children: /* @__PURE__ */ r("div", {
+					className: "select-collapsible__body",
+					children: a
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { a as SelectCollapsible };
+
+//# sourceMappingURL=SelectCollapsible.js.map

package/dist/SelectColorField.js

@@ -0,0 +1,283 @@
+/* empty css           */
+import { SelectLabelRow as e } from "./SelectField.js";
+import { SelectPopover as t } from "./SelectPopover.js";
+import { useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectColorField.tsx
+var l = [
+	"#212529",
+	"#495057",
+	"#868E96",
+	"#F1F3F5",
+	"#1D4ED8",
+	"#2563EB",
+	"#0891B2",
+	"#0D9488",
+	"#15803D",
+	"#65A30D",
+	"#CA8A04",
+	"#EA580C",
+	"#DC2626",
+	"#DB2777",
+	"#9333EA",
+	"#6D28D9"
+], u = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function d(e) {
+	let t = u.exec((e ?? "").trim());
+	return t ? `#${(t[1].length === 3 ? t[1].split("").map((e) => e + e).join("") : t[1]).toUpperCase()}` : null;
+}
+function f(e) {
+	let t = d(e);
+	if (!t) return 0;
+	let [n, r, i] = [
+		1,
+		3,
+		5
+	].map((e) => parseInt(t.slice(e, e + 2), 16) / 255).map((e) => e <= .03928 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4);
+	return .2126 * n + .7152 * r + .0722 * i;
+}
+function p(e, t) {
+	let [n, r] = [f(e), f(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}
+var m = (e) => Math.min(1, Math.max(0, e));
+function h(e) {
+	let t = d(e) ?? "#000000", [n, r, i] = [
+		1,
+		3,
+		5
+	].map((e) => parseInt(t.slice(e, e + 2), 16) / 255), a = Math.max(n, r, i), o = a - Math.min(n, r, i), s = 0;
+	return o && (s = a === n ? (r - i) / o % 6 : a === r ? (i - n) / o + 2 : (n - r) / o + 4, s *= 60, s < 0 && (s += 360)), {
+		h: s,
+		s: a ? o / a : 0,
+		v: a
+	};
+}
+function g({ h: e, s: t, v: n }) {
+	let r = (r) => {
+		let i = (r + e / 60) % 6;
+		return n - n * t * Math.max(0, Math.min(i, 4 - i, 1));
+	};
+	return `#${[
+		r(5),
+		r(3),
+		r(1)
+	].map((e) => Math.round(e * 255).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
+}
+function _({ hex: e, onPick: t }) {
+	let [r, l] = a(() => h(e ?? "#1D4ED8")), u = i(r), d = (e) => {
+		u.current = e, l(e);
+	};
+	n(() => {
+		if (!e || g(u.current) === e) return;
+		let t = h(e);
+		d(t.s === 0 || t.v === 0 ? {
+			...t,
+			h: u.current.h
+		} : t);
+	}, [e]);
+	let f = (e) => {
+		d(e), t(g(e));
+	}, p = (e, t, n) => {
+		var r;
+		(r = e.setPointerCapture) == null || r.call(e, t.pointerId);
+		let i = (t) => {
+			let r = e.getBoundingClientRect();
+			n(m((t.clientX - r.left) / (r.width || 1)), m((t.clientY - r.top) / (r.height || 1)));
+		};
+		i(t);
+		let a = (e) => i(e), o = () => {
+			e.removeEventListener("pointermove", a), e.removeEventListener("pointerup", o), e.removeEventListener("pointercancel", o);
+		};
+		e.addEventListener("pointermove", a), e.addEventListener("pointerup", o), e.addEventListener("pointercancel", o);
+	}, _ = (e) => {
+		let t = e.shiftKey ? .1 : .01, { h: n, s: r, v: i } = u.current, a = e.key === "ArrowLeft" ? {
+			h: n,
+			s: m(r - t),
+			v: i
+		} : e.key === "ArrowRight" ? {
+			h: n,
+			s: m(r + t),
+			v: i
+		} : e.key === "ArrowUp" ? {
+			h: n,
+			s: r,
+			v: m(i + t)
+		} : e.key === "ArrowDown" ? {
+			h: n,
+			s: r,
+			v: m(i - t)
+		} : null;
+		a && (e.preventDefault(), f(a));
+	}, v = (e) => {
+		let t = e.shiftKey ? 10 : 1, { h: n, s: r, v: i } = u.current, a = e.key === "ArrowLeft" || e.key === "ArrowDown" ? Math.max(0, n - t) : e.key === "ArrowRight" || e.key === "ArrowUp" ? Math.min(360, n + t) : e.key === "Home" ? 0 : e.key === "End" ? 360 : null;
+		a != null && (e.preventDefault(), f({
+			h: a,
+			s: r,
+			v: i
+		}));
+	}, y = g({
+		h: r.h,
+		s: 1,
+		v: 1
+	}), b = g(r);
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: "select-colorfield__sv",
+		style: { backgroundColor: y },
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": "Saturação e brilho",
+		"aria-valuetext": `${b} — saturação ${Math.round(r.s * 100)}%, brilho ${Math.round(r.v * 100)}%`,
+		onPointerDown: (e) => p(e.currentTarget, e, (e, t) => f({
+			h: u.current.h,
+			s: e,
+			v: 1 - t
+		})),
+		onKeyDown: _,
+		children: /* @__PURE__ */ s("span", {
+			className: "select-colorfield__svthumb",
+			style: {
+				left: `${r.s * 100}%`,
+				top: `${(1 - r.v) * 100}%`,
+				background: b
+			}
+		})
+	}), /* @__PURE__ */ s("div", {
+		className: "select-colorfield__hue",
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": "Matiz",
+		"aria-valuemin": 0,
+		"aria-valuemax": 360,
+		"aria-valuenow": Math.round(r.h),
+		onPointerDown: (e) => p(e.currentTarget, e, (e) => f({
+			...u.current,
+			h: e * 360
+		})),
+		onKeyDown: v,
+		children: /* @__PURE__ */ s("span", {
+			className: "select-colorfield__huethumb",
+			style: {
+				left: `${r.h / 360 * 100}%`,
+				background: y
+			}
+		})
+	})] });
+}
+var v = (e) => e.toFixed(1).replace(".", ",");
+function y({ label: i, help: u, hint: m, error: h, value: g, onChange: y, presets: b = l, disabled: x = !1, allowEmpty: S = !1, contrastWith: C, contrastLabel: w = "o texto", id: T }) {
+	let E = r(), D = T ?? `color-${E}`, [O, k] = a(!1), [A, j] = a(g ?? ""), [M, N] = a(null);
+	n(() => {
+		j(g ?? ""), N(null);
+	}, [g]);
+	let P = d(g ?? ""), F = (e) => {
+		if (!e.trim()) {
+			S ? (N(null), y("")) : j(g ?? "");
+			return;
+		}
+		let t = d(e);
+		if (!t) {
+			N("Use o formato #RRGGBB (ex.: #1D4ED8).");
+			return;
+		}
+		N(null), j(t), t !== P && y(t);
+	}, I = C ? d(C) : null, L = P && I ? p(P, I) : null, R = h ?? M, z = R ? `${D}-err` : m || L != null ? `${D}-hint` : void 0;
+	return /* @__PURE__ */ c("div", {
+		className: `select-field select-colorfield${x ? " is-disabled" : ""}`,
+		children: [
+			(i || u) && /* @__PURE__ */ s(e, {
+				htmlFor: D,
+				label: i,
+				help: u
+			}),
+			/* @__PURE__ */ c("div", {
+				className: `select-input-wrap select-input-wrap--affixed select-colorfield__control${R ? " select-input-wrap--error" : ""}`,
+				children: [/* @__PURE__ */ s(t, {
+					active: O,
+					onClose: () => k(!1),
+					placement: "bottom-start",
+					role: "dialog",
+					activator: /* @__PURE__ */ s("button", {
+						type: "button",
+						className: `select-colorfield__swatch${P ? "" : " is-empty"}`,
+						style: P ? { background: P } : void 0,
+						onClick: () => !x && k((e) => !e),
+						disabled: x,
+						"aria-label": P ? `Cor ${P} — abrir a paleta` : "Escolher uma cor",
+						"aria-expanded": O
+					}),
+					children: /* @__PURE__ */ c("div", {
+						className: "select-colorfield__panel",
+						children: [
+							/* @__PURE__ */ s(_, {
+								hex: P,
+								onPick: F
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "select-colorfield__presets",
+								role: "group",
+								"aria-label": "Cores prontas",
+								children: b.map((e) => {
+									let t = d(e) ?? e, n = t === P;
+									return /* @__PURE__ */ s("button", {
+										type: "button",
+										className: `select-colorfield__preset${n ? " is-selected" : ""}`,
+										style: { background: t },
+										"aria-label": t,
+										"aria-pressed": n,
+										onClick: () => {
+											F(t), k(!1);
+										}
+									}, t);
+								})
+							}),
+							S && P && /* @__PURE__ */ s("div", {
+								className: "select-colorfield__row",
+								children: /* @__PURE__ */ s("button", {
+									type: "button",
+									className: "select-colorfield__clear",
+									onClick: () => {
+										F(""), k(!1);
+									},
+									children: "Usar a cor padrão"
+								})
+							})
+						]
+					})
+				}), /* @__PURE__ */ s("input", {
+					id: D,
+					className: "select-input select-input--mono select-colorfield__hex",
+					value: A,
+					onChange: (e) => {
+						j(e.target.value), e.target.value.replace("#", "").length === 6 && d(e.target.value) && F(e.target.value);
+					},
+					onBlur: () => F(A),
+					placeholder: S ? "Padrão" : "#000000",
+					maxLength: 7,
+					spellCheck: !1,
+					autoComplete: "off",
+					disabled: x,
+					"aria-invalid": R ? !0 : void 0,
+					"aria-describedby": z
+				})]
+			}),
+			R ? /* @__PURE__ */ s("p", {
+				id: `${D}-err`,
+				className: "select-field__error",
+				children: R
+			}) : L == null ? m ? /* @__PURE__ */ s("p", {
+				id: `${D}-hint`,
+				className: "select-field__hint",
+				children: m
+			}) : null : /* @__PURE__ */ c("p", {
+				id: `${D}-hint`,
+				className: `select-field__hint select-colorfield__contrast${L < 4.5 ? " is-low" : ""}`,
+				children: [L >= 4.5 ? `Contraste com ${w}: ${v(L)}:1 — legível.` : `Contraste com ${w}: ${v(L)}:1 — difícil de ler. Escolha uma cor ${f(P) < f(I) ? "mais escura" : "mais clara"}.`, m ? /* @__PURE__ */ c(o, { children: [" ", m] }) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { l as SELECT_COLOR_PRESETS, y as SelectColorField, p as contrastRatio, h as hexToHsv, g as hsvToHex, d as normalizeHex };
+
+//# sourceMappingURL=SelectColorField.js.map