chroma-panel 0.1.0

package/dist/primitives/ChannelSlider.js

@@ -0,0 +1,93 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { clamp } from "../color/convert.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { usePointerDrag } from "../core/usePointerDrag.js";
+import { AxisInput } from "./AxisInput.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/ChannelSlider.tsx
+function ChannelSlider(props) {
+	const { label, shortLabel, min, max, step, read, write, gradient, channel, formatValue, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const trackRef = React.useRef(null);
+	const fillRef = React.useRef(null);
+	const inputRef = React.useRef(null);
+	const fns = React.useRef({
+		read,
+		gradient,
+		formatValue
+	});
+	React.useEffect(() => {
+		fns.current = {
+			read,
+			gradient,
+			formatValue
+		};
+	});
+	useTransientColor(store, (c) => {
+		const value = fns.current.read(c);
+		const ratio = max === min ? 0 : clamp((value - min) / (max - min), 0, 1);
+		const track = trackRef.current;
+		if (track !== null) track.style.setProperty("--cp-thumb-x", `${ratio * 100}%`);
+		const fill = fillRef.current;
+		const g = fns.current.gradient;
+		if (fill !== null && g !== void 0) fill.style.background = g(c);
+		const input = inputRef.current;
+		if (input !== null) {
+			input.value = String(value);
+			const text = fns.current.formatValue?.(value) ?? String(Math.round(value));
+			input.setAttribute("aria-valuetext", `${label} ${text}`);
+		}
+	});
+	const drag = usePointerDrag({
+		disabled,
+		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get())),
+		onEnd: () => store.commit()
+	});
+	const initial = read(store.get());
+	const track = /* @__PURE__ */ jsxs("div", {
+		ref: trackRef,
+		className: cx("cp-slider", classNames.slider, className),
+		"data-cp-channel": channel,
+		style: drag.style,
+		onPointerDown: drag.onPointerDown,
+		onPointerMove: drag.onPointerMove,
+		onPointerUp: drag.onPointerUp,
+		onLostPointerCapture: drag.onLostPointerCapture,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: fillRef,
+				className: "cp-slider-fill",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx(AxisInput, {
+				ref: inputRef,
+				label,
+				min,
+				max,
+				step: step ?? 1,
+				defaultValue: initial,
+				disabled,
+				onInput: (v) => store.set(write(v, store.get())),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx("cp-thumb", classNames.thumb),
+				"aria-hidden": "true"
+			})
+		]
+	});
+	if (shortLabel === void 0) return track;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cp-slider-row",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "cp-slider-label",
+			"aria-hidden": "true",
+			children: shortLabel
+		}), track]
+	});
+}
+//#endregion
+export { ChannelSlider };
+

package/dist/primitives/ColorArea.cjs

@@ -0,0 +1,85 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+const require_usePointerDrag = require("../core/usePointerDrag.cjs");
+const require_AxisInput = require("./AxisInput.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/ColorArea.tsx
+function ColorArea(props) {
+	const { height = 150, className } = props;
+	const { store, disabled, classNames } = require_context.usePanel();
+	const areaRef = react.useRef(null);
+	const satRef = react.useRef(null);
+	const valRef = react.useRef(null);
+	require_useColorStore.useTransientColor(store, (c) => {
+		const el = areaRef.current;
+		if (el === null) return;
+		el.style.setProperty("--cp-thumb-x", `${c.s}%`);
+		el.style.setProperty("--cp-thumb-y", `${100 - c.v}%`);
+		const sat = satRef.current;
+		if (sat !== null) {
+			sat.value = String(Math.round(c.s));
+			sat.setAttribute("aria-valuetext", `Saturation ${Math.round(c.s)} percent`);
+		}
+		const val = valRef.current;
+		if (val !== null) {
+			val.value = String(Math.round(c.v));
+			val.setAttribute("aria-valuetext", `Brightness ${Math.round(c.v)} percent`);
+		}
+	});
+	const drag = require_usePointerDrag.usePointerDrag({
+		disabled,
+		onMove: ({ x, y }) => store.patch({
+			s: x * 100,
+			v: (1 - y) * 100
+		}),
+		onEnd: () => store.commit()
+	});
+	const initial = store.get();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: areaRef,
+		className: require_context.cx("cp-area", className),
+		style: {
+			...drag.style,
+			height
+		},
+		onPointerDown: drag.onPointerDown,
+		onPointerMove: drag.onPointerMove,
+		onPointerUp: drag.onPointerUp,
+		onLostPointerCapture: drag.onLostPointerCapture,
+		role: "group",
+		"aria-label": "Saturation and brightness",
+		"aria-disabled": disabled || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
+				ref: satRef,
+				label: "Saturation",
+				min: 0,
+				max: 100,
+				defaultValue: Math.round(initial.s),
+				disabled,
+				onInput: (s) => store.patch({ s }),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
+				ref: valRef,
+				label: "Brightness",
+				min: 0,
+				max: 100,
+				defaultValue: Math.round(initial.v),
+				disabled,
+				onInput: (v) => store.patch({ v }),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_context.cx("cp-thumb", classNames.thumb),
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+//#endregion
+exports.ColorArea = ColorArea;

package/dist/primitives/ColorArea.d.cts

@@ -0,0 +1,8 @@
+import * as React from "react";
+//#region src/primitives/ColorArea.d.ts
+export interface ColorAreaProps {
+  height?: number;
+  className?: string;
+}
+export declare function ColorArea(props: ColorAreaProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorArea.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+//#region src/primitives/ColorArea.d.ts
+export interface ColorAreaProps {
+  height?: number;
+  className?: string;
+}
+export declare function ColorArea(props: ColorAreaProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorArea.js

@@ -0,0 +1,84 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { usePointerDrag } from "../core/usePointerDrag.js";
+import { AxisInput } from "./AxisInput.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/ColorArea.tsx
+function ColorArea(props) {
+	const { height = 150, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const areaRef = React.useRef(null);
+	const satRef = React.useRef(null);
+	const valRef = React.useRef(null);
+	useTransientColor(store, (c) => {
+		const el = areaRef.current;
+		if (el === null) return;
+		el.style.setProperty("--cp-thumb-x", `${c.s}%`);
+		el.style.setProperty("--cp-thumb-y", `${100 - c.v}%`);
+		const sat = satRef.current;
+		if (sat !== null) {
+			sat.value = String(Math.round(c.s));
+			sat.setAttribute("aria-valuetext", `Saturation ${Math.round(c.s)} percent`);
+		}
+		const val = valRef.current;
+		if (val !== null) {
+			val.value = String(Math.round(c.v));
+			val.setAttribute("aria-valuetext", `Brightness ${Math.round(c.v)} percent`);
+		}
+	});
+	const drag = usePointerDrag({
+		disabled,
+		onMove: ({ x, y }) => store.patch({
+			s: x * 100,
+			v: (1 - y) * 100
+		}),
+		onEnd: () => store.commit()
+	});
+	const initial = store.get();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		className: cx("cp-area", className),
+		style: {
+			...drag.style,
+			height
+		},
+		onPointerDown: drag.onPointerDown,
+		onPointerMove: drag.onPointerMove,
+		onPointerUp: drag.onPointerUp,
+		onLostPointerCapture: drag.onLostPointerCapture,
+		role: "group",
+		"aria-label": "Saturation and brightness",
+		"aria-disabled": disabled || void 0,
+		children: [
+			/* @__PURE__ */ jsx(AxisInput, {
+				ref: satRef,
+				label: "Saturation",
+				min: 0,
+				max: 100,
+				defaultValue: Math.round(initial.s),
+				disabled,
+				onInput: (s) => store.patch({ s }),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ jsx(AxisInput, {
+				ref: valRef,
+				label: "Brightness",
+				min: 0,
+				max: 100,
+				defaultValue: Math.round(initial.v),
+				disabled,
+				onInput: (v) => store.patch({ v }),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx("cp-thumb", classNames.thumb),
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+//#endregion
+export { ColorArea };
+

package/dist/primitives/ColorDisc.cjs

@@ -0,0 +1,95 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_convert = require("../color/convert.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+const require_usePointerDrag = require("../core/usePointerDrag.cjs");
+const require_AxisInput = require("./AxisInput.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/ColorDisc.tsx
+function ColorDisc(props) {
+	const { size = 200, className } = props;
+	const { store, disabled, classNames } = require_context.usePanel();
+	const discRef = react.useRef(null);
+	const hueRef = react.useRef(null);
+	const satRef = react.useRef(null);
+	require_useColorStore.useTransientColor(store, (c) => {
+		const el = discRef.current;
+		if (el === null) return;
+		const radians = require_convert.normalizeHue(c.h) * Math.PI / 180;
+		const radiusPct = c.s / 2;
+		el.style.setProperty("--cp-thumb-x", `${50 + Math.sin(radians) * radiusPct}%`);
+		el.style.setProperty("--cp-thumb-y", `${50 - Math.cos(radians) * radiusPct}%`);
+		const hue = hueRef.current;
+		if (hue !== null) {
+			hue.value = String(Math.round(require_convert.normalizeHue(c.h)));
+			hue.setAttribute("aria-valuetext", `Hue ${Math.round(require_convert.normalizeHue(c.h))} degrees`);
+		}
+		const sat = satRef.current;
+		if (sat !== null) {
+			sat.value = String(Math.round(c.s));
+			sat.setAttribute("aria-valuetext", `Saturation ${Math.round(c.s)} percent`);
+		}
+	});
+	const drag = require_usePointerDrag.usePointerDrag({
+		disabled,
+		onMove: ({ x, y }) => {
+			const dx = x - .5;
+			const dy = y - .5;
+			const distance = Math.min(Math.hypot(dx, dy), .5);
+			const patch = { s: distance / .5 * 100 };
+			if (distance > 1e-6) patch.h = require_convert.normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
+			store.patch(patch);
+		},
+		onEnd: () => store.commit()
+	});
+	const initial = store.get();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "cp-disc-wrap",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: discRef,
+			className: require_context.cx("cp-disc", classNames.panel, className),
+			style: {
+				...drag.style,
+				width: size
+			},
+			onPointerDown: drag.onPointerDown,
+			onPointerMove: drag.onPointerMove,
+			onPointerUp: drag.onPointerUp,
+			onLostPointerCapture: drag.onLostPointerCapture,
+			role: "group",
+			"aria-label": "Colour wheel",
+			"aria-disabled": disabled || void 0,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
+					ref: hueRef,
+					label: "Hue",
+					min: 0,
+					max: 360,
+					defaultValue: Math.round(require_convert.normalizeHue(initial.h)),
+					disabled,
+					onInput: (h) => store.patch({ h }),
+					onCommit: () => store.commit()
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
+					ref: satRef,
+					label: "Saturation",
+					min: 0,
+					max: 100,
+					defaultValue: Math.round(initial.s),
+					disabled,
+					onInput: (s) => store.patch({ s }),
+					onCommit: () => store.commit()
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_context.cx("cp-thumb", classNames.thumb),
+					"aria-hidden": "true"
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.ColorDisc = ColorDisc;

package/dist/primitives/ColorDisc.d.cts

@@ -0,0 +1,8 @@
+import * as React from "react";
+//#region src/primitives/ColorDisc.d.ts
+export interface ColorDiscProps {
+  size?: number;
+  className?: string;
+}
+export declare function ColorDisc(props: ColorDiscProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorDisc.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+//#region src/primitives/ColorDisc.d.ts
+export interface ColorDiscProps {
+  size?: number;
+  className?: string;
+}
+export declare function ColorDisc(props: ColorDiscProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorDisc.js

@@ -0,0 +1,94 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { normalizeHue } from "../color/convert.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { usePointerDrag } from "../core/usePointerDrag.js";
+import { AxisInput } from "./AxisInput.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/ColorDisc.tsx
+function ColorDisc(props) {
+	const { size = 200, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const discRef = React.useRef(null);
+	const hueRef = React.useRef(null);
+	const satRef = React.useRef(null);
+	useTransientColor(store, (c) => {
+		const el = discRef.current;
+		if (el === null) return;
+		const radians = normalizeHue(c.h) * Math.PI / 180;
+		const radiusPct = c.s / 2;
+		el.style.setProperty("--cp-thumb-x", `${50 + Math.sin(radians) * radiusPct}%`);
+		el.style.setProperty("--cp-thumb-y", `${50 - Math.cos(radians) * radiusPct}%`);
+		const hue = hueRef.current;
+		if (hue !== null) {
+			hue.value = String(Math.round(normalizeHue(c.h)));
+			hue.setAttribute("aria-valuetext", `Hue ${Math.round(normalizeHue(c.h))} degrees`);
+		}
+		const sat = satRef.current;
+		if (sat !== null) {
+			sat.value = String(Math.round(c.s));
+			sat.setAttribute("aria-valuetext", `Saturation ${Math.round(c.s)} percent`);
+		}
+	});
+	const drag = usePointerDrag({
+		disabled,
+		onMove: ({ x, y }) => {
+			const dx = x - .5;
+			const dy = y - .5;
+			const distance = Math.min(Math.hypot(dx, dy), .5);
+			const patch = { s: distance / .5 * 100 };
+			if (distance > 1e-6) patch.h = normalizeHue(Math.atan2(dx, -dy) * 180 / Math.PI);
+			store.patch(patch);
+		},
+		onEnd: () => store.commit()
+	});
+	const initial = store.get();
+	return /* @__PURE__ */ jsx("div", {
+		className: "cp-disc-wrap",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: discRef,
+			className: cx("cp-disc", classNames.panel, className),
+			style: {
+				...drag.style,
+				width: size
+			},
+			onPointerDown: drag.onPointerDown,
+			onPointerMove: drag.onPointerMove,
+			onPointerUp: drag.onPointerUp,
+			onLostPointerCapture: drag.onLostPointerCapture,
+			role: "group",
+			"aria-label": "Colour wheel",
+			"aria-disabled": disabled || void 0,
+			children: [
+				/* @__PURE__ */ jsx(AxisInput, {
+					ref: hueRef,
+					label: "Hue",
+					min: 0,
+					max: 360,
+					defaultValue: Math.round(normalizeHue(initial.h)),
+					disabled,
+					onInput: (h) => store.patch({ h }),
+					onCommit: () => store.commit()
+				}),
+				/* @__PURE__ */ jsx(AxisInput, {
+					ref: satRef,
+					label: "Saturation",
+					min: 0,
+					max: 100,
+					defaultValue: Math.round(initial.s),
+					disabled,
+					onInput: (s) => store.patch({ s }),
+					onCommit: () => store.commit()
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cx("cp-thumb", classNames.thumb),
+					"aria-hidden": "true"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ColorDisc };
+

package/dist/primitives/ColorField.cjs

@@ -0,0 +1,68 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+const require_parse = require("../color/parse.cjs");
+const require_serialize = require("../color/serialize.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/ColorField.tsx
+function ColorField(props) {
+	const { label = "Hex", withAlpha = false, className } = props;
+	const { store, disabled, classNames } = require_context.usePanel();
+	const id = require_context.useStableId("cp-hex-");
+	const inputRef = react.useRef(null);
+	const focused = react.useRef(false);
+	const format = react.useRef(withAlpha);
+	react.useEffect(() => {
+		format.current = withAlpha;
+	});
+	const render = (c) => format.current ? require_serialize.toHexa(c) : require_serialize.toHex(c);
+	require_useColorStore.useTransientColor(store, (c) => {
+		if (focused.current) return;
+		const el = inputRef.current;
+		if (el !== null) {
+			el.value = render(c);
+			el.setAttribute("aria-invalid", "false");
+		}
+	});
+	const handleChange = (event) => {
+		const parsed = require_parse.parse(event.currentTarget.value);
+		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
+		if (parsed !== null) store.ingest(parsed);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_context.cx("cp-field", classNames.field, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: "cp-field-label",
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: inputRef,
+			id,
+			className: "cp-input",
+			type: "text",
+			spellCheck: false,
+			autoComplete: "off",
+			autoCapitalize: "off",
+			defaultValue: render(store.get()),
+			disabled,
+			onFocus: () => {
+				focused.current = true;
+			},
+			onChange: handleChange,
+			onBlur: (e) => {
+				focused.current = false;
+				e.currentTarget.value = render(store.get());
+				e.currentTarget.setAttribute("aria-invalid", "false");
+				store.commit();
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter") e.currentTarget.blur();
+			}
+		})]
+	});
+}
+//#endregion
+exports.ColorField = ColorField;

package/dist/primitives/ColorField.d.cts

@@ -0,0 +1,9 @@
+import * as React from "react";
+//#region src/primitives/ColorField.d.ts
+export interface ColorFieldProps {
+  label?: string;
+  withAlpha?: boolean;
+  className?: string;
+}
+export declare function ColorField(props: ColorFieldProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorField.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+//#region src/primitives/ColorField.d.ts
+export interface ColorFieldProps {
+  label?: string;
+  withAlpha?: boolean;
+  className?: string;
+}
+export declare function ColorField(props: ColorFieldProps): React.ReactElement;
+//#endregion

package/dist/primitives/ColorField.js

@@ -0,0 +1,67 @@
+"use client";
+import { cx, usePanel, useStableId } from "../core/context.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { parse } from "../color/parse.js";
+import { toHex, toHexa } from "../color/serialize.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/ColorField.tsx
+function ColorField(props) {
+	const { label = "Hex", withAlpha = false, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const id = useStableId("cp-hex-");
+	const inputRef = React.useRef(null);
+	const focused = React.useRef(false);
+	const format = React.useRef(withAlpha);
+	React.useEffect(() => {
+		format.current = withAlpha;
+	});
+	const render = (c) => format.current ? toHexa(c) : toHex(c);
+	useTransientColor(store, (c) => {
+		if (focused.current) return;
+		const el = inputRef.current;
+		if (el !== null) {
+			el.value = render(c);
+			el.setAttribute("aria-invalid", "false");
+		}
+	});
+	const handleChange = (event) => {
+		const parsed = parse(event.currentTarget.value);
+		event.currentTarget.setAttribute("aria-invalid", parsed === null ? "true" : "false");
+		if (parsed !== null) store.ingest(parsed);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("cp-field", classNames.field, className),
+		children: [/* @__PURE__ */ jsx("label", {
+			className: "cp-field-label",
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			id,
+			className: "cp-input",
+			type: "text",
+			spellCheck: false,
+			autoComplete: "off",
+			autoCapitalize: "off",
+			defaultValue: render(store.get()),
+			disabled,
+			onFocus: () => {
+				focused.current = true;
+			},
+			onChange: handleChange,
+			onBlur: (e) => {
+				focused.current = false;
+				e.currentTarget.value = render(store.get());
+				e.currentTarget.setAttribute("aria-invalid", "false");
+				store.commit();
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter") e.currentTarget.blur();
+			}
+		})]
+	});
+}
+//#endregion
+export { ColorField };
+