@weasel-js/ui 1.7.3 → 1.8.0

package/dist/chunks/PropertyField-CWUtNK1w.js

@@ -0,0 +1,751 @@
+import { t as e } from "./dlog-F0I8KsIW.js";
+import { n as t, r as n } from "./Tooltip-C6eFCYxw.js";
+import { t as r } from "./stance-BFQpS_fL.js";
+import { n as i } from "./InlineRange-DPjIsJB3.js";
+import { t as a } from "./ColorField-BwlelY26.js";
+import { t as o } from "./Select-ouV8O6cp.js";
+import { t as s } from "./FontFamilySelect-DEvMXyZd.js";
+import { t as c } from "./FontWeightSelect-BLQ_LMJF.js";
+import { t as l } from "./Input-D7SDKbST.js";
+import { r as u } from "./Slider-CHBQ8uUC.js";
+import { t as d } from "./ToggleBar-BZ4Gk1IU.js";
+import { r as f, t as p } from "./FitLabel-BzZGkWfL.js";
+import { n as m, t as h } from "./NumberField-BXFrOi5M.js";
+import { t as g } from "./PaintInput-CWyOJXUM.js";
+import { t as _ } from "./PaintField-DX4uYlF9.js";
+import { n as v, t as y } from "./RadioGroup-B70_M-gT.js";
+import { t as b } from "./Switch-CSYmcM8y.js";
+import { t as x } from "./checkbox.module-Dcx8ILgR.js";
+import { getAlpha01 as S, toHex8 as C, withAlpha01 as w } from "@weasel-js/core";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { createContext as O, forwardRef as k, useContext as ee, useEffect as A, useId as te, useLayoutEffect as ne, useRef as j, useState as M } from "react";
+import { Focusable as re } from "react-aria-components";
+import { decimal as ie, parseAs as ae, qty as N } from "@weasel-js/quantity";
+var P = {
+	panel: "_panel_8l6g6_9",
+	list: "_list_8l6g6_3",
+	row: "_row_8l6g6_4",
+	group: "_group_8l6g6_4",
+	subpanel: "_subpanel_8l6g6_3",
+	card: "_card_8l6g6_37",
+	cardList: "_cardList_8l6g6_37",
+	readout: "_readout_8l6g6_42 _numeric_zns9n_4",
+	readoutInput: "_readoutInput_8l6g6_43 _numeric_zns9n_4",
+	panelTitle: "_panelTitle_8l6g6_72",
+	panelHeader: "_panelHeader_8l6g6_84",
+	panelActions: "_panelActions_8l6g6_97",
+	listPairs: "_listPairs_8l6g6_3",
+	rowColor: "_rowColor_8l6g6_4",
+	span: "_span_8l6g6_509",
+	listOneUp: "_listOneUp_8l6g6_517",
+	densityTight: "_densityTight_8l6g6_528",
+	densityNormal: "_densityNormal_8l6g6_540",
+	densityRoomy: "_densityRoomy_8l6g6_552",
+	alignStart: "_alignStart_8l6g6_578",
+	alignCenter: "_alignCenter_8l6g6_584",
+	alignEnd: "_alignEnd_8l6g6_590",
+	alignBaseline: "_alignBaseline_8l6g6_596",
+	rowInline: "_rowInline_8l6g6_627",
+	rowLabel: "_rowLabel_8l6g6_633",
+	rowBlock: "_rowBlock_8l6g6_658",
+	rowCheckbox: "_rowCheckbox_8l6g6_659",
+	readoutAfter: "_readoutAfter_8l6g6_678",
+	readoutText: "_readoutText_8l6g6_689 _numeric_zns9n_4",
+	help: "_help_8l6g6_703",
+	autoToggle: "_autoToggle_8l6g6_737",
+	readoutGroup: "_readoutGroup_8l6g6_684",
+	readoutUnit: "_readoutUnit_8l6g6_816",
+	fieldUnitGroup: "_fieldUnitGroup_8l6g6_841",
+	numberField: "_numberField_8l6g6_849",
+	colorField: "_colorField_8l6g6_902",
+	toggleBar: "_toggleBar_8l6g6_915",
+	textField: "_textField_8l6g6_933",
+	select: "_select_8l6g6_946",
+	dialogTrigger: "_dialogTrigger_8l6g6_1067",
+	dialogSummary: "_dialogSummary_8l6g6_1102",
+	dialogGlyph: "_dialogGlyph_8l6g6_1110",
+	dimmed: "_dimmed_8l6g6_1263",
+	cellReadout: "_cellReadout_8l6g6_1269",
+	textarea: "_textarea_8l6g6_1275",
+	groupHeadRow: "_groupHeadRow_8l6g6_1311",
+	groupTitle: "_groupTitle_8l6g6_1319",
+	groupLeading: "_groupLeading_8l6g6_1325",
+	groupActions: "_groupActions_8l6g6_1326",
+	note: "_note_8l6g6_1523",
+	groupTitleMid: "_groupTitleMid_8l6g6_1553",
+	groupTwisty: "_groupTwisty_8l6g6_1559",
+	groupBody: "_groupBody_8l6g6_4",
+	groupPairs: "_groupPairs_8l6g6_1588",
+	groupOneUp: "_groupOneUp_8l6g6_1601",
+	subpanelTitle: "_subpanelTitle_8l6g6_1741",
+	rowAuto: "_rowAuto_8l6g6_1778",
+	rowAutoInherited: "_rowAutoInherited_8l6g6_1788 _inherited_40bjp_4",
+	rowHint: "_rowHint_8l6g6_1793"
+}, oe = {
+	tight: P.densityTight,
+	normal: P.densityNormal,
+	roomy: P.densityRoomy
+}, se = {
+	start: P.alignStart,
+	center: P.alignCenter,
+	end: P.alignEnd,
+	baseline: P.alignBaseline
+};
+function F(e, { density: t, align: n }, r) {
+	return [
+		e,
+		t && oe[t],
+		n && se[n],
+		r
+	].filter(Boolean).join(" ");
+}
+var I = O(!1);
+function ce({ title: e, actions: t, selectable: n, children: i, className: a, density: o, align: s, stance: c, tone: l }) {
+	let u = ee(I), d = r({
+		stance: c,
+		tone: l
+	}), f = e != null && /* @__PURE__ */ E("h2", {
+		className: P.panelTitle,
+		children: e
+	});
+	return /* @__PURE__ */ D("div", {
+		className: F(P.panel, {
+			density: o,
+			align: s
+		}, a),
+		...d,
+		"data-nested": u || void 0,
+		"data-selectable": (n ?? c === "debug") || void 0,
+		children: [t == null ? f : /* @__PURE__ */ D("div", {
+			className: P.panelHeader,
+			children: [f, /* @__PURE__ */ E("div", {
+				className: P.panelActions,
+				children: t
+			})]
+		}), /* @__PURE__ */ E(I.Provider, {
+			value: !0,
+			children: i
+		})]
+	});
+}
+var le = k(function({ children: e, className: t, pack: n = "auto-color", density: r, align: i }, a) {
+	let o = `${P.list}${n === "pairs" ? ` ${P.listPairs}` : n === "one-up" ? ` ${P.listOneUp}` : ""}`;
+	return /* @__PURE__ */ E("div", {
+		ref: a,
+		className: F(o, {
+			density: r,
+			align: i
+		}, t),
+		children: e
+	});
+});
+function ue({ children: e, className: t }) {
+	return /* @__PURE__ */ E("div", {
+		className: t ? `${P.span} ${t}` : P.span,
+		children: e
+	});
+}
+function de({ children: e, className: t }) {
+	return /* @__PURE__ */ E("p", {
+		className: t ? `${P.note} ${t}` : P.note,
+		children: e
+	});
+}
+function L({ label: e, readout: t, description: n, variant: r = "default", layout: i, span: a, children: o, htmlFor: s, group: c, className: l, density: u, align: d, auto: f, onAutoChange: p, autoControl: m = "hidden", hint: h }) {
+	let g = r === "color" ? P.rowColor : r === "checkbox" ? P.rowCheckbox : "", _ = r === "default" ? "block" : "inline", v = i ?? _, y = v === _ ? "" : v === "inline" ? P.rowInline : P.rowBlock, b = F([
+		P.row,
+		g,
+		y,
+		a && P.span,
+		f && (m === "dimmed" ? P.rowAutoInherited : P.rowAuto)
+	].filter(Boolean).join(" "), {
+		density: u,
+		align: d
+	}, l), x = v === "inline" && t != null, S = j(null), C = j(null), w = fe(S, C, v === "inline"), T = /* @__PURE__ */ D("span", {
+		className: P.rowLabel,
+		ref: C,
+		children: [
+			p ? /* @__PURE__ */ E(pe, {
+				auto: f ?? !1,
+				label: e,
+				onChange: p
+			}) : e,
+			h != null && /* @__PURE__ */ E("span", {
+				className: P.rowHint,
+				children: h
+			}),
+			n ? /* @__PURE__ */ E(R, {
+				label: e,
+				description: n
+			}) : null,
+			t != null && !x && /* @__PURE__ */ E("em", {
+				className: P.readout,
+				children: t
+			})
+		]
+	}), O = x ? /* @__PURE__ */ E("em", {
+		className: `${P.readout} ${P.readoutAfter}`,
+		children: t
+	}) : null, k = w ? { "data-multiline": "" } : {};
+	return c ? /* @__PURE__ */ D("div", {
+		className: b,
+		ref: S,
+		...k,
+		children: [
+			T,
+			o,
+			O
+		]
+	}) : /* @__PURE__ */ D("label", {
+		className: b,
+		htmlFor: s,
+		ref: S,
+		...k,
+		children: [
+			T,
+			o,
+			O
+		]
+	});
+}
+function fe(e, t, n) {
+	let [r, i] = M(!1);
+	return ne(() => {
+		let r = e.current, a = t.current;
+		if (!n || !r || !a || typeof ResizeObserver > "u") {
+			i(!1);
+			return;
+		}
+		let o = new ResizeObserver(() => {
+			let e = getComputedStyle(a), t = Number.parseFloat(e.lineHeight) || Number.parseFloat(e.fontSize) * 1.2, n = Number.parseFloat(getComputedStyle(r).minHeight) || t, o = a.getBoundingClientRect().height > t * 1.5, s = Array.from(r.children).some((e) => e !== a && e.getBoundingClientRect().height > n * 1.5);
+			i(o || s);
+		});
+		o.observe(r), o.observe(a);
+		for (let e of Array.from(r.children)) o.observe(e);
+		return () => o.disconnect();
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}
+function pe({ auto: e, label: t, onChange: n }) {
+	let r = typeof t == "string" ? t : "this setting", i = (t) => {
+		t.preventDefault(), t.stopPropagation(), n(!e);
+	};
+	return /* @__PURE__ */ E("span", {
+		role: "button",
+		tabIndex: 0,
+		className: P.autoToggle,
+		"aria-pressed": !e,
+		"aria-label": `Pin ${r}`,
+		onClick: i,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && i(e);
+		},
+		onMouseDown: (e) => e.stopPropagation(),
+		children: t
+	});
+}
+function R({ label: e, description: r }) {
+	let i = typeof e == "string" ? e : "this setting";
+	return /* @__PURE__ */ D(n, { children: [/* @__PURE__ */ E(re, { children: /* @__PURE__ */ E("button", {
+		type: "button",
+		className: P.help,
+		"aria-label": `About ${i}`,
+		onClick: (e) => {
+			e.preventDefault(), e.stopPropagation();
+		},
+		onMouseDown: (e) => e.stopPropagation(),
+		children: "ⓘ"
+	}) }), /* @__PURE__ */ E(t, { children: r })] });
+}
+//#endregion
+//#region src/components/Properties/NumberControls.tsx
+function z(e) {
+	let [t, n] = M(), { onInput: r, onChange: i } = e;
+	return r ? {
+		...e,
+		value: t ?? e.value,
+		onInput: (e) => {
+			n(e), r(e);
+		},
+		onChange: (e) => {
+			n(void 0), i(e);
+		}
+	} : e;
+}
+function me({ row: e, readout: t, control: n }) {
+	let r = z(n);
+	return /* @__PURE__ */ E(L, {
+		...e,
+		readout: q(t) ?? /* @__PURE__ */ E(K, { ...r }),
+		children: /* @__PURE__ */ E(G, { ...r })
+	});
+}
+function he(e) {
+	let t = z(e);
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(G, { ...t }), /* @__PURE__ */ E("span", {
+		className: P.cellReadout,
+		children: /* @__PURE__ */ E(K, { ...t })
+	})] });
+}
+function ge(e) {
+	let t = j(null), n = j(e);
+	return A(() => {
+		n.current = e;
+	}), A(() => {
+		let e = t.current;
+		if (!e) return;
+		let r = () => n.current?.(e.value);
+		return e.addEventListener("change", r), () => e.removeEventListener("change", r);
+	}, []), t;
+}
+function B(e, t) {
+	return e == null ? null : typeof e == "string" ? /* @__PURE__ */ E("span", {
+		className: t,
+		children: e
+	}) : e;
+}
+var V = () => {};
+function _e(e) {
+	let t = H(e), n = /* @__PURE__ */ E(h, {
+		id: e.id,
+		className: e.className ? `${P.numberField} ${e.className}` : P.numberField,
+		value: t ? e.value : NaN,
+		placeholder: e.mixed ? "Mixed" : e.placeholder,
+		minValue: e.min,
+		maxValue: e.max,
+		step: e.step,
+		accepts: e.accepts,
+		display: e.display,
+		steppers: e.steppers,
+		"aria-label": e.name,
+		onInput: e.onInput ?? e.onChange,
+		onChange: e.onInput ? e.onChange : V
+	});
+	return e.unit == null || t && !Number.isFinite(e.value) ? n : /* @__PURE__ */ D("span", {
+		className: P.fieldUnitGroup,
+		children: [n, B(e.unit, P.readoutUnit)]
+	});
+}
+function H(e) {
+	return !e.mixed && typeof e.value == "number" && !Number.isNaN(e.value);
+}
+function U(e = 1) {
+	return ie({
+		places: e >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(e)))),
+		grouping: !1
+	});
+}
+function W(e) {
+	let t = e.min ?? 0, n = e.max ?? 100;
+	return {
+		min: t,
+		max: n,
+		step: e.step ?? 1,
+		settle: (r) => u(e.endless, 1) && r >= n ? Infinity : u(e.endless, -1) && r <= t ? -Infinity : Math.min(n, Math.max(t, r))
+	};
+}
+function G(t) {
+	let { min: n, max: r, step: a, settle: o } = W(t), s = t.onInput ?? t.onChange, c = t.onInput ? t.onChange : void 0, l = ge(c && ((e) => c(o(Number(e))))), u = H(t) ? Math.min(Math.max(t.value, n), r) : n;
+	return /* @__PURE__ */ E("input", {
+		ref: l,
+		type: "range",
+		id: t.id,
+		className: t.className ? `${i.range} ${t.className}` : i.range,
+		"aria-label": t.name,
+		tabIndex: -1,
+		min: n,
+		max: r,
+		step: a,
+		value: u,
+		disabled: t.mixed,
+		onChange: (n) => {
+			let r = o(Number(n.target.value));
+			e("property-panel", "slider", {
+				name: t.name,
+				value: r
+			}), s(r);
+		}
+	});
+}
+function K(e) {
+	let { min: t, max: n, step: r, settle: i } = W(e);
+	return H(e) ? /* @__PURE__ */ E(ve, {
+		name: e.name,
+		value: e.value,
+		min: t,
+		max: n,
+		step: r,
+		settle: i,
+		display: e.display ?? U(r),
+		format: e.format,
+		unit: e.unit,
+		onCommit: (t) => {
+			e.onInput?.(t), e.onChange(t);
+		}
+	}) : /* @__PURE__ */ E(T, { children: q("—") });
+}
+function q(e) {
+	return typeof e != "string" && typeof e != "number" ? e : /* @__PURE__ */ E("span", {
+		className: P.readoutGroup,
+		children: /* @__PURE__ */ E("span", {
+			className: P.readoutText,
+			children: e
+		})
+	});
+}
+function ve({ name: e, value: t, min: n, max: r, step: i, settle: a, display: o, format: s, unit: c, onCommit: l }) {
+	let [u, d] = M(null), f = (e) => s ? String(s(e)) : N(e, o).text, p = (e) => ae(e, o), h = u === null ? f(t) : u, g = { "--wzl-property-readout-fit": `${Math.max(f(a(n)).length, f(a(r)).length)}ch` }, _ = (e) => Math.min(r, Math.max(n, e)), v = () => {
+		if (u !== null) {
+			let e = p(u);
+			Number.isNaN(e) || l(a(e));
+		}
+		d(null);
+	};
+	return /* @__PURE__ */ D("span", {
+		className: P.readoutGroup,
+		children: [/* @__PURE__ */ E("input", {
+			type: "text",
+			role: "spinbutton",
+			"aria-label": e,
+			"aria-valuenow": _(t),
+			"aria-valuetext": s ? f(t) : N(t, o).spoken,
+			"aria-valuemin": n,
+			"aria-valuemax": r,
+			inputMode: "decimal",
+			className: P.readoutInput,
+			style: g,
+			value: h,
+			onFocus: (e) => {
+				d(f(t)), e.currentTarget.select();
+			},
+			onChange: (e) => d(e.target.value.replace(/-/g, "−")),
+			onBlur: v,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), e.currentTarget.focus();
+			},
+			onMouseDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") v(), e.currentTarget.blur();
+				else if (e.key === "Escape") d(null), e.currentTarget.blur();
+				else {
+					let o = u === null ? t : p(u), s = m(e.key, _(Number.isNaN(o) ? t : o), {
+						step: i,
+						min: n,
+						max: r
+					});
+					if (s === null) return;
+					e.preventDefault(), l(a(s)), d(null);
+				}
+			}
+		}), Number.isFinite(t) && B(c, P.readoutUnit)]
+	});
+}
+//#endregion
+//#region src/components/Properties/PropertyField.tsx
+function ye(e) {
+	let { label: t, readout: n, description: r, layout: i, span: a, density: o, align: s, auto: c, onAutoChange: l, rowClassName: u, controlClassName: d, ...f } = e, p = te(), m = {
+		...f,
+		name: f.name ?? Z(t),
+		className: d,
+		id: p
+	}, h = xe(m), g = {
+		label: t,
+		description: r,
+		layout: i,
+		span: a,
+		density: o,
+		align: s,
+		auto: c,
+		onAutoChange: l,
+		className: u,
+		variant: h.variant,
+		group: h.group,
+		htmlFor: h.group || m.kind === "font-family" || m.kind === "font-weight" ? void 0 : p
+	};
+	return m.kind === "number" && m.control === "slider" ? /* @__PURE__ */ E(me, {
+		row: g,
+		readout: n,
+		control: m
+	}) : /* @__PURE__ */ E(L, {
+		...g,
+		readout: n,
+		children: /* @__PURE__ */ E(J, { ...m })
+	});
+}
+function be(e) {
+	let t = e;
+	return t.kind === "number" && t.control === "slider" ? /* @__PURE__ */ E(he, { ...t }) : /* @__PURE__ */ E(J, { ...t });
+}
+function xe(e) {
+	switch (e.kind) {
+		case "boolean": return {
+			variant: "checkbox",
+			group: e.control === "switch" || e.control === "toggle"
+		};
+		case "enum": return {
+			variant: "default",
+			group: e.control === "radio" || e.control === "toggle"
+		};
+		case "color": return {
+			variant: "color",
+			group: !1
+		};
+		case "paint": return {
+			variant: "default",
+			group: !0
+		};
+		default: return {
+			variant: "default",
+			group: !1
+		};
+	}
+}
+function J(e) {
+	switch (e.kind) {
+		case "boolean": return /* @__PURE__ */ E(X, { ...e });
+		case "number": return /* @__PURE__ */ E(_e, { ...e });
+		case "string": return /* @__PURE__ */ E(Ce, { ...e });
+		case "enum": return /* @__PURE__ */ E(we, { ...e });
+		case "color": return /* @__PURE__ */ E(Te, { ...e });
+		case "paint": return /* @__PURE__ */ E(Ee, { ...e });
+		case "font-family": return /* @__PURE__ */ E(s, {
+			className: e.className,
+			value: e.mixed ? void 0 : e.value,
+			mixed: e.mixed,
+			onChange: e.onChange,
+			weight: e.weight,
+			fontStyle: e.fontStyle,
+			"aria-label": e.name
+		});
+		case "font-weight": return /* @__PURE__ */ E(c, {
+			className: e.className,
+			value: e.mixed ? void 0 : e.value,
+			mixed: e.mixed,
+			family: e.family,
+			onChange: e.onChange,
+			"aria-label": e.name
+		});
+		default: throw Error(`PropertyControl: no control for kind "${e.kind}"`);
+	}
+}
+function Y({ mixed: e, unset: t, children: n }) {
+	return !e && !t ? /* @__PURE__ */ E(T, { children: n }) : /* @__PURE__ */ E("span", {
+		className: P.dimmed,
+		title: e ? "Mixed" : "Not set",
+		children: n
+	});
+}
+function X(e) {
+	let t = !e.mixed && e.value === !0, n = j(null);
+	return A(() => {
+		n.current && (n.current.indeterminate = e.mixed === !0);
+	}), e.control === "toggle" ? /* @__PURE__ */ E(d, {
+		mode: "multiple",
+		size: "sm",
+		variant: "flat",
+		className: e.className,
+		ariaLabel: e.name,
+		items: [{
+			value: "on",
+			label: e.glyph ?? /* @__PURE__ */ E(p, { forms: f(e.name, e.short) }),
+			ariaLabel: e.name
+		}],
+		value: t ? ["on"] : [],
+		mixedValues: e.mixed ? ["on"] : [],
+		onChange: (t) => e.onChange(t.includes("on"))
+	}) : e.control === "switch" ? /* @__PURE__ */ E(Y, {
+		mixed: e.mixed,
+		unset: e.unset,
+		children: /* @__PURE__ */ E(b, {
+			className: e.className,
+			isSelected: t,
+			onChange: e.onChange,
+			"aria-label": e.name
+		})
+	}) : /* @__PURE__ */ E(Y, {
+		unset: e.unset,
+		children: /* @__PURE__ */ E("input", {
+			ref: n,
+			id: e.id,
+			type: "checkbox",
+			className: e.className ? `${x.checkbox} ${e.className}` : x.checkbox,
+			"aria-label": e.name,
+			checked: t,
+			onChange: (t) => e.onChange(t.target.checked)
+		})
+	});
+}
+function Se(e) {
+	let [t, n] = M(null), r = e.mixed ? "" : e.value ?? "", i = e.onInput !== void 0;
+	return {
+		shown: t ?? r,
+		type: (t) => {
+			if (!i) {
+				e.onChange(t);
+				return;
+			}
+			n(t), e.onInput?.(t);
+		},
+		settle: () => {
+			t !== null && t !== r && e.onChange(t), n(null);
+		}
+	};
+}
+function Ce(e) {
+	let t = Se(e), n = e.mixed ? "Mixed" : e.placeholder;
+	return e.control === "textarea" ? /* @__PURE__ */ E("textarea", {
+		id: e.id,
+		className: e.className ? `${P.textarea} ${e.className}` : P.textarea,
+		"aria-label": e.name,
+		value: t.shown,
+		placeholder: n,
+		maxLength: e.maxLength,
+		rows: 3,
+		onChange: (e) => t.type(e.target.value),
+		onBlur: t.settle
+	}) : /* @__PURE__ */ E(l, {
+		id: e.id,
+		className: e.className ? `${P.textField} ${e.className}` : P.textField,
+		value: t.shown,
+		placeholder: n,
+		maxLength: e.maxLength,
+		"aria-label": e.name,
+		onChange: t.type,
+		onBlur: t.settle,
+		onKeyDown: (e) => {
+			e.key === "Enter" && e.target.blur();
+		}
+	});
+}
+function Z(e) {
+	return typeof e == "string" ? e : void 0;
+}
+function Q(e) {
+	return e.glyph === void 0 || e.glyph === null ? void 0 : e.label;
+}
+function we(t) {
+	let n = !t.mixed && t.options.some((e) => e.value === t.value) ? t.value : null;
+	if (t.control === "radio") return /* @__PURE__ */ E(v, {
+		className: t.className,
+		value: n,
+		onChange: t.onChange,
+		"aria-label": t.name,
+		children: t.options.map((e) => /* @__PURE__ */ E(y, {
+			value: e.value,
+			isDisabled: e.disabled,
+			children: e.label
+		}, e.value))
+	});
+	if (t.control === "toggle" && t.onClear) {
+		let { onClear: e } = t, r = n === null ? [] : [n];
+		return /* @__PURE__ */ E(d, {
+			mode: "multiple",
+			size: "sm",
+			variant: "flat",
+			className: t.className ? `${P.toggleBar} ${t.className}` : P.toggleBar,
+			ariaLabel: t.name,
+			items: t.options.map((e) => ({
+				value: e.value,
+				label: e.glyph ?? /* @__PURE__ */ E(p, { forms: f(e.label, e.short) }),
+				ariaLabel: Z(e.label),
+				tooltip: Q(e),
+				disabled: e.disabled
+			})),
+			value: r,
+			mixedValues: t.mixed ? t.options.map((e) => e.value) : [],
+			onChange: (n) => {
+				let i = n.find((e) => !r.includes(e));
+				i === void 0 ? e() : t.onChange(i);
+			}
+		});
+	}
+	return t.control === "toggle" ? /* @__PURE__ */ E(d, {
+		size: "sm",
+		variant: "flat",
+		className: t.className ? `${P.toggleBar} ${t.className}` : P.toggleBar,
+		ariaLabel: t.name,
+		items: t.options.map((e) => ({
+			value: e.value,
+			label: e.glyph ?? /* @__PURE__ */ E(p, { forms: f(e.label, e.short) }),
+			ariaLabel: Z(e.label),
+			tooltip: Q(e),
+			disabled: e.disabled
+		})),
+		value: n,
+		onChange: (e) => {
+			e !== null && t.onChange(e);
+		}
+	}) : /* @__PURE__ */ E(o, {
+		className: t.className ? `${P.select} ${t.className}` : P.select,
+		triggerId: t.id,
+		"aria-label": t.name,
+		placeholder: t.mixed ? "Mixed" : t.placeholder ?? (t.unset ? "—" : "Choose option…"),
+		selectedKey: n,
+		options: t.options.map((e) => ({
+			value: e.value,
+			label: e.label,
+			icon: e.glyph,
+			isDisabled: e.disabled
+		})),
+		onSelectionChange: (n) => {
+			e("property-panel", "select", {
+				name: t.name,
+				value: n
+			}), t.onChange(n);
+		}
+	});
+}
+function $(e) {
+	let t = C(e?.trim() ?? "");
+	return /^#[0-9a-f]{8}$/i.test(t) ? {
+		rgb: t.slice(0, 7).toLowerCase(),
+		alpha: S(t)
+	} : {
+		rgb: "#000000",
+		alpha: 1
+	};
+}
+function Te(e) {
+	let t = e.alpha !== void 0 && e.alpha !== !1, n = typeof e.alpha == "number", r = $(e.value), i = n ? e.alpha : r.alpha, o = (e, t) => (a) => {
+		if (!n) {
+			e(a);
+			return;
+		}
+		let o = $(a);
+		(o.rgb !== r.rgb || !t) && e(o.rgb);
+		let s = Math.round(o.alpha * 100) / 100;
+		s !== Math.round(i * 100) / 100 && t?.(s);
+	}, s = e.onInput !== void 0 || e.onAlphaInput !== void 0, c = o(e.onInput ?? e.onChange, e.onAlphaInput ?? e.onAlphaChange), l = s ? o(e.onChange, e.onAlphaChange) : V;
+	return /* @__PURE__ */ E(a, {
+		id: e.id,
+		className: e.className ? `${P.colorField} ${e.className}` : P.colorField,
+		value: e.mixed ? void 0 : t ? w(r.rgb, i) : e.value ?? "#000000",
+		mixed: e.mixed,
+		alpha: t,
+		alphaDisabled: e.alphaDisabled,
+		onInput: c,
+		onChange: l,
+		"aria-label": e.name
+	});
+}
+function Ee(e) {
+	let t = e.control === "inline" ? g : _;
+	return /* @__PURE__ */ E(t, {
+		className: e.className,
+		value: e.value,
+		mixed: e.mixed,
+		unset: e.unset,
+		kinds: e.kinds,
+		allowNone: e.allowNone,
+		onChange: e.onChange,
+		onInput: e.onInput,
+		"aria-label": e.name
+	});
+}
+//#endregion
+export { le as a, L as c, P as d, R as i, ue as l, ye as n, de as o, U as r, ce as s, be as t, F as u };
+
+//# sourceMappingURL=PropertyField-CWUtNK1w.js.map