@pixpilot/shadcn-ui 1.22.0 → 1.24.0

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

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

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/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

@@ -4,6 +4,7 @@ import { ComponentProps } from "react";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
+  id?: string;
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;

package/dist/DatePicker.d.ts

@@ -4,6 +4,7 @@ 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;

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

package/dist/Rating.d.cts

@@ -51,6 +51,7 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
 }: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion

package/dist/Rating.d.ts

@@ -51,6 +51,7 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
 }: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion

package/dist/Rating.js

@@ -1,3 +1,4 @@
+import { getId } from "./utils/get-id.js";
 import { cn } from "@pixpilot/shadcn";
 import { Circle, Star } from "lucide-react";
 import * as React$1 from "react";
@@ -118,7 +119,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$1.useState(defaultValue ?? 0);
 	const [hoverIndex, setHoverIndex] = React$1.useState(0);
@@ -179,12 +180,16 @@ function Rating({ value: valueProp, defaultValue, onValueChange, options: option
 	return /* @__PURE__ */ jsx(RatingContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
+			id: getId(id, "rating-group"),
 			role: "radiogroup",
 			tabIndex: 0,
 			className: cn(ratingVariants({ size }), className),
 			onMouseLeave: handleMouseLeave,
 			...props,
-			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(RatingButton, { index: index + 1 }, index)), hasNameText ? /* @__PURE__ */ jsx("input", {
+			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(RatingButton, {
+				id: index === 0 ? id : getId(id, `option-${index + 1}`),
+				index: index + 1
+			}, index)), hasNameText ? /* @__PURE__ */ jsx("input", {
 				type: "hidden",
 				name: nameTextOrEmpty,
 				value: value || "",

package/dist/Select.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);
@@ -11,7 +12,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Select.tsx
 function Select(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -35,11 +36,13 @@ function Select(props) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative w-full",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
+				id,
 				className: (0, __pixpilot_shadcn.cn)("w-full", className),
 				onKeyDown: handleTriggerKeyDown,
 				disabled,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, { placeholder })
 			}), clearable && value !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				id: require_get_id.getId(id, "clear-button"),
 				type: "button",
 				className: "absolute right-8 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-sm opacity-40 hover:opacity-100 z-10",
 				onClick: (e) => {
@@ -54,6 +57,7 @@ function Select(props) {
 			position,
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
+				id: require_get_id.getId(id, `option-${option.value}`),
 				value: String(option.value),
 				children: option.label
 			}, option.value))

package/dist/Select.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, cn } from "@pixpilot/shadcn";
 import { XIcon } from "lucide-react";
@@ -6,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Select.tsx
 function Select$1(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, position, clearable = false, disabled, className, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -30,11 +31,13 @@ function Select$1(props) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative w-full",
 			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id,
 				className: cn("w-full", className),
 				onKeyDown: handleTriggerKeyDown,
 				disabled,
 				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 			}), clearable && value !== "" && /* @__PURE__ */ jsx("button", {
+				id: getId(id, "clear-button"),
 				type: "button",
 				className: "absolute right-8 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-sm opacity-40 hover:opacity-100 z-10",
 				onClick: (e) => {
@@ -49,6 +52,7 @@ function Select$1(props) {
 			position,
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				id: getId(id, `option-${option.value}`),
 				value: String(option.value),
 				children: option.label
 			}, option.value))

package/dist/avatar-upload/AvatarUpload.cjs

@@ -27,7 +27,7 @@ const sizeClasses = {
 	}
 };
 const AvatarUpload = (props) => {
-	const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true,...rest } = props;
+	const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true, id,...rest } = props;
 	const { upload = "Upload", change = "Change" } = messages || {};
 	const hasValue = value != null && Object.keys(value).length > 0;
 	const currentSize = sizeClasses[size];
@@ -56,6 +56,7 @@ const AvatarUpload = (props) => {
 		accept: "image/*",
 		"data-slots": "avatar-upload",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
+			id,
 			className: require_utils.cn(error != null && "border-red-500", currentSize.dropZone),
 			children: selectedFile != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadList, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadItem.AvatarUploadItem, {
 				file: selectedFile.file,
@@ -65,10 +66,12 @@ const AvatarUpload = (props) => {
 				onError: setError,
 				onFileError,
 				onClear: showClearButton ? handleClear : void 0,
-				size
+				size,
+				id
 			}, selectedFile.id) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AvatarUploadComponents.MainWrapper, {
 				currentSize,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.AvatarWrap, {
+					id,
 					showChangeIcon: hasValue,
 					onClear: showClearButton ? handleClear : void 0,
 					size,

package/dist/avatar-upload/AvatarUpload.js

@@ -22,7 +22,7 @@ const sizeClasses = {
 	}
 };
 const AvatarUpload = (props) => {
-	const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true,...rest } = props;
+	const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true, id,...rest } = props;
 	const { upload = "Upload", change = "Change" } = messages || {};
 	const hasValue = value != null && Object.keys(value).length > 0;
 	const currentSize = sizeClasses[size];
@@ -51,6 +51,7 @@ const AvatarUpload = (props) => {
 		accept: "image/*",
 		"data-slots": "avatar-upload",
 		children: /* @__PURE__ */ jsx(FileUploadDropzone, {
+			id,
 			className: cn$1(error != null && "border-red-500", currentSize.dropZone),
 			children: selectedFile != null ? /* @__PURE__ */ jsx(FileUploadList, { children: /* @__PURE__ */ jsx(AvatarUploadItem, {
 				file: selectedFile.file,
@@ -60,10 +61,12 @@ const AvatarUpload = (props) => {
 				onError: setError,
 				onFileError,
 				onClear: showClearButton ? handleClear : void 0,
-				size
+				size,
+				id
 			}, selectedFile.id) }) : /* @__PURE__ */ jsxs(MainWrapper, {
 				currentSize,
 				children: [/* @__PURE__ */ jsx(AvatarWrap, {
+					id,
 					showChangeIcon: hasValue,
 					onClear: showClearButton ? handleClear : void 0,
 					size,

package/dist/avatar-upload/AvatarUploadComponents.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_utils = require('../shadcn/src/lib/utils.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -16,7 +17,7 @@ const MessageComponent = ({ message, className }) => {
 		children: message
 	});
 };
-const AvatarWrap = ({ children, className, showChangeIcon, size, onClear }) => {
+const AvatarWrap = ({ id, children, className, showChangeIcon, size, onClear }) => {
 	const editIcon = {
 		sm: "size-5.5 bottom-0 right-0",
 		md: "size-6.5 bottom-1 right-1",
@@ -37,6 +38,7 @@ const AvatarWrap = ({ children, className, showChangeIcon, size, onClear }) => {
 			children,
 			showChangeIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: require_utils.cn(editIcon[size], `absolute bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`) }),
 			onClear != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				id: require_get_id.getId(id, "clear-button"),
 				type: "button",
 				variant: "secondary",
 				size: "icon",

package/dist/avatar-upload/AvatarUploadComponents.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { cn as cn$1 } from "../shadcn/src/lib/utils.js";
 import { Button } from "@pixpilot/shadcn";
 import { Pencil, X } from "lucide-react";
@@ -11,7 +12,7 @@ const MessageComponent = ({ message, className }) => {
 		children: message
 	});
 };
-const AvatarWrap = ({ children, className, showChangeIcon, size, onClear }) => {
+const AvatarWrap = ({ id, children, className, showChangeIcon, size, onClear }) => {
 	const editIcon = {
 		sm: "size-5.5 bottom-0 right-0",
 		md: "size-6.5 bottom-1 right-1",
@@ -32,6 +33,7 @@ const AvatarWrap = ({ children, className, showChangeIcon, size, onClear }) => {
 			children,
 			showChangeIcon && /* @__PURE__ */ jsx(Pencil, { className: cn$1(editIcon[size], `absolute bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`) }),
 			onClear != null && /* @__PURE__ */ jsx(Button, {
+				id: getId(id, "clear-button"),
 				type: "button",
 				variant: "secondary",
 				size: "icon",

package/dist/avatar-upload/AvatarUploadItem.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_file_error = require('../file-upload/hooks/use-file-error.cjs');
 const require_use_file_upload_progress_callbacks = require('../file-upload/hooks/use-file-upload-progress-callbacks.cjs');
 require('../file-upload/index.cjs');
@@ -14,7 +15,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/avatar-upload/AvatarUploadItem.tsx
 const AvatarUploadItem = (props) => {
-	const { file, currentSize, change = "Change", onFileSuccess, onFileError, onClear, onError, size = "md" } = props;
+	const { file, currentSize, change = "Change", id, onFileSuccess, onFileError, onClear, onError, size = "md" } = props;
 	require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
 		onFileError
@@ -39,6 +40,7 @@ const AvatarUploadItem = (props) => {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, __pixpilot_shadcn.cn)("relative"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.AvatarWrap, {
+					id,
 					showChangeIcon: true,
 					onClear,
 					size,
@@ -46,6 +48,7 @@ const AvatarUploadItem = (props) => {
 				}), fileError != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						id: require_get_id.getId(id, "error-button"),
 						type: "button",
 						className: "absolute -top-3 -left-3 p-1",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "h-5 w-5 text-red-500" })