@pixpilot/shadcn-ui 1.23.0 → 1.25.0

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

package/dist/icon-selector/icon-picker-content.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_Input = require('../input/Input.cjs');
 require('../input/index.cjs');
 const require_LoadingOverlay = require('../LoadingOverlay.cjs');
@@ -19,7 +20,7 @@ function noIconMessage(hasIcons, isSearching) {
 	if (!isSearching) return "No icons provided by the selected provider!";
 	return "No icons found matching your search";
 }
-const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
+const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
 	const [searchQuery, setSearchQuery] = (0, react.useState)("");
 	const { providers, isLoading } = require_use_async_providers.useAsyncProviders(providersProp);
 	const providerPrefixes = (0, react.useMemo)(() => providers.map((provider) => provider.prefix), [providers]);
@@ -87,12 +88,14 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
+					id: require_get_id.getId(id, "search-input"),
 					placeholder: "Search icons...",
 					value: searchQuery,
 					onChange: (e) => setSearchQuery(e.target.value),
 					autoFocus: true,
 					disabled: isLoading
 				}), searchQuery && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					id: require_get_id.getId(id, "clear-search-button"),
 					type: "button",
 					onClick: () => setSearchQuery(""),
 					className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
@@ -106,6 +109,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
 					className: "w-full",
 					children: providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsTrigger, {
+						id: require_get_id.getId(id, `provider-${provider.prefix}`),
 						value: provider.prefix,
 						children: provider.name ?? provider.prefix
 					}, provider.prefix))
@@ -113,6 +117,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 					value: provider.prefix,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
 						icons: allIconsByProvider[provider.prefix] ?? [],
+						id,
 						onSelectIcon: handleSelectIcon,
 						maxHeight
 					})
@@ -131,11 +136,13 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 			}),
 			isSearching && providers.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
 				icons: filteredData,
+				id,
 				onSelectIcon: handleSelectIcon,
 				maxHeight
 			}),
 			!isSearching && providers.length === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
 				icons: filteredData,
+				id,
 				onSelectIcon: handleSelectIcon,
 				maxHeight
 			})

package/dist/icon-selector/icon-picker-content.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { Input as Input$1 } from "../input/Input.js";
 import "../input/index.js";
 import { LoadingOverlay } from "../LoadingOverlay.js";
@@ -14,7 +15,7 @@ function noIconMessage(hasIcons, isSearching) {
 	if (!isSearching) return "No icons provided by the selected provider!";
 	return "No icons found matching your search";
 }
-const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
+const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, maxHeight = "60vh" }) => {
 	const [searchQuery, setSearchQuery] = useState("");
 	const { providers, isLoading } = useAsyncProviders(providersProp);
 	const providerPrefixes = useMemo(() => providers.map((provider) => provider.prefix), [providers]);
@@ -82,12 +83,14 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative",
 				children: [/* @__PURE__ */ jsx(Input$1, {
+					id: getId(id, "search-input"),
 					placeholder: "Search icons...",
 					value: searchQuery,
 					onChange: (e) => setSearchQuery(e.target.value),
 					autoFocus: true,
 					disabled: isLoading
 				}), searchQuery && /* @__PURE__ */ jsx("button", {
+					id: getId(id, "clear-search-button"),
 					type: "button",
 					onClick: () => setSearchQuery(""),
 					className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
@@ -101,6 +104,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 				children: [/* @__PURE__ */ jsx(TabsList, {
 					className: "w-full",
 					children: providers.map((provider) => /* @__PURE__ */ jsx(TabsTrigger, {
+						id: getId(id, `provider-${provider.prefix}`),
 						value: provider.prefix,
 						children: provider.name ?? provider.prefix
 					}, provider.prefix))
@@ -108,6 +112,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 					value: provider.prefix,
 					children: /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
 						icons: allIconsByProvider[provider.prefix] ?? [],
+						id,
 						onSelectIcon: handleSelectIcon,
 						maxHeight
 					})
@@ -126,11 +131,13 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 			}),
 			isSearching && providers.length > 0 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
 				icons: filteredData,
+				id,
 				onSelectIcon: handleSelectIcon,
 				maxHeight
 			}),
 			!isSearching && providers.length === 1 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
 				icons: filteredData,
+				id,
 				onSelectIcon: handleSelectIcon,
 				maxHeight
 			})

package/dist/icon-selector/virtualized-icon-grid.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -16,10 +17,11 @@ const CELL_SIZE_DEFAULT = 80;
 const ROW_HEIGHT = 80;
 const DEFAULT_HEIGHT = 480;
 const MIN_COLUMNS = 3;
-const IconCell = react.default.memo(({ iconName, onSelectIcon }) => {
+const IconCell = react.default.memo(({ id, iconName, onSelectIcon }) => {
 	if (!iconName) return null;
 	const displayName = iconName.split(":")[1] ?? iconName;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		id: require_get_id.getId(id, `option-${iconName}`),
 		type: "button",
 		onClick: () => onSelectIcon(iconName),
 		className: "w-full h-full flex flex-col items-center justify-center gap-1 rounded-md border border-transparent hover:border-primary hover:bg-accent transition-colors p-1",
@@ -35,7 +37,7 @@ const IconCell = react.default.memo(({ iconName, onSelectIcon }) => {
 	});
 });
 IconCell.displayName = "IconCell";
-const VirtualizedIconGrid = ({ icons, onSelectIcon, maxHeight = DEFAULT_HEIGHT, columnCount: providedColumnCount, cellSize = CELL_SIZE_DEFAULT }) => {
+const VirtualizedIconGrid = ({ icons, id, onSelectIcon, maxHeight = DEFAULT_HEIGHT, columnCount: providedColumnCount, cellSize = CELL_SIZE_DEFAULT }) => {
 	const scrollableRef = (0, react.useRef)(null);
 	const containerRef = (0, react.useRef)(null);
 	const [containerWidth, setContainerWidth] = (0, react.useState)(0);
@@ -120,6 +122,7 @@ const VirtualizedIconGrid = ({ icons, onSelectIcon, maxHeight = DEFAULT_HEIGHT,
 									minWidth: "0"
 								},
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCell, {
+									id,
 									iconName,
 									onSelectIcon: handleSelectIcon
 								})

package/dist/icon-selector/virtualized-icon-grid.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@iconify/react";
@@ -11,10 +12,11 @@ const CELL_SIZE_DEFAULT = 80;
 const ROW_HEIGHT = 80;
 const DEFAULT_HEIGHT = 480;
 const MIN_COLUMNS = 3;
-const IconCell = React.memo(({ iconName, onSelectIcon }) => {
+const IconCell = React.memo(({ id, iconName, onSelectIcon }) => {
 	if (!iconName) return null;
 	const displayName = iconName.split(":")[1] ?? iconName;
 	return /* @__PURE__ */ jsxs("button", {
+		id: getId(id, `option-${iconName}`),
 		type: "button",
 		onClick: () => onSelectIcon(iconName),
 		className: "w-full h-full flex flex-col items-center justify-center gap-1 rounded-md border border-transparent hover:border-primary hover:bg-accent transition-colors p-1",
@@ -30,7 +32,7 @@ const IconCell = React.memo(({ iconName, onSelectIcon }) => {
 	});
 });
 IconCell.displayName = "IconCell";
-const VirtualizedIconGrid = ({ icons, onSelectIcon, maxHeight = DEFAULT_HEIGHT, columnCount: providedColumnCount, cellSize = CELL_SIZE_DEFAULT }) => {
+const VirtualizedIconGrid = ({ icons, id, onSelectIcon, maxHeight = DEFAULT_HEIGHT, columnCount: providedColumnCount, cellSize = CELL_SIZE_DEFAULT }) => {
 	const scrollableRef = useRef(null);
 	const containerRef = useRef(null);
 	const [containerWidth, setContainerWidth] = useState(0);
@@ -115,6 +117,7 @@ const VirtualizedIconGrid = ({ icons, onSelectIcon, maxHeight = DEFAULT_HEIGHT,
 									minWidth: "0"
 								},
 								children: /* @__PURE__ */ jsx(IconCell, {
+									id,
 									iconName,
 									onSelectIcon: handleSelectIcon
 								})

package/dist/index.cjs

@@ -1,4 +1,6 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
+const require_svg = require('./utils/svg.cjs');
 const require_FileUpload = require('./file-upload/FileUpload.cjs');
 require('./file-upload/index.cjs');
 const require_AbsoluteFill = require('./AbsoluteFill.cjs');
@@ -52,8 +54,6 @@ const require_LoadingOverlay = require('./LoadingOverlay.cjs');
 const require_IconPicker = require('./icon-selector/IconPicker.cjs');
 require('./icon-selector/index.cjs');
 const require_ToggleButton = require('./ToggleButton.cjs');
-const require_get_id = require('./utils/get-id.cjs');
-const require_svg = require('./utils/svg.cjs');
 const require_IconToggle = require('./IconToggle.cjs');
 const require_Layout = require('./layout/Layout.cjs');
 const require_LayoutFooter = require('./layout/LayoutFooter.cjs');

package/dist/index.js

@@ -1,3 +1,5 @@
+import { getId } from "./utils/get-id.js";
+import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
 import { FileUpload } from "./file-upload/FileUpload.js";
 import "./file-upload/index.js";
 import { AbsoluteFill } from "./AbsoluteFill.js";
@@ -51,8 +53,6 @@ import { LoadingOverlay } from "./LoadingOverlay.js";
 import { IconPicker } from "./icon-selector/IconPicker.js";
 import "./icon-selector/index.js";
 import { ToggleButton } from "./ToggleButton.js";
-import { getId } from "./utils/get-id.js";
-import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
 import { IconToggle } from "./IconToggle.js";
 import { Layout } from "./layout/Layout.js";
 import { LayoutFooter } from "./layout/LayoutFooter.js";

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime20.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/input/Input.d.ts
 type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input$1(props: InputProps$1): react_jsx_runtime16.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

package/dist/pagination/Pagination.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");
@@ -40,7 +41,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 *   showPageInfo={true}
 * />
 */
-const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
+const Pagination = ({ id, page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
 	if (totalPages <= 1) return null;
 	const handlePageClick = (newPage) => (e) => {
 		e.preventDefault();
@@ -95,12 +96,16 @@ const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, varia
 		className,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				id: require_get_id.getId(id, "first-page-button"),
 				onClick: handlePageClick(1),
 				"aria-label": "Go to first page",
 				className: "gap-1 px-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsLeft, { className: "h-4 w-4" })
 			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, {
+				id: require_get_id.getId(id, "previous-page-button"),
+				onClick: handlePageClick(Math.max(1, page - 1))
+			}) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "flex h-9 items-center justify-center px-4 text-sm font-medium",
 				children: [
@@ -109,8 +114,12 @@ const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, varia
 					totalPages
 				]
 			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, {
+				id: require_get_id.getId(id, "next-page-button"),
+				onClick: handlePageClick(Math.min(totalPages, page + 1))
+			}) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				id: require_get_id.getId(id, "last-page-button"),
 				onClick: handlePageClick(totalPages),
 				"aria-label": "Go to last page",
 				className: "gap-1 px-2",
@@ -128,7 +137,13 @@ const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, varia
 				" of ",
 				totalPages
 			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })] }) })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, {
+			id,
+			onClick: handlePageClick(Math.max(1, page - 1))
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, {
+			id: require_get_id.getId(id, "next-page-button"),
+			onClick: handlePageClick(Math.min(totalPages, page + 1))
+		}) })] }) })]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
@@ -141,13 +156,20 @@ const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, varia
 				totalPages
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, {
+				id: require_get_id.getId(id, "previous-page-button"),
+				onClick: handlePageClick(Math.max(1, page - 1))
+			}) }),
 			pages.map((p) => typeof p === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationEllipsis, {}) }, p) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				id: p === page ? id : require_get_id.getId(id, `page-${p}`),
 				onClick: handlePageClick(p),
 				isActive: p === page,
 				children: p
 			}) }, p)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, {
+				id: require_get_id.getId(id, "next-page-button"),
+				onClick: handlePageClick(Math.min(totalPages, page + 1))
+			}) })
 		] }) })]
 	});
 };

package/dist/pagination/Pagination.d.cts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/pagination/Pagination.d.ts
 interface PaginationProps {
+  id?: string;
   /**
    * Current page number (1-indexed)
    */

package/dist/pagination/Pagination.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/pagination/Pagination.d.ts
 interface PaginationProps {
+  id?: string;
   /**
    * Current page number (1-indexed)
    */