@forte-ui/react 1.0.0-alpha.1

package/dist/ColorPicker-B-eCI31W.js

@@ -0,0 +1,612 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Select-BP-zvdXm.js";
+import { t as n } from "./Popover-BXhn2Wwt.js";
+import { DEFAULT_SWATCHES as r, formatColor as i, hsvaToRgba as a, onColor as o, parseColor as s, sameColor as c, toCssColor as l } from "./components/color-picker/color.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Slider as p } from "@base-ui/react/slider";
+import './styles/ColorPicker.css';var m = {
+	popup: "_popup_eoqpp_55",
+	panel: "_panel_eoqpp_68",
+	standalonePanel: "_standalonePanel_eoqpp_165",
+	row: "_row_eoqpp_182",
+	area: "_area_eoqpp_207",
+	areaThumb: "_areaThumb_eoqpp_245",
+	srOnly: "_srOnly_eoqpp_295",
+	rail: "_rail_eoqpp_314",
+	railControl: "_railControl_eoqpp_319",
+	hueTrack: "_hueTrack_eoqpp_339",
+	alphaTrack: "_alphaTrack_eoqpp_340",
+	railThumb: "_railThumb_eoqpp_400",
+	swatches: "_swatches_eoqpp_458",
+	swatch: "_swatch_eoqpp_458",
+	swatchTick: "_swatchTick_eoqpp_509",
+	preview: "_preview_eoqpp_521",
+	value: "_value_eoqpp_545",
+	format: "_format_eoqpp_563",
+	input: "_input_eoqpp_576",
+	eyeDropper: "_eyeDropper_eoqpp_613",
+	eyeDropperIcon: "_eyeDropperIcon_eoqpp_644",
+	trigger: "_trigger_eoqpp_657",
+	triggerSwatch: "_triggerSwatch_eoqpp_725"
+}, h = (e, t, n) => e < t ? t : e > n ? n : e, g = [
+	"hex",
+	"rgb",
+	"hsl",
+	"oklch"
+], _ = {
+	hex: "HEX",
+	rgb: "RGB",
+	hsl: "HSL",
+	oklch: "OKLCH"
+}, v = u.createContext(null);
+function y(e) {
+	let t = u.useContext(v);
+	if (!t) throw Error(`<ColorPicker.${e}> must be rendered inside <ColorPicker.Root>.`);
+	return t;
+}
+function b(e) {
+	let { css: t, solid: n, hsva: r, rgba: i } = e;
+	return u.useMemo(() => ({
+		"--forte-color-picker-color": t,
+		"--forte-color-picker-solid": n,
+		"--forte-color-picker-hue": String(Math.round(r.h * 100) / 100),
+		"--forte-color-picker-on-color": o(i)
+	}), [
+		t,
+		n,
+		r.h,
+		i
+	]);
+}
+function x({ value: e, defaultValue: t = "#000000", onValueChange: r, onValueCommitted: o, format: c, defaultFormat: f = "hex", onFormatChange: p, formats: m = g, disabled: h = !1, defaultOpen: _, open: y, onOpenChange: b, modal: x, children: S }) {
+	let [C, w] = u.useState(() => s(e ?? t) ?? {
+		h: 0,
+		s: 0,
+		v: 0,
+		a: 1
+	}), [T, E] = u.useState(f), D = c ?? T, O = u.useRef(null), [k, A] = u.useState(e);
+	if (e !== k && (A(e), e !== void 0 && e !== O.current)) {
+		let t = s(e);
+		t && w((e) => ({
+			...t,
+			h: t.s === 0 || t.v === 0 ? e.h : t.h,
+			s: t.v === 0 ? e.s : t.s
+		}));
+	}
+	let j = u.useMemo(() => a(C), [C]), M = u.useMemo(() => i(C, D), [C, D]), N = u.useMemo(() => l(C), [C]), P = u.useMemo(() => l({
+		...C,
+		a: 1
+	}), [C]), F = u.useRef({
+		hsva: C,
+		format: D
+	});
+	F.current = {
+		hsva: C,
+		format: D
+	};
+	let I = u.useCallback((e, t, n, r) => {
+		let o = i(e, t);
+		return O.current = o, r?.(o, {
+			hsva: e,
+			rgba: a(e),
+			format: t,
+			reason: n
+		}), o;
+	}, []), L = u.useCallback((e, t) => {
+		let n = {
+			...F.current.hsva,
+			...e
+		};
+		F.current = {
+			...F.current,
+			hsva: n
+		}, w(n), I(n, F.current.format, t, r);
+	}, [I, r]), R = u.useCallback((e) => {
+		let { hsva: t, format: n } = F.current;
+		I(t, n, e, o);
+	}, [I, o]), z = u.useCallback((e) => {
+		if (e === F.current.format) return;
+		F.current = {
+			...F.current,
+			format: e
+		}, c === void 0 && E(e), p?.(e);
+		let t = I(F.current.hsva, e, "format-change", r);
+		o?.(t, {
+			hsva: F.current.hsva,
+			rgba: a(F.current.hsva),
+			format: e,
+			reason: "format-change"
+		});
+	}, [
+		I,
+		c,
+		p,
+		r,
+		o
+	]), B = u.useMemo(() => ({
+		hsva: C,
+		rgba: j,
+		css: N,
+		solid: P,
+		text: M,
+		format: D,
+		formats: m,
+		setFormat: z,
+		update: L,
+		commit: R,
+		disabled: h
+	}), [
+		C,
+		j,
+		N,
+		P,
+		M,
+		D,
+		m,
+		z,
+		L,
+		R,
+		h
+	]);
+	return /* @__PURE__ */ d(v.Provider, {
+		value: B,
+		children: /* @__PURE__ */ d(n.Root, {
+			open: y,
+			defaultOpen: _,
+			onOpenChange: b,
+			modal: x,
+			children: S
+		})
+	});
+}
+var S = u.forwardRef(function({ hideSwatch: t = !1, disabled: r, className: i, style: a, children: o, ...s }, c) {
+	let l = y("Trigger"), u = b(l);
+	return /* @__PURE__ */ f(n.Trigger, {
+		ref: c,
+		render: /* @__PURE__ */ d("button", { type: "button" }),
+		className: e(m.trigger, i),
+		disabled: l.disabled || r,
+		style: {
+			...u,
+			...a
+		},
+		"data-forte": "color-picker-trigger",
+		...s,
+		children: [
+			t ? null : /* @__PURE__ */ d("span", {
+				className: m.triggerSwatch,
+				"data-forte": "color-picker-trigger-swatch"
+			}),
+			o,
+			/* @__PURE__ */ d("span", {
+				className: "forte-visually-hidden",
+				children: l.text
+			})
+		]
+	});
+}), C = u.forwardRef(function({ arrow: t = !0, className: r, panelClassName: i, children: a, ...o }, s) {
+	let { disabled: c } = y("Popup");
+	return /* @__PURE__ */ f(n.Popup, {
+		ref: s,
+		className: e(m.popup, r),
+		...o,
+		children: [t ? /* @__PURE__ */ d(n.Arrow, {}) : null, /* @__PURE__ */ d("div", {
+			className: e(m.panel, i),
+			"data-forte": "color-picker-panel",
+			"data-disabled": c || void 0,
+			children: a
+		})]
+	});
+}), w = n.Arrow, T = u.forwardRef(function({ className: t, ...n }, r) {
+	let { disabled: i } = y("Panel");
+	return /* @__PURE__ */ d("div", {
+		ref: r,
+		className: e(m.panel, m.standalonePanel, t),
+		"data-forte": "color-picker-panel",
+		"data-disabled": i || void 0,
+		...n
+	});
+}), E = u.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ d("div", {
+		ref: r,
+		className: e(m.row, t),
+		"data-forte": "color-picker-row",
+		...n
+	});
+}), D = u.forwardRef(function({ saturationLabel: t = "Saturation", brightnessLabel: n = "Brightness", step: r = .01, className: i, style: a, onPointerDown: o, onPointerMove: s, onPointerUp: c, onPointerCancel: l, ...p }, g) {
+	let _ = y("Area"), { hsva: v, disabled: x, update: S, commit: C } = _, w = b(_), T = u.useRef(null), E = u.useRef(null), D = u.useRef(null), O = u.useRef(!1), [k, A] = u.useState(!1);
+	u.useImperativeHandle(g, () => T.current, []);
+	let j = (e) => {
+		let t = T.current;
+		if (!t) return null;
+		let n = t.getBoundingClientRect();
+		return n.width === 0 || n.height === 0 ? null : {
+			s: h((e.clientX - n.left) / n.width, 0, 1),
+			v: 1 - h((e.clientY - n.top) / n.height, 0, 1)
+		};
+	}, M = (e) => {
+		if (x || e.button !== 0) {
+			o?.(e);
+			return;
+		}
+		e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), O.current = !0, A(!0), E.current?.focus();
+		let t = j(e);
+		t && S(t, "area"), o?.(e);
+	}, N = (e) => {
+		if (s?.(e), !O.current) return;
+		let t = j(e);
+		t && S(t, "area");
+	}, P = (e) => {
+		(e.type === "pointerup" ? c : l)?.(e), O.current && (O.current = !1, A(!1), e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), C("area"));
+	}, F = {
+		ArrowRight: {
+			axis: "s",
+			direction: 1
+		},
+		ArrowLeft: {
+			axis: "s",
+			direction: -1
+		},
+		ArrowUp: {
+			axis: "v",
+			direction: 1
+		},
+		ArrowDown: {
+			axis: "v",
+			direction: -1
+		}
+	}, I = (e) => {
+		let t = F[e.key];
+		if (!t) return;
+		e.preventDefault();
+		let n = r * (e.shiftKey ? 10 : 1) * t.direction;
+		S({ [t.axis]: h(v[t.axis] + n, 0, 1) }, "area"), C("area"), (t.axis === "s" ? E : D).current?.focus();
+	}, L = (e) => Math.round(e * 100), R = (e) => Math.round(e * 1e4) / 100;
+	return /* @__PURE__ */ d("div", {
+		ref: T,
+		className: e(m.area, i),
+		"data-forte": "color-picker-area",
+		"data-disabled": x || void 0,
+		"data-dragging": k || void 0,
+		style: {
+			...w,
+			...a
+		},
+		onPointerDown: M,
+		onPointerMove: N,
+		onPointerUp: P,
+		onPointerCancel: P,
+		...p,
+		children: /* @__PURE__ */ f("div", {
+			className: e(m.areaThumb, "forte-focus-ring-within"),
+			"data-forte": "color-picker-area-thumb",
+			style: {
+				left: `${R(v.s)}%`,
+				top: `${R(1 - v.v)}%`
+			},
+			children: [/* @__PURE__ */ d("input", {
+				ref: E,
+				className: m.srOnly,
+				type: "range",
+				min: 0,
+				max: 100,
+				step: r * 100,
+				value: R(v.s),
+				disabled: x,
+				"aria-label": t,
+				"aria-valuetext": `${L(v.s)}%`,
+				onChange: (e) => {
+					S({ s: Number(e.target.value) / 100 }, "area"), C("area");
+				},
+				onKeyDown: I
+			}), /* @__PURE__ */ d("input", {
+				ref: D,
+				className: m.srOnly,
+				type: "range",
+				min: 0,
+				max: 100,
+				step: r * 100,
+				value: R(v.v),
+				disabled: x,
+				"aria-label": n,
+				"aria-orientation": "vertical",
+				"aria-valuetext": `${L(v.v)}%`,
+				onChange: (e) => {
+					S({ v: Number(e.target.value) / 100 }, "area"), C("area");
+				},
+				onKeyDown: I
+			})]
+		})
+	});
+});
+function O({ channel: t, label: n, className: r, style: i, rest: a }) {
+	let o = y(t === "hue" ? "HueSlider" : "AlphaSlider"), { hsva: s, disabled: c, update: l, commit: u } = o, f = b(o), h = t === "hue", g = h ? s.h : s.a * 100;
+	return /* @__PURE__ */ d(p.Root, {
+		value: g,
+		min: 0,
+		max: h ? 360 : 100,
+		step: 1,
+		largeStep: 10,
+		disabled: c,
+		thumbAlignment: "edge",
+		onValueChange: (e) => l(h ? { h: e } : { a: e / 100 }, h ? "hue" : "alpha"),
+		onValueCommitted: () => u(h ? "hue" : "alpha"),
+		className: e(m.rail, r),
+		"data-forte": `color-picker-${t}-slider`,
+		style: {
+			...f,
+			...i
+		},
+		...a,
+		children: /* @__PURE__ */ d(p.Control, {
+			className: m.railControl,
+			children: /* @__PURE__ */ d(p.Track, {
+				className: h ? m.hueTrack : m.alphaTrack,
+				"data-forte": `color-picker-${t}-track`,
+				children: /* @__PURE__ */ d(p.Thumb, {
+					className: e(m.railThumb, "forte-focus-ring-within"),
+					"data-forte": `color-picker-${t}-thumb`,
+					"aria-label": n,
+					getAriaValueText: (e, t) => h ? `${Math.round(t)}°` : `${Math.round(t)}%`
+				})
+			})
+		})
+	});
+}
+function k({ label: e = "Hue", className: t, style: n, ...r }) {
+	return /* @__PURE__ */ d(O, {
+		channel: "hue",
+		label: e,
+		className: t,
+		style: n,
+		rest: r
+	});
+}
+function A({ label: e = "Opacity", className: t, style: n, ...r }) {
+	return /* @__PURE__ */ d(O, {
+		channel: "alpha",
+		label: e,
+		className: t,
+		style: n,
+		rest: r
+	});
+}
+var j = u.createContext(null), M = u.forwardRef(function({ colors: t = r, columns: n = 8, label: i = "Colour swatches", className: o, style: l, onKeyDown: f, ...p }, g) {
+	let { rgba: _, disabled: v } = y("Swatches"), b = u.useMemo(() => t.find((e) => {
+		let t = s(e);
+		return t ? c(a(t), _) : !1;
+	}) ?? t[0] ?? null, [t, _]), x = u.useMemo(() => ({ roving: b }), [b]), S = (e) => {
+		f?.(e);
+		let t = Array.from(e.currentTarget.querySelectorAll("[data-forte=\"color-picker-swatch\"]:not(:disabled)")), r = t.indexOf(document.activeElement);
+		if (r === -1) return;
+		let i = getComputedStyle(e.currentTarget).direction === "rtl" ? -1 : 1, a = r;
+		switch (e.key) {
+			case "ArrowRight":
+				a = r + i;
+				break;
+			case "ArrowLeft":
+				a = r - i;
+				break;
+			case "ArrowDown":
+				a = r + n;
+				break;
+			case "ArrowUp":
+				a = r - n;
+				break;
+			case "Home":
+				a = 0;
+				break;
+			case "End":
+				a = t.length - 1;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let o = t[h(a, 0, t.length - 1)];
+		o?.focus(), o?.click();
+	};
+	return /* @__PURE__ */ d(j.Provider, {
+		value: x,
+		children: /* @__PURE__ */ d("div", {
+			ref: g,
+			role: "radiogroup",
+			"aria-label": i,
+			"aria-disabled": v || void 0,
+			className: e(m.swatches, o),
+			"data-forte": "color-picker-swatches",
+			"data-disabled": v || void 0,
+			style: {
+				"--forte-color-picker-swatch-columns": n,
+				...l
+			},
+			onKeyDown: S,
+			...p,
+			children: t.map((e, t) => /* @__PURE__ */ d(N, { value: e }, `${e}-${t}`))
+		})
+	});
+}), N = u.forwardRef(function({ value: t, label: n, disabled: r, className: i, style: l, onClick: f, ...p }, h) {
+	let { rgba: g, disabled: _, update: v, commit: b } = y("Swatch"), x = u.useContext(j), S = u.useMemo(() => s(t), [t]), C = S ? c(a(S), g) : !1, w = () => {
+		S && (v(S, "swatch"), b("swatch"));
+	};
+	return /* @__PURE__ */ d("button", {
+		ref: h,
+		type: "button",
+		role: x ? "radio" : void 0,
+		"aria-checked": x ? C : void 0,
+		"aria-pressed": x ? void 0 : C,
+		"aria-label": n ?? t,
+		disabled: _ || r,
+		tabIndex: x ? x.roving === t ? 0 : -1 : void 0,
+		className: e(m.swatch, "forte-focus-ring", i),
+		"data-forte": "color-picker-swatch",
+		"data-selected": C || void 0,
+		style: {
+			"--forte-color-picker-swatch": t,
+			"--forte-color-picker-swatch-on": S ? o(a(S)) : "currentColor",
+			...l
+		},
+		onClick: (e) => {
+			w(), f?.(e);
+		},
+		...p,
+		children: C ? /* @__PURE__ */ d("svg", {
+			className: m.swatchTick,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ d("path", { d: "m3.5 8.5 3 3 6-7" })
+		}) : null
+	});
+}), P = u.forwardRef(function({ className: t, style: n, ...r }, i) {
+	let a = b(y("Preview"));
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		"aria-hidden": "true",
+		className: e(m.preview, t),
+		"data-forte": "color-picker-preview",
+		style: {
+			...a,
+			...n
+		},
+		...r
+	});
+}), F = u.forwardRef(function({ className: t, ...n }, r) {
+	let { text: i } = y("Value");
+	return /* @__PURE__ */ d("span", {
+		ref: r,
+		className: e(m.value, t),
+		"data-forte": "color-picker-value",
+		...n,
+		children: i
+	});
+});
+function I({ label: n = "Colour format", className: r }) {
+	let { format: i, formats: a, setFormat: o, disabled: s } = y("Format"), c = u.useMemo(() => Object.fromEntries(a.map((e) => [e, _[e]])), [a]);
+	return /* @__PURE__ */ f(t.Root, {
+		items: c,
+		value: i,
+		onValueChange: (e) => o(e),
+		disabled: s,
+		children: [/* @__PURE__ */ f(t.Trigger, {
+			size: "sm",
+			variant: "ghost",
+			"aria-label": n,
+			className: e(m.format, r),
+			"data-forte": "color-picker-format",
+			children: [/* @__PURE__ */ d(t.Value, {}), /* @__PURE__ */ d(t.Icon, {})]
+		}), /* @__PURE__ */ d(t.Popup, { children: a.map((e) => /* @__PURE__ */ d(t.Item, {
+			value: e,
+			children: _[e]
+		}, e)) })]
+	});
+}
+var L = u.forwardRef(function({ label: t = "Colour value", className: n, onKeyDown: r, onBlur: i, ...a }, o) {
+	let { text: c, disabled: l, update: f, commit: p } = y("Input"), [h, g] = u.useState(null), _ = h !== null && s(h) === null;
+	return /* @__PURE__ */ d("input", {
+		ref: o,
+		type: "text",
+		spellCheck: !1,
+		autoComplete: "off",
+		autoCapitalize: "off",
+		autoCorrect: "off",
+		inputMode: "text",
+		disabled: l,
+		"aria-label": t,
+		"aria-invalid": _ || void 0,
+		value: h ?? c,
+		className: e(m.input, "forte-focus-ring", n),
+		"data-forte": "color-picker-input",
+		"data-invalid": _ || void 0,
+		onChange: (e) => {
+			let t = e.target.value;
+			g(t);
+			let n = s(t);
+			n && f(n, "input");
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter") {
+				let e = h === null ? null : s(h);
+				e && (f(e, "input"), p("input")), g(null);
+			} else e.key === "Escape" && g(null);
+			r?.(e);
+		},
+		onBlur: (e) => {
+			h !== null && s(h) && p("input"), g(null), i?.(e);
+		},
+		...a
+	});
+}), R = u.forwardRef(function({ label: t = "Pick a colour from the screen", disabled: n, className: r, onClick: i, ...a }, o) {
+	let { disabled: c, update: l, commit: p } = y("EyeDropper"), [h, g] = u.useState(!1);
+	if (u.useEffect(() => {
+		g(typeof window < "u" && "EyeDropper" in window);
+	}, []), !h) return null;
+	let _ = async () => {
+		let e = window.EyeDropper;
+		if (e) try {
+			let { sRGBHex: t } = await new e().open(), n = s(t);
+			n && (l({
+				h: n.h,
+				s: n.s,
+				v: n.v
+			}, "eye-dropper"), p("eye-dropper"));
+		} catch {}
+	};
+	return /* @__PURE__ */ d("button", {
+		ref: o,
+		type: "button",
+		disabled: c || n,
+		"aria-label": t,
+		className: e(m.eyeDropper, "forte-focus-ring", r),
+		"data-forte": "color-picker-eye-dropper",
+		onClick: (e) => {
+			_(), i?.(e);
+		},
+		...a,
+		children: /* @__PURE__ */ f("svg", {
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			className: m.eyeDropperIcon,
+			children: [/* @__PURE__ */ d("path", { d: "M13.7 2.3a1.9 1.9 0 0 0-2.7 0L9.6 3.7l2.7 2.7 1.4-1.4a1.9 1.9 0 0 0 0-2.7Z" }), /* @__PURE__ */ d("path", { d: "M8.9 4.4 3.4 9.9c-.3.3-.45.55-.5.9L2.5 13a.5.5 0 0 0 .6.6l2.2-.4c.35-.05.6-.2.9-.5l5.5-5.5-2.8-2.8Z" })]
+		})
+	});
+}), z = u.forwardRef(function({ name: e, ...t }, n) {
+	let { text: r } = y("HiddenInput");
+	return /* @__PURE__ */ d("input", {
+		ref: n,
+		type: "hidden",
+		name: e,
+		value: r,
+		readOnly: !0,
+		"data-forte": "color-picker-hidden-input",
+		...t
+	});
+}), B = {
+	Root: x,
+	Trigger: S,
+	Popup: C,
+	Arrow: w,
+	Panel: T,
+	Row: E,
+	Area: D,
+	HueSlider: k,
+	AlphaSlider: A,
+	Swatches: M,
+	Swatch: N,
+	Preview: P,
+	Value: F,
+	Format: I,
+	Input: L,
+	EyeDropper: R,
+	HiddenInput: z
+};
+//#endregion
+export { S as _, R as a, k as c, C as d, P as f, M as g, N as h, w as i, L as l, E as m, A as n, I as o, x as p, D as r, z as s, B as t, T as u, F as v };