chroma-panel 0.1.0

package/dist/modes/registry.d.cts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/modes/registry.d.ts
+export type ModeId = "wheel" | "sliders" | "palettes" | "image" | "pencils";
+export interface PickerMode {
+  id: string;
+  label: string;
+  icon: React.ComponentType;
+  Panel: React.ComponentType;
+}
+export declare function registerMode(mode: PickerMode): void;
+export declare function getMode(id: string): PickerMode | undefined;
+export declare function resolveModes(requested: (string | PickerMode)[]): PickerMode[];
+//#endregion

package/dist/modes/registry.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/modes/registry.d.ts
+export type ModeId = "wheel" | "sliders" | "palettes" | "image" | "pencils";
+export interface PickerMode {
+  id: string;
+  label: string;
+  icon: React.ComponentType;
+  Panel: React.ComponentType;
+}
+export declare function registerMode(mode: PickerMode): void;
+export declare function getMode(id: string): PickerMode | undefined;
+export declare function resolveModes(requested: (string | PickerMode)[]): PickerMode[];
+//#endregion

package/dist/modes/registry.js

@@ -0,0 +1,25 @@
+import { warnOnce } from "../core/dev.js";
+//#region src/modes/registry.ts
+const registry = /* @__PURE__ */ new Map();
+function registerMode(mode) {
+	registry.set(mode.id, mode);
+}
+function getMode(id) {
+	return registry.get(id);
+}
+function resolveModes(requested) {
+	const out = [];
+	for (const entry of requested) {
+		if (typeof entry !== "string") {
+			out.push(entry);
+			continue;
+		}
+		const found = registry.get(entry);
+		if (found !== void 0) out.push(found);
+		else warnOnce(`unknown mode "${entry}". Known modes: ${Array.from(registry.keys()).join(", ")}.`);
+	}
+	return out;
+}
+//#endregion
+export { getMode, registerMode, resolveModes };
+

package/dist/modes/sliders/index.cjs

@@ -0,0 +1,300 @@
+"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_ChannelSlider = require("../../primitives/ChannelSlider.cjs");
+const require_ColorField = require("../../primitives/ColorField.cjs");
+const require_icons = require("../../primitives/icons.cjs");
+const require_gradients = require("../gradients.cjs");
+const require_sticky = require("../../color/sticky.cjs");
+const require_NumberField = require("../../primitives/NumberField.cjs");
+const require_SegmentedControl = require("../../primitives/SegmentedControl.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/modes/sliders/index.tsx
+const MODELS = [
+	{
+		id: "rgb",
+		label: "RGB",
+		content: "RGB"
+	},
+	{
+		id: "hsl",
+		label: "HSL",
+		content: "HSL"
+	},
+	{
+		id: "hsb",
+		label: "HSB",
+		content: "HSB"
+	}
+];
+function writeRgb(key) {
+	return (value, current) => {
+		const rgba = require_convert.hsvaToRgba(current);
+		return require_sticky.ingest(require_convert.rgbaToHsva({
+			...rgba,
+			[key]: value
+		}), current);
+	};
+}
+function readRgb(key) {
+	return (c) => Math.round(require_convert.hsvaToRgba(c)[key]);
+}
+function SlidersPanel() {
+	const { options } = require_context.usePanel();
+	const [model, setModel] = react.useState("rgb");
+	const alpha = options.showAlpha ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+		label: "Opacity",
+		shortLabel: "A",
+		min: 0,
+		max: 100,
+		read: (c) => c.a * 100,
+		write: (v, c) => ({
+			...c,
+			a: v / 100
+		}),
+		gradient: require_gradients.alphaTrack,
+		channel: "alpha",
+		formatValue: (v) => `${Math.round(v)} percent`
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cp-panel",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
+				size: "sm",
+				ariaLabel: "Colour model",
+				items: MODELS,
+				value: model,
+				onChange: (id) => setModel(id)
+			}),
+			model === "rgb" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Red",
+					shortLabel: "R",
+					min: 0,
+					max: 255,
+					read: readRgb("r"),
+					write: writeRgb("r"),
+					gradient: require_gradients.redTrack,
+					channel: "red"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Green",
+					shortLabel: "G",
+					min: 0,
+					max: 255,
+					read: readRgb("g"),
+					write: writeRgb("g"),
+					gradient: require_gradients.greenTrack,
+					channel: "green"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Blue",
+					shortLabel: "B",
+					min: 0,
+					max: 255,
+					read: readRgb("b"),
+					write: writeRgb("b"),
+					gradient: require_gradients.blueTrack,
+					channel: "blue"
+				}),
+				alpha,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "R",
+							min: 0,
+							max: 255,
+							read: readRgb("r"),
+							write: writeRgb("r")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "G",
+							min: 0,
+							max: 255,
+							read: readRgb("g"),
+							write: writeRgb("g")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "B",
+							min: 0,
+							max: 255,
+							read: readRgb("b"),
+							write: writeRgb("b")
+						})
+					]
+				})
+			] }),
+			model === "hsl" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Hue",
+					shortLabel: "H",
+					min: 0,
+					max: 360,
+					read: (c) => Math.round(c.h),
+					write: (h, c) => ({
+						...c,
+						h
+					}),
+					channel: "hue",
+					formatValue: (v) => `${Math.round(v)} degrees`
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Saturation",
+					shortLabel: "S",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(require_convert.hsvaToHsla(c).s),
+					write: (s, c) => require_sticky.ingest(require_convert.hslaToHsva({
+						...require_convert.hsvaToHsla(c),
+						s
+					}), c),
+					gradient: require_gradients.saturationTrack,
+					channel: "saturation"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Lightness",
+					shortLabel: "L",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(require_convert.hsvaToHsla(c).l),
+					write: (l, c) => require_sticky.ingest(require_convert.hslaToHsva({
+						...require_convert.hsvaToHsla(c),
+						l
+					}), c),
+					gradient: require_gradients.lightnessTrack,
+					channel: "lightness"
+				}),
+				alpha,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "H",
+							min: 0,
+							max: 360,
+							read: (c) => Math.round(c.h),
+							write: (h, c) => ({
+								...c,
+								h
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "S",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(require_convert.hsvaToHsla(c).s),
+							write: (s, c) => require_sticky.ingest(require_convert.hslaToHsva({
+								...require_convert.hsvaToHsla(c),
+								s
+							}), c)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "L",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(require_convert.hsvaToHsla(c).l),
+							write: (l, c) => require_sticky.ingest(require_convert.hslaToHsva({
+								...require_convert.hsvaToHsla(c),
+								l
+							}), c)
+						})
+					]
+				})
+			] }),
+			model === "hsb" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Hue",
+					shortLabel: "H",
+					min: 0,
+					max: 360,
+					read: (c) => Math.round(c.h),
+					write: (h, c) => ({
+						...c,
+						h
+					}),
+					channel: "hue",
+					formatValue: (v) => `${Math.round(v)} degrees`
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Saturation",
+					shortLabel: "S",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(c.s),
+					write: (s, c) => ({
+						...c,
+						s
+					}),
+					gradient: require_gradients.saturationTrack,
+					channel: "saturation"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+					label: "Brightness",
+					shortLabel: "B",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(c.v),
+					write: (v, c) => ({
+						...c,
+						v
+					}),
+					gradient: require_gradients.brightnessTrack,
+					channel: "brightness"
+				}),
+				alpha,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "H",
+							min: 0,
+							max: 360,
+							read: (c) => Math.round(c.h),
+							write: (h, c) => ({
+								...c,
+								h
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "S",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(c.s),
+							write: (s, c) => ({
+								...c,
+								s
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberField.NumberField, {
+							label: "B",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(c.v),
+							write: (v, c) => ({
+								...c,
+								v
+							})
+						})
+					]
+				})
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cp-fields",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorField.ColorField, { withAlpha: options.showAlpha })
+			})
+		]
+	});
+}
+const slidersMode = {
+	id: "sliders",
+	label: "Sliders",
+	icon: require_icons.SlidersIcon,
+	Panel: SlidersPanel
+};
+//#endregion
+exports.SlidersPanel = SlidersPanel;
+exports.slidersMode = slidersMode;

package/dist/modes/sliders/index.d.cts

@@ -0,0 +1,6 @@
+import { PickerMode } from "../registry.cjs";
+import * as React from "react";
+//#region src/modes/sliders/index.d.ts
+export declare function SlidersPanel(): React.ReactElement;
+export declare const slidersMode: PickerMode;
+//#endregion

package/dist/modes/sliders/index.d.ts

@@ -0,0 +1,6 @@
+import { PickerMode } from "../registry.js";
+import * as React from "react";
+//#region src/modes/sliders/index.d.ts
+export declare function SlidersPanel(): React.ReactElement;
+export declare const slidersMode: PickerMode;
+//#endregion

package/dist/modes/sliders/index.js

@@ -0,0 +1,298 @@
+"use client";
+import { usePanel } from "../../core/context.js";
+import { hslaToHsva, hsvaToHsla, hsvaToRgba, rgbaToHsva } from "../../color/convert.js";
+import { ChannelSlider } from "../../primitives/ChannelSlider.js";
+import { ColorField } from "../../primitives/ColorField.js";
+import { SlidersIcon } from "../../primitives/icons.js";
+import { alphaTrack, blueTrack, brightnessTrack, greenTrack, lightnessTrack, redTrack, saturationTrack } from "../gradients.js";
+import { ingest } from "../../color/sticky.js";
+import { NumberField } from "../../primitives/NumberField.js";
+import { SegmentedControl } from "../../primitives/SegmentedControl.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/modes/sliders/index.tsx
+const MODELS = [
+	{
+		id: "rgb",
+		label: "RGB",
+		content: "RGB"
+	},
+	{
+		id: "hsl",
+		label: "HSL",
+		content: "HSL"
+	},
+	{
+		id: "hsb",
+		label: "HSB",
+		content: "HSB"
+	}
+];
+function writeRgb(key) {
+	return (value, current) => {
+		const rgba = hsvaToRgba(current);
+		return ingest(rgbaToHsva({
+			...rgba,
+			[key]: value
+		}), current);
+	};
+}
+function readRgb(key) {
+	return (c) => Math.round(hsvaToRgba(c)[key]);
+}
+function SlidersPanel() {
+	const { options } = usePanel();
+	const [model, setModel] = React.useState("rgb");
+	const alpha = options.showAlpha ? /* @__PURE__ */ jsx(ChannelSlider, {
+		label: "Opacity",
+		shortLabel: "A",
+		min: 0,
+		max: 100,
+		read: (c) => c.a * 100,
+		write: (v, c) => ({
+			...c,
+			a: v / 100
+		}),
+		gradient: alphaTrack,
+		channel: "alpha",
+		formatValue: (v) => `${Math.round(v)} percent`
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cp-panel",
+		children: [
+			/* @__PURE__ */ jsx(SegmentedControl, {
+				size: "sm",
+				ariaLabel: "Colour model",
+				items: MODELS,
+				value: model,
+				onChange: (id) => setModel(id)
+			}),
+			model === "rgb" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Red",
+					shortLabel: "R",
+					min: 0,
+					max: 255,
+					read: readRgb("r"),
+					write: writeRgb("r"),
+					gradient: redTrack,
+					channel: "red"
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Green",
+					shortLabel: "G",
+					min: 0,
+					max: 255,
+					read: readRgb("g"),
+					write: writeRgb("g"),
+					gradient: greenTrack,
+					channel: "green"
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Blue",
+					shortLabel: "B",
+					min: 0,
+					max: 255,
+					read: readRgb("b"),
+					write: writeRgb("b"),
+					gradient: blueTrack,
+					channel: "blue"
+				}),
+				alpha,
+				/* @__PURE__ */ jsxs("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "R",
+							min: 0,
+							max: 255,
+							read: readRgb("r"),
+							write: writeRgb("r")
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "G",
+							min: 0,
+							max: 255,
+							read: readRgb("g"),
+							write: writeRgb("g")
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "B",
+							min: 0,
+							max: 255,
+							read: readRgb("b"),
+							write: writeRgb("b")
+						})
+					]
+				})
+			] }),
+			model === "hsl" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Hue",
+					shortLabel: "H",
+					min: 0,
+					max: 360,
+					read: (c) => Math.round(c.h),
+					write: (h, c) => ({
+						...c,
+						h
+					}),
+					channel: "hue",
+					formatValue: (v) => `${Math.round(v)} degrees`
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Saturation",
+					shortLabel: "S",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(hsvaToHsla(c).s),
+					write: (s, c) => ingest(hslaToHsva({
+						...hsvaToHsla(c),
+						s
+					}), c),
+					gradient: saturationTrack,
+					channel: "saturation"
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Lightness",
+					shortLabel: "L",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(hsvaToHsla(c).l),
+					write: (l, c) => ingest(hslaToHsva({
+						...hsvaToHsla(c),
+						l
+					}), c),
+					gradient: lightnessTrack,
+					channel: "lightness"
+				}),
+				alpha,
+				/* @__PURE__ */ jsxs("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "H",
+							min: 0,
+							max: 360,
+							read: (c) => Math.round(c.h),
+							write: (h, c) => ({
+								...c,
+								h
+							})
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "S",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(hsvaToHsla(c).s),
+							write: (s, c) => ingest(hslaToHsva({
+								...hsvaToHsla(c),
+								s
+							}), c)
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "L",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(hsvaToHsla(c).l),
+							write: (l, c) => ingest(hslaToHsva({
+								...hsvaToHsla(c),
+								l
+							}), c)
+						})
+					]
+				})
+			] }),
+			model === "hsb" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Hue",
+					shortLabel: "H",
+					min: 0,
+					max: 360,
+					read: (c) => Math.round(c.h),
+					write: (h, c) => ({
+						...c,
+						h
+					}),
+					channel: "hue",
+					formatValue: (v) => `${Math.round(v)} degrees`
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Saturation",
+					shortLabel: "S",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(c.s),
+					write: (s, c) => ({
+						...c,
+						s
+					}),
+					gradient: saturationTrack,
+					channel: "saturation"
+				}),
+				/* @__PURE__ */ jsx(ChannelSlider, {
+					label: "Brightness",
+					shortLabel: "B",
+					min: 0,
+					max: 100,
+					read: (c) => Math.round(c.v),
+					write: (v, c) => ({
+						...c,
+						v
+					}),
+					gradient: brightnessTrack,
+					channel: "brightness"
+				}),
+				alpha,
+				/* @__PURE__ */ jsxs("div", {
+					className: "cp-fields",
+					children: [
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "H",
+							min: 0,
+							max: 360,
+							read: (c) => Math.round(c.h),
+							write: (h, c) => ({
+								...c,
+								h
+							})
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "S",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(c.s),
+							write: (s, c) => ({
+								...c,
+								s
+							})
+						}),
+						/* @__PURE__ */ jsx(NumberField, {
+							label: "B",
+							min: 0,
+							max: 100,
+							read: (c) => Math.round(c.v),
+							write: (v, c) => ({
+								...c,
+								v
+							})
+						})
+					]
+				})
+			] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "cp-fields",
+				children: /* @__PURE__ */ jsx(ColorField, { withAlpha: options.showAlpha })
+			})
+		]
+	});
+}
+const slidersMode = {
+	id: "sliders",
+	label: "Sliders",
+	icon: SlidersIcon,
+	Panel: SlidersPanel
+};
+//#endregion
+export { SlidersPanel, slidersMode };
+