@pixpilot/shadcn-ui 1.22.0 → 1.24.0

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.ts

@@ -1,6 +1,6 @@
 import { DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 
 //#region src/dialog/Dialog.d.ts
@@ -13,14 +13,14 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<Omit<_radix_ui_
 declare function DialogHeader$1({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 declare function DialogFooter$1({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { DialogBody, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter$1 as DialogFooter, DialogHeader$1 as 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_runtime20 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_runtime20.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_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime11.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 export { FileUploadInline };

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime9 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_runtime12.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime9.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.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,

package/dist/file-upload-root/FileUploadRootItem.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_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/hooks/index.cjs');
@@ -33,8 +34,9 @@ const FileMetaDataDisplay = ({ size, name, children }) => {
 		]
 	});
 };
-const DeleteIconButton = ({ onClick }) => {
+const DeleteIconButton = ({ id, onClick }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+		id,
 		variant: "ghost",
 		size: "icon",
 		className: "size-7 shrink-0",
@@ -55,7 +57,7 @@ const FileItemInnerWrapper = ({ children }) => {
 		children
 	});
 };
-const FileUploadRootItem = react.default.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess }) => {
+const FileUploadRootItem = react.default.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess, id }) => {
 	require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
 		onFileError
@@ -76,17 +78,20 @@ const FileUploadRootItem = react.default.memo(({ file, name = "", size = 0, type
 				className: "text-destructive text-xs",
 				children: fileError
 			})
-		}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeleteIconButton, { onClick: (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			onDelete({
-				name,
-				size,
-				type,
-				lastModified,
-				file
-			});
-		} })] }), isUploading && fileError == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemProgress, {
+		}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeleteIconButton, {
+			id: require_get_id.getId(id, `remove-button-${name}-${lastModified}`),
+			onClick: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				onDelete({
+					name,
+					size,
+					type,
+					lastModified,
+					file
+				});
+			}
+		})] }), isUploading && fileError == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemProgress, {
 			variant: "linear",
 			className: "h-1 w-full"
 		})] })

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

@@ -4,6 +4,7 @@ import React from "react";
 
 //#region src/file-upload-root/FileUploadRootItem.d.ts
 interface FileUploadRootItemProps extends Partial<FileMetadata>, FileUploadCallbacks {
+  id?: string;
   file: File;
   disabled?: boolean;
   onDelete: (file: FileWithMetadata) => void;

package/dist/file-upload-root/FileUploadRootItem.d.ts

@@ -5,6 +5,7 @@ import React from "react";
 
 //#region src/file-upload-root/FileUploadRootItem.d.ts
 interface FileUploadRootItemProps extends Partial<FileMetadata>, FileUploadCallbacks {
+  id?: string;
   file: File;
   disabled?: boolean;
   onDelete: (file: FileWithMetadata) => void;

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

@@ -1,6 +1,7 @@
 'use client';
 
 
+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/hooks/index.js";
@@ -27,8 +28,9 @@ const FileMetaDataDisplay = ({ size, name, children }) => {
 		]
 	});
 };
-const DeleteIconButton = ({ onClick }) => {
+const DeleteIconButton = ({ id, onClick }) => {
 	return /* @__PURE__ */ jsx(Button, {
+		id,
 		variant: "ghost",
 		size: "icon",
 		className: "size-7 shrink-0",
@@ -49,7 +51,7 @@ const FileItemInnerWrapper = ({ children }) => {
 		children
 	});
 };
-const FileUploadRootItem = React.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess }) => {
+const FileUploadRootItem = React.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess, id }) => {
 	useFileUploadProgressCallbacks(file, {
 		onFileSuccess,
 		onFileError
@@ -70,17 +72,20 @@ const FileUploadRootItem = React.memo(({ file, name = "", size = 0, type = "", l
 				className: "text-destructive text-xs",
 				children: fileError
 			})
-		}), !disabled && /* @__PURE__ */ jsx(DeleteIconButton, { onClick: (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			onDelete({
-				name,
-				size,
-				type,
-				lastModified,
-				file
-			});
-		} })] }), isUploading && fileError == null && /* @__PURE__ */ jsx(FileUploadItemProgress, {
+		}), !disabled && /* @__PURE__ */ jsx(DeleteIconButton, {
+			id: getId(id, `remove-button-${name}-${lastModified}`),
+			onClick: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				onDelete({
+					name,
+					size,
+					type,
+					lastModified,
+					file
+				});
+			}
+		})] }), isUploading && fileError == null && /* @__PURE__ */ jsx(FileUploadItemProgress, {
 			variant: "linear",
 			className: "h-1 w-full"
 		})] })

package/dist/icon-selector/IconPicker.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_Button = require('../Button.cjs');
 const require_use_media_query = require('../hooks/use-media-query.cjs');
 require('../hooks/index.cjs');
@@ -18,7 +19,7 @@ __iconify_react = require_rolldown_runtime.__toESM(__iconify_react);
 
 //#region src/icon-selector/IconPicker.tsx
 const ICON_SIZE = "!h-4 !w-4";
-const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
+const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const isMobile = require_use_media_query.useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = (0, react.useCallback)((iconName) => {
@@ -46,6 +47,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 	};
 	const displayIcon = renderIconDisplay("text-sm");
 	const selectorContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_content.default, {
+		id,
 		providers: providersProp,
 		onChange: handleSelectIcon,
 		onSelect: () => setIsOpen(false)
@@ -66,11 +68,13 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		selectorContent,
 		popover: popoverProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+			id,
 			type: "button",
 			variant: "outline",
 			"aria-label": iconButtonLabel,
 			className: (0, __pixpilot_shadcn.cn)("p-2 min-w-10", slots?.preview?.className),
 			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				id: require_get_id.getId(id, "clear-button"),
 				type: "button",
 				title: "Clear selected icon",
 				className: (0, __pixpilot_shadcn.cn)(`absolute -right-1 -top-1 inline-flex ${ICON_SIZE} items-center justify-center rounded-full !p-1`, "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", slots?.clearIcon?.className),
@@ -101,6 +105,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				selectorContent,
 				popover: popoverProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					id,
 					type: "button",
 					variant: "outline",
 					className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.trigger?.className),
@@ -108,6 +113,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				})
 			}),
 			shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				id: require_get_id.getId(id, "clear-button"),
 				type: "button",
 				variant: "outline",
 				className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.clearButton?.className),

package/dist/icon-selector/IconPicker.d.cts

@@ -15,6 +15,7 @@ type IconPickerVariant = 'default' | 'icon-button';
  * Allows users to select an icon from multiple icon providers via a dialog or popover
  */
 interface IconPickerProps {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;

package/dist/icon-selector/IconPicker.d.ts

@@ -15,6 +15,7 @@ type IconPickerVariant = 'default' | 'icon-button';
  * Allows users to select an icon from multiple icon providers via a dialog or popover
  */
 interface IconPickerProps {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;

package/dist/icon-selector/IconPicker.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { Button as Button$1 } from "../Button.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import "../hooks/index.js";
@@ -12,7 +13,7 @@ import { Icon } from "@iconify/react";
 
 //#region src/icon-selector/IconPicker.tsx
 const ICON_SIZE = "!h-4 !w-4";
-const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ jsx(Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
+const IconPicker = ({ id, value, onChange, onOpenChange, pickerMode = "dialog", popoverProps, variant = "default", providers: providersProp, showValueText = true, emptyText = /* @__PURE__ */ jsx(Plus, { className: ICON_SIZE }), showClearButton = true, slots }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const isMobile = useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = useCallback((iconName) => {
@@ -40,6 +41,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 	};
 	const displayIcon = renderIconDisplay("text-sm");
 	const selectorContent = /* @__PURE__ */ jsx(icon_picker_content_default, {
+		id,
 		providers: providersProp,
 		onChange: handleSelectIcon,
 		onSelect: () => setIsOpen(false)
@@ -59,11 +61,13 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		selectorContent,
 		popover: popoverProps,
 		children: /* @__PURE__ */ jsxs(Button$1, {
+			id,
 			type: "button",
 			variant: "outline",
 			"aria-label": iconButtonLabel,
 			className: cn("p-2 min-w-10", slots?.preview?.className),
 			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
+				id: getId(id, "clear-button"),
 				type: "button",
 				title: "Clear selected icon",
 				className: cn(`absolute -right-1 -top-1 inline-flex ${ICON_SIZE} items-center justify-center rounded-full !p-1`, "border border-border bg-background text-foreground", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", slots?.clearIcon?.className),
@@ -94,6 +98,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				selectorContent,
 				popover: popoverProps,
 				children: /* @__PURE__ */ jsx(Button$1, {
+					id,
 					type: "button",
 					variant: "outline",
 					className: cn("whitespace-nowrap", slots?.trigger?.className),
@@ -101,6 +106,7 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 				})
 			}),
 			shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
+				id: getId(id, "clear-button"),
 				type: "button",
 				variant: "outline",
 				className: cn("whitespace-nowrap", slots?.clearButton?.className),