@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/color-picker-BlPR4g4H.js

@@ -0,0 +1,504 @@
+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-BQej6eU9.js";
+import { r as s } from "./i18n-DpW8lqJ1.js";
+import { b as c } from "./field-BJh5HI7w.js";
+import { t as l } from "./text-field-BktZbmzD.js";
+import { a as u, d, f, l as p, r as m, t as h } from "./popover-DE22lSpV.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 };

package/dist/color-picker.js

@@ -0,0 +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-BlPR4g4H.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 };