@pixpilot/shadcn-ui 1.23.0 → 1.25.0

package/dist/Rating.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime0.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -51,7 +51,8 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime0.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime3.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -51,7 +51,8 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime3.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

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,6 +1,6 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
-const require_use_select_keyboard = require('./hooks/use-select-keyboard.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);
 let lucide_react = require("lucide-react");

package/dist/Select.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -51,6 +51,6 @@ type BaseSelectProps = {
   required?: boolean;
   className?: string;
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children' | 'disabled' | 'name' | 'required'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectContentProps, SelectOption };

package/dist/Select.js

@@ -1,5 +1,5 @@
-import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 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";
 import React from "react";

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" })

package/dist/avatar-upload/AvatarUploadItem.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { useFileError } from "../file-upload/hooks/use-file-error.js";
 import { useFileUploadProgressCallbacks } from "../file-upload/hooks/use-file-upload-progress-callbacks.js";
 import "../file-upload/index.js";
@@ -9,7 +10,7 @@ import { jsx, jsxs } from "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;
 	useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
 		onFileError
@@ -34,6 +35,7 @@ const AvatarUploadItem = (props) => {
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: cn("relative"),
 				children: [/* @__PURE__ */ jsx(AvatarWrap, {
+					id,
 					showChangeIcon: true,
 					onClear,
 					size,
@@ -41,6 +43,7 @@ const AvatarUploadItem = (props) => {
 				}), fileError != null && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx("button", {
+						id: getId(id, "error-button"),
 						type: "button",
 						className: "absolute -top-3 -left-3 p-1",
 						children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-red-500" })

package/dist/confirmation-dialog/ConfirmationDialog.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_variant_config = require('../variant-config.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -15,7 +16,7 @@ const variantMap = {
 	default: "default"
 };
 const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
-	const { title = "Confirmation Dialog", variant, showIcon = true } = props;
+	const { id, title = "Confirmation Dialog", variant, showIcon = true } = props;
 	const modal = (0, __ebay_nice_modal_react.useModal)();
 	const handleConfirm = () => {
 		props.onConfirm?.();
@@ -54,11 +55,13 @@ const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
 				children: props.description
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+			id: require_get_id.getId(id, "cancel-button"),
 			"data-slots": "button-cancel",
 			variant: "outline",
 			onClick: handleCancel,
 			children: props.cancelText ?? "Cancel"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+			id,
 			"data-slots": "button-confirm",
 			variant: confirmBtnVariant,
 			className: confirmBtnClassName,

package/dist/confirmation-dialog/ConfirmationDialog.d.cts

@@ -3,6 +3,7 @@ import "react";
 //#region src/confirmation-dialog/ConfirmationDialog.d.ts
 type ConfirmationDialogVariant = 'destructive' | 'warning' | 'primary' | 'default';
 interface ConfirmationDialogProps {
+  id?: string;
   title: string;
   description?: string | React.ReactNode;
   confirmText?: string;

package/dist/confirmation-dialog/ConfirmationDialog.d.ts

@@ -4,6 +4,7 @@ import "@ebay/nice-modal-react";
 //#region src/confirmation-dialog/ConfirmationDialog.d.ts
 type ConfirmationDialogVariant = 'destructive' | 'warning' | 'primary' | 'default';
 interface ConfirmationDialogProps {
+  id?: string;
   title: string;
   description?: string | React.ReactNode;
   confirmText?: string;

package/dist/confirmation-dialog/ConfirmationDialog.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { variantConfig } from "../variant-config.js";
 import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, cn } from "@pixpilot/shadcn";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +12,7 @@ const variantMap = {
 	default: "default"
 };
 const ConfirmationDialog = NiceModal.create((props) => {
-	const { title = "Confirmation Dialog", variant, showIcon = true } = props;
+	const { id, title = "Confirmation Dialog", variant, showIcon = true } = props;
 	const modal = useModal();
 	const handleConfirm = () => {
 		props.onConfirm?.();
@@ -50,11 +51,13 @@ const ConfirmationDialog = NiceModal.create((props) => {
 				children: props.description
 			})]
 		}), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+			id: getId(id, "cancel-button"),
 			"data-slots": "button-cancel",
 			variant: "outline",
 			onClick: handleCancel,
 			children: props.cancelText ?? "Cancel"
 		}), /* @__PURE__ */ jsx(Button, {
+			id,
 			"data-slots": "button-confirm",
 			variant: confirmBtnVariant,
 			className: confirmBtnClassName,

package/dist/dialog/Dialog.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
@@ -13,14 +13,14 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<Omit<_radix_ui_
 declare function DialogHeader({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime15.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime15.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
 declare function DialogFooter({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime15.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { DialogBody, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter, DialogHeader };

package/dist/file-upload/FileUpload.cjs

@@ -12,7 +12,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/file-upload/FileUpload.tsx
 function FileUpload(props) {
-	const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError,...rest } = props;
+	const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError, id,...rest } = props;
 	const multiple = props.multiple ?? true;
 	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = require_use_file_upload_store.useFileUploadStore({
 		value,
@@ -38,6 +38,7 @@ function FileUpload(props) {
 		multiple,
 		className: (0, __pixpilot_shadcn.cn)("w-full", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
+			id,
 			className: containerClasses,
 			children: displayFiles.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col items-center gap-1 text-center p-2",
@@ -63,6 +64,7 @@ function FileUpload(props) {
 				itemSize,
 				onFileSuccess,
 				onFileError,
+				id,
 				className: containerClasses
 			})
 		})

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime8.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload/FileUpload.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.tsx
 function FileUpload$1(props) {
-	const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError,...rest } = props;
+	const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError, id,...rest } = props;
 	const multiple = props.multiple ?? true;
 	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = useFileUploadStore({
 		value,
@@ -33,6 +33,7 @@ function FileUpload$1(props) {
 		multiple,
 		className: cn("w-full", className),
 		children: /* @__PURE__ */ jsx(FileUploadDropzone, {
+			id,
 			className: containerClasses,
 			children: displayFiles.length === 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center gap-1 text-center p-2",
@@ -58,6 +59,7 @@ function FileUpload$1(props) {
 				itemSize,
 				onFileSuccess,
 				onFileError,
+				id,
 				className: containerClasses
 			})
 		})

package/dist/file-upload/FileUploadItems.cjs

@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/file-upload/FileUploadItems.tsx
-function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
+function FileUploadItems({ id, displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.FileUploadList, {
 		orientation: "horizontal",
 		forceMount: true,
@@ -20,6 +20,7 @@ function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize
 			const { name, lastModified } = fileMeta;
 			const key = `${name}-${lastModified}`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileUploadListItem.FileUploadListItem, {
+				id,
 				fileMeta,
 				deleteFile,
 				getFile,

package/dist/file-upload/FileUploadItems.js

@@ -7,7 +7,7 @@ import { Plus } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/file-upload/FileUploadItems.tsx
-function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
+function FileUploadItems({ id, displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
 	return /* @__PURE__ */ jsxs(FileUploadList, {
 		orientation: "horizontal",
 		forceMount: true,
@@ -16,6 +16,7 @@ function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize
 			const { name, lastModified } = fileMeta;
 			const key = `${name}-${lastModified}`;
 			return /* @__PURE__ */ jsx(FileUploadListItem, {
+				id,
 				fileMeta,
 				deleteFile,
 				getFile,

package/dist/file-upload/FileUploadListItem.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_use_file_upload_progress_callbacks = require('./hooks/use-file-upload-progress-callbacks.cjs');
 require('./hooks/index.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
@@ -22,7 +23,7 @@ const Backdrop = ({ className, children }) => {
 		children
 	});
 };
-const FileUploadListItem = react.default.memo(({ fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
+const FileUploadListItem = react.default.memo(({ id, fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
 	const file = getFile(fileMeta);
 	require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
@@ -74,6 +75,7 @@ const FileUploadListItem = react.default.memo(({ fileMeta, deleteFile, getFile,
 			})] })] }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemMetadata, { className: "sr-only" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				id: require_get_id.getId(id, `remove-button-${fileMeta.name}-${fileMeta.lastModified}`),
 				type: "button",
 				variant: "secondary",
 				size: "icon",

package/dist/file-upload/FileUploadListItem.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import { useFileUploadProgressCallbacks } from "./hooks/use-file-upload-progress-callbacks.js";
 import "./hooks/index.js";
 import { Button, FileUploadItem, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, Tooltip, TooltipContent, TooltipTrigger, cn, useFileUpload } from "@pixpilot/shadcn";
@@ -16,7 +17,7 @@ const Backdrop = ({ className, children }) => {
 		children
 	});
 };
-const FileUploadListItem = React.memo(({ fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
+const FileUploadListItem = React.memo(({ id, fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
 	const file = getFile(fileMeta);
 	useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
@@ -68,6 +69,7 @@ const FileUploadListItem = React.memo(({ fileMeta, deleteFile, getFile, itemSize
 			})] })] }),
 			/* @__PURE__ */ jsx(FileUploadItemMetadata, { className: "sr-only" }),
 			/* @__PURE__ */ jsx(Button, {
+				id: getId(id, `remove-button-${fileMeta.name}-${fileMeta.lastModified}`),
 				type: "button",
 				variant: "secondary",
 				size: "icon",

package/dist/file-upload-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime10.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/file-upload-root/FileUploadRoot.cjs

@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * FileUploadInline - An inline file upload component using FileUpload primitives
 */
 function FileUploadRoot(props) {
-	const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError,...rest } = props;
+	const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError, id,...rest } = props;
 	const multiple = props.multiple ?? false;
 	const effectiveMaxFiles = multiple ? maxFiles : 1;
 	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = require_use_file_upload_store.useFileUploadStore({
@@ -52,6 +52,7 @@ function FileUploadRoot(props) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadTrigger, {
 				asChild: true,
 				...slots?.trigger || {},
+				id: id ?? slots?.trigger?.id,
 				children
 			})
 		}), displayFiles.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadList, {
@@ -64,6 +65,7 @@ function FileUploadRoot(props) {
 					...data,
 					file: getFile(data),
 					disabled,
+					id,
 					onDelete: deleteFile,
 					onFileSuccess,
 					onFileError,

package/dist/file-upload-root/FileUploadRoot.d.cts

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/file-upload-root/FileUploadRoot.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime9.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime13.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/file-upload-root/FileUploadRoot.js

@@ -13,7 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * FileUploadInline - An inline file upload component using FileUpload primitives
 */
 function FileUploadRoot(props) {
-	const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError,...rest } = props;
+	const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError, id,...rest } = props;
 	const multiple = props.multiple ?? false;
 	const effectiveMaxFiles = multiple ? maxFiles : 1;
 	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = useFileUploadStore({
@@ -46,6 +46,7 @@ function FileUploadRoot(props) {
 			children: /* @__PURE__ */ jsx(FileUploadTrigger, {
 				asChild: true,
 				...slots?.trigger || {},
+				id: id ?? slots?.trigger?.id,
 				children
 			})
 		}), displayFiles.length > 0 && /* @__PURE__ */ jsx(FileUploadList, {
@@ -58,6 +59,7 @@ function FileUploadRoot(props) {
 					...data,
 					file: getFile(data),
 					disabled,
+					id,
 					onDelete: deleteFile,
 					onFileSuccess,
 					onFileError,