@pixpilot/shadcn-ui 1.23.0 → 1.25.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/Alert.cjs

@@ -22,28 +22,32 @@ const Alert = (props) => {
 	const msgIcon = getIcon(icon, variant);
 	const hasTitle = title != null && title.trim() !== "";
 	const hasContent = hasTitle || description != null;
+	const hasStructuredLayout = Boolean(msgIcon || hasContent);
 	const config = require_variant_config.variantConfig[variant] ?? require_variant_config.variantConfig.default;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Alert, {
 		...rest,
 		variant: "destructive",
-		className: require_utils.cn("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", config.borderClass, config.textClass, className),
-		children: [
-			msgIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_utils.cn("mr-3 flex items-start pt-0.5"),
+		className: require_utils.cn("flex flex-col items-stretch bg-card border-accent! rounded-sm border-0 border-l-4", config.borderClass, config.textClass, className),
+		children: [hasStructuredLayout && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.cn("col-span-full flex w-full min-w-0 items-start", msgIcon ? "flex-row" : "flex-col"),
+			children: [msgIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.cn("mr-3 flex shrink-0 items-start pt-0.5"),
 				children: msgIcon
-			}),
-			hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-1 flex-col gap-1",
-				children: [hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertTitle, {
-					className: require_utils.cn(config.textClass, { "block!": !hasTitle }),
-					children: title
-				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertDescription, {
-					className: require_utils.cn(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
-					children: description
-				})]
-			}),
-			children
-		]
+			}), (hasContent || children != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex w-full min-w-0 flex-1 flex-col gap-1",
+				children: [
+					hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertTitle, {
+						className: require_utils.cn(config.textClass, { "block!": !hasTitle }),
+						children: title
+					}),
+					description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertDescription, {
+						className: require_utils.cn(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
+						children: description
+					}),
+					children
+				]
+			})]
+		}), !hasStructuredLayout && children]
 	});
 };
 Alert.displayName = "Alert";

package/dist/Alert.js

@@ -18,28 +18,32 @@ const Alert$1 = (props) => {
 	const msgIcon = getIcon(icon, variant);
 	const hasTitle = title != null && title.trim() !== "";
 	const hasContent = hasTitle || description != null;
+	const hasStructuredLayout = Boolean(msgIcon || hasContent);
 	const config = variantConfig[variant] ?? variantConfig.default;
 	return /* @__PURE__ */ jsxs(Alert, {
 		...rest,
 		variant: "destructive",
-		className: cn$1("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", config.borderClass, config.textClass, className),
-		children: [
-			msgIcon && /* @__PURE__ */ jsx("div", {
-				className: cn$1("mr-3 flex items-start pt-0.5"),
+		className: cn$1("flex flex-col items-stretch bg-card border-accent! rounded-sm border-0 border-l-4", config.borderClass, config.textClass, className),
+		children: [hasStructuredLayout && /* @__PURE__ */ jsxs("div", {
+			className: cn$1("col-span-full flex w-full min-w-0 items-start", msgIcon ? "flex-row" : "flex-col"),
+			children: [msgIcon && /* @__PURE__ */ jsx("div", {
+				className: cn$1("mr-3 flex shrink-0 items-start pt-0.5"),
 				children: msgIcon
-			}),
-			hasContent && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-1 flex-col gap-1",
-				children: [hasTitle && /* @__PURE__ */ jsx(AlertTitle, {
-					className: cn$1(config.textClass, { "block!": !hasTitle }),
-					children: title
-				}), description != null && /* @__PURE__ */ jsx(AlertDescription, {
-					className: cn$1(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
-					children: description
-				})]
-			}),
-			children
-		]
+			}), (hasContent || children != null) && /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full min-w-0 flex-1 flex-col gap-1",
+				children: [
+					hasTitle && /* @__PURE__ */ jsx(AlertTitle, {
+						className: cn$1(config.textClass, { "block!": !hasTitle }),
+						children: title
+					}),
+					description != null && /* @__PURE__ */ jsx(AlertDescription, {
+						className: cn$1(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
+						children: description
+					}),
+					children
+				]
+			})]
+		}), !hasStructuredLayout && children]
 	});
 };
 Alert$1.displayName = "Alert";

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",