chroma-panel 0.1.0

package/dist/modes/wheel/index.cjs

@@ -0,0 +1,62 @@
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../../core/context.cjs");
+const require_ChannelSlider = require("../../primitives/ChannelSlider.cjs");
+const require_ColorDisc = require("../../primitives/ColorDisc.cjs");
+const require_ColorField = require("../../primitives/ColorField.cjs");
+const require_icons = require("../../primitives/icons.cjs");
+const require_gradients = require("../gradients.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/modes/wheel/index.tsx
+function WheelPanel() {
+	const { options } = require_context.usePanel();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cp-panel",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorDisc.ColorDisc, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChannelSlider.ChannelSlider, {
+				label: "Brightness",
+				shortLabel: "B",
+				min: 0,
+				max: 100,
+				read: (c) => c.v,
+				write: (v, c) => ({
+					...c,
+					v
+				}),
+				gradient: require_gradients.brightnessTrack,
+				channel: "brightness",
+				formatValue: (v) => `${Math.round(v)} percent`
+			}),
+			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`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cp-fields",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorField.ColorField, { withAlpha: options.showAlpha })
+			})
+		]
+	});
+}
+const wheelMode = {
+	id: "wheel",
+	label: "Colour wheel",
+	icon: require_icons.WheelIcon,
+	Panel: WheelPanel
+};
+//#endregion
+exports.WheelPanel = WheelPanel;
+exports.wheelMode = wheelMode;

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

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

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

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

package/dist/modes/wheel/index.js

@@ -0,0 +1,60 @@
+"use client";
+import { usePanel } from "../../core/context.js";
+import { ChannelSlider } from "../../primitives/ChannelSlider.js";
+import { ColorDisc } from "../../primitives/ColorDisc.js";
+import { ColorField } from "../../primitives/ColorField.js";
+import { WheelIcon } from "../../primitives/icons.js";
+import { alphaTrack, brightnessTrack } from "../gradients.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/modes/wheel/index.tsx
+function WheelPanel() {
+	const { options } = usePanel();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cp-panel",
+		children: [
+			/* @__PURE__ */ jsx(ColorDisc, {}),
+			/* @__PURE__ */ jsx(ChannelSlider, {
+				label: "Brightness",
+				shortLabel: "B",
+				min: 0,
+				max: 100,
+				read: (c) => c.v,
+				write: (v, c) => ({
+					...c,
+					v
+				}),
+				gradient: brightnessTrack,
+				channel: "brightness",
+				formatValue: (v) => `${Math.round(v)} percent`
+			}),
+			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`
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "cp-fields",
+				children: /* @__PURE__ */ jsx(ColorField, { withAlpha: options.showAlpha })
+			})
+		]
+	});
+}
+const wheelMode = {
+	id: "wheel",
+	label: "Colour wheel",
+	icon: WheelIcon,
+	Panel: WheelPanel
+};
+//#endregion
+export { WheelPanel, wheelMode };
+

package/dist/named-colors.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_namedColors = require("./data/namedColors.cjs");
+exports.namedColors = require_namedColors.namedColors;

package/dist/named-colors.d.cts

@@ -0,0 +1,2 @@
+import { namedColors } from "./data/namedColors.cjs";
+export { namedColors };

package/dist/named-colors.d.ts

@@ -0,0 +1,2 @@
+import { namedColors } from "./data/namedColors.js";
+export { namedColors };

package/dist/named-colors.js

@@ -0,0 +1,2 @@
+import { namedColors } from "./data/namedColors.js";
+export { namedColors };

package/dist/palettes.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.cjs");
+const require_index = require("./modes/palettes/index.cjs");
+//#region src/palettes.ts
+require_registry.registerMode(require_index.palettesMode);
+//#endregion
+exports.PalettesPanel = require_index.PalettesPanel;
+exports.palettesMode = require_index.palettesMode;

package/dist/palettes.d.cts

@@ -0,0 +1,2 @@
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.cjs";
+export { PalettesPanel, palettesMode };

package/dist/palettes.d.ts

@@ -0,0 +1,2 @@
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.js";
+export { PalettesPanel, palettesMode };

package/dist/palettes.js

@@ -0,0 +1,7 @@
+import { registerMode } from "./modes/registry.js";
+import { PalettesPanel, palettesMode } from "./modes/palettes/index.js";
+//#region src/palettes.ts
+registerMode(palettesMode);
+//#endregion
+export { PalettesPanel, palettesMode };
+

package/dist/panel.cjs

@@ -0,0 +1,80 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.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_ChannelSlider = require("./primitives/ChannelSlider.cjs");
+const require_ColorDisc = require("./primitives/ColorDisc.cjs");
+const require_parse = require("./color/parse.cjs");
+const require_serialize = require("./color/serialize.cjs");
+const require_ColorField = require("./primitives/ColorField.cjs");
+const require_icons = require("./primitives/icons.cjs");
+const require_sticky = require("./color/sticky.cjs");
+const require_NumberField = require("./primitives/NumberField.cjs");
+const require_SegmentedControl = require("./primitives/SegmentedControl.cjs");
+const require_SwatchGrid = require("./primitives/SwatchGrid.cjs");
+const require_store = require("./core/store.cjs");
+const require_styleInjector = require("./core/styleInjector.cjs");
+const require_ModeToolbar = require("./components/ModeToolbar.cjs");
+const require_useEyedropper = require("./primitives/useEyedropper.cjs");
+const require_PanelFooter = require("./components/PanelFooter.cjs");
+const require_ChromaPanel = require("./components/ChromaPanel.cjs");
+const require_Popover = require("./components/Popover.cjs");
+const require_ColorInput = require("./components/ColorInput.cjs");
+const require_ColorArea = require("./primitives/ColorArea.cjs");
+const require_Swatch = require("./primitives/Swatch.cjs");
+exports.ChannelSlider = require_ChannelSlider.ChannelSlider;
+exports.ChromaPanel = require_ChromaPanel.ChromaPanel;
+exports.ColorArea = require_ColorArea.ColorArea;
+exports.ColorDisc = require_ColorDisc.ColorDisc;
+exports.ColorField = require_ColorField.ColorField;
+exports.ColorInput = require_ColorInput.ColorInput;
+exports.Icon = require_icons.Icon;
+exports.ModeToolbar = require_ModeToolbar.ModeToolbar;
+exports.NumberField = require_NumberField.NumberField;
+exports.PanelFooter = require_PanelFooter.PanelFooter;
+exports.Popover = require_Popover.Popover;
+exports.SegmentedControl = require_SegmentedControl.SegmentedControl;
+exports.Swatch = require_Swatch.Swatch;
+exports.SwatchGrid = require_SwatchGrid.SwatchGrid;
+exports.clamp = require_convert.clamp;
+exports.clearNamedColors = require_parse.clearNamedColors;
+exports.createColorStore = require_store.createColorStore;
+exports.getMode = require_registry.getMode;
+exports.hslaToHsva = require_convert.hslaToHsva;
+exports.hsvaToHsl = require_convert.hsvaToHsl;
+exports.hsvaToHsla = require_convert.hsvaToHsla;
+exports.hsvaToHwba = require_convert.hsvaToHwba;
+exports.hsvaToRgb = require_convert.hsvaToRgb;
+exports.hsvaToRgba = require_convert.hsvaToRgba;
+exports.hwbaToHsva = require_convert.hwbaToHsva;
+exports.ingest = require_sticky.ingest;
+exports.injectStyles = require_styleInjector.injectStyles;
+exports.isValidColor = require_parse.isValidColor;
+exports.normalizeHue = require_convert.normalizeHue;
+exports.parse = require_parse.parse;
+exports.pushRecent = require_PanelFooter.pushRecent;
+exports.registerMode = require_registry.registerMode;
+exports.registerNamedColors = require_parse.registerNamedColors;
+exports.resolveModes = require_registry.resolveModes;
+exports.rgbaToHsva = require_convert.rgbaToHsva;
+exports.roundRgba = require_convert.roundRgba;
+exports.sameHsva = require_sticky.sameHsva;
+exports.sameRendered = require_sticky.sameRendered;
+exports.setStyleNonce = require_styleInjector.setStyleNonce;
+exports.toFormat = require_serialize.toFormat;
+exports.toHex = require_serialize.toHex;
+exports.toHexa = require_serialize.toHexa;
+exports.toHslString = require_serialize.toHslString;
+exports.toHslaString = require_serialize.toHslaString;
+exports.toResult = require_serialize.toResult;
+exports.toRgbString = require_serialize.toRgbString;
+exports.toRgbaString = require_serialize.toRgbaString;
+exports.useAxisKeyboard = require_usePointerDrag.useAxisKeyboard;
+exports.useColorValue = require_useColorStore.useColorValue;
+exports.useEyedropper = require_useEyedropper.useEyedropper;
+exports.usePanel = require_context.usePanel;
+exports.usePointerDrag = require_usePointerDrag.usePointerDrag;
+exports.useTransientColor = require_useColorStore.useTransientColor;

package/dist/panel.d.cts

@@ -0,0 +1,27 @@
+import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.cjs";
+import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.cjs";
+import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.cjs";
+import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.cjs";
+import { ingest, sameHsva, sameRendered } from "./color/sticky.cjs";
+import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.cjs";
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.cjs";
+import { ChromaClassNames, ColorPalette, PanelOptions, usePanel } from "./core/context.cjs";
+import { ChromaPanel, ChromaPanelProps } from "./components/ChromaPanel.cjs";
+import { ColorInput, ColorInputProps } from "./components/ColorInput.cjs";
+import { Popover, PopoverProps } from "./components/Popover.cjs";
+import { ModeToolbar, ModeToolbarProps } from "./components/ModeToolbar.cjs";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.cjs";
+import { ColorArea, ColorAreaProps } from "./primitives/ColorArea.cjs";
+import { ColorDisc, ColorDiscProps } from "./primitives/ColorDisc.cjs";
+import { ChannelSlider, ChannelSliderProps } from "./primitives/ChannelSlider.cjs";
+import { ColorField, ColorFieldProps } from "./primitives/ColorField.cjs";
+import { NumberField, NumberFieldProps } from "./primitives/NumberField.cjs";
+import { Swatch, SwatchProps } from "./primitives/Swatch.cjs";
+import { SwatchEntry, SwatchGrid, SwatchGridProps, SwatchVariant } from "./primitives/SwatchGrid.cjs";
+import { SegmentedControl, SegmentedControlProps, SegmentedItem } from "./primitives/SegmentedControl.cjs";
+import { Icon, IconName, IconProps } from "./primitives/icons.cjs";
+import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.cjs";
+import { useColorValue, useTransientColor } from "./core/useColorStore.cjs";
+import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.cjs";
+import { injectStyles, setStyleNonce } from "./core/styleInjector.cjs";
+export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeResult, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/panel.d.ts

@@ -0,0 +1,27 @@
+import { ColorChangeResult, ColorFormat, Hsl, Hsla, Hsva, Hwb, Hwba, Rgb, Rgba } from "./color/types.js";
+import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
+import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
+import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
+import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
+import { ColorListener, ColorStore, Unsubscribe, createColorStore } from "./core/store.js";
+import { ModeId, PickerMode, getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { ChromaClassNames, ColorPalette, PanelOptions, usePanel } from "./core/context.js";
+import { ChromaPanel, ChromaPanelProps } from "./components/ChromaPanel.js";
+import { ColorInput, ColorInputProps } from "./components/ColorInput.js";
+import { Popover, PopoverProps } from "./components/Popover.js";
+import { ModeToolbar, ModeToolbarProps } from "./components/ModeToolbar.js";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.js";
+import { ColorArea, ColorAreaProps } from "./primitives/ColorArea.js";
+import { ColorDisc, ColorDiscProps } from "./primitives/ColorDisc.js";
+import { ChannelSlider, ChannelSliderProps } from "./primitives/ChannelSlider.js";
+import { ColorField, ColorFieldProps } from "./primitives/ColorField.js";
+import { NumberField, NumberFieldProps } from "./primitives/NumberField.js";
+import { Swatch, SwatchProps } from "./primitives/Swatch.js";
+import { SwatchEntry, SwatchGrid, SwatchGridProps, SwatchVariant } from "./primitives/SwatchGrid.js";
+import { SegmentedControl, SegmentedControlProps, SegmentedItem } from "./primitives/SegmentedControl.js";
+import { Icon, IconName, IconProps } from "./primitives/icons.js";
+import { Eyedropper, useEyedropper } from "./primitives/useEyedropper.js";
+import { useColorValue, useTransientColor } from "./core/useColorStore.js";
+import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.js";
+import { injectStyles, setStyleNonce } from "./core/styleInjector.js";
+export { ChannelSlider, type ChannelSliderProps, type ChromaClassNames, ChromaPanel, type ChromaPanelProps, ColorArea, type ColorAreaProps, ColorChangeResult, ColorDisc, type ColorDiscProps, ColorField, type ColorFieldProps, ColorFormat, ColorInput, type ColorInputProps, type ColorListener, type ColorPalette, type ColorStore, type Eyedropper, Hsl, Hsla, Hsva, Hwb, Hwba, Icon, type IconName, type IconProps, type ModeId, ModeToolbar, type ModeToolbarProps, NumberField, type NumberFieldProps, PanelFooter, type PanelOptions, type PickerMode, Popover, type PopoverProps, Rgb, Rgba, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Swatch, type SwatchEntry, SwatchGrid, type SwatchGridProps, type SwatchProps, type SwatchVariant, type Unsubscribe, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/panel.js

@@ -0,0 +1,27 @@
+"use client";
+import { getMode, registerMode, resolveModes } from "./modes/registry.js";
+import { usePanel } from "./core/context.js";
+import { clamp, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, normalizeHue, rgbaToHsva, roundRgba } from "./color/convert.js";
+import { useColorValue, useTransientColor } from "./core/useColorStore.js";
+import { useAxisKeyboard, usePointerDrag } from "./core/usePointerDrag.js";
+import { ChannelSlider } from "./primitives/ChannelSlider.js";
+import { ColorDisc } from "./primitives/ColorDisc.js";
+import { clearNamedColors, isValidColor, parse, registerNamedColors } from "./color/parse.js";
+import { toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString } from "./color/serialize.js";
+import { ColorField } from "./primitives/ColorField.js";
+import { Icon } from "./primitives/icons.js";
+import { ingest, sameHsva, sameRendered } from "./color/sticky.js";
+import { NumberField } from "./primitives/NumberField.js";
+import { SegmentedControl } from "./primitives/SegmentedControl.js";
+import { SwatchGrid } from "./primitives/SwatchGrid.js";
+import { createColorStore } from "./core/store.js";
+import { injectStyles, setStyleNonce } from "./core/styleInjector.js";
+import { ModeToolbar } from "./components/ModeToolbar.js";
+import { useEyedropper } from "./primitives/useEyedropper.js";
+import { PanelFooter, pushRecent } from "./components/PanelFooter.js";
+import { ChromaPanel } from "./components/ChromaPanel.js";
+import { Popover } from "./components/Popover.js";
+import { ColorInput } from "./components/ColorInput.js";
+import { ColorArea } from "./primitives/ColorArea.js";
+import { Swatch } from "./primitives/Swatch.js";
+export { ChannelSlider, ChromaPanel, ColorArea, ColorDisc, ColorField, ColorInput, Icon, ModeToolbar, NumberField, PanelFooter, Popover, SegmentedControl, Swatch, SwatchGrid, clamp, clearNamedColors, createColorStore, getMode, hslaToHsva, hsvaToHsl, hsvaToHsla, hsvaToHwba, hsvaToRgb, hsvaToRgba, hwbaToHsva, ingest, injectStyles, isValidColor, normalizeHue, parse, pushRecent, registerMode, registerNamedColors, resolveModes, rgbaToHsva, roundRgba, sameHsva, sameRendered, setStyleNonce, toFormat, toHex, toHexa, toHslString, toHslaString, toResult, toRgbString, toRgbaString, useAxisKeyboard, useColorValue, useEyedropper, usePanel, usePointerDrag, useTransientColor };

package/dist/pencils.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./modes/registry.cjs");
+const require_index = require("./modes/pencils/index.cjs");
+//#region src/pencils.ts
+require_registry.registerMode(require_index.pencilsMode);
+//#endregion
+exports.PencilsPanel = require_index.PencilsPanel;
+exports.pencilsMode = require_index.pencilsMode;

package/dist/pencils.d.cts

@@ -0,0 +1,2 @@
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.cjs";
+export { PencilsPanel, pencilsMode };

package/dist/pencils.d.ts

@@ -0,0 +1,2 @@
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.js";
+export { PencilsPanel, pencilsMode };

package/dist/pencils.js

@@ -0,0 +1,7 @@
+import { registerMode } from "./modes/registry.js";
+import { PencilsPanel, pencilsMode } from "./modes/pencils/index.js";
+//#region src/pencils.ts
+registerMode(pencilsMode);
+//#endregion
+export { PencilsPanel, pencilsMode };
+

package/dist/primitives/AxisInput.cjs

@@ -0,0 +1,26 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/AxisInput.tsx
+const AxisInput = react.forwardRef(function AxisInput(props, ref) {
+	const { label, min, max, step, defaultValue, disabled, valueText, onInput, onCommit } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		type: "range",
+		className: "cp-visually-hidden",
+		"aria-label": label,
+		"aria-valuetext": valueText,
+		min,
+		max,
+		step: step ?? 1,
+		defaultValue,
+		disabled,
+		onChange: (e) => onInput(e.currentTarget.valueAsNumber),
+		onKeyUp: onCommit,
+		onBlur: onCommit
+	});
+});
+//#endregion
+exports.AxisInput = AxisInput;

package/dist/primitives/AxisInput.js

@@ -0,0 +1,25 @@
+"use client";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/AxisInput.tsx
+const AxisInput = React.forwardRef(function AxisInput(props, ref) {
+	const { label, min, max, step, defaultValue, disabled, valueText, onInput, onCommit } = props;
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "range",
+		className: "cp-visually-hidden",
+		"aria-label": label,
+		"aria-valuetext": valueText,
+		min,
+		max,
+		step: step ?? 1,
+		defaultValue,
+		disabled,
+		onChange: (e) => onInput(e.currentTarget.valueAsNumber),
+		onKeyUp: onCommit,
+		onBlur: onCommit
+	});
+});
+//#endregion
+export { AxisInput };
+

package/dist/primitives/ChannelSlider.cjs

@@ -0,0 +1,94 @@
+"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/ChannelSlider.tsx
+function ChannelSlider(props) {
+	const { label, shortLabel, min, max, step, read, write, gradient, channel, formatValue, className } = props;
+	const { store, disabled, classNames } = require_context.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
+		};
+	});
+	require_useColorStore.useTransientColor(store, (c) => {
+		const value = fns.current.read(c);
+		const ratio = max === min ? 0 : require_convert.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 = require_usePointerDrag.usePointerDrag({
+		disabled,
+		onMove: ({ x }) => store.set(write(min + x * (max - min), store.get())),
+		onEnd: () => store.commit()
+	});
+	const initial = read(store.get());
+	const track = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: trackRef,
+		className: require_context.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: fillRef,
+				className: "cp-slider-fill",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
+				ref: inputRef,
+				label,
+				min,
+				max,
+				step: step ?? 1,
+				defaultValue: initial,
+				disabled,
+				onInput: (v) => store.set(write(v, store.get())),
+				onCommit: () => store.commit()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_context.cx("cp-thumb", classNames.thumb),
+				"aria-hidden": "true"
+			})
+		]
+	});
+	if (shortLabel === void 0) return track;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cp-slider-row",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cp-slider-label",
+			"aria-hidden": "true",
+			children: shortLabel
+		}), track]
+	});
+}
+//#endregion
+exports.ChannelSlider = ChannelSlider;

package/dist/primitives/ChannelSlider.d.cts

@@ -0,0 +1,18 @@
+import { Hsva } from "../color/types.cjs";
+import * as React from "react";
+//#region src/primitives/ChannelSlider.d.ts
+export interface ChannelSliderProps {
+  label: string;
+  shortLabel?: string;
+  min: number;
+  max: number;
+  step?: number;
+  read: (color: Hsva) => number;
+  write: (value: number, current: Hsva) => Hsva;
+  gradient?: (color: Hsva) => string;
+  channel?: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+export declare function ChannelSlider(props: ChannelSliderProps): React.ReactElement;
+//#endregion

package/dist/primitives/ChannelSlider.d.ts

@@ -0,0 +1,18 @@
+import { Hsva } from "../color/types.js";
+import * as React from "react";
+//#region src/primitives/ChannelSlider.d.ts
+export interface ChannelSliderProps {
+  label: string;
+  shortLabel?: string;
+  min: number;
+  max: number;
+  step?: number;
+  read: (color: Hsva) => number;
+  write: (value: number, current: Hsva) => Hsva;
+  gradient?: (color: Hsva) => string;
+  channel?: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+export declare function ChannelSlider(props: ChannelSliderProps): React.ReactElement;
+//#endregion