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

package/dist/color-picker-amz8XfXm.js

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