@stridge/noctis 1.0.0-beta.0

package/dist/components/color-picker/color.js

@@ -0,0 +1,224 @@
+import { converter, formatHex, formatHex8, parse } from "culori";
+//#region src/components/color-picker/color.ts
+/**
+* The color core for {@link ColorPicker} — the one module in the design system that legitimately
+* authors raw color, the same exception the theme engine carries. Every conversion, every CSS color
+* string the picker paints (thumb fills, hue spectrum, the saturation/value field, the alpha
+* checkerboard) is produced here, so the component files stay free of raw color literals and keep to
+* semantic tokens. `stridge/semantic-tokens` is turned off for this file alone in `.oxlintrc.json`.
+*
+* `culori` does the science; its color objects never leak past this module. Internally the picker
+* stores an RGB canonical plus an HSV mirror (HSV drives the 2D field and the hue wheel, where RGB
+* round-trips lose the hue at the gray axis). Channel scales follow editing-friendly ranges, not
+* culori's `[0,1]`: RGB `[0,255]`, HSV/HSL `h [0,360]` · `s,v,l [0,100]`, OKLCH `l [0,100]%` ·
+* `c [0,0.4]` · `h [0,360]`, alpha `[0,1]` throughout.
+*/
+/** Every format, in tab order. OKLCH first. */
+const COLOR_FORMATS = [
+	"oklch",
+	"hex",
+	"rgb",
+	"hsl"
+];
+/** The default color for an uncontrolled picker with no value — the Noctis Blue accent seed. */
+const DEFAULT_COLOR = "oklch(0.504 0.151 275.2)";
+const toRgb = converter("rgb");
+const toHsv = converter("hsv");
+const toHsl = converter("hsl");
+const toOklch = converter("oklch");
+/** A black fallback, used when a conversion fails (out-of-range input). Keeps the channels finite. */
+const BLACK = {
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 1
+};
+/** Parse any CSS color string into canonical RGB, or `null` if it isn't a color. */
+function parseColor(input) {
+	const parsed = parse(input);
+	if (!parsed) return null;
+	const rgb = toRgb(parsed);
+	if (!rgb) return null;
+	return {
+		r: to255(rgb.r),
+		g: to255(rgb.g),
+		b: to255(rgb.b),
+		a: rgb.alpha ?? 1
+	};
+}
+/** Whether a string is a parseable CSS color — the validity test the text inputs commit on. */
+function isValidColor(input) {
+	return parse(input) !== void 0;
+}
+/** A 6-digit hex, optionally `#`-prefixed (opaque). */
+const HEX6 = /^#?[0-9a-f]{6}$/i;
+/** An 8-digit hex, optionally `#`-prefixed (with alpha). */
+const HEX8 = /^#?[0-9a-f]{8}$/i;
+/** Convert canonical RGB to HSV (preserving hue/alpha across the gray axis where RGB can't). */
+function rgbToHsv(rgb) {
+	const hsv = toHsv({
+		mode: "rgb",
+		r: rgb.r / 255,
+		g: rgb.g / 255,
+		b: rgb.b / 255,
+		alpha: rgb.a
+	});
+	if (!hsv) return {
+		h: 0,
+		s: 0,
+		v: 0,
+		a: rgb.a
+	};
+	return {
+		h: wrapHue(hsv.h ?? 0),
+		s: round((hsv.s ?? 0) * 100),
+		v: round((hsv.v ?? 0) * 100),
+		a: rgb.a
+	};
+}
+/** Convert HSV back to canonical RGB, clamped into the sRGB gamut. */
+function hsvToRgb(hsv) {
+	const rgb = toRgb({
+		mode: "hsv",
+		h: hsv.h,
+		s: hsv.s / 100,
+		v: hsv.v / 100,
+		alpha: hsv.a
+	});
+	if (!rgb) return {
+		...BLACK,
+		a: hsv.a
+	};
+	return {
+		r: to255(rgb.r),
+		g: to255(rgb.g),
+		b: to255(rgb.b),
+		a: hsv.a
+	};
+}
+/** Serialize canonical RGB to the given format. `withAlpha` keeps the alpha channel in the output. */
+function formatColor(rgb, format, withAlpha) {
+	switch (format) {
+		case "hex": return formatHexString(rgb, withAlpha);
+		case "rgb": return formatRgbString(rgb, withAlpha);
+		case "hsl": return formatHslString(toHsl({
+			mode: "rgb",
+			r: rgb.r / 255,
+			g: rgb.g / 255,
+			b: rgb.b / 255,
+			alpha: rgb.a
+		}), withAlpha);
+		case "oklch": return formatOklchString(toOklch({
+			mode: "rgb",
+			r: rgb.r / 255,
+			g: rgb.g / 255,
+			b: rgb.b / 255,
+			alpha: rgb.a
+		}), withAlpha);
+	}
+}
+/** An opaque `rgb()` string for a thumb border, the field base, or a solid swatch. */
+function rgbCss(rgb) {
+	return `rgb(${byte(rgb.r)} ${byte(rgb.g)} ${byte(rgb.b)})`;
+}
+/** The fully-saturated, full-value color at a hue — the base wash under the saturation/value field. */
+function hueCss(hue) {
+	return rgbCss(hsvToRgb({
+		h: hue,
+		s: 100,
+		v: 100,
+		a: 1
+	}));
+}
+/** The swatch fill for the current color: solid when opaque, color-over-checkerboard when translucent. */
+function swatchFillCss(rgb, withAlpha) {
+	if (!withAlpha || rgb.a >= 1) return rgbCss(rgb);
+	return `linear-gradient(${rgbaCss(rgb)}, ${rgbaCss(rgb)}), ${CHECKERBOARD}`;
+}
+/** The alpha-slider track: transparent → the opaque color, laid over the checkerboard. */
+function alphaTrackCss(rgb) {
+	return `linear-gradient(to right, rgb(0 0 0 / 0), ${rgbCss(rgb)}), ${CHECKERBOARD}`;
+}
+/**
+* The slider/area handle border stack — a 2px white ring fenced by a translucent-black hairline on
+* both sides, so the thumb stays legible over any hue (the Adobe-style color handle). Apply as the
+* thumb's `box-shadow`, over a color-on-checkerboard `background`.
+*/
+const HANDLE_SHADOW = "inset 0 0 0 1px rgb(0 0 0 / 0.42), 0 0 0 2px rgb(255 255 255), 0 0 0 3px rgb(0 0 0 / 0.42)";
+/**
+* The "no color" diagonal slash for a fully-transparent swatch — a thin stroke in the color the
+* element carries (set `color` to a token and the stroke follows via `currentColor`).
+*/
+function slashCss() {
+	return "linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat";
+}
+/** The full hue spectrum, left (0°) to right (360°). Flip with `rtl:-scale-x-100` for reading order. */
+const HUE_GRADIENT = "linear-gradient(to right, oklch(63% 0.25 29), oklch(80% 0.2 86), oklch(87% 0.25 142), oklch(90% 0.18 195), oklch(60% 0.22 264), oklch(55% 0.28 328), oklch(63% 0.25 389))";
+/** The white→transparent wash that fades the field from gray (left) to full chroma (right). */
+const FIELD_SATURATION_GRADIENT = "linear-gradient(to right, oklch(100% 0 0), oklch(100% 0 0 / 0))";
+/** The transparent→black wash that darkens the field from top to bottom. */
+const FIELD_VALUE_GRADIENT = "linear-gradient(to top, oklch(0% 0 0), oklch(0% 0 0 / 0))";
+/** A small checkerboard, the universal "transparency" backing behind translucent color. */
+const CHECKERBOARD = "repeating-conic-gradient(oklch(75% 0 0) 0% 25%, oklch(100% 0 0) 0% 50%) 50% / 12px 12px";
+function rgbaCss(rgb) {
+	return `rgb(${byte(rgb.r)} ${byte(rgb.g)} ${byte(rgb.b)} / ${trim(rgb.a.toFixed(3))})`;
+}
+function formatHexString(rgb, withAlpha) {
+	const color = {
+		mode: "rgb",
+		r: rgb.r / 255,
+		g: rgb.g / 255,
+		b: rgb.b / 255,
+		alpha: rgb.a
+	};
+	return !withAlpha || rgb.a >= 1 ? formatHex(color) : formatHex8(color);
+}
+function formatRgbString(rgb, withAlpha) {
+	const r = byte(rgb.r);
+	const g = byte(rgb.g);
+	const b = byte(rgb.b);
+	if (!withAlpha || rgb.a >= 1) return `rgb(${r} ${g} ${b})`;
+	return `rgb(${r} ${g} ${b} / ${trim(rgb.a.toFixed(3))})`;
+}
+function formatHslString(hsl, withAlpha) {
+	if (!hsl) return "hsl(0 0% 0%)";
+	const h = round(wrapHue(hsl.h ?? 0));
+	const s = round(hsl.s * 100);
+	const l = round(hsl.l * 100);
+	const a = hsl.alpha ?? 1;
+	if (!withAlpha || a >= 1) return `hsl(${h} ${s}% ${l}%)`;
+	return `hsl(${h} ${s}% ${l}% / ${trim(a.toFixed(3))})`;
+}
+function formatOklchString(oklch, withAlpha) {
+	if (!oklch) return "oklch(0% 0 0)";
+	const l = `${trim((oklch.l * 100).toFixed(2))}%`;
+	const c = trim(oklch.c.toFixed(3));
+	const h = trim(wrapHue(oklch.h ?? 0).toFixed(2));
+	const a = oklch.alpha ?? 1;
+	if (!withAlpha || a >= 1) return `oklch(${l} ${c} ${h})`;
+	return `oklch(${l} ${c} ${h} / ${trim(a.toFixed(3))})`;
+}
+/** culori `[0,1]` channel → an sRGB byte `[0,255]`. */
+function to255(channel) {
+	if (Number.isNaN(channel)) return 0;
+	return Math.max(0, Math.min(255, Math.round(channel * 255)));
+}
+/** Clamp an already-`[0,255]` channel to a whole byte. */
+function byte(channel) {
+	if (Number.isNaN(channel)) return 0;
+	return Math.max(0, Math.min(255, Math.round(channel)));
+}
+function round(n, decimals = 0) {
+	if (Number.isNaN(n)) return 0;
+	const factor = 10 ** decimals;
+	return Math.round(n * factor) / factor;
+}
+function wrapHue(n) {
+	if (Number.isNaN(n)) return 0;
+	return (n % 360 + 360) % 360;
+}
+function trim(s) {
+	return s.includes(".") ? s.replace(/0+$/, "").replace(/\.$/, "") : s;
+}
+//#endregion
+export { COLOR_FORMATS, DEFAULT_COLOR, FIELD_SATURATION_GRADIENT, FIELD_VALUE_GRADIENT, HANDLE_SHADOW, HEX6, HEX8, HUE_GRADIENT, alphaTrackCss, formatColor, hsvToRgb, hueCss, isValidColor, parseColor, rgbCss, rgbToHsv, slashCss, swatchFillCss };

package/dist/components/color-picker/context.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/color-picker/context.d.ts
+/**
+ * The accessible names the picker's parts announce. Published as a prop on `ColorPicker.Root` so an
+ * app can localize them (the package ships no i18n runtime); the English defaults below keep an
+ * unconfigured picker fully labelled. Defined as a constant — not inline JSX — so it satisfies the
+ * no-hardcoded-strings rule, the same way a consumer passes translated strings through.
+ */
+interface ColorPickerLabels {
+  /** Names the 2D saturation/value field. */
+  field: string;
+  /** Names the hue slider. */
+  hue: string;
+  /** Names the alpha slider. */
+  alpha: string;
+  /** Names the current-color preview swatch. */
+  swatch: string;
+  /** The eyedropper button. */
+  eyeDropper: string;
+  /** Names the format selector group. */
+  format: string;
+  /** Names the color value text input. */
+  value: string;
+}
+//#endregion
+export { ColorPickerLabels };

package/dist/components/color-picker/context.js

@@ -0,0 +1,23 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/color-picker/context.ts
+/** Sensible English defaults, merged with a consumer's partial `labels` on `ColorPicker.Root`. */
+const DEFAULT_LABELS = {
+	field: "Saturation and brightness",
+	hue: "Hue",
+	alpha: "Alpha",
+	swatch: "Selected color",
+	eyeDropper: "Pick a color from the screen",
+	format: "Color format",
+	value: "Color value"
+};
+const ColorPickerContext = createContext(null);
+const ColorPickerProvider = ColorPickerContext.Provider;
+/** Read the picker context, throwing a named error if a part is used outside `ColorPicker.Root`. */
+function useColorPickerContext(part) {
+	const context = use(ColorPickerContext);
+	if (!context) throw new Error(`ColorPicker.${part} must be used within a ColorPicker.Root.`);
+	return context;
+}
+//#endregion
+export { ColorPickerProvider, DEFAULT_LABELS, useColorPickerContext };

package/dist/components/color-picker/eyedropper.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/eyedropper.d.ts
+/**
+ * Samples a color from anywhere on screen via the native EyeDropper API. Renders nothing where the
+ * API is absent (Firefox, Safari), so it never offers a dead button.
+ */
+declare function ColorPickerEyeDropper({
+  className
+}: {
+  className?: string;
+}): ReactElement | null;
+//#endregion
+export { ColorPickerEyeDropper };

package/dist/components/color-picker/eyedropper.js

@@ -0,0 +1,50 @@
+"use client";
+import { PipetteIcon } from "../../icons/glyphs.js";
+import { Button } from "../button/button.js";
+import { parseColor, rgbToHsv } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-picker/eyedropper.tsx
+/**
+* Samples a color from anywhere on screen via the native EyeDropper API. Renders nothing where the
+* API is absent (Firefox, Safari), so it never offers a dead button.
+*/
+function ColorPickerEyeDropper({ className }) {
+	const { alpha, disabled, store, labels } = useColorPickerContext("EyeDropper");
+	const [supported, setSupported] = useState(false);
+	useEffect(() => {
+		setSupported(typeof window !== "undefined" && "EyeDropper" in window);
+	}, []);
+	if (!supported) return null;
+	const pick = async () => {
+		if (disabled) return;
+		const Ctor = window.EyeDropper;
+		if (!Ctor) return;
+		try {
+			const { sRGBHex } = await new Ctor().open();
+			const rgb = parseColor(sRGBHex);
+			if (!rgb) return;
+			const next = {
+				...rgb,
+				a: alpha ? store.getState().color.a : 1
+			};
+			store.setColorAndHsv(next, rgbToHsv(next));
+		} catch {}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": COLOR_PICKER_SLOTS.eyeDropper,
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		disabled,
+		"aria-label": labels.eyeDropper,
+		startIcon: PipetteIcon,
+		onClick: pick,
+		className
+	});
+}
+//#endregion
+export { ColorPickerEyeDropper };

package/dist/components/color-picker/format-tabs.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/format-tabs.d.ts
+/** A segmented selector that switches the active output format. OKLCH leads, then HEX, RGB, HSL. */
+declare function ColorPickerFormatTabs({
+  className
+}: {
+  className?: string;
+}): ReactElement;
+//#endregion
+export { ColorPickerFormatTabs };

package/dist/components/color-picker/format-tabs.js

@@ -0,0 +1,35 @@
+"use client";
+import { COLOR_FORMATS } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useColorPickerStore } from "./store.js";
+import { toggle_exports } from "../../primitives/toggle.js";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-picker/format-tabs.tsx
+/** The visible label per format — code-like names, held as data so they read as specimen text. */
+const FORMAT_LABELS = {
+	oklch: "OKLCH",
+	hex: "HEX",
+	rgb: "RGB",
+	hsl: "HSL"
+};
+/** A segmented selector that switches the active output format. OKLCH leads, then HEX, RGB, HSL. */
+function ColorPickerFormatTabs({ className }) {
+	const { disabled, store, labels } = useColorPickerContext("FormatTabs");
+	const format = useColorPickerStore(store, (state) => state.format);
+	return /* @__PURE__ */ jsx("fieldset", {
+		"aria-label": labels.format,
+		"data-slot": COLOR_PICKER_SLOTS.formatTabs,
+		"data-disabled": disabled ? "" : void 0,
+		className: clsx$1(className),
+		children: COLOR_FORMATS.map((id) => /* @__PURE__ */ jsx(toggle_exports.Toggle, {
+			pressed: format === id,
+			disabled,
+			onPressedChange: () => store.setFormat(id),
+			children: FORMAT_LABELS[id]
+		}, id))
+	});
+}
+//#endregion
+export { ColorPickerFormatTabs };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { ColorFormat } from "./color.js";
+import { ColorPickerLabels } from "./context.js";
+import { ColorPicker } from "./color-picker.js";

package/dist/components/color-picker/inputs.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/inputs.d.ts
+/**
+ * The color value field, in the active format. It accepts any CSS color while you type (so pasting a
+ * `#hex` over an `oklch()` works) and re-serializes to the chosen format. Typing is held in a local
+ * draft so an in-progress value like `#ff` shows literally and flags invalid, rather than snapping
+ * back; on blur the draft is dropped and the field returns to canonical.
+ */
+declare function ColorPickerInput({
+  className
+}: {
+  className?: string;
+}): ReactElement;
+//#endregion
+export { ColorPickerInput };

package/dist/components/color-picker/inputs.js

@@ -0,0 +1,61 @@
+"use client";
+import { HEX6, HEX8, formatColor, isValidColor, parseColor, rgbToHsv } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useColorPickerStore } from "./store.js";
+import { useState } from "react";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-picker/inputs.tsx
+/**
+* The color value field, in the active format. It accepts any CSS color while you type (so pasting a
+* `#hex` over an `oklch()` works) and re-serializes to the chosen format. Typing is held in a local
+* draft so an in-progress value like `#ff` shows literally and flags invalid, rather than snapping
+* back; on blur the draft is dropped and the field returns to canonical.
+*/
+function ColorPickerInput({ className }) {
+	const { alpha, disabled, readOnly, store, labels } = useColorPickerContext("Input");
+	const color = useColorPickerStore(store, (state) => state.color);
+	const format = useColorPickerStore(store, (state) => state.format);
+	const value = formatColor(color, format, alpha);
+	const [draft, setDraft] = useState(null);
+	const display = draft ?? value;
+	const invalid = draft !== null && draft.length > 0 && !accepts(draft, format, alpha);
+	const onChange = (event) => {
+		const next = event.target.value;
+		setDraft(next);
+		if (!accepts(next, format, alpha)) return;
+		const rgb = parseColor(format === "hex" ? withHash(next) : next);
+		if (!rgb) return;
+		const constrained = {
+			...rgb,
+			a: alpha ? rgb.a : 1
+		};
+		store.setColorAndHsv(constrained, rgbToHsv(constrained));
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": COLOR_PICKER_SLOTS.input,
+		type: "text",
+		spellCheck: false,
+		autoComplete: "off",
+		"aria-label": labels.value,
+		"aria-invalid": invalid || void 0,
+		disabled,
+		readOnly,
+		value: display,
+		onChange,
+		onFocus: () => setDraft(value),
+		onBlur: () => setDraft(null),
+		className: clsx$1(className)
+	});
+}
+/** Hex gets a strict digit check (6 or 8, with/without `#`); other formats accept any CSS color. */
+function accepts(raw, format, alpha) {
+	if (format === "hex") return alpha ? HEX6.test(raw) || HEX8.test(raw) : HEX6.test(raw);
+	return isValidColor(raw);
+}
+function withHash(raw) {
+	return raw.startsWith("#") ? raw : `#${raw}`;
+}
+//#endregion
+export { ColorPickerInput };

package/dist/components/color-picker/sliders.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/sliders.d.ts
+/** The hue rail (0–360°), painted with the full spectrum; the thumb carries the live color. */
+declare function ColorPickerHueSlider({
+  className
+}: {
+  className?: string;
+}): ReactElement;
+/** The alpha rail (0–100%), transparent → opaque over a checkerboard. Rendered only when alpha is on. */
+declare function ColorPickerAlphaSlider({
+  className
+}: {
+  className?: string;
+}): ReactElement | null;
+//#endregion
+export { ColorPickerAlphaSlider, ColorPickerHueSlider };

package/dist/components/color-picker/sliders.js

@@ -0,0 +1,94 @@
+"use client";
+import { HANDLE_SHADOW, HUE_GRADIENT, alphaTrackCss, hsvToRgb, rgbCss, swatchFillCss } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useColorPickerStore } from "./store.js";
+import { Slider } from "../../primitives/slider/slider.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/color-picker/sliders.tsx
+/** The hue rail (0–360°), painted with the full spectrum; the thumb carries the live color. */
+function ColorPickerHueSlider({ className }) {
+	const { disabled, store, labels } = useColorPickerContext("HueSlider");
+	const hue = useColorPickerStore(store, (state) => state.hsv.h);
+	const color = useColorPickerStore(store, (state) => state.color);
+	return /* @__PURE__ */ jsx(ChannelSlider, {
+		slot: COLOR_PICKER_SLOTS.hue,
+		thumbSlot: COLOR_PICKER_SLOTS.hueThumb,
+		ariaLabel: labels.hue,
+		value: Math.round(hue),
+		max: 360,
+		disabled,
+		trackBackground: HUE_GRADIENT,
+		thumbBackground: rgbCss(color),
+		className,
+		onValueChange: (next) => {
+			const hsv = {
+				...store.getState().hsv,
+				h: next
+			};
+			store.setColorAndHsv(hsvToRgb(hsv), hsv);
+		}
+	});
+}
+/** The alpha rail (0–100%), transparent → opaque over a checkerboard. Rendered only when alpha is on. */
+function ColorPickerAlphaSlider({ className }) {
+	const { alpha, disabled, store, labels } = useColorPickerContext("AlphaSlider");
+	const color = useColorPickerStore(store, (state) => state.color);
+	if (!alpha) return null;
+	return /* @__PURE__ */ jsx(ChannelSlider, {
+		slot: COLOR_PICKER_SLOTS.alpha,
+		thumbSlot: COLOR_PICKER_SLOTS.alphaThumb,
+		ariaLabel: labels.alpha,
+		value: Math.round(color.a * 100),
+		max: 100,
+		disabled,
+		trackBackground: alphaTrackCss(color),
+		thumbBackground: swatchFillCss(color, true),
+		className,
+		onValueChange: (next) => {
+			const a = next / 100;
+			const state = store.getState();
+			store.setColorAndHsv({
+				...state.color,
+				a
+			}, {
+				...state.hsv,
+				a
+			});
+		}
+	});
+}
+/** The shared rail behind the hue and alpha sliders, built on Base UI's `Slider` for behavior + a11y. */
+function ChannelSlider({ slot, thumbSlot, ariaLabel, value, max, disabled, trackBackground, thumbBackground, className, onValueChange }) {
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-slot": slot,
+		value,
+		min: 0,
+		max,
+		step: 1,
+		disabled,
+		onValueChange: (next) => onValueChange(typeof next === "number" ? next : next[0] ?? 0),
+		className: clsx$1(className),
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			"data-color-picker-channel-control": true,
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				"data-color-picker-channel-track": true,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					"data-color-picker-channel-track-fill": true,
+					style: { background: trackBackground }
+				})
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": thumbSlot,
+				getAriaLabel: () => ariaLabel,
+				style: {
+					background: thumbBackground,
+					boxShadow: HANDLE_SHADOW
+				}
+			})]
+		})
+	});
+}
+//#endregion
+export { ColorPickerAlphaSlider, ColorPickerHueSlider };

package/dist/components/color-picker/store.js

@@ -0,0 +1,48 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#region src/components/color-picker/store.ts
+/** Create a store seeded with the initial state. One per `ColorPicker.Root`, held across renders. */
+function createColorPickerStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	return {
+		getState: () => state,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		setColorAndHsv: (color, hsv) => {
+			if (sameRgb(state.color, color) && sameHsv(state.hsv, hsv)) return;
+			state = {
+				...state,
+				color,
+				hsv
+			};
+			emit();
+		},
+		setFormat: (format) => {
+			if (state.format === format) return;
+			state = {
+				...state,
+				format
+			};
+			emit();
+		}
+	};
+}
+/** Subscribe to a slice of the store. Re-renders only when the selected value changes identity. */
+function useColorPickerStore(store, selector) {
+	const read = () => selector(store.getState());
+	return useSyncExternalStore(store.subscribe, read, read);
+}
+function sameRgb(a, b) {
+	return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+}
+function sameHsv(a, b) {
+	return a.h === b.h && a.s === b.s && a.v === b.v && a.a === b.a;
+}
+//#endregion
+export { createColorPickerStore, useColorPickerStore };

package/dist/components/color-picker/swatch.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/swatch.d.ts
+/**
+ * A small preview chip of the current color — solid when opaque, over a checkerboard when translucent.
+ * Decorative: the color is already announced through the value input, so the swatch stays out of the
+ * a11y tree rather than repeating it.
+ */
+declare function ColorPickerSwatch({
+  className
+}: {
+  className?: string;
+}): ReactElement;
+//#endregion
+export { ColorPickerSwatch };

package/dist/components/color-picker/swatch.js

@@ -0,0 +1,25 @@
+"use client";
+import { swatchFillCss } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useColorPickerStore } from "./store.js";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-picker/swatch.tsx
+/**
+* A small preview chip of the current color — solid when opaque, over a checkerboard when translucent.
+* Decorative: the color is already announced through the value input, so the swatch stays out of the
+* a11y tree rather than repeating it.
+*/
+function ColorPickerSwatch({ className }) {
+	const { alpha, store } = useColorPickerContext("Swatch");
+	const color = useColorPickerStore(store, (state) => state.color);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": COLOR_PICKER_SLOTS.swatch,
+		style: { background: swatchFillCss(color, alpha) },
+		className: clsx$1(className)
+	});
+}
+//#endregion
+export { ColorPickerSwatch };