@stridge/noctis 1.0.0-beta.0

package/dist/components/collapsible/collapsible.slots.js

@@ -0,0 +1,40 @@
+//#region src/components/collapsible/collapsible.slots.ts
+/**
+* The slot vocabulary every `Collapsible` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix; SLOTS.md
+* still generates from the token-graph declarations. The root groups state, the trigger toggles it, and
+* the panel holds the disclosed content (mirroring Base UI's Collapsible); the optional heading wraps the
+* trigger for the document outline, and the group is the presentational stacked container.
+*/
+const COLLAPSIBLE_SLOTS = {
+	root: "noctis-collapsible",
+	trigger: "noctis-collapsible-trigger",
+	panel: "noctis-collapsible-panel",
+	heading: "noctis-collapsible-heading",
+	group: "noctis-collapsible-group"
+};
+/**
+* The data attributes `Collapsible`'s parts expose for styling and testing. Each member's value is the
+* attribute name and its JSDoc is the description; the docs API reference reads this enum directly, so
+* the documented attributes can't drift from the precompiled `collapsible.css` rules that key off them.
+* The state attributes are stamped at runtime by Base UI off the live open state.
+*/
+let CollapsibleDataAttributes = /* @__PURE__ */ function(CollapsibleDataAttributes) {
+	/** The catalog slot that anchors every `collapsible.css` rule and marks the part for SLOTS.md/testing. */
+	CollapsibleDataAttributes["slot"] = "data-slot";
+	/** Present on the panel while the disclosure is open. */
+	CollapsibleDataAttributes["open"] = "data-open";
+	/** Present on the panel while the disclosure is closed. */
+	CollapsibleDataAttributes["closed"] = "data-closed";
+	/** Present on the trigger while its panel is open — the hook the disclosure chevron rotates off. */
+	CollapsibleDataAttributes["panelOpen"] = "data-panel-open";
+	/** Present on the panel for the first animation frame as it opens — the from-zero-height keyframe edge. */
+	CollapsibleDataAttributes["startingStyle"] = "data-starting-style";
+	/** Present on the panel for the final animation frame as it closes — the to-zero-height keyframe edge. */
+	CollapsibleDataAttributes["endingStyle"] = "data-ending-style";
+	/** Present on the trigger and panel when the collapsible is disabled. */
+	CollapsibleDataAttributes["disabled"] = "data-disabled";
+	return CollapsibleDataAttributes;
+}({});
+//#endregion
+export { COLLAPSIBLE_SLOTS, CollapsibleDataAttributes };

package/dist/components/collapsible/collapsible.types.d.ts

@@ -0,0 +1,23 @@
+//#region src/components/collapsible/collapsible.types.d.ts
+/**
+ * Shared, runtime-free Collapsible types. Kept in their own module so the orchestration, props, and
+ * context files import one shape without a cycle through `collapsible.tsx`.
+ */
+/**
+ * The disclosure indicator. `true` (the default) and `"chevron-end"` render the chevron after the label
+ * — it points down and rotates to up as the panel opens (the in-flow accordion idiom). `"chevron-start"`
+ * is the leading "twisty": the chevron sits *before* the label, points toward the content's start edge
+ * (right in LTR, mirrored in RTL), and rotates down on open — the file-tree / sidebar-row reading.
+ * `false` omits the built-in chevron so a consumer can supply their own.
+ */
+type CollapsibleIndicator = boolean | "chevron-start" | "chevron-end";
+/** The heading level `Collapsible.Heading` renders. Defaults to `3`. */
+type CollapsibleHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The ARIA role the open panel carries. `"group"` (the default, matching React Aria) names a labelled
+ * grouping without adding a landmark; `"region"` promotes the panel to a landmark for the SR rotor —
+ * reserve it for a small number of significant disclosures so the landmark list stays useful.
+ */
+type CollapsiblePanelRole = "group" | "region";
+//#endregion
+export { CollapsibleHeadingLevel, CollapsibleIndicator, CollapsiblePanelRole };

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { Collapsible } from "./collapsible.js";
+import { CollapsibleDataAttributes } from "./collapsible.slots.js";

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

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+
+//#region src/components/color-picker/area.d.ts
+/** The 2D saturation × brightness field: horizontal sets saturation, vertical sets value. */
+declare function ColorPickerArea({
+  className
+}: {
+  className?: string;
+}): ReactElement;
+//#endregion
+export { ColorPickerArea };

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

@@ -0,0 +1,148 @@
+"use client";
+import { direction_provider_exports } from "../../primitives/direction-provider.js";
+import { FIELD_SATURATION_GRADIENT, FIELD_VALUE_GRADIENT, hsvToRgb, hueCss, rgbCss } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { useColorPickerContext } from "./context.js";
+import { useColorPickerStore } from "./store.js";
+import { useRef } from "react";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/color-picker/area.tsx
+/** The 2D saturation × brightness field: horizontal sets saturation, vertical sets value. */
+function ColorPickerArea({ className }) {
+	const { disabled, store, labels } = useColorPickerContext("Area");
+	const direction = (0, direction_provider_exports.useDirection)();
+	const hsv = useColorPickerStore(store, (state) => state.hsv);
+	const color = useColorPickerStore(store, (state) => state.color);
+	const areaRef = useRef(null);
+	const draggingRef = useRef(false);
+	const updateFromPoint = (clientX, clientY) => {
+		const node = areaRef.current;
+		if (!node) return;
+		const rect = node.getBoundingClientRect();
+		const ratioX = clamp01((clientX - rect.left) / rect.width);
+		const s = (direction === "rtl" ? 1 - ratioX : ratioX) * 100;
+		const v = (1 - clamp01((clientY - rect.top) / rect.height)) * 100;
+		commit(store, {
+			...store.getState().hsv,
+			s,
+			v
+		});
+	};
+	const handlePointerDown = (event) => {
+		if (disabled || event.button !== void 0 && event.button !== 0) return;
+		draggingRef.current = true;
+		areaRef.current?.setPointerCapture(event.pointerId);
+		areaRef.current?.focus({ preventScroll: true });
+		updateFromPoint(event.clientX, event.clientY);
+	};
+	const handlePointerMove = (event) => {
+		if (draggingRef.current) updateFromPoint(event.clientX, event.clientY);
+	};
+	const handlePointerUp = (event) => {
+		if (!draggingRef.current) return;
+		draggingRef.current = false;
+		areaRef.current?.releasePointerCapture(event.pointerId);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		const current = store.getState().hsv;
+		const step = event.shiftKey ? 10 : 1;
+		const inlineSign = direction === "rtl" ? -1 : 1;
+		const next = nextFromKey(event.key, current, step, inlineSign);
+		if (!next) return;
+		event.preventDefault();
+		commit(store, next);
+	};
+	const sat = Math.round(hsv.s);
+	const val = Math.round(hsv.v);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		"data-slot": COLOR_PICKER_SLOTS.area,
+		"data-disabled": disabled ? "" : void 0,
+		role: "slider",
+		tabIndex: disabled ? -1 : 0,
+		"aria-label": labels.field,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": sat,
+		"aria-valuetext": `${sat}%, ${val}%`,
+		"aria-disabled": disabled || void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerUp,
+		onKeyDown: handleKeyDown,
+		style: { backgroundColor: hueCss(hsv.h) },
+		className: clsx$1(className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-color-picker-area-gradient": "saturation",
+				style: { background: FIELD_SATURATION_GRADIENT }
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-color-picker-area-gradient": "value",
+				style: { background: FIELD_VALUE_GRADIENT }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-slot": COLOR_PICKER_SLOTS.areaThumb,
+				style: {
+					insetInlineStart: `${hsv.s}%`,
+					insetBlockStart: `${100 - hsv.v}%`,
+					backgroundColor: rgbCss(color)
+				}
+			})
+		]
+	});
+}
+function commit(store, hsv) {
+	store.setColorAndHsv(hsvToRgb(hsv), hsv);
+}
+function nextFromKey(key, current, step, inlineSign) {
+	switch (key) {
+		case "ArrowLeft": return {
+			...current,
+			s: clampPct(current.s - step * inlineSign)
+		};
+		case "ArrowRight": return {
+			...current,
+			s: clampPct(current.s + step * inlineSign)
+		};
+		case "ArrowUp": return {
+			...current,
+			v: clampPct(current.v + step)
+		};
+		case "ArrowDown": return {
+			...current,
+			v: clampPct(current.v - step)
+		};
+		case "Home": return {
+			...current,
+			s: 0
+		};
+		case "End": return {
+			...current,
+			s: 100
+		};
+		case "PageUp": return {
+			...current,
+			v: 100
+		};
+		case "PageDown": return {
+			...current,
+			v: 0
+		};
+		default: return null;
+	}
+}
+function clamp01(n) {
+	return Math.max(0, Math.min(1, n));
+}
+function clampPct(n) {
+	return Math.max(0, Math.min(100, n));
+}
+//#endregion
+export { ColorPickerArea };

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

@@ -0,0 +1,110 @@
+import { Surface } from "../surface/surface.js";
+import { ColorPickerArea } from "./area.js";
+import { ColorFormat } from "./color.js";
+import { alphaSliderProps, areaProps, eyeDropperProps, formatTabsProps, hueSliderProps, inputProps, panelProps, swatchProps } from "./color-picker.props.js";
+import { ColorPickerLabels } from "./context.js";
+import { ColorPickerEyeDropper } from "./eyedropper.js";
+import { ColorPickerFormatTabs } from "./format-tabs.js";
+import { ColorPickerInput } from "./inputs.js";
+import { ColorPickerAlphaSlider, ColorPickerHueSlider } from "./sliders.js";
+import { ColorPickerSwatch } from "./swatch.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/color-picker/color-picker.d.ts
+/**
+ * Owns the color state and shares it with every part. Works controlled (`value` + `onValueChange`) or
+ * uncontrolled (`defaultValue`); reads and writes any CSS color, defaulting to OKLCH output. Renders no
+ * element of its own — arrange the parts inside a `ColorPicker.Panel`. The picker is purely a picker; to
+ * float it, wrap the `Panel` in the standalone `Popover` (see the docs example).
+ */
+declare function ColorPickerRoot({
+  value,
+  defaultValue,
+  format,
+  defaultFormat,
+  alpha,
+  disabled,
+  readOnly,
+  onValueChange,
+  onFormatChange,
+  labels,
+  children
+}: ColorPicker.Root.Props): ReactElement;
+/** The container the parts sit in — a `Surface` card. Drop it in the page, or inside a `Popover` to float it. */
+declare function ColorPickerPanel({
+  className,
+  ...props
+}: ColorPicker.Panel.Props): ReactElement;
+/**
+ * An OKLCH-first color picker: a 2D saturation/brightness field, a hue rail and an optional alpha
+ * rail, a live swatch, the native eyedropper where the browser has it, a format selector
+ * (OKLCH · HEX · RGB · HSL), and a text field that reads any CSS color and writes the chosen format.
+ *
+ * Compose it from parts. `ColorPicker.Root` owns the color; arrange `Area`, `HueSlider`,
+ * `AlphaSlider`, `Swatch`, `EyeDropper`, `FormatTabs`, and `Input` inside a `ColorPicker.Panel`. The
+ * picker is inline-only — to float it, wrap the `Panel` in the standalone `Popover`. The field and hue
+ * rail edit in HSV (so hue survives the gray axis), and color science runs through `culori` in the
+ * picker's color core. Built on Base UI's Slider and Tabs for behavior and a11y; the runtime compound
+ * is a plain object, with per-part prop types on the matching namespace.
+ */
+declare const ColorPicker: {
+  Root: typeof ColorPickerRoot;
+  Panel: typeof ColorPickerPanel & {
+    props: typeof panelProps;
+  };
+  Area: typeof ColorPickerArea & {
+    props: typeof areaProps;
+  };
+  HueSlider: typeof ColorPickerHueSlider & {
+    props: typeof hueSliderProps;
+  };
+  AlphaSlider: typeof ColorPickerAlphaSlider & {
+    props: typeof alphaSliderProps;
+  };
+  Swatch: typeof ColorPickerSwatch & {
+    props: typeof swatchProps;
+  };
+  EyeDropper: typeof ColorPickerEyeDropper & {
+    props: typeof eyeDropperProps;
+  };
+  FormatTabs: typeof ColorPickerFormatTabs & {
+    props: typeof formatTabsProps;
+  };
+  Input: typeof ColorPickerInput & {
+    props: typeof inputProps;
+  };
+};
+/** Per-part prop types, mirroring Base UI's `Component.Part.Props` convention; merges with the object. */
+declare namespace ColorPicker {
+  namespace Root {
+    /** Props for {@link ColorPicker.Root}. */
+    interface Props {
+      /** Controlled color, any CSS string. Pair with `onValueChange`. */
+      value?: string;
+      /** Initial color for the uncontrolled case. Defaults to the Noctis Blue accent seed. */
+      defaultValue?: string;
+      /** Controlled output format. Pair with `onFormatChange`. */
+      format?: ColorFormat;
+      /** Initial format for the uncontrolled case. Defaults to `oklch`. */
+      defaultFormat?: ColorFormat;
+      /** Whether the alpha channel is editable and serialized. Defaults to `true`. */
+      alpha?: boolean;
+      /** Disable every control and dim the picker. */
+      disabled?: boolean;
+      /** Make the text input read-only — the field and sliders still drive the value. */
+      readOnly?: boolean;
+      /** Fires with the color in the active format whenever the user edits it. */
+      onValueChange?: (value: string) => void;
+      /** Fires when the active output format changes. */
+      onFormatChange?: (format: ColorFormat) => void;
+      /** Localized accessible names for the parts. Merged over the English defaults. */
+      labels?: Partial<ColorPickerLabels>;
+      children?: ReactNode;
+    }
+  }
+  namespace Panel {
+    type Props = Surface.Props;
+  }
+}
+//#endregion
+export { ColorPicker };

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

@@ -0,0 +1,149 @@
+"use client";
+import { Surface } from "../surface/surface.js";
+import { formatColor, parseColor, rgbToHsv } from "./color.js";
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+import { ColorPickerProvider, DEFAULT_LABELS } from "./context.js";
+import { createColorPickerStore } from "./store.js";
+import { ColorPickerArea } from "./area.js";
+import { alphaSliderProps, areaProps, eyeDropperProps, formatTabsProps, hueSliderProps, inputProps, panelProps, swatchProps } from "./color-picker.props.js";
+import { ColorPickerEyeDropper } from "./eyedropper.js";
+import { ColorPickerFormatTabs } from "./format-tabs.js";
+import { ColorPickerInput } from "./inputs.js";
+import { ColorPickerAlphaSlider, ColorPickerHueSlider } from "./sliders.js";
+import { ColorPickerSwatch } from "./swatch.js";
+import { useEffect, useMemo, useRef } from "react";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-picker/color-picker.tsx
+/** A pure-black fallback used only if `DEFAULT_COLOR` ever failed to parse — it never does. */
+const BLACK = {
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 1
+};
+/**
+* Owns the color state and shares it with every part. Works controlled (`value` + `onValueChange`) or
+* uncontrolled (`defaultValue`); reads and writes any CSS color, defaulting to OKLCH output. Renders no
+* element of its own — arrange the parts inside a `ColorPicker.Panel`. The picker is purely a picker; to
+* float it, wrap the `Panel` in the standalone `Popover` (see the docs example).
+*/
+function ColorPickerRoot({ value, defaultValue, format, defaultFormat = "oklch", alpha = true, disabled = false, readOnly = false, onValueChange, onFormatChange, labels, children }) {
+	const storeRef = useRef(null);
+	const lastValue = useRef("");
+	const lastFormat = useRef(defaultFormat);
+	const syncingValue = useRef(false);
+	const syncingFormat = useRef(false);
+	if (storeRef.current === null) {
+		const seed = parseColor(value ?? defaultValue ?? "oklch(0.504 0.151 275.2)") ?? BLACK;
+		const color = {
+			...seed,
+			a: alpha ? seed.a : 1
+		};
+		const initialFormat = format ?? defaultFormat;
+		storeRef.current = createColorPickerStore({
+			color,
+			hsv: rgbToHsv(color),
+			format: initialFormat
+		});
+		lastValue.current = formatColor(color, initialFormat, alpha);
+		lastFormat.current = initialFormat;
+	}
+	const store = storeRef.current;
+	useEffect(() => store.subscribe(() => {
+		const state = store.getState();
+		if (state.format !== lastFormat.current) {
+			lastFormat.current = state.format;
+			if (!syncingFormat.current) onFormatChange?.(state.format);
+		}
+		const next = formatColor(state.color, state.format, alpha);
+		if (next !== lastValue.current) {
+			lastValue.current = next;
+			if (!syncingValue.current) onValueChange?.(next);
+		}
+	}), [
+		store,
+		alpha,
+		onValueChange,
+		onFormatChange
+	]);
+	useEffect(() => {
+		if (value === void 0 || value === lastValue.current) return;
+		const rgb = parseColor(value);
+		if (!rgb) return;
+		const color = {
+			...rgb,
+			a: alpha ? rgb.a : 1
+		};
+		lastValue.current = formatColor(color, store.getState().format, alpha);
+		syncingValue.current = true;
+		store.setColorAndHsv(color, rgbToHsv(color));
+		syncingValue.current = false;
+	}, [
+		value,
+		alpha,
+		store
+	]);
+	useEffect(() => {
+		if (format === void 0 || format === store.getState().format) return;
+		syncingFormat.current = true;
+		store.setFormat(format);
+		syncingFormat.current = false;
+	}, [format, store]);
+	const resolvedLabels = useMemo(() => ({
+		...DEFAULT_LABELS,
+		...labels
+	}), [labels]);
+	return /* @__PURE__ */ jsx(ColorPickerProvider, {
+		value: useMemo(() => ({
+			store,
+			alpha,
+			disabled,
+			readOnly,
+			labels: resolvedLabels
+		}), [
+			store,
+			alpha,
+			disabled,
+			readOnly,
+			resolvedLabels
+		]),
+		children
+	});
+}
+/** The container the parts sit in — a `Surface` card. Drop it in the page, or inside a `Popover` to float it. */
+function ColorPickerPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Surface, {
+		"data-slot": COLOR_PICKER_SLOTS.panel,
+		elevation: "elevated",
+		bordered: true,
+		shadow: "card",
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* An OKLCH-first color picker: a 2D saturation/brightness field, a hue rail and an optional alpha
+* rail, a live swatch, the native eyedropper where the browser has it, a format selector
+* (OKLCH · HEX · RGB · HSL), and a text field that reads any CSS color and writes the chosen format.
+*
+* Compose it from parts. `ColorPicker.Root` owns the color; arrange `Area`, `HueSlider`,
+* `AlphaSlider`, `Swatch`, `EyeDropper`, `FormatTabs`, and `Input` inside a `ColorPicker.Panel`. The
+* picker is inline-only — to float it, wrap the `Panel` in the standalone `Popover`. The field and hue
+* rail edit in HSV (so hue survives the gray axis), and color science runs through `culori` in the
+* picker's color core. Built on Base UI's Slider and Tabs for behavior and a11y; the runtime compound
+* is a plain object, with per-part prop types on the matching namespace.
+*/
+const ColorPicker = {
+	Root: ColorPickerRoot,
+	Panel: Object.assign(ColorPickerPanel, { props: panelProps }),
+	Area: Object.assign(ColorPickerArea, { props: areaProps }),
+	HueSlider: Object.assign(ColorPickerHueSlider, { props: hueSliderProps }),
+	AlphaSlider: Object.assign(ColorPickerAlphaSlider, { props: alphaSliderProps }),
+	Swatch: Object.assign(ColorPickerSwatch, { props: swatchProps }),
+	EyeDropper: Object.assign(ColorPickerEyeDropper, { props: eyeDropperProps }),
+	FormatTabs: Object.assign(ColorPickerFormatTabs, { props: formatTabsProps }),
+	Input: Object.assign(ColorPickerInput, { props: inputProps })
+};
+//#endregion
+export { ColorPicker };

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

@@ -0,0 +1,69 @@
+//#region src/components/color-picker/color-picker.props.d.ts
+/** A spreadable attribute prop bag — the shape every `ColorPicker.*.props()` returns. */
+type ColorPickerPartProps = {
+  /** The slot value the matching `color-picker.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data/aria attribute present or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** A bag that may also flag `aria-invalid`/`aria-disabled` (the input/field state hooks the CSS reads). */
+type ColorPickerInputProps = ColorPickerPartProps & {
+  /** Present (`"true"`) on a malformed in-progress draft; the CSS re-points the field to the danger role. */"aria-invalid"?: "true";
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to a part with a `disabled` state — the field, the rails, and the format group dim on it. */
+interface ColorPickerDisablablePropsArgs extends BasePropsArgs {
+  /** Whether the control is disabled (drives the dimmed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to `ColorPicker.Input.props(...)` — the field's `disabled` + malformed-draft `invalid` state. */
+interface ColorPickerInputPropsArgs extends BasePropsArgs {
+  /** Whether the field is disabled (drives the not-allowed affordance via `:disabled`). */
+  disabled?: boolean;
+  /** Whether the current draft is malformed (drives the danger re-point via `aria-invalid`). */
+  invalid?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no state of its own; look is fixed. */
+type ColorPickerStatelessPropsArgs = BasePropsArgs;
+/** Panel prop bag: just the slot anchor (the surface paint is owned by the composed Surface). */
+declare function panelProps({
+  className
+}?: ColorPickerStatelessPropsArgs): ColorPickerPartProps;
+/** Area prop bag: slot anchor plus the `data-disabled` state the field dims/freezes off. */
+declare function areaProps({
+  disabled,
+  className
+}?: ColorPickerDisablablePropsArgs): ColorPickerPartProps;
+/** Hue-rail prop bag: slot anchor plus the `data-disabled` state. */
+declare function hueSliderProps({
+  disabled,
+  className
+}?: ColorPickerDisablablePropsArgs): ColorPickerPartProps;
+/** Alpha-rail prop bag: slot anchor plus the `data-disabled` state. */
+declare function alphaSliderProps({
+  disabled,
+  className
+}?: ColorPickerDisablablePropsArgs): ColorPickerPartProps;
+/** Swatch prop bag: just the slot anchor (the fill paints as an inline `background`). */
+declare function swatchProps({
+  className
+}?: ColorPickerStatelessPropsArgs): ColorPickerPartProps;
+/** EyeDropper prop bag: just the slot anchor (the look is the composed ghost icon Button's). */
+declare function eyeDropperProps({
+  className
+}?: ColorPickerStatelessPropsArgs): ColorPickerPartProps;
+/** Format-tabs prop bag: slot anchor plus the `data-disabled` state the group dims off. */
+declare function formatTabsProps({
+  disabled,
+  className
+}?: ColorPickerDisablablePropsArgs): ColorPickerPartProps;
+/** Input prop bag: slot anchor plus the `aria-invalid` danger re-point (disabled flows through `:disabled`). */
+declare function inputProps({
+  invalid,
+  className
+}?: ColorPickerInputPropsArgs): ColorPickerInputProps;
+//#endregion
+export { alphaSliderProps, areaProps, eyeDropperProps, formatTabsProps, hueSliderProps, inputProps, panelProps, swatchProps };

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

@@ -0,0 +1,74 @@
+import { COLOR_PICKER_SLOTS } from "./color-picker.slots.js";
+//#region src/components/color-picker/color-picker.props.ts
+/**
+* The D12 unified variant contract for ColorPicker — a per-part set of `props(...)` builders that each
+* return a **spreadable props object** of the form `{ "data-slot": "noctis-color-picker-<part>",
+* ...dataAttrs }`, derived from the part's state inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `color-picker.css` keys every rule off it — so spreading a part's `props()` onto a *foreign* element
+* styles it as that part:
+*
+*     <input {...ColorPicker.Input.props({ invalid: true })} />
+*     // → <input data-slot="noctis-color-picker-input" aria-invalid="true">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same state→attribute→values mapping is emitted as
+* data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React / agent
+* consumers can hand-write the markup from the docs.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Panel prop bag: just the slot anchor (the surface paint is owned by the composed Surface). */
+function panelProps({ className } = {}) {
+	return withClassName({ "data-slot": COLOR_PICKER_SLOTS.panel }, className);
+}
+/** Area prop bag: slot anchor plus the `data-disabled` state the field dims/freezes off. */
+function areaProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_PICKER_SLOTS.area,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Hue-rail prop bag: slot anchor plus the `data-disabled` state. */
+function hueSliderProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_PICKER_SLOTS.hue,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Alpha-rail prop bag: slot anchor plus the `data-disabled` state. */
+function alphaSliderProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_PICKER_SLOTS.alpha,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Swatch prop bag: just the slot anchor (the fill paints as an inline `background`). */
+function swatchProps({ className } = {}) {
+	return withClassName({ "data-slot": COLOR_PICKER_SLOTS.swatch }, className);
+}
+/** EyeDropper prop bag: just the slot anchor (the look is the composed ghost icon Button's). */
+function eyeDropperProps({ className } = {}) {
+	return withClassName({ "data-slot": COLOR_PICKER_SLOTS.eyeDropper }, className);
+}
+/** Format-tabs prop bag: slot anchor plus the `data-disabled` state the group dims off. */
+function formatTabsProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_PICKER_SLOTS.formatTabs,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Input prop bag: slot anchor plus the `aria-invalid` danger re-point (disabled flows through `:disabled`). */
+function inputProps({ invalid, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_PICKER_SLOTS.input,
+		"aria-invalid": invalid ? "true" : void 0
+	}, className);
+}
+//#endregion
+export { alphaSliderProps, areaProps, eyeDropperProps, formatTabsProps, hueSliderProps, inputProps, panelProps, swatchProps };

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

@@ -0,0 +1,21 @@
+//#region src/components/color-picker/color-picker.slots.ts
+/**
+* The slot vocabulary every `ColorPicker` part stamps as its `data-slot`. The authored source the
+* orchestration and part files read from, kebab-cased `{component}-{part}`; SLOTS.md still generates
+* from the token-graph declarations.
+*/
+const COLOR_PICKER_SLOTS = {
+	panel: "noctis-color-picker-panel",
+	area: "noctis-color-picker-area",
+	areaThumb: "noctis-color-picker-area-thumb",
+	hue: "noctis-color-picker-hue",
+	hueThumb: "noctis-color-picker-hue-thumb",
+	alpha: "noctis-color-picker-alpha",
+	alphaThumb: "noctis-color-picker-alpha-thumb",
+	swatch: "noctis-color-picker-swatch",
+	eyeDropper: "noctis-color-picker-eye-dropper",
+	formatTabs: "noctis-color-picker-format-tabs",
+	input: "noctis-color-picker-input"
+};
+//#endregion
+export { COLOR_PICKER_SLOTS };

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

@@ -0,0 +1,18 @@
+//#region src/components/color-picker/color.d.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.
+ */
+/** The serialization formats the picker can read and write. OKLCH leads — it is the system default. */
+type ColorFormat = "oklch" | "hex" | "rgb" | "hsl";
+//#endregion
+export { ColorFormat };