@pixpilot/shadcn-ui 1.23.0 → 1.24.0

package/dist/AbsoluteFill.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/AbsoluteFill.d.ts
@@ -10,7 +10,7 @@ import React from "react";
  */
 declare function AbsoluteFill(props: React.HTMLAttributes<HTMLDivElement> & {
   ref?: React.Ref<HTMLDivElement>;
-}): react_jsx_runtime1.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare namespace AbsoluteFill {
   var displayName: string;
 }

package/dist/Button.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
@@ -27,7 +27,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
 }
 declare function Button$1(props: ButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime2.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare namespace Button$1 {
   var displayName: string;
 }

package/dist/ButtonExtended.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
@@ -50,7 +50,7 @@ interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, Varia
 }
 declare function ButtonExtended(props: ButtonExtendedProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime3.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare namespace ButtonExtended {
   var displayName: string;
 }

package/dist/ColorPicker/ColorPicker.cjs

@@ -11,13 +11,16 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPicker/ColorPicker.tsx
 const ColorPicker = (props) => {
-	const { variant = "input", formatDisplayValue, placeholder, resetOptions,...rest } = props;
+	const { variant = "input", formatDisplayValue, placeholder, resetOptions, id,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerBase.ColorPickerBase, {
+		id,
 		...rest,
 		children: variant === "input" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {
+			id,
 			placeholder,
 			resetOptions
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerButton.ColorPickerButton, {
+			id,
 			placeholder,
 			formatDisplayValue,
 			resetOptions

package/dist/ColorPicker/ColorPicker.js

@@ -9,13 +9,16 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/ColorPicker/ColorPicker.tsx
 const ColorPicker = (props) => {
-	const { variant = "input", formatDisplayValue, placeholder, resetOptions,...rest } = props;
+	const { variant = "input", formatDisplayValue, placeholder, resetOptions, id,...rest } = props;
 	return /* @__PURE__ */ jsx(ColorPickerBase, {
+		id,
 		...rest,
 		children: variant === "input" ? /* @__PURE__ */ jsx(ColorPickerInput, {
+			id,
 			placeholder,
 			resetOptions
 		}) : /* @__PURE__ */ jsx(ColorPickerButton, {
+			id,
 			placeholder,
 			formatDisplayValue,
 			resetOptions

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children, id,...rest } = props;
 	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: require_constants.DEFAULT_COLOR,
@@ -49,13 +49,16 @@ const ColorPickerBase = (props) => {
 		children: [typeof children === "function" ? children({
 			value: currentValue,
 			onValueChange: handleValueChange,
-			isPickerOpen: open
+			isPickerOpen: open,
+			id
 		}) : children, layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompactControls.ColorPickerCompactControls, {
 			...contentProps,
+			id,
 			presetColors: colors,
 			sections: resolvedSections
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFullControls.ColorPickerFullControls, {
 			...contentProps,
+			id,
 			presetColors: colors,
 			sections: resolvedSections
 		})]

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -14,7 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children, id,...rest } = props;
 	const { currentValue, handleValueChange } = useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: DEFAULT_COLOR,
@@ -46,13 +46,16 @@ const ColorPickerBase = (props) => {
 		children: [typeof children === "function" ? children({
 			value: currentValue,
 			onValueChange: handleValueChange,
-			isPickerOpen: open
+			isPickerOpen: open,
+			id
 		}) : children, layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompactControls, {
 			...contentProps,
+			id,
 			presetColors: colors,
 			sections: resolvedSections
 		}) : /* @__PURE__ */ jsx(ColorPickerFullControls, {
 			...contentProps,
+			id,
 			presetColors: colors,
 			sections: resolvedSections
 		})]

package/dist/ColorPickerBase/ColorPickerButton.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_color_picker_context = require('./color-picker-context.cjs');
 const require_ColorPickerSwatch = require('./ColorPickerSwatch.cjs');
 const require_use_color_picker_reset_options = require('./hooks/use-color-picker-reset-options.cjs');
@@ -13,8 +14,8 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerButton.tsx
 const ColorPickerButton = (props) => {
-	const { slots, formatDisplayValue, placeholder = "Pick a color", onClear, resetOptions, title,...rest } = props;
-	const { isPickerOpen, onValueChange } = require_color_picker_context.useColorPickerContext();
+	const { slots, formatDisplayValue, placeholder = "Pick a color", onClear, resetOptions, title, id,...rest } = props;
+	const { id: contextId, isPickerOpen, onValueChange } = require_color_picker_context.useColorPickerContext();
 	const { value, isResetValue, resetLabel, resetTooltip, resetIcon, handleClear, showClearButton, swatchColor } = require_use_color_picker_reset_options.useColorPickerResetOptions({
 		resetOptions,
 		onClear
@@ -28,9 +29,11 @@ const ColorPickerButton = (props) => {
 		return formatDisplayValue != null ? formatDisplayValue(value) : value;
 	};
 	const swatchChildren = slots?.swatch?.children ?? (isResetValue ? resetIcon : void 0);
+	const controlId = id ?? contextId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
+			id: controlId,
 			...rest,
 			title,
 			className: (0, __pixpilot_shadcn.cn)("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer", rest.className),
@@ -51,6 +54,7 @@ const ColorPickerButton = (props) => {
 					align: "inline-end",
 					className: "gap-1",
 					children: [showClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+						id: require_get_id.getId(controlId, "clear-button"),
 						type: "button",
 						title: resetTooltip,
 						variant: "ghost",

package/dist/ColorPickerBase/ColorPickerButton.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { useColorPickerContext } from "./color-picker-context.js";
 import { ColorPickerSwatch as ColorPickerSwatch$1 } from "./ColorPickerSwatch.js";
 import { useColorPickerResetOptions } from "./hooks/use-color-picker-reset-options.js";
@@ -8,8 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerButton.tsx
 const ColorPickerButton = (props) => {
-	const { slots, formatDisplayValue, placeholder = "Pick a color", onClear, resetOptions, title,...rest } = props;
-	const { isPickerOpen, onValueChange } = useColorPickerContext();
+	const { slots, formatDisplayValue, placeholder = "Pick a color", onClear, resetOptions, title, id,...rest } = props;
+	const { id: contextId, isPickerOpen, onValueChange } = useColorPickerContext();
 	const { value, isResetValue, resetLabel, resetTooltip, resetIcon, handleClear, showClearButton, swatchColor } = useColorPickerResetOptions({
 		resetOptions,
 		onClear
@@ -21,9 +22,11 @@ const ColorPickerButton = (props) => {
 		return formatDisplayValue != null ? formatDisplayValue(value) : value;
 	};
 	const swatchChildren = slots?.swatch?.children ?? (isResetValue ? resetIcon : void 0);
+	const controlId = id ?? contextId;
 	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(InputGroup, {
+			id: controlId,
 			...rest,
 			title,
 			className: cn("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer", rest.className),
@@ -44,6 +47,7 @@ const ColorPickerButton = (props) => {
 					align: "inline-end",
 					className: "gap-1",
 					children: [showClearButton && /* @__PURE__ */ jsx(Button, {
+						id: getId(controlId, "clear-button"),
 						type: "button",
 						title: resetTooltip,
 						variant: "ghost",

package/dist/ColorPickerBase/ColorPickerCompactControls.cjs

@@ -12,7 +12,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerCompactControls.tsx
 const ColorPickerCompactControls = react.default.memo((props) => {
-	const { presetColors, sections = require_constants.DEFAULT_SECTIONS,...rest } = props;
+	const { presetColors, sections = require_constants.DEFAULT_SECTIONS, id,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -24,17 +24,19 @@ const ColorPickerCompactControls = react.default.memo((props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
 		...rest,
 		children: [
-			shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, {}),
+			shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, { id }),
 			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-2  flex flex-wrap",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPalette.ColorPickerColorPalette, {
+					id,
 					presetColors,
 					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
 				})
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatControls.ColorPickerFormatControls, {
 				showFormatSelect,
-				showInput
+				showInput,
+				id
 			})
 		]
 	});

package/dist/ColorPickerBase/ColorPickerCompactControls.js

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerCompactControls.tsx
 const ColorPickerCompactControls = React.memo((props) => {
-	const { presetColors, sections = DEFAULT_SECTIONS,...rest } = props;
+	const { presetColors, sections = DEFAULT_SECTIONS, id,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -21,17 +21,19 @@ const ColorPickerCompactControls = React.memo((props) => {
 	return /* @__PURE__ */ jsxs(ColorPickerContent, {
 		...rest,
 		children: [
-			shouldShowPickerUi && /* @__PURE__ */ jsx(ColorPickerControls, {}),
+			shouldShowPickerUi && /* @__PURE__ */ jsx(ColorPickerControls, { id }),
 			showSwatch && /* @__PURE__ */ jsx("div", {
 				className: "gap-2  flex flex-wrap",
 				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
+					id,
 					presetColors,
 					onMoreColor: canTogglePickerUi ? () => setShowFullPicker(!showFullPicker) : void 0
 				})
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ jsx(ColorPickerFormatControls, {
 				showFormatSelect,
-				showInput
+				showInput,
+				id
 			})
 		]
 	});

package/dist/ColorPickerBase/ColorPickerControls.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -8,21 +9,31 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerControls.tsx
 const ColorPickerControls = (props) => {
-	const { slots,...rest } = props;
+	const { slots, id,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "color-picker-controls",
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)("space-y-4", rest.className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, { ...slots?.area }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {
+			id: require_get_id.getId(id, "picker-area"),
+			...slots?.area
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-slot": "color-picker-controls-row",
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, {
+				id: require_get_id.getId(id, "eye-dropper-button"),
 				...slots?.eyeDropper,
 				className: (0, __pixpilot_shadcn.cn)("hidden xs:flex ", slots?.eyeDropper.className)
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-slot": "color-picker-controls-sliders",
 				className: "flex-1 space-y-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, { ...slots?.hueSlider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, { ...slots?.alphaSlider })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {
+					id: require_get_id.getId(id, "hue-slider"),
+					...slots?.hueSlider
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {
+					id: require_get_id.getId(id, "alpha-slider"),
+					...slots?.alphaSlider
+				})]
 			})]
 		})]
 	});

package/dist/ColorPickerBase/ColorPickerControls.js

@@ -1,24 +1,35 @@
+import { getId } from "../utils/get-id.js";
 import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerEyeDropper as ColorPickerEyeDropper$1, ColorPickerHueSlider, cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerControls.tsx
 const ColorPickerControls = (props) => {
-	const { slots,...rest } = props;
+	const { slots, id,...rest } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "color-picker-controls",
 		...rest,
 		className: cn("space-y-4", rest.className),
-		children: [/* @__PURE__ */ jsx(ColorPickerArea, { ...slots?.area }), /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(ColorPickerArea, {
+			id: getId(id, "picker-area"),
+			...slots?.area
+		}), /* @__PURE__ */ jsxs("div", {
 			"data-slot": "color-picker-controls-row",
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper$1, {
+				id: getId(id, "eye-dropper-button"),
 				...slots?.eyeDropper,
 				className: cn("hidden xs:flex ", slots?.eyeDropper.className)
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-slot": "color-picker-controls-sliders",
 				className: "flex-1 space-y-2",
-				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, { ...slots?.hueSlider }), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, { ...slots?.alphaSlider })]
+				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {
+					id: getId(id, "hue-slider"),
+					...slots?.hueSlider
+				}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {
+					id: getId(id, "alpha-slider"),
+					...slots?.alphaSlider
+				})]
 			})]
 		})]
 	});

package/dist/ColorPickerBase/ColorPickerFormatControls.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_ColorPickerFormatInput = require('./ColorPickerFormatInput.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -9,11 +10,11 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerFormatControls.tsx
 const ColorPickerFormatControls = (props) => {
-	const { showFormatSelect = true, showInput = true,...rest } = props;
+	const { showFormatSelect = true, showInput = true, id,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2 w-full", rest.className),
-		children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatInput.ColorPickerFormatInput, {})]
+		children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, { id: require_get_id.getId(id, "format-select") }), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatInput.ColorPickerFormatInput, { id: require_get_id.getId(id, "format-input") })]
 	});
 };
 ColorPickerFormatControls.displayName = "ColorPickerFormatControls";

package/dist/ColorPickerBase/ColorPickerFormatControls.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { ColorPickerFormatInput } from "./ColorPickerFormatInput.js";
 import { ColorPickerFormatSelect, cn } from "@pixpilot/shadcn";
 import React from "react";
@@ -5,11 +6,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerFormatControls.tsx
 const ColorPickerFormatControls = (props) => {
-	const { showFormatSelect = true, showInput = true,...rest } = props;
+	const { showFormatSelect = true, showInput = true, id,...rest } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: cn("flex items-center gap-2 w-full", rest.className),
-		children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerFormatInput, {})]
+		children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, { id: getId(id, "format-select") }), showInput && /* @__PURE__ */ jsx(ColorPickerFormatInput, { id: getId(id, "format-input") })]
 	});
 };
 ColorPickerFormatControls.displayName = "ColorPickerFormatControls";

package/dist/ColorPickerBase/ColorPickerFullControls.cjs

@@ -11,7 +11,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerFullControls.tsx
 const ColorPickerFullControls = react.default.memo((props) => {
-	const { presetColors, sections,...rest } = props;
+	const { presetColors, sections, id,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -20,14 +20,18 @@ const ColorPickerFullControls = react.default.memo((props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
 		...rest,
 		children: [
-			showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, {}),
+			showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerControls.ColorPickerControls, { id }),
 			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-2  flex flex-wrap",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPalette.ColorPickerColorPalette, { presetColors })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPalette.ColorPickerColorPalette, {
+					id,
+					presetColors
+				})
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFormatControls.ColorPickerFormatControls, {
 				showFormatSelect,
-				showInput
+				showInput,
+				id
 			})
 		]
 	});

package/dist/ColorPickerBase/ColorPickerFullControls.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerFullControls.tsx
 const ColorPickerFullControls = React.memo((props) => {
-	const { presetColors, sections,...rest } = props;
+	const { presetColors, sections, id,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -17,14 +17,18 @@ const ColorPickerFullControls = React.memo((props) => {
 	return /* @__PURE__ */ jsxs(ColorPickerContent, {
 		...rest,
 		children: [
-			showPicker && /* @__PURE__ */ jsx(ColorPickerControls, {}),
+			showPicker && /* @__PURE__ */ jsx(ColorPickerControls, { id }),
 			showSwatch && /* @__PURE__ */ jsx("div", {
 				className: "gap-2  flex flex-wrap",
-				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, { presetColors })
+				children: /* @__PURE__ */ jsx(ColorPickerColorPalette, {
+					id,
+					presetColors
+				})
 			}),
 			(showFormatSelect || showInput) && /* @__PURE__ */ jsx(ColorPickerFormatControls, {
 				showFormatSelect,
-				showInput
+				showInput,
+				id
 			})
 		]
 	});

package/dist/ColorPickerBase/ColorPickerInput.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_color_picker_context = require('./color-picker-context.cjs');
 const require_ColorPickerSwatch = require('./ColorPickerSwatch.cjs');
 const require_use_color_picker_reset_options = require('./hooks/use-color-picker-reset-options.cjs');
@@ -13,8 +14,8 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput = (props) => {
-	const { slots, onChange, onClear, resetOptions, placeholder, title,...rest } = props;
-	const { isPickerOpen, onValueChange } = require_color_picker_context.useColorPickerContext();
+	const { slots, onChange, onClear, resetOptions, placeholder, title, id,...rest } = props;
+	const { id: contextId, isPickerOpen, onValueChange } = require_color_picker_context.useColorPickerContext();
 	const { value, isResetValue, resetLabel, resetTooltip, resetIcon, handleClear, showClearButton, swatchColor } = require_use_color_picker_reset_options.useColorPickerResetOptions({
 		resetOptions,
 		onClear
@@ -24,6 +25,7 @@ const ColorPickerInput = (props) => {
 	}
 	const inputValue = isResetValue ? "" : value ?? "";
 	const inputPlaceholder = isResetValue ? resetLabel : placeholder;
+	const controlId = id ?? contextId;
 	const swatchChildren = slots?.swatch?.children ?? (isResetValue ? resetIcon : void 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
 		asChild: true,
@@ -39,6 +41,7 @@ const ColorPickerInput = (props) => {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
+					id: controlId,
 					value: inputValue,
 					...rest,
 					title,
@@ -61,6 +64,7 @@ const ColorPickerInput = (props) => {
 				showClearButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
 					align: "inline-end",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+						id: require_get_id.getId(controlId, "clear-button"),
 						type: "button",
 						variant: "ghost",
 						size: "icon",

package/dist/ColorPickerBase/ColorPickerInput.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { useColorPickerContext } from "./color-picker-context.js";
 import { ColorPickerSwatch as ColorPickerSwatch$1 } from "./ColorPickerSwatch.js";
 import { useColorPickerResetOptions } from "./hooks/use-color-picker-reset-options.js";
@@ -8,8 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerInput.tsx
 const ColorPickerInput$1 = (props) => {
-	const { slots, onChange, onClear, resetOptions, placeholder, title,...rest } = props;
-	const { isPickerOpen, onValueChange } = useColorPickerContext();
+	const { slots, onChange, onClear, resetOptions, placeholder, title, id,...rest } = props;
+	const { id: contextId, isPickerOpen, onValueChange } = useColorPickerContext();
 	const { value, isResetValue, resetLabel, resetTooltip, resetIcon, handleClear, showClearButton, swatchColor } = useColorPickerResetOptions({
 		resetOptions,
 		onClear
@@ -17,6 +18,7 @@ const ColorPickerInput$1 = (props) => {
 	if (onValueChange === void 0) throw new Error("ColorPickerInput must be used within a ColorPickerRoot component");
 	const inputValue = isResetValue ? "" : value ?? "";
 	const inputPlaceholder = isResetValue ? resetLabel : placeholder;
+	const controlId = id ?? contextId;
 	const swatchChildren = slots?.swatch?.children ?? (isResetValue ? resetIcon : void 0);
 	return /* @__PURE__ */ jsx(ColorPickerTrigger, {
 		asChild: true,
@@ -32,6 +34,7 @@ const ColorPickerInput$1 = (props) => {
 					})
 				}),
 				/* @__PURE__ */ jsx(InputGroupInput, {
+					id: controlId,
 					value: inputValue,
 					...rest,
 					title,
@@ -54,6 +57,7 @@ const ColorPickerInput$1 = (props) => {
 				showClearButton ? /* @__PURE__ */ jsx(InputGroupAddon, {
 					align: "inline-end",
 					children: /* @__PURE__ */ jsx(Button, {
+						id: getId(controlId, "clear-button"),
 						type: "button",
 						variant: "ghost",
 						size: "icon",

package/dist/ColorPickerBase/ColorPickerRoot.cjs

@@ -15,7 +15,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/ColorPickerRoot.tsx
 const DEFAULT_COLOR = "#000000";
 const ColorPickerRoot = (props) => {
-	const { value: propValue, onChange, onValueChange, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, format, defaultFormat = "hex", onFormatChange, children, id,...rest } = props;
 	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: DEFAULT_COLOR,
@@ -32,6 +32,7 @@ const ColorPickerRoot = (props) => {
 	const [open, setOpen] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_picker_context.Provider, {
 		value: {
+			id,
 			isPickerOpen: open,
 			value: currentValue,
 			onValueChange: handleValueChange,

package/dist/ColorPickerBase/ColorPickerRoot.js

@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ColorPickerBase/ColorPickerRoot.tsx
 const DEFAULT_COLOR = "#000000";
 const ColorPickerRoot = (props) => {
-	const { value: propValue, onChange, onValueChange, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, format, defaultFormat = "hex", onFormatChange, children, id,...rest } = props;
 	const { currentValue, handleValueChange } = useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: DEFAULT_COLOR,
@@ -28,6 +28,7 @@ const ColorPickerRoot = (props) => {
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsx(Provider, {
 		value: {
+			id,
 			isPickerOpen: open,
 			value: currentValue,
 			onValueChange: handleValueChange,

package/dist/ColorPickerBase/color-palette/ColorPalette.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../../utils/get-id.cjs');
 const require_color_picker_context = require('../color-picker-context.cjs');
 const require_PaletteButton = require('./PaletteButton.cjs');
 const require_PaletteSwatch = require('./PaletteSwatch.cjs');
@@ -79,19 +80,24 @@ const COMMON_COLORS = [
 	}
 ];
 const ColorPickerColorPalette = (props) => {
-	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor,...rest } = props;
+	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor, id,...rest } = props;
 	const { value: selectedColor, onValueChange } = require_color_picker_context.useColorPickerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)("gap-2 flex flex-wrap", rest.className),
 		children: [
-			enableEyeDropper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: require_PaletteButton.COLOR_PICKER_PALETTE_BUTTON_CLASSES }),
+			enableEyeDropper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, {
+				id: require_get_id.getId(id, "eye-dropper-button"),
+				className: require_PaletteButton.COLOR_PICKER_PALETTE_BUTTON_CLASSES
+			}),
 			presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.ColorPickerPaletteSwatch, {
+				id: require_get_id.getId(id, `option-${color.value}`),
 				color,
 				onSelect: onValueChange,
 				selectedValue: selectedColor
 			}, color.value)),
 			onMoreColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.ColorPickerPaletteButton, {
+				id: require_get_id.getId(id, "more-colors-button"),
 				onClick: onMoreColor,
 				"aria-label": "Toggle full color picker",
 				className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",

package/dist/ColorPickerBase/color-palette/ColorPalette.js

@@ -1,3 +1,4 @@
+import { getId } from "../../utils/get-id.js";
 import { useColorPickerContext } from "../color-picker-context.js";
 import { COLOR_PICKER_PALETTE_BUTTON_CLASSES, ColorPickerPaletteButton } from "./PaletteButton.js";
 import { ColorPickerPaletteSwatch } from "./PaletteSwatch.js";
@@ -74,19 +75,24 @@ const COMMON_COLORS = [
 	}
 ];
 const ColorPickerColorPalette = (props) => {
-	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor,...rest } = props;
+	const { presetColors = COMMON_COLORS, enableEyeDropper, onMoreColor, id,...rest } = props;
 	const { value: selectedColor, onValueChange } = useColorPickerContext();
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: cn("gap-2 flex flex-wrap", rest.className),
 		children: [
-			enableEyeDropper && /* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: COLOR_PICKER_PALETTE_BUTTON_CLASSES }),
+			enableEyeDropper && /* @__PURE__ */ jsx(ColorPickerEyeDropper, {
+				id: getId(id, "eye-dropper-button"),
+				className: COLOR_PICKER_PALETTE_BUTTON_CLASSES
+			}),
 			presetColors.map((color) => /* @__PURE__ */ jsx(ColorPickerPaletteSwatch, {
+				id: getId(id, `option-${color.value}`),
 				color,
 				onSelect: onValueChange,
 				selectedValue: selectedColor
 			}, color.value)),
 			onMoreColor && /* @__PURE__ */ jsx(ColorPickerPaletteButton, {
+				id: getId(id, "more-colors-button"),
 				onClick: onMoreColor,
 				"aria-label": "Toggle full color picker",
 				className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",