@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/TokenPanel-5ajHEHha.js

@@ -0,0 +1,634 @@
+import { n as e, r as t } from "./Tooltip-9XiJF937.js";
+import { t as n } from "./Button-Dyp31jMt.js";
+import { r } from "./Disclosure-D79jhmh2.js";
+import { t as i } from "./Select-DVValBe1.js";
+import { t as a } from "./Input-Bx2cuUbS.js";
+import { n as o } from "./NumberField-C1Y7zP-a.js";
+import { t as s } from "./ToggleBar-Btnl5r7F.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { memo as d, useCallback as f, useMemo as p, useState as m } from "react";
+import { Focusable as h } from "react-aria-components";
+//#region src/components/TokenPanel/color.ts
+var g = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i, _ = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})\b/i, v = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(.+\)$/i, y = new Set([
+	"transparent",
+	"currentcolor",
+	"black",
+	"white",
+	"gray",
+	"silver",
+	"red",
+	"orange",
+	"yellow",
+	"gold",
+	"lime",
+	"green",
+	"teal",
+	"cyan",
+	"blue",
+	"navy",
+	"purple",
+	"magenta",
+	"pink",
+	"brown"
+]);
+function b() {
+	return typeof CSS < "u" && typeof CSS.supports == "function" ? (e) => CSS.supports("color", e) : null;
+}
+function x(e, t = b()) {
+	let n = e.trim();
+	return !n || n.includes("var(") ? !1 : t ? t(n) : g.test(n) || v.test(n) || y.has(n.toLowerCase());
+}
+function S(e) {
+	if (g.test(e)) {
+		let t = e.slice(1).toLowerCase();
+		return `#${t.length <= 4 ? [...t.slice(0, 3)].map((e) => e + e).join("") : t.slice(0, 6)}`;
+	}
+	let t = _.exec(e);
+	return t ? `#${t.slice(1, 4).map((e) => Math.min(255, Number(e)).toString(16).padStart(2, "0")).join("")}` : null;
+}
+var C;
+function w(e) {
+	if (C === void 0) try {
+		C = document.createElement("canvas").getContext("2d");
+	} catch {
+		C = null;
+	}
+	if (!C) return null;
+	C.fillStyle = "#000000", C.fillStyle = e;
+	let t = String(C.fillStyle);
+	return C.fillStyle = "#ffffff", C.fillStyle = e, t === String(C.fillStyle) ? t : null;
+}
+function T(e) {
+	let t = e.trim(), n = S(t);
+	if (n) return n;
+	let r = typeof document > "u" ? null : w(t);
+	return r && r !== t ? S(r) : null;
+}
+var E = {
+	panel: "_panel_j873d_1",
+	section: "_section_j873d_7",
+	sectionHead: "_sectionHead_j873d_17",
+	sectionBody: "_sectionBody_j873d_26",
+	row: "_row_j873d_33",
+	family: "_family_j873d_34",
+	name: "_name_j873d_41",
+	edit: "_edit_j873d_50",
+	field: "_field_j873d_57",
+	number: "_number_j873d_63",
+	unit: "_unit_j873d_69",
+	swatchInput: "_swatchInput_j873d_76",
+	chip: "_chip_j873d_88",
+	curve: "_curve_j873d_97",
+	strip: "_strip_j873d_105",
+	swatch: "_swatch_j873d_76",
+	scale: "_scale_j873d_137",
+	scaleHead: "_scaleHead_j873d_144",
+	steps: "_steps_j873d_151",
+	rule: "_rule_j873d_157",
+	ruleLabel: "_ruleLabel_j873d_165",
+	step: "_step_j873d_151",
+	stepLabel: "_stepLabel_j873d_183",
+	stepEdit: "_stepEdit_j873d_197",
+	tight: "_tight_j873d_216"
+}, D = (e) => Math.round(e * 100) / 100;
+function O(e, t, n) {
+	let r = n[0] ?? e.base, i = n.at(-1) ?? r, a = Math.max(1, n.length - 1);
+	switch (t) {
+		case "factors": return {
+			...e,
+			rule: {
+				kind: t,
+				factors: n.map((t) => e.base ? D(t / e.base) : 1)
+			}
+		};
+		case "ratio": return {
+			...e,
+			base: r,
+			rule: {
+				kind: t,
+				ratio: r > 0 ? D((i / r) ** (1 / a)) : 1
+			}
+		};
+		case "step": return {
+			...e,
+			base: r,
+			rule: {
+				kind: t,
+				step: D((i - r) / a)
+			}
+		};
+	}
+}
+var k = [
+	{
+		id: "color",
+		title: "Color"
+	},
+	{
+		id: "type",
+		title: "Type"
+	},
+	{
+		id: "size",
+		title: "Size"
+	},
+	{
+		id: "motion",
+		title: "Motion"
+	},
+	{
+		id: "depth",
+		title: "Depth"
+	},
+	{
+		id: "other",
+		title: "Other"
+	}
+], A = /^(?:font|tracking|leading|letter|line-height)/;
+function j(e) {
+	switch (e.type) {
+		case "color": return "color";
+		case "fontFamily":
+		case "fontWeight": return "type";
+		case "duration":
+		case "cubicBezier": return "motion";
+		case "shadow":
+		case "gradient": return "depth";
+		case "dimension":
+		case "number": return A.test(e.group) ? "type" : e.type === "number" && (e.group === "z" || e.group === "z-index") ? "depth" : "size";
+		default: return "other";
+	}
+}
+var M = String.raw`-?(?:\d+\.?\d*|\.\d+)`, N = RegExp(`^${M}(?:px|rem|em|%|ch|ex|lh|rlh|vh|vw|vmin|vmax|svh|lvh|dvh|cqw|cqh|pt|pc|cm|mm|in|q)$`, "i"), P = RegExp(`^${M}m?s$`), F = RegExp(`^${M}$`), I = RegExp(`^${M}(?:px|rem|em)?$`), L = RegExp(`^cubic-bezier\\(\\s*(${M})\\s*,\\s*(${M})\\s*,\\s*(${M})\\s*,\\s*(${M})\\s*\\)$`, "i"), R = /^(?:repeating-)?(?:linear|radial|conic)-gradient\(/i, z = /,(?![^(]*\))/, B = /[a-z-]+\([^)]*\)|\S+/gi;
+function V(e) {
+	return e.split(z).every((e) => {
+		let t = e.trim().replace(/^inset\s+/i, "").match(B) ?? [], n = t.filter((e) => I.test(e)), r = t.filter((e) => !I.test(e));
+		return n.length >= 2 && n.length <= 4 && r.length <= 1 && r.every((e) => x(e));
+	});
+}
+function H(e) {
+	let t = e.trim();
+	return t ? P.test(t) ? "duration" : N.test(t) ? "dimension" : F.test(t) ? "number" : L.test(t) ? "cubicBezier" : R.test(t) ? "gradient" : x(t) ? "color" : V(t) ? "shadow" : "string" : "string";
+}
+function U(e) {
+	let t = RegExp(`^(${M})([a-z%]*)$`, "i").exec(e.trim());
+	return t ? {
+		amount: Number(t[1]),
+		unit: t[2] ?? ""
+	} : null;
+}
+function W(e) {
+	let t = L.exec(e.trim());
+	if (!t) return null;
+	let [n, r, i, a] = t.slice(1, 5).map(Number);
+	return [
+		n,
+		r,
+		i,
+		a
+	];
+}
+//#endregion
+//#region src/components/TokenPanel/TokenPanel.tsx
+var G = [
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900"
+], K = {
+	maximumFractionDigits: 4,
+	useGrouping: !1
+}, q = new Set([
+	"dimension",
+	"duration",
+	"number"
+]);
+function J(e) {
+	return e.type === "color" ? "family" : q.has(e.type) && U(e.value) ? "scale" : null;
+}
+function Y(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let e = J(t);
+		e && n.set(`${e}:${t.group}`, (n.get(`${e}:${t.group}`) ?? 0) + 1);
+	}
+	let r = /* @__PURE__ */ new Map(), i = [];
+	for (let a of e) {
+		let e = J(a), o = `${e}:${a.group}`;
+		if (!e || (n.get(o) ?? 0) < t) {
+			i.push({
+				kind: "row",
+				token: a
+			});
+			continue;
+		}
+		let s = r.get(o);
+		s || (s = {
+			kind: e,
+			group: a.group,
+			tokens: []
+		}, r.set(o, s), i.push(s)), s.tokens.push(a);
+	}
+	return i;
+}
+function X(e) {
+	let t = e.map((e) => e.replace(/^--/, "").split("-")), n = 0;
+	for (; t.every((e) => e.length > n && e[n] === t[0]?.[n]);) n++;
+	return t.map((e) => e.slice(n).join("-") || (e.at(-1) ?? ""));
+}
+function Z({ points: e, label: t }) {
+	let [n, r, i, a] = e, o = Math.min(0, 1 - r, 1 - a), s = Math.max(1, 1 - r, 1 - a);
+	return /* @__PURE__ */ l("svg", {
+		className: E.curve,
+		viewBox: `-0.1 ${o - .1} 1.2 ${s - o + .2}`,
+		role: "img",
+		"aria-label": t,
+		children: /* @__PURE__ */ l("path", {
+			d: `M0 1 C${n} ${1 - r} ${i} ${1 - a} 1 0`,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: .08
+		})
+	});
+}
+function Q({ token: e, set: t }) {
+	let { name: n, type: r, value: s } = e, d = `${n} value`, f = p(() => r === "color" ? T(s) : null, [r, s]);
+	if (r === "dimension" || r === "duration" || r === "number") {
+		let e = U(s);
+		if (e) return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, {
+			className: E.number,
+			"aria-label": d,
+			value: e.amount,
+			hideSteppers: !0,
+			formatOptions: K,
+			onChange: (n) => {
+				Number.isFinite(n) && t(`${n}${e.unit}`);
+			}
+		}), e.unit ? /* @__PURE__ */ l("span", {
+			className: E.unit,
+			children: e.unit
+		}) : null] });
+	}
+	if (r === "fontWeight") return /* @__PURE__ */ l(i, {
+		"aria-label": n,
+		width: "fit",
+		selectedKey: s,
+		options: (G.includes(s) ? G : [...G, s]).map((e) => ({
+			value: e,
+			label: e
+		})),
+		onSelectionChange: t
+	});
+	let m = r === "cubicBezier" ? W(s) : null;
+	return /* @__PURE__ */ u(c, { children: [m ? /* @__PURE__ */ l(Z, {
+		points: m,
+		label: `${n} curve`
+	}) : null, /* @__PURE__ */ l(a, {
+		className: E.field,
+		"aria-label": d,
+		value: s,
+		onChange: t,
+		leadingAdornment: r === "color" ? f ? /* @__PURE__ */ l("input", {
+			type: "color",
+			className: E.swatchInput,
+			"aria-label": `${n} color`,
+			value: f,
+			onChange: (e) => t(e.target.value)
+		}) : /* @__PURE__ */ l("span", {
+			className: E.chip,
+			style: { "--token-color": s },
+			"aria-hidden": "true"
+		}) : void 0
+	})] });
+}
+var $ = d(function({ token: e, onChange: t }) {
+	let r = f((n) => t(e.name, n), [t, e.name]);
+	return /* @__PURE__ */ u("div", {
+		className: E.row,
+		role: "group",
+		"aria-label": e.name,
+		children: [/* @__PURE__ */ l("span", {
+			className: E.name,
+			title: e.description || e.name,
+			children: e.name
+		}), /* @__PURE__ */ u("div", {
+			className: E.edit,
+			children: [/* @__PURE__ */ l(Q, {
+				token: e,
+				set: r
+			}), e.overridden ? /* @__PURE__ */ l(n, {
+				variant: "ghost",
+				size: "sm",
+				ariaLabel: `Reset ${e.name}`,
+				onClick: () => t(e.name, null),
+				children: "Reset"
+			}) : null]
+		})]
+	});
+}, (e, t) => e.onChange === t.onChange && e.token.name === t.token.name && e.token.type === t.token.type && e.token.value === t.token.value && e.token.overridden === t.token.overridden && e.token.description === t.token.description);
+function ee({ group: n, tokens: r, onChange: i }) {
+	let [a, o] = m(null), s = r.find((e) => e.name === a) ?? null;
+	return /* @__PURE__ */ u("div", {
+		className: E.family,
+		role: "group",
+		"aria-label": n,
+		children: [
+			/* @__PURE__ */ l("span", {
+				className: E.name,
+				children: n
+			}),
+			/* @__PURE__ */ l("div", {
+				className: E.strip,
+				children: r.map((n) => /* @__PURE__ */ u(t, {
+					delay: 0,
+					children: [/* @__PURE__ */ l(h, { children: /* @__PURE__ */ l("button", {
+						type: "button",
+						className: E.swatch,
+						style: { "--token-color": n.value },
+						"aria-label": n.name,
+						"aria-pressed": n.name === a,
+						"data-overridden": n.overridden ? "" : void 0,
+						onClick: () => o((e) => e === n.name ? null : n.name)
+					}) }), /* @__PURE__ */ l(e, { children: n.name })]
+				}, n.name))
+			}),
+			s ? /* @__PURE__ */ l($, {
+				token: s,
+				onChange: i
+			}) : null
+		]
+	});
+}
+function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorChange: a }) {
+	let s = U(e.value);
+	return s ? /* @__PURE__ */ u("div", {
+		className: E.step,
+		title: e.description || e.name,
+		"data-overridden": e.overridden ? "" : void 0,
+		children: [
+			/* @__PURE__ */ l("span", {
+				className: E.stepLabel,
+				children: t
+			}),
+			/* @__PURE__ */ u("span", {
+				className: E.stepEdit,
+				children: [/* @__PURE__ */ l(o, {
+					className: E.number,
+					"aria-label": `${e.name} value`,
+					value: s.amount,
+					hideSteppers: !0,
+					formatOptions: K,
+					onChange: (t) => {
+						Number.isFinite(t) && i(e.name, `${t}${s.unit}`);
+					}
+				}), n && s.unit ? /* @__PURE__ */ l("span", {
+					className: E.unit,
+					children: s.unit
+				}) : null]
+			}),
+			r !== void 0 && a ? /* @__PURE__ */ u("span", {
+				className: E.stepEdit,
+				children: [/* @__PURE__ */ l("span", {
+					className: E.unit,
+					children: "×"
+				}), /* @__PURE__ */ l(o, {
+					className: E.number,
+					"aria-label": `${e.name} factor`,
+					value: r,
+					hideSteppers: !0,
+					formatOptions: K,
+					onChange: (e) => {
+						Number.isFinite(e) && a(e);
+					}
+				})]
+			}) : null
+		]
+	}) : null;
+}
+var ne = [
+	{
+		value: "factors",
+		label: "each",
+		ariaLabel: "factors"
+	},
+	{
+		value: "ratio",
+		label: "ratio"
+	},
+	{
+		value: "step",
+		label: "step"
+	}
+];
+function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: i }) {
+	let { rule: a } = t, c = a.kind === "ratio" ? {
+		key: "ratio",
+		value: a.ratio
+	} : a.kind === "step" ? {
+		key: "step",
+		value: a.step
+	} : null;
+	return /* @__PURE__ */ u("div", {
+		className: E.rule,
+		children: [
+			/* @__PURE__ */ u("span", {
+				className: E.stepEdit,
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: E.ruleLabel,
+						children: "base"
+					}),
+					/* @__PURE__ */ l(o, {
+						className: E.number,
+						"aria-label": `${e} base`,
+						value: t.base,
+						hideSteppers: !0,
+						formatOptions: K,
+						onChange: (e) => {
+							Number.isFinite(e) && i({
+								...t,
+								base: e
+							});
+						}
+					}),
+					n ? /* @__PURE__ */ l("span", {
+						className: E.unit,
+						children: n
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ l(s, {
+				ariaLabel: `${e} rule`,
+				size: "sm",
+				items: ne,
+				value: a.kind,
+				onChange: (e) => {
+					e && e !== a.kind && i(O(t, e, r));
+				}
+			}),
+			c ? /* @__PURE__ */ u("span", {
+				className: E.stepEdit,
+				children: [c.key === "ratio" ? /* @__PURE__ */ l("span", {
+					className: E.unit,
+					children: "×"
+				}) : /* @__PURE__ */ l("span", {
+					className: E.unit,
+					children: "+"
+				}), /* @__PURE__ */ l(o, {
+					className: E.number,
+					"aria-label": `${e} ${c.key}`,
+					value: c.value,
+					hideSteppers: !0,
+					formatOptions: K,
+					onChange: (e) => {
+						Number.isFinite(e) && i({
+							...t,
+							rule: {
+								kind: c.key,
+								[c.key]: e
+							}
+						});
+					}
+				})]
+			}) : null
+		]
+	});
+}
+function ie({ group: e, tokens: t, generator: r, onChange: i, onScaleChange: a }) {
+	let o = p(() => X(t.map((e) => e.name)), [t]), s = new Set(t.map((e) => U(e.value)?.unit ?? "")), c = s.size === 1 ? [...s][0] : null, d = t.filter((e) => e.overridden);
+	return /* @__PURE__ */ u("div", {
+		className: E.scale,
+		role: "group",
+		"aria-label": e,
+		children: [
+			/* @__PURE__ */ u("span", {
+				className: E.scaleHead,
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: E.name,
+						children: e
+					}),
+					c ? /* @__PURE__ */ l("span", {
+						className: E.unit,
+						children: c
+					}) : null,
+					d.length > 0 ? /* @__PURE__ */ l(n, {
+						variant: "ghost",
+						size: "sm",
+						ariaLabel: `Reset ${e}`,
+						onClick: () => {
+							for (let e of d) i(e.name, null);
+						},
+						children: "Reset"
+					}) : null
+				]
+			}),
+			r && a ? /* @__PURE__ */ l(re, {
+				group: e,
+				scale: r,
+				unit: c ?? "",
+				amounts: r.tokens.map((e) => U(t.find((t) => t.name === e)?.value ?? "")?.amount ?? r.base),
+				onScaleChange: (t) => a(e, t)
+			}) : null,
+			/* @__PURE__ */ l("div", {
+				className: E.steps,
+				children: t.map((t, n) => {
+					let s = r?.rule, u = r ? r.tokens.indexOf(t.name) : -1, d = s?.kind === "factors" && u >= 0 ? s.factors[u] : void 0;
+					return /* @__PURE__ */ l(te, {
+						token: t,
+						label: o[n] ?? t.name,
+						showUnit: c === null,
+						factor: d,
+						onChange: i,
+						onFactorChange: r && a && s?.kind === "factors" ? (t) => a(e, {
+							...r,
+							rule: {
+								kind: "factors",
+								factors: s.factors.map((e, n) => n === u ? t : e)
+							}
+						}) : void 0
+					}, t.name);
+				})
+			})
+		]
+	});
+}
+function ae({ title: e, open: t, onToggle: n, tokens: i, familySize: a, scales: o, onChange: s, onScaleChange: c }) {
+	let d = p(() => Y(i, a), [i, a]);
+	return /* @__PURE__ */ u("section", {
+		className: E.section,
+		"aria-label": e,
+		children: [/* @__PURE__ */ l(r, {
+			className: E.sectionHead,
+			open: t,
+			onToggle: n,
+			label: e,
+			children: /* @__PURE__ */ l("span", {
+				"aria-hidden": "true",
+				children: e
+			})
+		}), t ? /* @__PURE__ */ l("div", {
+			className: E.sectionBody,
+			children: d.map((e) => e.kind === "row" ? /* @__PURE__ */ l($, {
+				token: e.token,
+				onChange: s
+			}, e.token.name) : e.kind === "scale" ? /* @__PURE__ */ l(ie, {
+				group: e.group,
+				tokens: e.tokens,
+				generator: o?.[e.group],
+				onChange: s,
+				onScaleChange: c
+			}, `scale:${e.group}`) : /* @__PURE__ */ l(ee, {
+				group: e.group,
+				tokens: e.tokens,
+				onChange: s
+			}, `family:${e.group}`))
+		}) : null]
+	});
+}
+function oe({ tokens: e, onChange: t, collapsed: n, onCollapsedChange: r, scales: i, onScaleChange: a, categorize: o = j, familySize: s = 3, density: c = "normal", className: u }) {
+	let [d, f] = m({}), h = n ?? d, g = p(() => {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = o(n);
+			t.set(e, [...t.get(e) ?? [], n]);
+		}
+		return t;
+	}, [e, o]);
+	return /* @__PURE__ */ l("div", {
+		className: [
+			E.panel,
+			c === "tight" && E.tight,
+			u
+		].filter(Boolean).join(" "),
+		children: k.map(({ id: e, title: o }) => {
+			let c = g.get(e);
+			if (!c) return null;
+			let u = !h[e];
+			return /* @__PURE__ */ l(ae, {
+				title: o,
+				open: u,
+				onToggle: () => {
+					n === void 0 && f((t) => ({
+						...t,
+						[e]: u
+					})), r?.(e, u);
+				},
+				tokens: c,
+				familySize: s,
+				scales: i,
+				onChange: t,
+				onScaleChange: a
+			}, e);
+		})
+	});
+}
+//#endregion
+export { j as a, O as i, k as n, H as r, oe as t };
+
+//# sourceMappingURL=TokenPanel-5ajHEHha.js.map