@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/color-picker-BwN0Z-6T.js

@@ -0,0 +1,506 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { _ as n, h as r, m as i, n as a, t as o } from "./menu-parts-Dsszga3r.js";
+import { r as s } from "./i18n-DpW8lqJ1.js";
+import { b as c } from "./field-DKA-qsCV.js";
+import { t as l } from "./text-field-8YqMC2pD.js";
+import { a as u, d, f, l as p, r as m, t as h } from "./popover-Dwj841Zz.js";
+import { withSelectorKey as g } from "@slotted/core/selector-key";
+import { createControllable as _ } from "@slotted/core/state";
+import { createContext as v, useContext as y, useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { colorPickerMessages as D } from "@slotted/core/i18n";
+import { COLOR_FORMATS as O, clampToGamut as k, contrastLevel as A, contrastRatio as j, formatColor as M, hsvaToRgba as N, parseColor as P, rgbaToHsva as F, toCss as I } from "@slotted/core/color";
+//#region src/color-picker/color-picker-defaults.tsx
+var L = v({
+	format: "hex",
+	presets: void 0,
+	size: "md"
+});
+function R() {
+	return y(L);
+}
+function z({ children: e, ...t }) {
+	let n = { ...R() };
+	for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = r);
+	return /* @__PURE__ */ T(L.Provider, {
+		value: n,
+		children: e
+	});
+}
+//#endregion
+//#region src/color-picker/color-picker.tsx
+var B = "#000000", V = (e, t, n) => Math.min(n, Math.max(t, e));
+function H(e, t) {
+	let n = P(e), r = P(t);
+	return n === null || r === null ? !1 : M(n.rgba, "hex") === M(r.rgba, "hex");
+}
+function U(e) {
+	return e !== null && getComputedStyle(e).direction === "rtl";
+}
+function W(e, t) {
+	let { alpha: n = !0, defaultFormat: r, defaultValue: i, format: a, onFormatChange: o, onValueChange: s, value: c } = e, [l, u] = C(i ?? B), d = c ?? l, f = x(() => P(d), [d]), [p, m] = C(() => r ?? P(c ?? i ?? "")?.format ?? t.format), h = a ?? p, g = S({
+		h: 0,
+		s: 0
+	}), v = x(() => {
+		let e = F(k(f?.rgba ?? {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 1
+		}));
+		return e.v === 0 ? e.s = g.current.s : g.current.s = e.s, e.s === 0 || e.v === 0 ? e.h = g.current.h : g.current.h = e.h, e;
+	}, [f]), y = (e, t, n) => {
+		_({
+			controlled: c,
+			initial: d,
+			onRequest: (e) => s?.(e.value, e)
+		}).request(e, t, n) && u(e);
+	};
+	return {
+		alpha: n,
+		format: h,
+		hsva: v,
+		parsed: f,
+		value: d,
+		requestValue: y,
+		requestHsva: (e, t, r) => {
+			g.current = {
+				h: e.h,
+				s: e.s
+			};
+			let i = N({
+				...e,
+				a: n ? e.a : 1
+			});
+			y(M(i, h), t, r);
+		},
+		requestFormat: (e, t, n = !0) => {
+			_({
+				controlled: a,
+				initial: h,
+				onRequest: (e) => o?.(e.value, e)
+			}).request(e, "select", t) && a === void 0 && m(e), n && f !== null && y(M(f.rgba, e), "select", t);
+		}
+	};
+}
+var G = v(null);
+function K(e) {
+	let t = y(G);
+	if (t === null) throw Error(`ColorPicker${e} must sit inside a ColorPicker`);
+	return t;
+}
+function q(e, t) {
+	let n = t.getBoundingClientRect(), r = V((e.clientX - n.left) / n.width, 0, 1), i = V((e.clientY - n.top) / n.height, 0, 1);
+	return {
+		x: U(t) ? 1 - r : r,
+		y: i
+	};
+}
+function J(e) {
+	let [t, n] = C(!1);
+	return {
+		dragging: t,
+		handlers: {
+			onPointerDown: (t) => {
+				if (t.button !== 0) return;
+				let r = t.currentTarget;
+				r.setPointerCapture(t.pointerId), n(!0), e(t, r), r.querySelector("[role=\"slider\"]")?.focus({ preventScroll: !0 });
+			},
+			onPointerMove: (n) => {
+				t && e(n, n.currentTarget);
+			},
+			onPointerUp: () => n(!1),
+			onPointerCancel: () => n(!1)
+		}
+	};
+}
+function Y(e, t, n, r) {
+	let i = e.shiftKey ? r : n;
+	switch (e.key) {
+		case "ArrowRight": return t ? -i : i;
+		case "ArrowLeft": return t ? i : -i;
+		case "ArrowUp": return i;
+		case "ArrowDown": return -i;
+		case "PageUp": return r;
+		case "PageDown": return -r;
+		default: return null;
+	}
+}
+var X = (e) => `${Math.round(e * 100)} %`;
+function Z({ onKeyDown: e, ...t }) {
+	let n = K("Area"), { hsva: r } = n, i = n.disabled || n.readOnly, { dragging: a, handlers: o } = J((e, t) => {
+		if (i) return;
+		let { x: a, y: o } = q(e, t);
+		n.requestHsva({
+			...r,
+			s: a,
+			v: 1 - o
+		}, "pointer", e.nativeEvent);
+	});
+	return /* @__PURE__ */ T("div", {
+		...t,
+		...g(i ? {} : o, "part", "area"),
+		"data-dragging": a ? "" : void 0,
+		children: /* @__PURE__ */ T("div", {
+			"aria-disabled": n.disabled || void 0,
+			"aria-label": n.t("area"),
+			"aria-roledescription": n.t("areaRoleDescription"),
+			"aria-valuetext": `${X(r.s)}, ${X(r.v)}`,
+			"data-part": "area-thumb",
+			"data-part-area-thumb": "",
+			onKeyDown: (t) => {
+				if (e?.(t), i) return;
+				let a = U(t.currentTarget), o = t.key === "ArrowLeft" || t.key === "ArrowRight", s = Y(t, a, .01, .1);
+				if (s === null) return;
+				t.preventDefault();
+				let c = o ? {
+					...r,
+					s: V(r.s + s, 0, 1)
+				} : {
+					...r,
+					v: V(r.v + s, 0, 1)
+				};
+				n.requestHsva(c, "keyboard", t.nativeEvent);
+			},
+			role: "slider",
+			tabIndex: n.disabled ? -1 : 0
+		})
+	});
+}
+function Q({ channel: e, ...t }) {
+	let n = K("Channel"), { hsva: r, t: i } = n, a = n.disabled || n.readOnly, o = e === "hue", s = o ? 360 : 1, c = o ? r.h : r.a, l = (e, t, i) => n.requestHsva({
+		...r,
+		[o ? "h" : "a"]: V(e, 0, s)
+	}, t, i), { dragging: u, handlers: d } = J((e, t) => {
+		a || l(q(e, t).x * s, "pointer", e.nativeEvent);
+	});
+	return /* @__PURE__ */ T("div", {
+		...t,
+		...g(a ? {} : d, "part", "channel"),
+		"data-channel": e,
+		"data-dragging": u ? "" : void 0,
+		children: /* @__PURE__ */ T("div", {
+			"aria-disabled": n.disabled || void 0,
+			"aria-label": i(o ? "hue" : "alpha"),
+			"aria-valuemax": o ? 360 : 100,
+			"aria-valuemin": 0,
+			"aria-valuenow": Math.round(o ? c : c * 100),
+			"aria-valuetext": o ? `${Math.round(c)}°` : X(c),
+			"data-channel": e,
+			"data-part": "channel-thumb",
+			"data-part-channel-thumb": "",
+			onKeyDown: (e) => {
+				if (a) return;
+				if (e.key === "Home" || e.key === "End") {
+					e.preventDefault(), l(e.key === "Home" ? 0 : s, "keyboard", e.nativeEvent);
+					return;
+				}
+				let t = Y(e, U(e.currentTarget), o ? 1 : .01, o ? 10 : .1);
+				t !== null && (e.preventDefault(), l(c + t, "keyboard", e.nativeEvent));
+			},
+			role: "slider",
+			tabIndex: n.disabled ? -1 : 0
+		})
+	});
+}
+function $(n) {
+	let r = K("Swatch");
+	return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("span", {
+		...g(n, "part", "swatch"),
+		"aria-label": r.value,
+		role: "img"
+	}), /* @__PURE__ */ T("button", {
+		"aria-label": r.t("previous", { color: r.previous }),
+		"data-part": "previous",
+		"data-part-previous": "",
+		disabled: r.disabled || r.readOnly,
+		onClick: (e) => r.requestValue(r.previous, "select", e.nativeEvent),
+		type: "button",
+		children: /* @__PURE__ */ T(t, { children: /* @__PURE__ */ T(e, { name: "rotate-ccw" }) })
+	})] });
+}
+function ee(e) {
+	let t = K("Input"), [n, r] = C(null), i = n ?? t.value, a = n !== null && P(n) === null || t.invalid, o = (e) => {
+		if (n === null) return;
+		let i = P(n);
+		i !== null && !H(n, t.value) && t.requestValue(M(i.rgba, t.format), "keyboard", e), r(null);
+	};
+	return /* @__PURE__ */ T("div", {
+		...g(e, "part", "root"),
+		"data-disabled": t.disabled ? "" : void 0,
+		"data-invalid": a ? "" : void 0,
+		"data-mono": "",
+		"data-readonly": t.readOnly ? "" : void 0,
+		"data-size": "sm",
+		"data-ui": "text-field",
+		"data-ui-text-field": "",
+		"data-variant": "outline",
+		children: /* @__PURE__ */ T("input", {
+			"aria-invalid": a ? !0 : void 0,
+			"aria-label": t.t("input"),
+			autoComplete: "off",
+			"data-part": "input",
+			"data-part-input": "",
+			dir: "ltr",
+			disabled: t.disabled,
+			onBlur: (e) => o(e.nativeEvent),
+			onChange: (e) => r(e.currentTarget.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (e.preventDefault(), o(e.nativeEvent)) : e.key === "Escape" && n !== null && (e.stopPropagation(), r(null));
+			},
+			readOnly: t.readOnly,
+			spellCheck: !1,
+			value: i
+		})
+	});
+}
+function te() {
+	let s = K("Format");
+	return /* @__PURE__ */ E(n, { children: [/* @__PURE__ */ T(a, { render: (n) => /* @__PURE__ */ E("button", {
+		...g(n, "part", "format"),
+		"aria-label": s.t("format", { format: s.format }),
+		disabled: s.disabled || s.readOnly,
+		children: [s.format, /* @__PURE__ */ T(t, { children: /* @__PURE__ */ T(e, { name: "chevron-down" }) })]
+	}) }), /* @__PURE__ */ T(o, { children: /* @__PURE__ */ T(i, {
+		onValueChange: (e, t) => s.requestFormat(e, t.source),
+		value: s.format,
+		children: O.map((e) => /* @__PURE__ */ T(r, {
+			value: e,
+			children: e.toUpperCase()
+		}, e))
+	}) })] });
+}
+function ne() {
+	let n = K("Eyedropper"), [r, i] = C(!1);
+	return b(() => i(typeof window < "u" && "EyeDropper" in window), []), r ? /* @__PURE__ */ T("button", {
+		"aria-label": n.t("eyedropper"),
+		"data-part": "eyedropper",
+		"data-part-eyedropper": "",
+		disabled: n.disabled || n.readOnly,
+		onClick: async (e) => {
+			let t = window.EyeDropper;
+			try {
+				let { sRGBHex: r } = await new t().open(), i = P(r);
+				i !== null && n.requestValue(M(i.rgba, n.format), "programmatic", e.nativeEvent);
+			} catch {}
+		},
+		type: "button",
+		children: /* @__PURE__ */ T(t, { children: /* @__PURE__ */ T(e, { name: "pipette" }) })
+	}) : null;
+}
+function re({ children: e, ...t }) {
+	return /* @__PURE__ */ T("div", {
+		...g(t, "part", "row"),
+		children: e ?? /* @__PURE__ */ E(w, { children: [
+			/* @__PURE__ */ T($, {}),
+			/* @__PURE__ */ T(ee, {}),
+			/* @__PURE__ */ T(te, {}),
+			/* @__PURE__ */ T(ne, {})
+		] })
+	});
+}
+function ie(e) {
+	let t = K("Presets"), n = t.presets ?? [];
+	if (n.length === 0) return null;
+	let r = n.findIndex((e) => H(e, t.value)), i = t.disabled || t.readOnly, a = (e, n) => {
+		let r = P(e);
+		r !== null && t.requestValue(M(r.rgba, t.format), "select", n);
+	};
+	return /* @__PURE__ */ T("div", {
+		...g(e, "part", "presets"),
+		"aria-label": t.t("presets"),
+		role: "radiogroup",
+		children: n.map((e, t) => /* @__PURE__ */ T("button", {
+			"aria-checked": t === r,
+			"aria-label": e,
+			"data-part": "preset",
+			"data-part-preset": "",
+			"data-selected": t === r ? "" : void 0,
+			disabled: i,
+			onClick: (t) => a(e, t.nativeEvent),
+			onKeyDown: (e) => {
+				let r = U(e.currentTarget), i = e.key === (r ? "ArrowLeft" : "ArrowRight") || e.key === "ArrowDown", o = e.key === (r ? "ArrowRight" : "ArrowLeft") || e.key === "ArrowUp";
+				if (!i && !o) return;
+				e.preventDefault();
+				let s = (t + (i ? 1 : -1) + n.length) % n.length;
+				(e.currentTarget.parentElement?.children[s])?.focus(), a(n[s], e.nativeEvent);
+			},
+			role: "radio",
+			style: { "--slotted-color-picker-preset": e },
+			tabIndex: t === (r === -1 ? 0 : r) ? 0 : -1,
+			type: "button"
+		}, e))
+	});
+}
+var ae = {
+	AAA: "contrastLevels.AAA",
+	AA: "contrastLevels.AA",
+	"AA-large": "contrastLevels.AALarge",
+	fail: "contrastLevels.fail"
+};
+function oe(e) {
+	let t = K("Contrast"), n = t.contrastWith === void 0 ? null : P(t.contrastWith);
+	if (n === null || t.parsed === null) return null;
+	let r = j(t.parsed.rgba, n.rgba), i = A(r);
+	return /* @__PURE__ */ E("div", {
+		...g(e, "part", "contrast"),
+		"aria-live": "polite",
+		"data-level": i,
+		children: [
+			/* @__PURE__ */ T("span", {
+				"aria-hidden": "true",
+				"data-part": "contrast-sample",
+				"data-part-contrast-sample": "",
+				children: t.t("contrastSample")
+			}),
+			/* @__PURE__ */ E("span", {
+				"data-part": "contrast-ratio",
+				"data-part-contrast-ratio": "",
+				children: [r.toFixed(2), ":1"]
+			}),
+			/* @__PURE__ */ T("span", {
+				"data-part": "contrast-level",
+				"data-part-contrast-level": "",
+				children: t.t(ae[i])
+			})
+		]
+	});
+}
+function se(n) {
+	let r = K("Gamut");
+	return r.parsed === null || r.parsed.inGamut ? null : /* @__PURE__ */ E("p", {
+		...g(n, "part", "gamut"),
+		role: "status",
+		children: [/* @__PURE__ */ T(t, { children: /* @__PURE__ */ T(e, { name: "circle-alert" }) }), r.t("gamut")]
+	});
+}
+function ce({ alpha: e, children: t, contrastWith: n, defaultFormat: r, defaultValue: i, disabled: a, format: o, invalid: l, messages: u, onFormatChange: d, onValueChange: f, presets: p, readOnly: m, size: h, style: _, value: v, ...y }) {
+	let b = R(), x = s(D, u), S = c(), O = W({
+		alpha: e,
+		defaultFormat: r,
+		defaultValue: i,
+		format: o,
+		onFormatChange: d,
+		onValueChange: f,
+		value: v
+	}, b), [A] = C(() => O.value), j = a ?? S?.disabled ?? !1, M = m ?? S?.readOnly ?? !1, N = l ?? S?.invalid, F = k(O.parsed?.rgba ?? {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	}), L = n === void 0 ? null : P(n), z = {
+		"--slotted-color-picker-color": I(F),
+		"--slotted-color-picker-opaque": I(F, !0),
+		"--slotted-color-picker-hue": O.hsva.h,
+		"--slotted-color-picker-x": O.hsva.s,
+		"--slotted-color-picker-y": O.hsva.v,
+		"--slotted-color-picker-alpha": O.hsva.a,
+		"--slotted-color-picker-previous": I(P(A)?.rgba ?? F),
+		...L === null ? {} : { "--slotted-color-picker-contrast-with": I(L.rgba) }
+	}, B = {
+		...O,
+		contrastWith: n,
+		disabled: j,
+		invalid: N === !0,
+		presets: p ?? b.presets,
+		previous: A,
+		readOnly: M,
+		t: x
+	};
+	return /* @__PURE__ */ T(G.Provider, {
+		value: B,
+		children: /* @__PURE__ */ T("div", {
+			...g(y, "part", "root"),
+			"data-disabled": j ? "" : void 0,
+			"data-format": O.format,
+			"data-invalid": N === !0 ? "" : void 0,
+			"data-out-of-gamut": O.parsed !== null && !O.parsed.inGamut ? "" : void 0,
+			"data-readonly": M ? "" : void 0,
+			"data-size": h ?? S?.size ?? b.size,
+			"data-ui": "color-picker",
+			"data-ui-color-picker": "",
+			style: {
+				...z,
+				..._
+			},
+			children: t ?? /* @__PURE__ */ E(w, { children: [
+				/* @__PURE__ */ T(Z, {}),
+				/* @__PURE__ */ T(Q, { channel: "hue" }),
+				O.alpha ? /* @__PURE__ */ T(Q, { channel: "alpha" }) : null,
+				/* @__PURE__ */ T(re, {}),
+				/* @__PURE__ */ T(se, {}),
+				/* @__PURE__ */ T(ie, {}),
+				/* @__PURE__ */ T(oe, {})
+			] })
+		})
+	});
+}
+function le({ alpha: e, children: t, contrastWith: n, defaultFormat: r, defaultOpen: i, defaultValue: a, format: o, messages: c, onBlur: _, onFormatChange: v, onKeyDown: y, onOpenChange: b, onValueChange: x, open: S, presets: w, size: O, value: A, ...j }) {
+	let N = R(), F = s(D, c), L = W({
+		alpha: e,
+		defaultFormat: r,
+		defaultValue: a,
+		format: o,
+		onFormatChange: v,
+		onValueChange: x,
+		value: A
+	}, N), [z, B] = C(null), [V, U] = C(0), G = k(L.parsed?.rgba ?? {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	}), K = z === null || P(z) !== null, q = (e) => {
+		if (z === null) return;
+		let t = P(z);
+		t !== null && !H(z, L.value) && L.requestValue(M(t.rgba, L.format), "keyboard", e), B(null);
+	};
+	return /* @__PURE__ */ E(f, {
+		align: "start",
+		side: "bottom",
+		...S === void 0 ? {} : { open: S },
+		...i === void 0 ? {} : { defaultOpen: i },
+		onOpenChange: (e, t) => {
+			e && U((e) => e + 1), b?.(e, t);
+		},
+		children: [/* @__PURE__ */ T(h, { children: /* @__PURE__ */ T(l, {
+			...j,
+			dir: "ltr",
+			invalid: j.invalid ?? (!K || void 0),
+			mono: !0,
+			onBlur: (e) => {
+				_?.(e), q(e.nativeEvent);
+			},
+			onKeyDown: (e) => {
+				y?.(e), e.key === "Enter" && (e.preventDefault(), q(e.nativeEvent));
+			},
+			onValueChange: (e) => B(e),
+			...O === void 0 ? {} : { size: O },
+			spellCheck: !1,
+			start: /* @__PURE__ */ T(d, { render: (e) => /* @__PURE__ */ T("button", {
+				...g(e, "part", "trigger"),
+				"aria-label": F("trigger"),
+				"data-ui": "color-picker",
+				"data-ui-color-picker": "",
+				disabled: j.disabled,
+				style: { "--slotted-color-picker-color": I(G) },
+				type: "button"
+			}) }),
+			value: z ?? L.value
+		}) }), /* @__PURE__ */ T(p, { children: /* @__PURE__ */ T(u, {
+			"aria-label": F("trigger"),
+			children: /* @__PURE__ */ T(m, { children: /* @__PURE__ */ T(ce, {
+				alpha: L.alpha,
+				contrastWith: n,
+				format: L.format,
+				messages: c,
+				onFormatChange: (e, t) => L.requestFormat(e, t.source, !1),
+				onValueChange: (e, t) => L.requestValue(e, t.reason, t.source),
+				presets: w,
+				value: L.value,
+				children: t
+			}, V) })
+		}) })]
+	});
+}
+//#endregion
+export { oe as a, se as c, re as d, $ as f, Q as i, ee as l, R as m, ce as n, ne as o, z as p, Z as r, te as s, le as t, ie as u };

package/dist/color-picker.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./color-picker-amz8XfXm.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "./color-picker-BwN0Z-6T.js";
 export { f as ColorField, s as ColorPicker, u as ColorPickerArea, i as ColorPickerChannel, e as ColorPickerContrast, l as ColorPickerDefaultsProvider, c as ColorPickerEyedropper, d as ColorPickerFormat, t as ColorPickerGamut, a as ColorPickerInput, p as ColorPickerPresets, n as ColorPickerRow, r as ColorPickerSwatch, o as useColorPickerDefaults };