@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/ui/color-picker.js

@@ -2,142 +2,19 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
-import { Button } from "./button.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
-import { useColorArea } from "../hooks/use-color-area.js";
-import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
-import { TARGET_RATIO, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
-import { Input } from "./input.js";
-import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
-import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ColorPickerContext, useColorPicker, useColorState } from "./color-picker-context.js";
+import { ColorPickerArea, ColorPickerAreaThumb, ColorPickerWheel } from "./color-picker-area.js";
+import { ColorPickerAlpha, ColorPickerBrightness, ColorPickerHue, ColorPickerSaturation } from "./color-picker-sliders.js";
+import { ColorPickerChannel, ColorPickerChannels, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerInput, ColorPickerOutput } from "./color-picker-values.js";
+import { GradientEditor, GradientEditorPreview, GradientEditorStop, GradientEditorStopAdd, GradientEditorTrack, useGradientEditor } from "./gradient-editor.js";
+import { ColorPickerAreaContrast, ColorPickerContrast } from "./color-picker-contrast.js";
+import { ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatches } from "./color-picker-swatches.js";
+import { GradientEditorAngle, GradientEditorInterpolationSelect, GradientEditorTypeSelect } from "./gradient-editor-controls.js";
+import { Fragment, 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 false;
-		commit(reconcileAchromatic(hsvaRef.current, parsed));
-		return true;
-	};
-	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
-	});
+	const ctx = useColorState(state);
 	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
 		value: ctx,
 		children: /* @__PURE__ */ jsx(Popover.Root, {
@@ -165,11 +42,7 @@ function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelled
 			"data-control-family": "color-picker",
 			"data-slot": "trigger-checker",
 			"aria-hidden": true,
-			className: "absolute inset-0",
-			style: {
-				backgroundImage: CHECKER,
-				backgroundSize: CHECKER_SIZE
-			}
+			className: "absolute inset-0"
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "color-picker",
 			"data-control-family": "color-picker",
@@ -220,628 +93,26 @@ function ColorPickerPanel({ className, children, ...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", {
-		"data-focus-ring": "within",
-		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",
-		format: {
-			style: "unit",
-			unit: "degree"
-		},
-		"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-pan-y 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",
-					"data-focus-ring": "within",
-					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,
-		format: { style: "percent" },
-		min: 0,
-		max: 1,
-		step: .01,
-		disabled,
-		onValueChange: (next) => setHsva({ a: Array.isArray(next) ? next[0] : next }),
-		className: cn("relative flex w-full touch-pan-y 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",
-					"data-focus-ring": "within",
-					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", {
-		"data-focus-ring": "within",
-		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, invalidLabel = "Enter a hex, rgb(), hsl() or oklch() color.", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onKeyDown, ...props }) {
-	const { valueString, setFromString, disabled } = useColorPicker();
-	const invalidMessageId = useId();
-	const [draft, setDraft] = useState(valueString);
-	const [editing, setEditing] = useState(false);
-	const [invalid, setInvalid] = useState(false);
-	const describedBy = [ariaDescribedBy, invalid ? invalidMessageId : void 0].filter(Boolean).join(" ") || void 0;
-	const shown = editing ? draft : valueString;
-	const commit = () => {
-		const accepted = setFromString(draft);
-		setInvalid(!accepted);
-		if (accepted) setEditing(false);
-	};
-	const revert = () => {
-		setInvalid(false);
-		setEditing(false);
-	};
-	return /* @__PURE__ */ jsxs("span", {
-		"data-control-ui": "color-picker",
-		"data-control-family": "color-picker",
-		"data-slot": "input",
-		className: "contents",
-		children: [/* @__PURE__ */ jsx(Input, {
-			...props,
-			size,
-			value: shown,
-			disabled,
-			spellCheck: false,
-			autoComplete: "off",
-			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color value" : ariaLabel,
-			"aria-labelledby": ariaLabelledBy,
-			"aria-invalid": invalid || void 0,
-			"aria-describedby": describedBy,
-			className,
-			onFocus: (event) => {
-				onFocus?.(event);
-				if (editing) return;
-				setDraft(valueString);
-				setEditing(true);
-			},
-			onChange: (event) => setDraft(event.target.value),
-			onBlur: (event) => {
-				onBlur?.(event);
-				commit();
-			},
-			onKeyDown: (event) => {
-				onKeyDown?.(event);
-				if (event.defaultPrevented) return;
-				if (event.key === "Enter") commit();
-				else if (event.key === "Escape") revert();
-			}
-		}), invalid ? /* @__PURE__ */ jsx("span", {
-			id: invalidMessageId,
-			className: "sr-only",
-			children: invalidLabel
-		}) : null]
-	});
-}
-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"
-				})
+function GradientEditorStopColor({ children }) {
+	const { selectedStop, setStopColor } = useGradientEditor();
+	if (!selectedStop) return null;
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		value: selectedStop.color,
+		onValueChange: (color) => setStopColor(selectedStop.id, color),
+		defaultFormat: "hex",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {}), /* @__PURE__ */ jsxs(ColorPickerContent, { children: [
+			/* @__PURE__ */ jsx(ColorPickerArea, {}),
+			/* @__PURE__ */ jsx(ColorPickerHue, {}),
+			/* @__PURE__ */ jsx(ColorPickerAlpha, {}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "gradient-editor",
+				"data-control-family": "gradient-editor",
+				"data-slot": "value-row",
+				className: "flex",
+				children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput, { className: "flex-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, disabled } = 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,
-		disabled,
-		onClick: () => setFromString(color),
-		className: cn("relative 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": "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, disabled } = 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",
-		disabled,
-		onClick: () => onAdd?.(valueString),
-		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
-	});
-}
-function ColorPickerContrast({ background = "#ffffff", passLabel = "Passes", failLabel = "Fails", className, ...props }) {
-	const { hsva, setFromString, disabled } = 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: [formatContrastRatio(ratio), ":1"]
-			}),
-			/* @__PURE__ */ jsx(WcagPill, {
-				ok: levels.AA,
-				passLabel,
-				failLabel,
-				children: "AA"
-			}),
-			/* @__PURE__ */ jsx(WcagPill, {
-				ok: levels.AAA,
-				passLabel,
-				failLabel,
-				children: "AAA"
-			}),
-			target ? /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"data-control-ui": "color-picker",
-				"data-control-family": "color-picker",
-				"data-slot": "contrast-fix",
-				disabled,
-				onClick: applyFix,
-				className: "ms-auto cursor-pointer disabled:cursor-not-allowed",
-				children: ["Fix for ", target]
-			}) : null
-		]
-	});
-}
-function WcagPill({ ok, passLabel, failLabel, 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: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: ok ? "✓" : "✕"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: ok ? passLabel : failLabel
-			}),
-			" ",
-			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 };
+export { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerAreaContrast, ColorPickerAreaThumb, ColorPickerBrightness, ColorPickerChannel, ColorPickerChannels, ColorPickerContent, ColorPickerContrast, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerOutput, ColorPickerPanel, ColorPickerSaturation, ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatches, ColorPickerTrigger, ColorPickerWheel, GradientEditor, GradientEditorAngle, GradientEditorInterpolationSelect, GradientEditorPreview, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopColor, GradientEditorTrack, GradientEditorTypeSelect };