@ctrl-ui/react 0.8.0

package/dist/ui/color-picker.js

@@ -0,0 +1,797 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
+import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { useColorArea } from "../hooks/use-color-area.js";
+import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+import { Slider } from "@base-ui/react/slider";
+//#region src/ui/color-picker.tsx
+const HUE_GRADIENT = "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))";
+const CHECKER = "repeating-conic-gradient(oklch(from var(--border) l c h) 0 25%, transparent 0 50%)";
+const CHECKER_SIZE = "10px 10px";
+const RING_THUMB = "block -translate-x-1/2";
+const isColorFormat = (v) => v === "hex" || v === "rgb" || v === "hsl" || v === "oklch";
+const CHANNEL_NAMES = {
+	r: "Red",
+	g: "Green",
+	b: "Blue",
+	h: "Hue",
+	s: "Saturation",
+	l: "Lightness",
+	okl: "OKLCH lightness",
+	okc: "OKLCH chroma",
+	okh: "OKLCH hue",
+	a: "Opacity"
+};
+function reconcileAchromatic(prev, next) {
+	if (next.v === 0) return {
+		...next,
+		h: prev.h,
+		s: prev.s
+	};
+	if (next.s === 0) return {
+		...next,
+		h: prev.h
+	};
+	return next;
+}
+function subscribeEyeDropper() {
+	return () => {};
+}
+function getEyeDropperSnapshot() {
+	return typeof window !== "undefined" && Boolean(window.EyeDropper);
+}
+function getEyeDropperServerSnapshot() {
+	return false;
+}
+const ColorPickerContext = createContext(null);
+function useColorPicker() {
+	const ctx = useContext(ColorPickerContext);
+	if (!ctx) throw new Error("ColorPicker parts must be rendered inside <ColorPicker>.");
+	return ctx;
+}
+function useColorState(props) {
+	const { value, defaultValue = "#000000", onValueChange, format: formatProp, defaultFormat = "hex", onFormatChange, alpha = true, disabled = false } = props;
+	const [hsva, setHsvaState] = useState(() => parseColor(value ?? defaultValue) ?? {
+		h: 0,
+		s: 0,
+		v: 0,
+		a: 1
+	});
+	const [formatState, setFormatState] = useState(defaultFormat);
+	const format = formatProp ?? formatState;
+	const hsvaRef = useRef(hsva);
+	const formatRef = useRef(format);
+	const alphaRef = useRef(alpha);
+	const onValueChangeRef = useRef(onValueChange);
+	const lastEmitted = useRef(null);
+	useEffect(() => {
+		hsvaRef.current = hsva;
+		formatRef.current = format;
+		alphaRef.current = alpha;
+		onValueChangeRef.current = onValueChange;
+	}, [
+		hsva,
+		format,
+		alpha,
+		onValueChange
+	]);
+	const emit = (next, fmt) => {
+		const str = formatColor(next, fmt, { alpha: alphaRef.current });
+		lastEmitted.current = str;
+		onValueChangeRef.current?.(str);
+	};
+	const commit = (next) => {
+		hsvaRef.current = next;
+		setHsvaState(next);
+		emit(next, formatRef.current);
+	};
+	useEffect(() => {
+		if (lastEmitted.current === null) lastEmitted.current = formatColor(hsvaRef.current, formatRef.current, { alpha: alphaRef.current });
+		if (value === void 0 || value === lastEmitted.current) return;
+		const parsed = parseColor(value);
+		if (!parsed) return;
+		const reconciled = reconcileAchromatic(hsvaRef.current, parsed);
+		hsvaRef.current = reconciled;
+		lastEmitted.current = value;
+		setHsvaState(reconciled);
+	}, [value]);
+	const setHsva = (partial) => commit({
+		...hsvaRef.current,
+		...partial
+	});
+	const setChannelValue = (id, next) => commit(setChannel(hsvaRef.current, id, next));
+	const setFromString = (raw) => {
+		const parsed = parseColor(raw);
+		if (!parsed) return;
+		commit(reconcileAchromatic(hsvaRef.current, parsed));
+	};
+	const setFormat = (next) => {
+		if (formatProp === void 0) setFormatState(next);
+		formatRef.current = next;
+		onFormatChange?.(next);
+		emit(hsvaRef.current, next);
+	};
+	return {
+		hsva,
+		format,
+		alpha,
+		disabled,
+		valueString: formatColor(hsva, format, { alpha }),
+		setHsva,
+		setChannelValue,
+		setFromString,
+		setFormat
+	};
+}
+function ColorPicker({ open, defaultOpen, onOpenChange, children, ...state }) {
+	const ctx = useColorState({
+		...state,
+		children
+	});
+	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			open,
+			defaultOpen,
+			onOpenChange,
+			children
+		})
+	});
+}
+function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { valueString, disabled } = useColorPicker();
+	return /* @__PURE__ */ jsxs(Popover.Trigger, {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "trigger",
+		"data-disabled": disabled ? "true" : void 0,
+		disabled,
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? `Choose color (${valueString})` : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className: cn("relative inline-flex shrink-0 cursor-pointer overflow-hidden disabled:cursor-not-allowed", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "trigger-checker",
+			"aria-hidden": true,
+			className: "absolute inset-0",
+			style: {
+				backgroundImage: CHECKER,
+				backgroundSize: CHECKER_SIZE
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "trigger-color",
+			"aria-hidden": true,
+			className: "absolute inset-0",
+			style: { backgroundColor: valueString }
+		})]
+	});
+}
+function ColorPickerContent({ className, children, side = "bottom", align = "center", sideOffset = 6, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		"data-control-ui": "color-picker",
+		"data-popup-kind": "color-picker",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side,
+		align,
+		sideOffset,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-control-ui": "color-picker",
+			"data-popup-kind": "color-picker",
+			"data-control-family": "popup",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-popup-part": "surface",
+			className: cn("grid", className),
+			...props,
+			children
+		})
+	}) });
+}
+function ColorPickerPanel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-popup-kind": "color-picker",
+		"data-control-family": "popup",
+		"data-slot": "panel",
+		"data-surface": "floating",
+		"data-popup-part": "surface",
+		"data-popup-static": "",
+		className: cn("grid", className),
+		...props,
+		children
+	});
+}
+function ColorPickerArea({ className, style, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	const { areaRef, onPointerDown, dragging } = useColorArea((offset, rect) => {
+		if (disabled) return;
+		const { s, v } = pointToSaturationValue(rect, offset.x, offset.y);
+		setHsva({
+			s,
+			v
+		});
+	});
+	function axisKey(axis, event) {
+		if (!event.shiftKey) return;
+		const cur = axis === "s" ? hsva.s : hsva.v;
+		let delta = 0;
+		if (event.key === "ArrowUp" || event.key === "ArrowRight") delta = 10;
+		else if (event.key === "ArrowDown" || event.key === "ArrowLeft") delta = -10;
+		if (delta === 0) return;
+		event.preventDefault();
+		const next = Math.min(100, Math.max(0, cur + delta));
+		setHsva(axis === "s" ? { s: next } : { v: next });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "area",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-dragging": dragging ? "true" : void 0,
+		role: "group",
+		"aria-label": "Saturation and brightness",
+		onPointerDown: disabled ? void 0 : onPointerDown,
+		className: cn("group relative w-full touch-none select-none overflow-hidden", disabled ? "cursor-not-allowed" : "cursor-crosshair", className),
+		style: {
+			...style,
+			backgroundColor: `hsl(${hsva.h} 100% 50%)`
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "area-saturation",
+				className: "absolute inset-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "area-brightness",
+				className: "absolute inset-0"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Saturation",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.s),
+				disabled,
+				onChange: (event) => setHsva({ s: Number(event.target.value) }),
+				onKeyDown: (event) => axisKey("s", event)
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Brightness",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.v),
+				disabled,
+				onChange: (event) => setHsva({ v: Number(event.target.value) }),
+				onKeyDown: (event) => axisKey("v", event)
+			}),
+			/* @__PURE__ */ jsx(ColorPickerAreaThumb, { style: {
+				left: `${hsva.s}%`,
+				top: `${100 - hsva.v}%`
+			} })
+		]
+	});
+}
+function ColorPickerAreaThumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "area-thumb",
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute -translate-x-1/2 -translate-y-1/2", className),
+		...props
+	});
+}
+function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "hue",
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Hue" : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		value: hsva.h,
+		min: 0,
+		max: 360,
+		step: 1,
+		disabled,
+		onValueChange: (next) => setHsva({ h: Array.isArray(next) ? next[0] : next }),
+		className: cn("relative flex w-full touch-none select-none items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "flex h-full w-full items-center",
+			children: /* @__PURE__ */ jsx(Slider.Track, {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "hue-track",
+				className: "relative w-full",
+				style: { backgroundImage: HUE_GRADIENT },
+				children: /* @__PURE__ */ jsx(Slider.Thumb, {
+					"data-control-ui": "color-picker",
+					"data-control-family": "color-picker",
+					"data-slot": "hue-thumb",
+					className: RING_THUMB
+				})
+			})
+		})
+	});
+}
+function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { hsva, setHsva, alpha, disabled } = useColorPicker();
+	if (!alpha) return null;
+	const opaque = formatColor({
+		...hsva,
+		a: 1
+	}, "hex");
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "alpha",
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Opacity" : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		value: hsva.a,
+		min: 0,
+		max: 1,
+		step: .01,
+		disabled,
+		onValueChange: (next) => setHsva({ a: Array.isArray(next) ? next[0] : next }),
+		className: cn("relative flex w-full touch-none select-none items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "flex h-full w-full items-center",
+			children: /* @__PURE__ */ jsx(Slider.Track, {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "alpha-track",
+				className: "relative w-full",
+				style: {
+					backgroundImage: `linear-gradient(to right, transparent, ${opaque}), ${CHECKER}`,
+					backgroundSize: `auto, ${CHECKER_SIZE}`
+				},
+				children: /* @__PURE__ */ jsx(Slider.Thumb, {
+					"data-control-ui": "color-picker",
+					"data-control-family": "color-picker",
+					"data-slot": "alpha-thumb",
+					className: RING_THUMB
+				})
+			})
+		})
+	});
+}
+const WHEEL_HUE = "conic-gradient(from 90deg, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))";
+function ColorPickerWheel({ className, style, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	const { areaRef, onPointerDown, dragging } = useColorArea((offset, rect) => {
+		if (disabled) return;
+		const { h, s } = pointToHueSat(rect, offset.x, offset.y);
+		setHsva({
+			h,
+			s
+		});
+	});
+	const radius = hsva.s / 100 * 50;
+	const rad = hsva.h * Math.PI / 180;
+	const left = 50 + radius * Math.cos(rad);
+	const top = 50 + radius * Math.sin(rad);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "wheel",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-dragging": dragging ? "true" : void 0,
+		role: "group",
+		"aria-label": "Color wheel",
+		onPointerDown: disabled ? void 0 : onPointerDown,
+		className: cn("group relative aspect-square w-full touch-none select-none", disabled ? "cursor-not-allowed" : "cursor-crosshair", className),
+		style: {
+			...style,
+			backgroundImage: `radial-gradient(circle at center, #fff, transparent 70%), ${WHEEL_HUE}`
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "wheel-thumb",
+				"aria-hidden": true,
+				className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2",
+				style: {
+					left: `${left}%`,
+					top: `${top}%`
+				}
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Wheel hue",
+				className: "sr-only",
+				min: 0,
+				max: 360,
+				step: 1,
+				value: Math.round(hsva.h),
+				disabled,
+				onChange: (event) => setHsva({ h: Number(event.target.value) })
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Wheel saturation",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.s),
+				disabled,
+				onChange: (event) => setHsva({ s: Number(event.target.value) })
+			})
+		]
+	});
+}
+function ColorPickerInput({ size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { valueString, setFromString, disabled } = useColorPicker();
+	const [draft, setDraft] = useState(valueString);
+	const [editing, setEditing] = useState(false);
+	const shown = editing ? draft : valueString;
+	const commit = () => {
+		setFromString(draft);
+		setEditing(false);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		size,
+		value: shown,
+		disabled,
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "input",
+		spellCheck: false,
+		autoComplete: "off",
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color value" : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className,
+		onFocus: () => {
+			setDraft(valueString);
+			setEditing(true);
+		},
+		onChange: (event) => setDraft(event.target.value),
+		onBlur: commit,
+		onKeyDown: (event) => {
+			if (event.key === "Enter") commit();
+			else if (event.key === "Escape") setEditing(false);
+		},
+		...props
+	});
+}
+function ColorPickerFormatSelect({ formats = [
+	"hex",
+	"rgb",
+	"hsl",
+	"oklch"
+], size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }) {
+	const { format, setFormat, disabled } = useColorPicker();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: format,
+		disabled,
+		onValueChange: (value) => {
+			if (isColorFormat(value)) setFormat(value);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			"data-control-ui": "color-picker",
+			"data-slot": "format",
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color format" : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className,
+			style,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: formats.map((f) => /* @__PURE__ */ jsx(SelectItem, {
+			value: f,
+			children: f.toUpperCase()
+		}, f)) })]
+	});
+}
+function ColorPickerChannels({ className, children, ...props }) {
+	const { hsva, format, alpha } = useColorPicker();
+	const specs = getChannels(hsva, format).filter((spec) => alpha || spec.id !== "a");
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "channels",
+		className: cn("grid grid-flow-col auto-cols-fr", className),
+		...props,
+		children: children ?? specs.map((spec) => /* @__PURE__ */ jsx(ColorPickerChannel, {
+			channel: spec.id,
+			label: spec.label
+		}, spec.id))
+	});
+}
+function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }) {
+	const { hsva, format, setChannelValue, disabled } = useColorPicker();
+	const spec = getChannels(hsva, format).find((s) => s.id === channel);
+	if (!spec) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "channel",
+		className: cn("grid", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(NumberField, {
+			size: "sm",
+			value: spec.value,
+			min: spec.min,
+			max: spec.max,
+			step: spec.step,
+			disabled,
+			onValueChange: (value) => {
+				if (value !== null) setChannelValue(channel, value);
+			},
+			children: /* @__PURE__ */ jsx(NumberFieldGroup, {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "channel",
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(NumberFieldInput, {
+					"aria-label": ariaLabel ?? `${CHANNEL_NAMES[channel]} channel`,
+					className: "px-1"
+				})
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "channel-label",
+			children: label ?? spec.label
+		})]
+	});
+}
+function ColorPickerEyeDropper({ className, children, ...props }) {
+	const { setFromString, disabled } = useColorPicker();
+	if (!useSyncExternalStore(subscribeEyeDropper, getEyeDropperSnapshot, getEyeDropperServerSnapshot)) return null;
+	const pick = async () => {
+		const Ctor = window.EyeDropper;
+		if (!Ctor) return;
+		try {
+			const result = await new Ctor().open();
+			setFromString(result.sRGBHex);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "surface",
+		size: "sm",
+		disabled,
+		"aria-label": "Pick a color from the screen",
+		"data-control-ui": "color-picker",
+		"data-slot": "eye-dropper",
+		className,
+		onClick: pick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(EyeDropperIcon, {})
+	});
+}
+function ColorPickerSwatches({ colors, label, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatches-group",
+		className: "grid",
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatches-label",
+			children: label
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatches",
+			className: cn("flex flex-wrap", className),
+			...props,
+			children: [colors?.map((color) => /* @__PURE__ */ jsx(ColorPickerSwatch, { color }, color)), children]
+		})]
+	});
+}
+function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }) {
+	const { setFromString, valueString } = useColorPicker();
+	const selected = sameColor(valueString, color);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatch",
+		"data-selected": selected ? "true" : void 0,
+		"aria-pressed": selected,
+		"aria-label": ariaLabel ?? `Set color ${color}`,
+		title: color,
+		onClick: () => setFromString(color),
+		className: cn("relative shrink-0 cursor-pointer overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatch-checker",
+			"aria-hidden": true,
+			className: "absolute inset-0",
+			style: {
+				backgroundImage: CHECKER,
+				backgroundSize: CHECKER_SIZE
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatch-color",
+			"aria-hidden": true,
+			className: "absolute inset-0",
+			style: { backgroundColor: color }
+		})]
+	});
+}
+function ColorPickerSwatchAdd({ onAdd, className, children, ...props }) {
+	const { valueString } = useColorPicker();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatch-add",
+		"aria-label": "Add current color",
+		onClick: () => onAdd?.(valueString),
+		className: cn("flex shrink-0 cursor-pointer items-center justify-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+function ColorPickerContrast({ background = "#ffffff", className, ...props }) {
+	const { hsva, setFromString } = useColorPicker();
+	const bg = parseColor(background);
+	if (!bg) return null;
+	const bgRgba = hsvaToRgba(bg);
+	const ratio = contrastOf(hsva, bgRgba);
+	const levels = wcagLevels(ratio);
+	const target = nextFixLevel(levels);
+	const applyFix = () => {
+		if (!target) return;
+		const fixed = fixColorForContrast(hsva, bgRgba, TARGET_RATIO[target]);
+		if (fixed) setFromString(formatColor(fixed, "hex"));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "contrast",
+		className: cn("flex items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "contrast-ratio",
+				children: [ratio.toFixed(2), ":1"]
+			}),
+			/* @__PURE__ */ jsx(WcagPill, {
+				ok: levels.AA,
+				children: "AA"
+			}),
+			/* @__PURE__ */ jsx(WcagPill, {
+				ok: levels.AAA,
+				children: "AAA"
+			}),
+			target ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "contrast-fix",
+				onClick: applyFix,
+				className: "ml-auto cursor-pointer",
+				children: ["Fix → ", target]
+			}) : null
+		]
+	});
+}
+function WcagPill({ ok, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "contrast-level",
+		"data-passing": ok ? "true" : void 0,
+		className: "inline-flex items-center",
+		children: [
+			ok ? "✓" : "✕",
+			" ",
+			children
+		]
+	});
+}
+function ColorPickerOutput({ className, children, renderValue, ...props }) {
+	const { valueString } = useColorPicker();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "output",
+		className: cn("flex items-center", className),
+		...props,
+		children: renderValue ? renderValue({ value: valueString }) : children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "output-swatch",
+			className: "relative shrink-0 overflow-hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "output-checker",
+				"aria-hidden": true,
+				className: "absolute inset-0",
+				style: {
+					backgroundImage: CHECKER,
+					backgroundSize: CHECKER_SIZE
+				}
+			}), /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "output-color",
+				"aria-hidden": true,
+				className: "absolute inset-0",
+				style: { backgroundColor: valueString }
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "output-value",
+			children: valueString
+		})] })
+	});
+}
+function sameColor(a, b) {
+	const pa = parseColor(a);
+	const pb = parseColor(b);
+	if (!pa || !pb) return false;
+	return formatColor(pa, "hex", { alpha: true }) === formatColor(pb, "hex", { alpha: true });
+}
+function EyeDropperIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-4",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M10.5 2.5a1.8 1.8 0 0 1 2.5 2.5l-1.3 1.3.9.9-1.1 1.1-.9-.9-4.4 4.4-2.2.6.6-2.2 4.4-4.4-.9-.9 1.1-1.1.9.9 1.3-1.3Z" })
+	});
+}
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+	});
+}
+//#endregion
+export { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerAreaThumb, ColorPickerChannel, ColorPickerChannels, ColorPickerContent, ColorPickerContrast, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerOutput, ColorPickerPanel, ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatches, ColorPickerTrigger, ColorPickerWheel };