@pixpilot/shadcn-ui 1.22.0 → 1.24.0

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_runtime13 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_runtime13.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { 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)
    */

package/dist/pagination/Pagination.js

@@ -1,3 +1,4 @@
+import { getId } from "../utils/get-id.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@pixpilot/shadcn";
 import { ChevronsLeft, ChevronsRight } from "lucide-react";
 import React from "react";
@@ -35,7 +36,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *   showPageInfo={true}
 * />
 */
-const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
+const Pagination$1 = ({ id, page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
 	if (totalPages <= 1) return null;
 	const handlePageClick = (newPage) => (e) => {
 		e.preventDefault();
@@ -90,12 +91,16 @@ const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, var
 		className,
 		children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
 			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				id: getId(id, "first-page-button"),
 				onClick: handlePageClick(1),
 				"aria-label": "Go to first page",
 				className: "gap-1 px-2",
 				children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
 			}) }),
-			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+				id: getId(id, "previous-page-button"),
+				onClick: handlePageClick(Math.max(1, page - 1))
+			}) }),
 			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs("span", {
 				className: "flex h-9 items-center justify-center px-4 text-sm font-medium",
 				children: [
@@ -104,8 +109,12 @@ const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, var
 					totalPages
 				]
 			}) }),
-			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+				id: getId(id, "next-page-button"),
+				onClick: handlePageClick(Math.min(totalPages, page + 1))
+			}) }),
 			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				id: getId(id, "last-page-button"),
 				onClick: handlePageClick(totalPages),
 				"aria-label": "Go to last page",
 				className: "gap-1 px-2",
@@ -123,7 +132,13 @@ const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, var
 				" of ",
 				totalPages
 			]
-		}), /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }), /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })] }) })]
+		}), /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+			id,
+			onClick: handlePageClick(Math.max(1, page - 1))
+		}) }), /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+			id: getId(id, "next-page-button"),
+			onClick: handlePageClick(Math.min(totalPages, page + 1))
+		}) })] }) })]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
@@ -136,13 +151,20 @@ const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, var
 				totalPages
 			]
 		}), /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
-			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+				id: getId(id, "previous-page-button"),
+				onClick: handlePageClick(Math.max(1, page - 1))
+			}) }),
 			pages.map((p) => typeof p === "string" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, p) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				id: p === page ? id : getId(id, `page-${p}`),
 				onClick: handlePageClick(p),
 				isActive: p === page,
 				children: p
 			}) }, p)),
-			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+				id: getId(id, "next-page-button"),
+				onClick: handlePageClick(Math.min(totalPages, page + 1))
+			}) })
 		] }) })]
 	});
 };

package/dist/rich-text-editor/ToolbarButton.cjs

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

package/dist/rich-text-editor/ToolbarButton.js

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

package/dist/slider/SliderInput.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_use_controlled = require('../hooks/src/use-controlled.cjs');
 require('../hooks/src/index.cjs');
 const require_Input = require('../input/Input.cjs');
-const require_get_id = require('../utils/get-id.cjs');
 const require_Slider = require('./Slider.cjs');
 require('../index.cjs');
 let react = require("react");

package/dist/slider/SliderInput.js

@@ -1,7 +1,7 @@
+import { getId } from "../utils/get-id.js";
 import useControlled from "../hooks/src/use-controlled.js";
 import "../hooks/src/index.js";
 import { Input } from "../input/Input.js";
-import { getId } from "../utils/get-id.js";
 import { Slider } from "./Slider.js";
 import { cn } from "../index.js";
 import React, { createElement } from "react";

package/dist/slider/SliderSelect.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 const require_use_controlled = require('../hooks/src/use-controlled.cjs');
 require('../hooks/src/index.cjs');
-const require_get_id = require('../utils/get-id.cjs');
 const require_Select = require('../Select.cjs');
 const require_Slider = require('./Slider.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");

package/dist/slider/SliderSelect.js

@@ -1,6 +1,6 @@
+import { getId } from "../utils/get-id.js";
 import useControlled from "../hooks/src/use-controlled.js";
 import "../hooks/src/index.js";
-import { getId } from "../utils/get-id.js";
 import { Select as Select$1 } from "../Select.js";
 import { Slider as Slider$1 } from "./Slider.js";
 import { cn } from "@pixpilot/shadcn";

package/dist/tags-input/TagsInput.cjs

@@ -30,7 +30,7 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [searchValue, setSearchValue] = (0, react.useState)("");
 	const [freeInputValue, setFreeInputValue] = (0, react.useState)("");
@@ -134,6 +134,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+		id,
 		label,
 		className,
 		disabled,
@@ -168,6 +169,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "w-full",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+						id,
 						label,
 						showLabel: false,
 						disabled,
@@ -245,6 +247,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 					value: searchValue,
 					loop: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+						id,
 						options: filteredOptions,
 						value,
 						onChange: handleSelectOption,

package/dist/tags-input/TagsInput.d.cts

@@ -3,6 +3,7 @@ import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
+  id?: string;
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
@@ -39,6 +40,7 @@ interface TagsInputProps {
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
 declare function TagsInput({
+  id,
   value,
   onChange,
   options,

package/dist/tags-input/TagsInput.d.ts

@@ -1,8 +1,9 @@
 import { CommandOptionListItem } from "../CommandOptionList.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
+  id?: string;
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
@@ -39,6 +40,7 @@ interface TagsInputProps {
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
 declare function TagsInput({
+  id,
   value,
   onChange,
   options,
@@ -57,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime15.JSX.Element;
+}: TagsInputProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.js

@@ -26,7 +26,7 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
 	const [open, setOpen] = useState(false);
 	const [searchValue, setSearchValue] = useState("");
 	const [freeInputValue, setFreeInputValue] = useState("");
@@ -130,6 +130,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ jsx(TagsInputInline, {
+		id,
 		label,
 		className,
 		disabled,
@@ -164,6 +165,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-full",
 					children: /* @__PURE__ */ jsx(TagsInputInline, {
+						id,
 						label,
 						showLabel: false,
 						disabled,
@@ -241,6 +243,7 @@ function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, fre
 					value: searchValue,
 					loop: true,
 					children: /* @__PURE__ */ jsx(CommandOptionList, {
+						id,
 						options: filteredOptions,
 						value,
 						onChange: handleSelectOption,

package/dist/tags-input/TagsInputInline.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_get_id = require('../utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -12,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/tags-input/TagsInputInline.tsx
-function TagsInputInline({ label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
+function TagsInputInline({ id, label, showLabel = true, className, disabled = false, editable, max, onValueChange, onValidate, readOnly = false, value, delimiter, addOnPaste, addOnTab, items, onListClick, inputRef, inputPlaceholder, inputValue, onInputFocus, onInputChange, onInputKeyDown, onInputMouseDown, addButtonVisibility = "touch", slots, canAddCurrentValue = false, onAddCurrentInput, showClear = false }) {
 	const addButtonVisibilityClassName = (0, react.useMemo)(() => {
 		if (addButtonVisibility === "always") return "inline-flex";
 		if (addButtonVisibility === "touch") return "hidden pointer-coarse:inline-flex";
@@ -45,10 +46,12 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					items.map((item) => /* @__PURE__ */ (0, react.createElement)(__pixpilot_shadcn.TagsInputInLineItem, {
 						...slots?.item || {},
 						key: item.key,
+						id: require_get_id.getId(id, `item-${item.value}`),
 						value: item.value
 					}, item.label)),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineInput, {
 						...slots?.input || {},
+						id,
 						ref: inputRef,
 						placeholder: inputPlaceholder,
 						value: inputValue,
@@ -59,6 +62,7 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}),
 					addButtonVisibility !== "never" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 						...slots?.addButton,
+						id: require_get_id.getId(id, "add-button"),
 						type: "button",
 						size: "icon",
 						variant: "ghost",
@@ -72,7 +76,10 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}) : null
 				]
 			}),
-			showClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, { ...slots?.clear || {} }) : null
+			showClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, {
+				id: require_get_id.getId(id, "clear-button"),
+				...slots?.clear || {}
+			}) : null
 		]
 	});
 }