@cueplusplus/ui 0.13.0

package/dist/color/_convert.js

@@ -0,0 +1,66 @@
+import { clampChroma, converter, formatHex, formatHex8, inGamut, parse } from "culori";
+//#region src/color/_convert.ts
+const toOklch = converter("oklch");
+const srgb = inGamut("rgb");
+/** Round to `digits` and drop trailing zeros, so `0.70000` prints as `0.7`. */
+function round(value, digits) {
+	return String(Number(value.toFixed(digits)));
+}
+/**
+* Convert any CSS colour string to `#rrggbb` (or `#rrggbbaa` when it carries
+* alpha).
+*
+* The bridge into React Aria's colour parts, which only parse sRGB notations —
+* hand them an `oklch()` token value and they throw. Colours outside the sRGB
+* gamut have their **chroma** pulled in rather than their channels clipped:
+* clipping `oklch(0.7 0.4 30)` gives pure red, losing the lightness the author
+* chose, while clamping keeps it at `#ff6551`.
+*
+* @param input - Any CSS colour string.
+* @returns The lower-case hex string, or `null` if the input is not a colour.
+* @example
+* toHexString("oklch(0.7 0.15 30)") // "#ed7665"
+*/
+function toHexString(input) {
+	const parsed = parse(input);
+	if (parsed === void 0) return null;
+	const inSrgb = srgb(parsed) ? parsed : clampChroma(parsed, "oklch", "rgb");
+	const alpha = parsed.alpha;
+	return alpha === void 0 || alpha >= 1 ? formatHex(inSrgb) : formatHex8(inSrgb);
+}
+/**
+* Re-print a colour in one of the two notations the suite writes.
+*
+* The oklch form is emitted at the precision a round trip needs — four decimals
+* of lightness and chroma, two of hue — which is exactly enough for
+* `toHexString(formatColorString(hex, "oklch")) === hex` across the sRGB cube.
+* An achromatic colour has no hue, so it prints `0` rather than `NaN`.
+*
+* @param input - Any CSS colour string.
+* @param format - The notation to write.
+* @returns The formatted colour, or `null` if the input is not a colour.
+* @example
+* formatColorString("#3fa9f5", "oklch") // "oklch(0.7083 0.1466 244.05)"
+*/
+function formatColorString(input, format) {
+	const hex = toHexString(input);
+	if (hex === null) return null;
+	if (format === "hex") return hex;
+	const color = toOklch(parse(hex));
+	if (color === void 0) return null;
+	const body = `${round(color.l, 4)} ${round(color.c, 4)} ${round(color.h ?? 0, 2)}`;
+	const alpha = color.alpha;
+	return alpha === void 0 || alpha >= 1 ? `oklch(${body})` : `oklch(${body} / ${round(alpha, 3)})`;
+}
+/**
+* Which notation a value is authored in, so a control can hand back what it was
+* given instead of quietly rewriting a token file into hex.
+*
+* @param input - Any CSS colour string.
+* @returns `"oklch"` for an `oklch()` value, `"hex"` for everything else.
+*/
+function detectColorFormat(input) {
+	return /^\s*oklch\(/i.test(input) ? "oklch" : "hex";
+}
+//#endregion
+export { detectColorFormat, formatColorString, toHexString };

package/dist/color/_glyphs.js

@@ -0,0 +1,28 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/color/_glyphs.tsx
+/**
+* Glyphs for the colour group.
+*
+* Drawn inline for the same reason as `forms/_glyphs.tsx`: one icon on one
+* button should not put an icon dependency on the render path, and hand-set
+* strokes stay hairline-thin at the 8–12px sizes console density asks for.
+*
+* @internal Not part of the public API.
+*/
+/** An eyedropper: sample a colour from anywhere on the screen. */
+function EyedropperGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.25",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M10.5 2.5a1.8 1.8 0 0 1 2.5 2.5l-1.4 1.4 1 1-1.2 1.2-1-1-4.3 4.3-2.6.6.6-2.6 4.3-4.3-1-1L8.6 3.4l1 1z" })
+	});
+}
+//#endregion
+export { EyedropperGlyph };

package/dist/color/_thumb.js

@@ -0,0 +1,15 @@
+//#region src/color/_thumb.ts
+/**
+* The draggable puck shared by the colour area and every colour rail.
+*
+* The one place in this system where a ring is not a token colour: the thumb
+* sits on top of arbitrary user colour, so it needs a light rim *and* a dark
+* halo to stay visible against both ends of the spectrum. `--cue-fg` /
+* `--cue-bg` supply the pair, which keeps it theme-driven without pretending a
+* single token could do the job.
+*
+* @internal Not part of the public API.
+*/
+const colorThumbClasses = "size-[0.875rem] rounded-full border-2 border-fg shadow-[0_0_0_1px_var(--cue-bg)] outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-solid data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-accent data-[dragging]:scale-110 data-[disabled]:opacity-40";
+//#endregion
+export { colorThumbClasses };

package/dist/color/_value.js

@@ -0,0 +1,28 @@
+import { toHexString } from "./_convert.js";
+import { parseColor } from "react-aria-components";
+//#region src/color/_value.ts
+/**
+* Turn whatever the caller passed into something React Aria can hold.
+*
+* React Aria parses `#rgb`, `rgb()`, `hsl()` and `hsb()` and *keeps the space
+* it was given* — which matters, because a slider for `channel="hue"` only
+* exists on an HSL or HSB colour. So the library gets first refusal: only when
+* it cannot parse the string (an `oklch()` token, a named colour) does this
+* fall back to converting through culori, which necessarily lands in sRGB.
+*
+* Converting unconditionally would be simpler and wrong: it would quietly turn
+* every `hsl()` into a hex value and break the hue rail.
+*
+* @internal Not part of the public API.
+*/
+function toAriaColor(value) {
+	if (typeof value !== "string") return value;
+	try {
+		return parseColor(value);
+	} catch {
+		const hex = toHexString(value);
+		return parseColor(hex ?? value);
+	}
+}
+//#endregion
+export { toAriaColor };

package/dist/color/color-area.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { ColorAreaProps } from "react-aria-components";
+//#region src/color/color-area.d.ts
+interface ColorAreaProps$1 extends Omit<ColorAreaProps, "children"> {
+  /** Extra classes for the thumb. */
+  thumbClassName?: string;
+}
+/**
+ * The two-axis colour field — saturation against brightness, by default.
+ *
+ * Wraps React Aria's `ColorArea`, so the pointer maths, the two hidden range
+ * inputs that make it keyboard- and screen-reader-operable, and the gradient
+ * background are the library's. This layer adds the rim, the radius and the
+ * shared thumb.
+ *
+ * String values may be written in any notation this suite reads, `oklch()`
+ * included — React Aria only parses sRGB, so they are converted on the way in.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/color`.
+ *
+ * @example
+ * <ColorArea aria-label="Saturation and brightness" value={color} onChange={setColor} />
+ */
+declare function ColorArea$1({ className, thumbClassName, value, defaultValue, ...areaProps }: ColorAreaProps$1): React.JSX.Element;
+//#endregion
+export { ColorArea$1 as ColorArea, ColorAreaProps$1 as ColorAreaProps };

package/dist/color/color-area.js

@@ -0,0 +1,40 @@
+"use client";
+import { ariaClassName } from "../lib/aria-class.js";
+import { colorThumbClasses } from "./_thumb.js";
+import { toAriaColor } from "./_value.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { ColorArea, ColorThumb } from "react-aria-components";
+//#region src/color/color-area.tsx
+/**
+* The two-axis colour field — saturation against brightness, by default.
+*
+* Wraps React Aria's `ColorArea`, so the pointer maths, the two hidden range
+* inputs that make it keyboard- and screen-reader-operable, and the gradient
+* background are the library's. This layer adds the rim, the radius and the
+* shared thumb.
+*
+* String values may be written in any notation this suite reads, `oklch()`
+* included — React Aria only parses sRGB, so they are converted on the way in.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/color`.
+*
+* @example
+* <ColorArea aria-label="Saturation and brightness" value={color} onChange={setColor} />
+*/
+function ColorArea$1({ className, thumbClassName, value, defaultValue, ...areaProps }) {
+	return /* @__PURE__ */ jsx(ColorArea, {
+		"data-slot": "color-area",
+		className: ariaClassName("relative h-[9rem] w-full touch-none rounded-(--radius-control) border border-border outline-none data-[disabled]:opacity-40", className),
+		value: toAriaColor(value),
+		defaultValue: toAriaColor(defaultValue),
+		...areaProps,
+		children: /* @__PURE__ */ jsx(ColorThumb, {
+			"data-slot": "color-thumb",
+			className: ariaClassName(colorThumbClasses, thumbClassName)
+		})
+	});
+}
+//#endregion
+export { ColorArea$1 as ColorArea };

package/dist/color/color-field.d.ts

@@ -0,0 +1,32 @@
+import { FormControlSize } from "../forms/_chassis.js";
+import * as React from "react";
+import { ColorFieldProps, InputProps } from "react-aria-components";
+//#region src/color/color-field.d.ts
+interface ColorFieldProps$1 extends Omit<ColorFieldProps, "children"> {
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Extra classes for the input itself. */
+  inputClassName?: InputProps["className"];
+}
+/**
+ * A typed colour value — the whole colour as hex, or one channel as a number.
+ *
+ * Wraps React Aria's `ColorField`, so parsing, arrow-key stepping and the
+ * commit-on-blur behaviour are the library's; the input rides the same recessed
+ * chassis as every other text control.
+ *
+ * React Aria only parses sRGB notations, so it edits **hex**. For a field that
+ * also accepts `oklch()` — the notation this system's tokens are authored in —
+ * use `ColorPicker`, which owns the conversion.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/color`.
+ *
+ * @example
+ * <ColorField aria-label="Accent" value={color} onChange={setColor} />
+ * @example
+ * <ColorField aria-label="Red" channel="red" colorSpace="rgb" size="sm" />
+ */
+declare function ColorField$1({ size, className, inputClassName, value, defaultValue, ...fieldProps }: ColorFieldProps$1): React.JSX.Element;
+//#endregion
+export { ColorField$1 as ColorField, ColorFieldProps$1 as ColorFieldProps };

package/dist/color/color-field.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { controlVariants } from "../forms/_chassis.js";
+import { ariaClassName } from "../lib/aria-class.js";
+import { toAriaColor } from "./_value.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { ColorField, Input } from "react-aria-components";
+//#region src/color/color-field.tsx
+/**
+* A typed colour value — the whole colour as hex, or one channel as a number.
+*
+* Wraps React Aria's `ColorField`, so parsing, arrow-key stepping and the
+* commit-on-blur behaviour are the library's; the input rides the same recessed
+* chassis as every other text control.
+*
+* React Aria only parses sRGB notations, so it edits **hex**. For a field that
+* also accepts `oklch()` — the notation this system's tokens are authored in —
+* use `ColorPicker`, which owns the conversion.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/color`.
+*
+* @example
+* <ColorField aria-label="Accent" value={color} onChange={setColor} />
+* @example
+* <ColorField aria-label="Red" channel="red" colorSpace="rgb" size="sm" />
+*/
+function ColorField$1({ size, className, inputClassName, value, defaultValue, ...fieldProps }) {
+	return /* @__PURE__ */ jsx(ColorField, {
+		"data-slot": "color-field",
+		className: ariaClassName("inline-flex flex-col gap-(--cue-space-1)", className),
+		value: toAriaColor(value),
+		defaultValue: toAriaColor(defaultValue),
+		...fieldProps,
+		children: /* @__PURE__ */ jsx(Input, {
+			"data-slot": "color-field-input",
+			className: ariaClassName(cn(controlVariants({ size }), "uppercase"), inputClassName)
+		})
+	});
+}
+//#endregion
+export { ColorField$1 as ColorField };

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

@@ -0,0 +1,71 @@
+import { ColorFormat } from "./_convert.js";
+import { FormControlSize } from "../forms/_chassis.js";
+import * as React from "react";
+//#region src/color/color-picker.d.ts
+interface ColorPickerProps {
+  /** The colour, in any notation this suite reads. Use with `onValueChange`. */
+  value?: string;
+  /** Initial colour for an uncontrolled picker. Defaults to `"#000000"`. */
+  defaultValue?: string;
+  /** Called with the new colour, written in the picker's output notation. */
+  onValueChange?: (value: string) => void;
+  /**
+   * Notation to write back. Defaults to the notation the current value arrived
+   * in — hand it an `oklch()` token and you get `oklch()` back, so editing a
+   * theme file never silently rewrites it into hex.
+   */
+  format?: ColorFormat;
+  /** Show the alpha rail and keep alpha in the output. Defaults to `false`. */
+  alpha?: boolean;
+  /** Accessible name for the trigger. Defaults to `"Color"`. */
+  label?: string;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Prevent opening and grey the trigger out. */
+  disabled?: boolean;
+  /** Print the value beside the swatch on the trigger. Defaults to `true`. */
+  showValue?: boolean;
+  /** Name for the hidden input, when the picker is part of a form. */
+  name?: string;
+  /** Id forwarded to the trigger. */
+  id?: string;
+  /** Extra classes for the trigger. */
+  className?: string;
+  /** Extra classes for the popup surface. */
+  popupClassName?: string;
+  /** Open state, for a controlled popover. */
+  open?: boolean;
+  /** Initial open state. */
+  defaultOpen?: boolean;
+  /** Called when the popover opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A colour, edited in a popover: two-axis area, hue rail, optional alpha rail,
+ * a text field that speaks hex *and* oklch, and an eyedropper where the browser
+ * has one.
+ *
+ * Composed from the React Aria colour parts rather than wrapping a single
+ * primitive, because no primitive owns the combination. Two decisions are this
+ * component's own:
+ *
+ * - **Notation in, notation out.** React Aria only parses sRGB; this system's
+ *   tokens are authored in `oklch()`. The picker converts on both edges
+ *   (culori), and writes back in the notation it was given unless `format` says
+ *   otherwise. This is what makes it usable as the theme configurator's editor.
+ * - **Hue survives black.** The working colour is held as HSB and only re-read
+ *   from the incoming string when that string changes for some *other* reason,
+ *   so dragging the area down to black and back does not reset the hue — the
+ *   defect every naive "derive state from the value" picker has.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/color`.
+ *
+ * @example
+ * <ColorPicker label="Accent" value={accent} onValueChange={setAccent} />
+ * @example
+ * <ColorPicker label="Scrim" value="oklch(0.2 0 0 / 0.55)" alpha format="oklch" />
+ */
+declare function ColorPicker({ value, defaultValue, onValueChange, format, alpha, label, size, disabled, showValue, name, id, className, popupClassName, open, defaultOpen, onOpenChange }: ColorPickerProps): React.JSX.Element;
+//#endregion
+export { ColorPicker, ColorPickerProps };

package/dist/color/color-picker.js

@@ -0,0 +1,178 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { controlVariants } from "../forms/_chassis.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { Popover } from "../overlays/popover.js";
+import { detectColorFormat, formatColorString, toHexString } from "./_convert.js";
+import { ColorArea as ColorArea$1 } from "./color-area.js";
+import { EyedropperGlyph } from "./_glyphs.js";
+import { ColorSlider as ColorSlider$1 } from "./color-slider.js";
+import { ColorSwatch as ColorSwatch$1 } from "./color-swatch.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { parseColor } from "react-aria-components";
+//#region src/color/color-picker.tsx
+/** Fallback when a caller opens the picker with nothing selected. */
+const FALLBACK_COLOR = "#000000";
+/** Parse anything the suite reads into the HSB colour the parts work in. */
+function toHsb(input) {
+	return parseColor(toHexString(input) ?? FALLBACK_COLOR).toFormat("hsb");
+}
+/**
+* A colour, edited in a popover: two-axis area, hue rail, optional alpha rail,
+* a text field that speaks hex *and* oklch, and an eyedropper where the browser
+* has one.
+*
+* Composed from the React Aria colour parts rather than wrapping a single
+* primitive, because no primitive owns the combination. Two decisions are this
+* component's own:
+*
+* - **Notation in, notation out.** React Aria only parses sRGB; this system's
+*   tokens are authored in `oklch()`. The picker converts on both edges
+*   (culori), and writes back in the notation it was given unless `format` says
+*   otherwise. This is what makes it usable as the theme configurator's editor.
+* - **Hue survives black.** The working colour is held as HSB and only re-read
+*   from the incoming string when that string changes for some *other* reason,
+*   so dragging the area down to black and back does not reset the hue — the
+*   defect every naive "derive state from the value" picker has.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/color`.
+*
+* @example
+* <ColorPicker label="Accent" value={accent} onValueChange={setAccent} />
+* @example
+* <ColorPicker label="Scrim" value="oklch(0.2 0 0 / 0.55)" alpha format="oklch" />
+*/
+function ColorPicker({ value, defaultValue, onValueChange, format, alpha = false, label = "Color", size, disabled, showValue = true, name, id, className, popupClassName, open, defaultOpen, onOpenChange }) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? FALLBACK_COLOR);
+	const current = value ?? uncontrolled;
+	const outputFormat = format ?? detectColorFormat(current);
+	const [color, setColor] = React.useState(() => toHsb(current));
+	const emitted = React.useRef(null);
+	React.useEffect(() => {
+		if (current === emitted.current) return;
+		setColor(toHsb(current));
+	}, [current]);
+	const [draft, setDraft] = React.useState(current);
+	const [draftInvalid, setDraftInvalid] = React.useState(false);
+	React.useEffect(() => {
+		setDraft(current);
+		setDraftInvalid(false);
+	}, [current]);
+	const [hasEyeDropper, setHasEyeDropper] = React.useState(false);
+	React.useEffect(() => {
+		setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
+	}, []);
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+	const isOpen = open ?? uncontrolledOpen;
+	const setOpen = (next) => {
+		if (open === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	};
+	const applyColor = (next) => {
+		setColor(next);
+		const hex = next.toString(alpha ? "hexa" : "hex");
+		const out = formatColorString(hex, outputFormat) ?? hex;
+		emitted.current = out;
+		if (value === void 0) setUncontrolled(out);
+		onValueChange?.(out);
+	};
+	const applyString = (next) => {
+		const hex = toHexString(next);
+		if (hex === null) {
+			setDraftInvalid(true);
+			return;
+		}
+		setDraftInvalid(false);
+		applyColor(parseColor(hex).toFormat("hsb"));
+	};
+	const pickFromScreen = () => {
+		const EyeDropper = globalThis.EyeDropper;
+		if (EyeDropper === void 0) return;
+		new EyeDropper().open().then((result) => applyString(result.sRGBHex)).catch(() => {});
+	};
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsxs(Popover.Trigger, {
+				render: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					id,
+					disabled,
+					"aria-label": label,
+					"data-slot": "color-picker-trigger",
+					className: cn(controlVariants({ size }), "flex w-auto cursor-pointer items-center gap-(--cue-space-2) text-left", className)
+				}),
+				children: [/* @__PURE__ */ jsx(ColorSwatch$1, {
+					color,
+					size: "sm"
+				}), showValue ? /* @__PURE__ */ jsx("span", {
+					className: "truncate tabular-nums",
+					children: current
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs(Popover.Content, {
+				className: cn("w-[14rem] gap-(--cue-space-3) p-(--cue-space-3)", popupClassName),
+				align: "start",
+				"data-slot": "color-picker-popup",
+				children: [
+					/* @__PURE__ */ jsx(ColorArea$1, {
+						"aria-label": "Saturation and brightness",
+						xChannel: "saturation",
+						yChannel: "brightness",
+						value: color,
+						onChange: applyColor
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-(--cue-space-2)",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-(--cue-space-2)",
+							children: [/* @__PURE__ */ jsx(ColorSlider$1, {
+								"aria-label": "Hue",
+								channel: "hue",
+								value: color,
+								onChange: applyColor
+							}), alpha ? /* @__PURE__ */ jsx(ColorSlider$1, {
+								"aria-label": "Alpha",
+								channel: "alpha",
+								value: color,
+								onChange: applyColor
+							}) : null]
+						}), hasEyeDropper ? /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": "Pick a color from the screen",
+							icon: EyedropperGlyph,
+							size: "sm",
+							onClick: pickFromScreen
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						"aria-label": "Color value",
+						"aria-invalid": draftInvalid ? "true" : void 0,
+						spellCheck: false,
+						autoComplete: "off",
+						"data-slot": "color-picker-value",
+						className: cn(controlVariants({ size: "sm" }), "font-mono"),
+						value: draft,
+						onChange: (event) => setDraft(event.target.value),
+						onBlur: () => applyString(draft),
+						onKeyDown: (event) => {
+							if (event.key !== "Enter") return;
+							event.preventDefault();
+							applyString(draft);
+						}
+					})
+				]
+			}),
+			name === void 0 ? null : /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: current
+			})
+		]
+	});
+}
+//#endregion
+export { ColorPicker };

package/dist/color/color-slider.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { ColorSliderProps } from "react-aria-components";
+//#region src/color/color-slider.d.ts
+interface ColorSliderProps$1 extends Omit<ColorSliderProps, "children"> {
+  /** Extra classes for the frame around the track. */
+  frameClassName?: string;
+  /** Extra classes for the gradient track. */
+  trackClassName?: string;
+  /** Extra classes for the thumb. */
+  thumbClassName?: string;
+}
+/**
+ * One channel of a colour, as a rail: hue, alpha, lightness, a single RGB
+ * channel.
+ *
+ * Wraps React Aria's `ColorSlider`, which paints the channel's gradient and
+ * owns the keyboard and pointer behaviour. The alpha channel gets the
+ * transparency checkerboard — without it, "half transparent" and "half grey"
+ * are the same picture. It goes on the frame rather than the track because
+ * React Aria writes the gradient into the track's inline `background`, which
+ * would paint straight over a checkerboard set by a class.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/color`.
+ *
+ * @example
+ * <ColorSlider aria-label="Hue" channel="hue" value={color} onChange={setColor} />
+ */
+declare function ColorSlider$1({ className, frameClassName, trackClassName, thumbClassName, channel, value, defaultValue, ...sliderProps }: ColorSliderProps$1): React.JSX.Element;
+//#endregion
+export { ColorSlider$1 as ColorSlider, ColorSliderProps$1 as ColorSliderProps };

package/dist/color/color-slider.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ariaClassName } from "../lib/aria-class.js";
+import { colorThumbClasses } from "./_thumb.js";
+import { toAriaColor } from "./_value.js";
+import "./_checker.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { ColorSlider, ColorThumb, SliderTrack } from "react-aria-components";
+//#region src/color/color-slider.tsx
+/**
+* One channel of a colour, as a rail: hue, alpha, lightness, a single RGB
+* channel.
+*
+* Wraps React Aria's `ColorSlider`, which paints the channel's gradient and
+* owns the keyboard and pointer behaviour. The alpha channel gets the
+* transparency checkerboard — without it, "half transparent" and "half grey"
+* are the same picture. It goes on the frame rather than the track because
+* React Aria writes the gradient into the track's inline `background`, which
+* would paint straight over a checkerboard set by a class.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/color`.
+*
+* @example
+* <ColorSlider aria-label="Hue" channel="hue" value={color} onChange={setColor} />
+*/
+function ColorSlider$1({ className, frameClassName, trackClassName, thumbClassName, channel, value, defaultValue, ...sliderProps }) {
+	return /* @__PURE__ */ jsx(ColorSlider, {
+		"data-slot": "color-slider",
+		channel,
+		className: ariaClassName("w-full touch-none data-[disabled]:opacity-40", className),
+		value: toAriaColor(value),
+		defaultValue: toAriaColor(defaultValue),
+		...sliderProps,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "color-slider-frame",
+			className: cn("relative rounded-full border border-border", channel === "alpha" && "bg-[repeating-conic-gradient(var(--cue-surface-3)_0%_25%,var(--cue-surface-1)_0%_50%)] bg-[length:0.5rem_0.5rem]", frameClassName),
+			children: /* @__PURE__ */ jsx(SliderTrack, {
+				"data-slot": "color-slider-track",
+				className: ariaClassName("relative h-icon-sm w-full rounded-full", trackClassName),
+				children: /* @__PURE__ */ jsx(ColorThumb, {
+					"data-slot": "color-thumb",
+					className: ariaClassName(cn(colorThumbClasses, "top-1/2"), thumbClassName)
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { ColorSlider$1 as ColorSlider };

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { ColorSwatchProps } from "react-aria-components";
+//#region src/color/color-swatch.d.ts
+/** Rung of the icon ladder a swatch sits on. */
+type ColorSwatchSize = "sm" | "md" | "lg";
+interface ColorSwatchProps$1 extends Omit<ColorSwatchProps, "className"> {
+  /** Rung of the icon ladder. Defaults to `"md"`. */
+  size?: ColorSwatchSize;
+  /** Extra classes for the frame. */
+  className?: string;
+}
+/**
+ * A colour, shown as a chip.
+ *
+ * Two elements rather than one: the frame carries the rim, the radius and the
+ * transparency checkerboard, and React Aria's `ColorSwatch` paints the colour
+ * on top of it. One element cannot do both — the library writes the colour into
+ * the inline `background-color`, which paints *behind* a background image, so a
+ * checkerboard set on the same element would cover the colour instead of
+ * backing it.
+ *
+ * Takes any notation this suite reads, `oklch()` included.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/color`.
+ *
+ * @example
+ * <ColorSwatch color="oklch(0.7 0.15 30)" />
+ */
+declare function ColorSwatch$1({ size, className, color, ...swatchProps }: ColorSwatchProps$1): React.JSX.Element;
+//#endregion
+export { ColorSwatch$1 as ColorSwatch, ColorSwatchProps$1 as ColorSwatchProps, ColorSwatchSize };