@pixpilot/shadcn-ui 1.23.0 → 1.25.0

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

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

@@ -8,7 +8,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ id, color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = (0, react.useCallback)((value) => {
@@ -27,6 +27,7 @@ const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue })
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
 	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.ColorPickerPaletteButton, {
+		id,
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.cts

@@ -2,6 +2,7 @@ import { PresetColor } from "../types.cjs";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
 declare const ColorPickerPaletteSwatch: React.FC<{
+  id?: string;
   color?: PresetColor;
   onSelect?: (color: string) => void;
   className?: string;

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.ts

@@ -2,6 +2,7 @@ import { PresetColor } from "../types.js";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
 declare const ColorPickerPaletteSwatch: React.FC<{
+  id?: string;
   color?: PresetColor;
   onSelect?: (color: string) => void;
   className?: string;

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

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ id, color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = useCallback((value) => {
@@ -23,6 +23,7 @@ const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue })
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
 	const button = /* @__PURE__ */ jsx(ColorPickerPaletteButton, {
+		id,
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"

package/dist/ColorPickerBase/color-picker-context.d.cts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
+  id?: string;
   isPickerOpen: boolean;
   value: string;
   onValueChange: (value: string) => void;

package/dist/ColorPickerBase/color-picker-context.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
+  id?: string;
   isPickerOpen: boolean;
   value: string;
   onValueChange: (value: string) => void;

package/dist/ColorPickerBase/types.d.cts

@@ -12,6 +12,7 @@ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof Col
   width?: number | string;
 }
 type ColorPickerContentProps = Required<Pick<ColorPickerBaseProps, 'onValueChange' | 'presetColors' | 'sections'>> & {
+  id?: string;
   currentValue: string;
   contentProps?: Partial<ColorPickerContentWrapperProps>;
 };
@@ -34,6 +35,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
     value?: string;
     onValueChange: (value: string) => void;
     isPickerOpen: boolean;
+    id?: string;
   }) => React.ReactNode);
 }
 interface ColorPickerResetOptions {

package/dist/ColorPickerBase/types.d.ts

@@ -12,6 +12,7 @@ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof Col
   width?: number | string;
 }
 type ColorPickerContentProps = Required<Pick<ColorPickerBaseProps, 'onValueChange' | 'presetColors' | 'sections'>> & {
+  id?: string;
   currentValue: string;
   contentProps?: Partial<ColorPickerContentWrapperProps>;
 };
@@ -34,6 +35,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
     value?: string;
     onValueChange: (value: string) => void;
     isPickerOpen: boolean;
+    id?: string;
   }) => React.ReactNode);
 }
 interface ColorPickerResetOptions {

package/dist/ColorSelect.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_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -9,7 +10,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorSelect.tsx
 function ColorSelect(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -32,6 +33,7 @@ function ColorSelect(props) {
 		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
+			id,
 			className: "w-full",
 			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, {
@@ -47,6 +49,7 @@ function ColorSelect(props) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
+				id: require_get_id.getId(id, `option-${option.value}`),
 				value: option.value,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",

package/dist/ColorSelect.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -8,6 +8,7 @@ interface ColorSelectOption {
   value: string;
 }
 type BaseColorSelectProps = {
+  id?: string;
   options?: ColorSelectOption[];
   contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;
@@ -15,6 +16,6 @@ type BaseColorSelectProps = {
   placeholder?: string;
   keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime7.JSX.Element;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ColorSelect.d.ts

@@ -8,6 +8,7 @@ interface ColorSelectOption {
   value: string;
 }
 type BaseColorSelectProps = {
+  id?: string;
   options?: ColorSelectOption[];
   contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;

package/dist/ColorSelect.js

@@ -1,3 +1,4 @@
+import { getId } from "./utils/get-id.js";
 import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@pixpilot/shadcn";
 import React from "react";
@@ -5,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorSelect.tsx
 function ColorSelect(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -28,6 +29,7 @@ function ColorSelect(props) {
 		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id,
 			className: "w-full",
 			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ jsx(SelectValue, {
@@ -43,6 +45,7 @@ function ColorSelect(props) {
 		}), /* @__PURE__ */ jsx(SelectContent, {
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				id: getId(id, `option-${option.value}`),
 				value: option.value,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",

package/dist/Combobox.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
 const require_CommandOptionList = require('./CommandOptionList.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -15,7 +16,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/Combobox.tsx
 const DEFAULT_OPTIONS = [];
 const Combobox = (props) => {
-	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.",...commandProps } = props;
+	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id,...commandProps } = props;
 	const [open, setOpen] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
 		open,
@@ -23,6 +24,7 @@ const Combobox = (props) => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				id,
 				variant: "outline",
 				role: "combobox",
 				"aria-expanded": open,
@@ -34,7 +36,11 @@ const Combobox = (props) => {
 			style: { width: "var(--radix-popover-trigger-width)" },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, {
 				...commandProps,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, {
+					id: require_get_id.getId(id, "search-input"),
+					placeholder: searchPlaceholder
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+					id,
 					options,
 					value,
 					onChange: (val) => {

package/dist/Combobox.d.cts

@@ -4,6 +4,7 @@ import React, { ComponentProps } from "react";
 
 //#region src/Combobox.d.ts
 type ComboboxProps = {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   options?: CommandOptionListItem[];

package/dist/Combobox.d.ts

@@ -4,6 +4,7 @@ import React, { ComponentProps } from "react";
 
 //#region src/Combobox.d.ts
 type ComboboxProps = {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   options?: CommandOptionListItem[];

package/dist/Combobox.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "./utils/get-id.js";
 import { CommandOptionList } from "./CommandOptionList.js";
 import { Button, Command, CommandInput, Popover, PopoverContent, PopoverTrigger } from "@pixpilot/shadcn";
 import { ChevronsUpDown } from "lucide-react";
@@ -10,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Combobox.tsx
 const DEFAULT_OPTIONS = [];
 const Combobox = (props) => {
-	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.",...commandProps } = props;
+	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id,...commandProps } = props;
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
@@ -18,6 +19,7 @@ const Combobox = (props) => {
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
+				id,
 				variant: "outline",
 				role: "combobox",
 				"aria-expanded": open,
@@ -29,7 +31,11 @@ const Combobox = (props) => {
 			style: { width: "var(--radix-popover-trigger-width)" },
 			children: /* @__PURE__ */ jsxs(Command, {
 				...commandProps,
-				children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsx(CommandOptionList, {
+				children: [/* @__PURE__ */ jsx(CommandInput, {
+					id: getId(id, "search-input"),
+					placeholder: searchPlaceholder
+				}), /* @__PURE__ */ jsx(CommandOptionList, {
+					id,
 					options,
 					value,
 					onChange: (val) => {

package/dist/CommandOptionList.cjs

@@ -2,6 +2,7 @@
 
 
 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 lucide_react = require("lucide-react");
@@ -11,8 +12,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/CommandOptionList.tsx
 const CommandOptionList = (props) => {
-	const { options, value, onChange, emptyText = "No option found." } = props;
+	const { id, options, value, onChange, emptyText = "No option found." } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: emptyText }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandItem, {
+		id: require_get_id.getId(id, `option-${option.value}`),
 		value: option.value,
 		onSelect: (currentValue) => {
 			onChange?.(currentValue === value ? "" : currentValue);

package/dist/CommandOptionList.js

@@ -1,14 +1,16 @@
 'use client';
 
 
+import { getId } from "./utils/get-id.js";
 import { CommandEmpty, CommandGroup, CommandItem, CommandList, cn } from "@pixpilot/shadcn";
 import { Check } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/CommandOptionList.tsx
 const CommandOptionList = (props) => {
-	const { options, value, onChange, emptyText = "No option found." } = props;
+	const { id, options, value, onChange, emptyText = "No option found." } = props;
 	return /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(CommandItem, {
+		id: getId(id, `option-${option.value}`),
 		value: option.value,
 		onSelect: (currentValue) => {
 			onChange?.(currentValue === value ? "" : currentValue);

package/dist/ContentCard.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
 
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime5.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/ContentCard.d.ts

@@ -1,6 +1,6 @@
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime5.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.cjs

@@ -13,10 +13,11 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { value, onChange, placeholder = "Pick a date",...calendarProps } = props;
+	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			id,
 			variant: "outline",
 			className: (0, __pixpilot_shadcn.cn)("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: placeholder })]

package/dist/DatePicker.d.cts

@@ -1,14 +1,15 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
+  id?: string;
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime4.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/DatePicker.d.ts

@@ -1,14 +1,15 @@
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
+  id?: string;
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime4.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/DatePicker.js

@@ -8,10 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { value, onChange, placeholder = "Pick a date",...calendarProps } = props;
+	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
+			id,
 			variant: "outline",
 			className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
 			children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ jsx("span", { children: placeholder })]

package/dist/IconToggle.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
-const require_ToggleButton = require('./ToggleButton.cjs');
 const require_svg = require('./utils/svg.cjs');
+const require_ToggleButton = require('./ToggleButton.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");

package/dist/IconToggle.js

@@ -1,5 +1,5 @@
-import { ToggleButton } from "./ToggleButton.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
+import { ToggleButton } from "./ToggleButton.js";
 import { cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Rating.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 lucide_react = require("lucide-react");
@@ -124,7 +125,7 @@ function RatingButton({ index, className,...props }) {
 		}) : null]
 	});
 }
-function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children,...props }) {
+function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children, id,...props }) {
 	const isControlled = valueProp !== void 0;
 	const [internalValue, setInternalValue] = react.useState(defaultValue ?? 0);
 	const [hoverIndex, setHoverIndex] = react.useState(0);
@@ -185,12 +186,16 @@ function Rating({ value: valueProp, defaultValue, onValueChange, options: option
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id: require_get_id.getId(id, "rating-group"),
 			role: "radiogroup",
 			tabIndex: 0,
 			className: (0, __pixpilot_shadcn.cn)(ratingVariants({ size }), className),
 			onMouseLeave: handleMouseLeave,
 			...props,
-			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingButton, { index: index + 1 }, index)), hasNameText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingButton, {
+				id: index === 0 ? id : require_get_id.getId(id, `option-${index + 1}`),
+				index: index + 1
+			}, index)), hasNameText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "hidden",
 				name: nameTextOrEmpty,
 				value: value || "",