ixia-ui-react 1.8.0 → 2.1.0

package/dist/color-picker/index.js

@@ -0,0 +1,621 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { a as SelectPopup, c as SelectIcon, n as SelectValue, o as SelectList, r as SelectTrigger, s as SelectItem, t as Select } from "../select-DncJXYim.js";
+import { t as ColorChannelSlider } from "../color-channel-slider-h8mUPJ35.js";
+import { i as InputGroupAddon, r as InputGroupInput, t as InputGroup } from "../input-group-CgdazGrY.js";
+import { t as Separator } from "../separator-DgIQp1cB.js";
+import { c as PopoverContent, i as PopoverPanel, n as PopoverTrigger, t as Popover } from "../popover-0WDxRi-s.js";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import chroma from "chroma-js";
+// src/components/color-picker/color-picker.types.ts
+const colorPickerVariants = cva("flex flex-col space-y-sm", {
+	defaultVariants: { variant: "elevated" },
+	variants: { variant: {
+		elevated: "rounded-xl bg-surface p-md shadow-2xs",
+		ghost: "",
+		outline: "rounded-xl border border-border p-md"
+	} }
+});
+const colorPickerSwatchVariants = cva("overflow-hidden border border-border hover:cursor-pointer focus:outline-2 focus:outline-offset-2", {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		large: "size-lg rounded-lg",
+		medium: "size-md rounded-md",
+		small: "size-sm rounded-sm"
+	} }
+});
+const RGB_CHANNEL_COUNT = 3;
+const DECIMAL_RADIX = 10;
+const VALUE_TYPES = [
+	{
+		getValue: (color) => color.rgb(),
+		label: "RGB",
+		parseValue: (value) => {
+			const rgbChannels = value.split(",").map((channelText) => parseInt(channelText.trim(), DECIMAL_RADIX));
+			if (rgbChannels.length === RGB_CHANNEL_COUNT && rgbChannels.every((channel) => !Number.isNaN(channel))) {
+				const [red, green, blue] = rgbChannels;
+				return chroma.rgb(red, green, blue);
+			}
+		},
+		value: "rgb"
+	},
+	{
+		getValue: (color) => color.css(),
+		label: "CSS",
+		parseValue: (value) => {
+			try {
+				return chroma(value);
+			} catch {
+				return;
+			}
+		},
+		value: "css"
+	},
+	{
+		getValue: (color) => color.hex("rgb"),
+		label: "HEX",
+		parseValue: (value) => {
+			try {
+				return chroma(value);
+			} catch {
+				return;
+			}
+		},
+		value: "hex"
+	},
+	{
+		getValue: (color) => color.hsl(),
+		label: "HSL",
+		parseValue: (value) => {
+			try {
+				return chroma(value);
+			} catch {
+				return;
+			}
+		},
+		value: "hsl"
+	},
+	{
+		getValue: (color) => color.hsv(),
+		label: "HSV",
+		parseValue: (value) => {
+			try {
+				return chroma(value);
+			} catch {
+				return;
+			}
+		},
+		value: "hsv"
+	}
+];
+// src/components/color-picker/color-picker.tsx
+const MIN_COLOR_CHANNEL = 0;
+const FIRST_VALUE_TYPE_INDEX = 0;
+const ColorPickerContext = React.createContext(void 0);
+const normalizeToColor = (value, fallback) => {
+	try {
+		if (typeof value === "string") return chroma(value.trim());
+		return chroma(value);
+	} catch {
+		return fallback;
+	}
+};
+const getValidChannel = (channel, fallback) => {
+	if (channel === void 0 || Number.isNaN(channel)) return fallback;
+	return channel;
+};
+const updateColorState = ({ saturation: previousSaturation, ...state }, color) => {
+	const [nextHue, nextSaturation, nextValue] = color.hsv();
+	let saturation = previousSaturation;
+	if (nextValue !== MIN_COLOR_CHANNEL) saturation = getValidChannel(nextSaturation, previousSaturation);
+	return {
+		...state,
+		alpha: color.alpha(),
+		hue: getValidChannel(nextHue, state.hue),
+		saturation,
+		value: nextValue
+	};
+};
+const updateSimpleState = (state, action) => {
+	switch (action.type) {
+		case "set_hue": return {
+			...state,
+			hue: action.hue
+		};
+		case "set_saturation": return {
+			...state,
+			saturation: action.saturation
+		};
+		case "set_value": return {
+			...state,
+			value: action.value
+		};
+		case "set_saturation_value": return {
+			...state,
+			saturation: action.saturation,
+			value: action.value
+		};
+		case "set_alpha": return {
+			...state,
+			alpha: action.alpha
+		};
+		case "set_lightness": return {
+			...state,
+			value: action.lightness
+		};
+		case "set_value_type": return {
+			...state,
+			valueType: action.valueType
+		};
+		default: return state;
+	}
+};
+const colorPickerReducer = (state, action) => {
+	switch (action.type) {
+		case "set_color": return updateColorState(state, action.color);
+		case "set_palette": return {
+			...state,
+			palette: action.palette
+		};
+		case "add_palette_color": return {
+			...state,
+			palette: [...state.palette, action.color]
+		};
+		default: return updateSimpleState(state, action);
+	}
+};
+function ColorPicker$1({ variant, value: controlledValue, defaultColor, palette: controlledPalette, defaultPalette, onPaletteChange, paletteLimit, defaultValueType, onValueChange, className, ref, ...props }) {
+	const [state, dispatch] = React.useReducer(colorPickerReducer, {
+		controlledPalette,
+		controlledValue,
+		defaultColor,
+		defaultPalette,
+		defaultValueType
+	}, ({ controlledValue: initialControlledValue, controlledPalette: initialControlledPalette, defaultColor: initialDefaultColor, defaultPalette: initialDefaultPalette, defaultValueType: initialDefaultValueType }) => {
+		const initialColor = normalizeToColor(initialControlledValue ?? initialDefaultColor ?? "#ffffff", chroma("#ffffff")), [initialHue, initialSaturation, initialValue] = initialColor.hsv();
+		return {
+			alpha: initialColor.alpha(),
+			hue: getValidChannel(initialHue, MIN_COLOR_CHANNEL),
+			palette: (initialControlledPalette ?? initialDefaultPalette ?? []).map((colorOption) => chroma(colorOption)),
+			saturation: getValidChannel(initialSaturation, MIN_COLOR_CHANNEL),
+			value: initialValue,
+			valueType: VALUE_TYPES.find((typeOption) => typeOption.value === initialDefaultValueType) ?? VALUE_TYPES[FIRST_VALUE_TYPE_INDEX]
+		};
+	}), { hue: internalHue, saturation: internalSaturation, value: internalValue, alpha: internalAlpha, valueType, palette } = state, color = chroma.hsv(internalHue, internalSaturation, internalValue).alpha(internalAlpha), hue = internalHue, saturation = internalSaturation, value = internalValue, alpha = internalAlpha, lastSyncedColorRef = React.useRef(void 0), lastSyncedPaletteRef = React.useRef(void 0), setColor = (nextColor) => {
+		dispatch({
+			color: nextColor,
+			type: "set_color"
+		});
+		onValueChange?.(nextColor.hex());
+	}, setHue = (nextHue) => {
+		dispatch({
+			hue: nextHue,
+			type: "set_hue"
+		});
+		onValueChange?.(chroma.hsv(nextHue, saturation, value).alpha(alpha).hex());
+	}, setSaturation = (nextSaturation) => {
+		dispatch({
+			saturation: nextSaturation,
+			type: "set_saturation"
+		});
+		onValueChange?.(chroma.hsv(hue, nextSaturation, value).alpha(alpha).hex());
+	}, setValue = (nextValue) => {
+		dispatch({
+			type: "set_value",
+			value: nextValue
+		});
+		onValueChange?.(chroma.hsv(hue, saturation, nextValue).alpha(alpha).hex());
+	}, setSaturationValue = (nextSaturation, nextValue) => {
+		dispatch({
+			saturation: nextSaturation,
+			type: "set_saturation_value",
+			value: nextValue
+		});
+		onValueChange?.(chroma.hsv(hue, nextSaturation, nextValue).alpha(alpha).hex());
+	}, setAlpha = (nextAlpha) => setColor(color.alpha(nextAlpha)), setLightness = (nextLightness) => setColor(color.set("hsl.l", nextLightness)), setValueType = (nextValueType) => dispatch({
+		type: "set_value_type",
+		valueType: nextValueType
+	}), setPalette = (nextPalette) => {
+		lastSyncedPaletteRef.current = nextPalette.map((paletteColor) => paletteColor.hex("rgba")).join("|");
+		dispatch({
+			palette: nextPalette,
+			type: "set_palette"
+		});
+		onPaletteChange?.(nextPalette.map((paletteColor) => paletteColor.hex()));
+	}, addPaletteColor = (nextColor) => {
+		if (paletteLimit && palette.length >= paletteLimit) return;
+		const nextPalette = [...palette, nextColor];
+		lastSyncedPaletteRef.current = nextPalette.map((paletteColor) => paletteColor.hex("rgba")).join("|");
+		dispatch({
+			color: nextColor,
+			type: "add_palette_color"
+		});
+		onPaletteChange?.(nextPalette.map((paletteColor) => paletteColor.hex()));
+	};
+	React.useEffect(() => {
+		if (controlledValue === void 0) return;
+		const nextColor = normalizeToColor(controlledValue, color), nextKey = nextColor.hex("rgba");
+		if (nextKey === lastSyncedColorRef.current) return;
+		lastSyncedColorRef.current = nextKey;
+		if (nextKey !== color.hex("rgba")) dispatch({
+			color: nextColor,
+			type: "set_color"
+		});
+	}, [controlledValue, color]);
+	React.useEffect(() => {
+		if (controlledPalette === void 0) return;
+		const parsedPalette = controlledPalette.map((colorOption) => chroma(colorOption)), nextKey = parsedPalette.map((paletteColor) => paletteColor.hex("rgba")).join("|");
+		if (nextKey === lastSyncedPaletteRef.current) return;
+		lastSyncedPaletteRef.current = nextKey;
+		dispatch({
+			palette: parsedPalette,
+			type: "set_palette"
+		});
+	}, [controlledPalette]);
+	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
+		value: {
+			addPaletteColor,
+			alpha,
+			color,
+			hue,
+			palette,
+			paletteLimit,
+			saturation,
+			setAlpha,
+			setColor,
+			setHue,
+			setLightness,
+			setPalette,
+			setSaturation,
+			setSaturationValue,
+			setValue,
+			setValueType,
+			value,
+			valueType
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(colorPickerVariants({ variant }), className),
+			ref,
+			...props
+		})
+	});
+}
+function useColorPicker() {
+	const context = React.useContext(ColorPickerContext);
+	if (!context) throw new Error("useColorPicker must be used within a ColorPicker");
+	return context;
+}
+// src/components/color-picker/color-picker-area.tsx
+const PERCENTAGE_SCALE = 100;
+const MIN_NORMALIZED_VALUE = 0;
+const MAX_NORMALIZED_VALUE = 1;
+function ColorPickerArea({ className, ref, ...props }) {
+	const { color, hue, saturation, value, setSaturationValue } = useColorPicker(), hueColor = chroma.hsv(hue, MAX_NORMALIZED_VALUE, MAX_NORMALIZED_VALUE).hex(), updateColor = (event) => {
+		const bounds = event.currentTarget.getBoundingClientRect(), nextSaturation = Math.min(Math.max((event.clientX - bounds.left) / bounds.width, MIN_NORMALIZED_VALUE), MAX_NORMALIZED_VALUE), nextValue = Math.min(Math.max(MAX_NORMALIZED_VALUE - (event.clientY - bounds.top) / bounds.height, MIN_NORMALIZED_VALUE), MAX_NORMALIZED_VALUE);
+		setSaturationValue(nextSaturation, nextValue);
+	}, handlePointerDown = (event) => {
+		event.currentTarget.setPointerCapture(event.pointerId);
+		updateColor(event);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cn("relative aspect-square grow touch-none rounded-lg active:cursor-grabbing", className),
+		style: {
+			background: `
+          linear-gradient(to top, black, transparent),
+          linear-gradient(to right, white, ${hueColor})
+        `,
+			...props.style
+		},
+		onPointerDown: handlePointerDown,
+		onPointerMove: (event) => {
+			if (event.currentTarget.hasPointerCapture(event.pointerId)) updateColor(event);
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute size-md -translate-x-1/2 -translate-y-1/2 rounded-full border-3 border-white",
+			style: {
+				backgroundColor: color.hex(),
+				left: `${saturation * PERCENTAGE_SCALE}%`,
+				top: `${(MAX_NORMALIZED_VALUE - value) * PERCENTAGE_SCALE}%`
+			}
+		})
+	});
+}
+// src/components/color-picker/color-picker-group.tsx
+function ColorPickerGroup({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-sm", className),
+		ref,
+		...props
+	});
+}
+// src/components/color-channel-slider/color-channel-slider.utils.ts
+const HSL_SATURATION = 1;
+const HSL_LIGHTNESS = .5;
+const HUE_TRACK_LENGTH = 361;
+const LIGHTNESS_TRACK_LENGTH = 101;
+const TRANSPARENCY_TRACK_LENGTH = 101;
+const TRACK_DIVISIONS = 100;
+const getHueTrack = () => Array.from({ length: HUE_TRACK_LENGTH }, (_value, hue) => chroma.hsl(hue, HSL_SATURATION, HSL_LIGHTNESS).hex());
+const getTransparencyTrack = (baseColor) => Array.from({ length: TRANSPARENCY_TRACK_LENGTH }, (_value, index) => chroma(baseColor).alpha(index / TRACK_DIVISIONS).css());
+const getLightnessTrack = (baseColor) => Array.from({ length: LIGHTNESS_TRACK_LENGTH }, (_value, index) => chroma(baseColor).set("hsl.l", index / TRACK_DIVISIONS).css());
+// src/components/color-picker/color-picker-hue-slider.tsx
+const HUE_VALUE_INDEX = 0;
+function ColorPickerHueSlider({ className, ref, ...props }) {
+	const { hue, setHue } = useColorPicker(), handleChange = (value) => {
+		if (typeof value === "number") {
+			setHue(value);
+			return;
+		}
+		setHue(value[HUE_VALUE_INDEX]);
+	};
+	return /* @__PURE__ */ jsx(ColorChannelSlider, {
+		"aria-label": "Hue",
+		...props,
+		min: 0,
+		max: 360,
+		value: hue,
+		onValueChange: handleChange,
+		trackStyle: getHueTrack(),
+		className: cn("", className),
+		ref
+	});
+}
+// src/components/color-picker/color-picker-input.tsx
+const TRANSPARENCY_MULTIPLIER = 100;
+function ColorPickerInput({ showPopover = false, showTransparencyField = true, className, children, ref, ...props }) {
+	const { color, setColor, valueType } = useColorPicker(), [inputValue, setInputValue] = React.useState(String(valueType.getValue(color))), [transparency, setTransparency] = React.useState(Math.round(color.alpha() * TRANSPARENCY_MULTIPLIER).toString()), [prevColor, setPrevColor] = React.useState(color), [prevValueType, setPrevValueType] = React.useState(valueType), handleValueChange = (value) => {
+		setInputValue(value);
+	}, handleTransparencyChange = (value) => {
+		setTransparency(value);
+	}, handleValueBlur = () => {
+		const newColor = valueType.parseValue(inputValue);
+		if (newColor) setColor(newColor);
+	}, handleTransparencyBlur = () => {
+		const alpha = parseFloat(transparency);
+		if (!Number.isNaN(alpha)) setColor(color.alpha(alpha / TRANSPARENCY_MULTIPLIER));
+	}, handleValueKeyDown = (event) => {
+		if (event.key === "Enter") handleValueBlur();
+	}, handleTransparencyKeyDown = (event) => {
+		if (event.key === "Enter") handleTransparencyBlur();
+	};
+	if (color !== prevColor || valueType !== prevValueType) {
+		setPrevColor(color);
+		setPrevValueType(valueType);
+		setInputValue(String(valueType.getValue(color)));
+		setTransparency(Math.round(color.alpha() * TRANSPARENCY_MULTIPLIER).toString());
+	}
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		variant: "secondary",
+		className: cn("", className),
+		ref,
+		...props,
+		children: [
+			showPopover && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				"aria-label": "Open color picker",
+				nativeButton: false,
+				children: /* @__PURE__ */ jsx(InputGroupAddon, {
+					style: { backgroundColor: color.hex() },
+					className: "aspect-square h-1/2 rounded-lg hover:cursor-pointer"
+				})
+			}), /* @__PURE__ */ jsx(PopoverPanel, { children: /* @__PURE__ */ jsx(PopoverContent, {
+				className: "flex w-[300px] flex-col gap-sm",
+				children
+			}) })] }),
+			!showPopover && /* @__PURE__ */ jsx(InputGroupAddon, {
+				style: { backgroundColor: color.hex() },
+				className: "aspect-square size-md rounded-md"
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				"aria-label": "Color value",
+				onBlur: handleValueBlur,
+				onKeyDown: handleValueKeyDown,
+				onValueChange: handleValueChange,
+				value: inputValue,
+				className: "uppercase"
+			}),
+			showTransparencyField && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "h-md"
+				}),
+				/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) }),
+				/* @__PURE__ */ jsx(InputGroupInput, {
+					"aria-label": "Transparency percentage",
+					type: "number",
+					min: 0,
+					max: 100,
+					value: transparency,
+					onValueChange: handleTransparencyChange,
+					onBlur: handleTransparencyBlur,
+					onKeyDown: handleTransparencyKeyDown,
+					className: "w-xl"
+				})
+			] })
+		]
+	});
+}
+// src/components/color-picker/color-picker-label.tsx
+function ColorPickerLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("style-text-default-0", className),
+		ref,
+		...props
+	});
+}
+// src/components/color-picker/color-picker-lightness-slider.tsx
+const MIN_LIGHTNESS = 0;
+const MAX_LIGHTNESS = 100;
+const LIGHTNESS_SCALE = 100;
+const FIRST_VALUE_INDEX$1 = 0;
+function getSliderValue$1(value) {
+	if (typeof value === "number") return value;
+	return value[FIRST_VALUE_INDEX$1];
+}
+function ColorPickerLightnessSlider({ className, ref, ...props }) {
+	const { color, setColor } = useColorPicker(), lightness = color.get("hsl.l") || MIN_LIGHTNESS, handleChange = (value) => {
+		setColor(color.set("hsl.l", getSliderValue$1(value) / LIGHTNESS_SCALE));
+	};
+	return /* @__PURE__ */ jsx(ColorChannelSlider, {
+		"aria-label": "Lightness",
+		...props,
+		min: MIN_LIGHTNESS,
+		max: MAX_LIGHTNESS,
+		value: lightness * LIGHTNESS_SCALE,
+		onValueChange: handleChange,
+		trackStyle: getLightnessTrack(color.hex()),
+		className: cn("", className),
+		ref
+	});
+}
+// src/components/color-picker/color-picker-palette-add.tsx
+function ColorPickerPaletteAdd({ className, children, ref, ...props }) {
+	const { color, addPaletteColor } = useColorPicker(), handleClick = () => {
+		addPaletteColor(color);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Add current color to palette",
+		onClick: handleClick,
+		className: cn("flex size-md items-center justify-center rounded-lg border border-border-strong text-border-strong hover:cursor-pointer [&>svg]:size-xs", className),
+		ref,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { name: "add" })
+	});
+}
+// src/components/color-picker/color-picker-palette-limit.tsx
+function ColorPickerPaletteLimit({ className, children, ref, ...props }) {
+	const { palette, paletteLimit } = useColorPicker(), isAtLimit = paletteLimit && palette.length >= paletteLimit;
+	return Boolean(paletteLimit) && /* @__PURE__ */ jsxs("span", {
+		className: cn("style-text-prose--2 text-on-surface-variant", isAtLimit && "text-error-default", className),
+		ref,
+		...props,
+		children: [
+			children,
+			palette.length,
+			" / ",
+			paletteLimit
+		]
+	});
+}
+// src/components/color-picker/color-picker-palette-swatch.tsx
+function ColorPickerPaletteSwatch({ size, color, className, children, ref, ...props }) {
+	const { setColor } = useColorPicker(), handleClick = () => {
+		setColor(chroma(color));
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": `Select color ${color}`,
+		onClick: handleClick,
+		className: cn(colorPickerSwatchVariants({ size }), className),
+		ref,
+		style: { color },
+		...props,
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: "size-full",
+			style: { backgroundColor: color }
+		})]
+	});
+}
+// src/components/color-picker/color-picker-palette-list.tsx
+const DEFAULT_OCCURRENCE = 0;
+const OCCURRENCE_INCREMENT = 1;
+function ColorPickerPaletteList({ className, children, ref, ...props }) {
+	const { palette } = useColorPicker(), occurrences = /* @__PURE__ */ new Map();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-center justify-start gap-2xs", className),
+		ref,
+		...props,
+		children: [palette.map((color) => {
+			const value = color.hex("rgba"), occurrence = occurrences.get(value) ?? DEFAULT_OCCURRENCE;
+			occurrences.set(value, occurrence + OCCURRENCE_INCREMENT);
+			return /* @__PURE__ */ jsx(ColorPickerPaletteSwatch, {
+				color: color.css(),
+				size: "medium"
+			}, `${value}-${occurrence}`);
+		}), children]
+	});
+}
+// src/components/color-picker/color-picker-row.tsx
+function ColorPickerRow({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between gap-xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/color-picker/color-picker-transparency-slider.tsx
+const FIRST_VALUE_INDEX = 0;
+const ALPHA_PERCENTAGE_SCALE = 100;
+function getSliderValue(value) {
+	if (typeof value === "number") return value;
+	return value[FIRST_VALUE_INDEX];
+}
+function ColorPickerTransparencySlider({ className, ref, ...props }) {
+	const { color, setColor } = useColorPicker(), alpha = color.alpha(), handleChange = (value) => {
+		const nextAlpha = getSliderValue(value);
+		setColor(color.alpha(nextAlpha / ALPHA_PERCENTAGE_SCALE));
+	};
+	return /* @__PURE__ */ jsx(ColorChannelSlider, {
+		"aria-label": "Transparency",
+		...props,
+		min: 0,
+		max: ALPHA_PERCENTAGE_SCALE,
+		value: alpha * ALPHA_PERCENTAGE_SCALE,
+		onValueChange: handleChange,
+		trackStyle: getTransparencyTrack(color.hex()),
+		className: cn("", className),
+		ref
+	});
+}
+// src/components/color-picker/color-picker-value-type.tsx
+const [defaultValueType] = VALUE_TYPES;
+function ColorPickerValueType({ className, children, ref, ...props }) {
+	const { valueType, setValueType } = useColorPicker(), handleChange = (value) => {
+		setValueType(VALUE_TYPES.find((type) => type.value === value) ?? defaultValueType);
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		value: valueType.value,
+		onValueChange: handleChange,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			"aria-label": "Color value format",
+			variant: "secondary",
+			className: cn("", className),
+			ref,
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(SelectValue, { children: (value) => VALUE_TYPES.find((type) => type.value === value)?.label ?? value }),
+				/* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(Icon, { name: "chevronsUpDown" }) })
+			]
+		}), /* @__PURE__ */ jsx(SelectPopup, {
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(SelectList, { children: VALUE_TYPES.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
+				value,
+				children: label
+			}, label)) })
+		})]
+	});
+}
+// src/components/color-picker/index.ts
+const ColorPicker = Object.assign(ColorPicker$1, {
+	Area: ColorPickerArea,
+	Group: ColorPickerGroup,
+	HueSlider: ColorPickerHueSlider,
+	Input: ColorPickerInput,
+	Label: ColorPickerLabel,
+	LightnessSlider: ColorPickerLightnessSlider,
+	PaletteAdd: ColorPickerPaletteAdd,
+	PaletteLimit: ColorPickerPaletteLimit,
+	PaletteList: ColorPickerPaletteList,
+	PaletteSwatch: ColorPickerPaletteSwatch,
+	Row: ColorPickerRow,
+	TransparencySlider: ColorPickerTransparencySlider,
+	ValueType: ColorPickerValueType
+});
+export { ColorPicker, ColorPickerArea, ColorPickerGroup, ColorPickerHueSlider, ColorPickerInput, ColorPickerLabel, ColorPickerLightnessSlider, ColorPickerPaletteLimit, ColorPickerPaletteList, ColorPickerPaletteSwatch, ColorPickerRow, ColorPickerTransparencySlider, ColorPickerValueType };
+
+//# sourceMappingURL=index.js.map