@pixpilot/shadcn-ui 1.22.0 → 1.24.0

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 
 //#region src/tags-input/TagsInputInline.d.ts
@@ -8,6 +8,7 @@ interface TagsInputInlineItem {
   label: string;
 }
 interface TagsInputInlineProps {
+  id?: string;
   label?: string;
   showLabel?: boolean;
   className?: string;
@@ -48,6 +49,7 @@ interface TagsInputInlineProps {
   showClear?: boolean;
 }
 declare function TagsInputInline({
+  id,
   label,
   showLabel,
   className,
@@ -75,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime14.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

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

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInputInline.d.ts
 interface TagsInputInlineItem {
@@ -8,6 +8,7 @@ interface TagsInputInlineItem {
   label: string;
 }
 interface TagsInputInlineProps {
+  id?: string;
   label?: string;
   showLabel?: boolean;
   className?: string;
@@ -48,6 +49,7 @@ interface TagsInputInlineProps {
   showClear?: boolean;
 }
 declare function TagsInputInline({
+  id,
   label,
   showLabel,
   className,
@@ -75,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime16.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

package/dist/tags-input/TagsInputInline.js

@@ -1,13 +1,14 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import { Button, TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot, cn } from "@pixpilot/shadcn";
 import { Plus } from "lucide-react";
 import { createElement, useMemo } from "react";
 import { jsx, jsxs } from "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 = useMemo(() => {
 		if (addButtonVisibility === "always") return "inline-flex";
 		if (addButtonVisibility === "touch") return "hidden pointer-coarse:inline-flex";
@@ -40,10 +41,12 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					items.map((item) => /* @__PURE__ */ createElement(TagsInputInLineItem, {
 						...slots?.item || {},
 						key: item.key,
+						id: getId(id, `item-${item.value}`),
 						value: item.value
 					}, item.label)),
 					/* @__PURE__ */ jsx(TagsInputInLineInput, {
 						...slots?.input || {},
+						id,
 						ref: inputRef,
 						placeholder: inputPlaceholder,
 						value: inputValue,
@@ -54,6 +57,7 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}),
 					addButtonVisibility !== "never" ? /* @__PURE__ */ jsxs(Button, {
 						...slots?.addButton,
+						id: getId(id, "add-button"),
 						type: "button",
 						size: "icon",
 						variant: "ghost",
@@ -67,7 +71,10 @@ function TagsInputInline({ label, showLabel = true, className, disabled = false,
 					}) : null
 				]
 			}),
-			showClear ? /* @__PURE__ */ jsx(TagsInputInLineClear, { ...slots?.clear || {} }) : null
+			showClear ? /* @__PURE__ */ jsx(TagsInputInLineClear, {
+				id: getId(id, "clear-button"),
+				...slots?.clear || {}
+			}) : null
 		]
 	});
 }

package/dist/theme-toggle/ThemeModeDropdown.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");
@@ -18,11 +19,12 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, themeValue, onChange, value, disabled } = props;
+	const { id, align = "end", className, themeValue, onChange, value, disabled } = props;
 	const isDark = value === "dark";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			id,
 			variant: "outline",
 			size: "icon",
 			className: (0, __pixpilot_shadcn.cn)(className),
@@ -40,6 +42,7 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-light"),
 				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-4 w-4 mr-2" }),
@@ -51,6 +54,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-dark"),
 				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-4 w-4 mr-2" }),
@@ -62,6 +66,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				id: require_get_id.getId(id, "option-system"),
 				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-4 w-4 mr-2" }),

package/dist/theme-toggle/ThemeModeDropdown.d.cts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
+  id?: string;
   align?: 'start' | 'center' | 'end';
   className?: string;
   /** Current theme selection ("light" | "dark" | "system") */
@@ -17,7 +18,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime17.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeDropdown.d.ts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
+  id?: string;
   align?: 'start' | 'center' | 'end';
   className?: string;
   /** Current theme selection ("light" | "dark" | "system") */
@@ -17,7 +18,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime17.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeDropdown.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "../utils/get-id.js";
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, cn } from "@pixpilot/shadcn";
 import { Check, Monitor, Moon, Sun } from "lucide-react";
 import React from "react";
@@ -13,11 +14,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, themeValue, onChange, value, disabled } = props;
+	const { id, align = "end", className, themeValue, onChange, value, disabled } = props;
 	const isDark = value === "dark";
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
+			id,
 			variant: "outline",
 			size: "icon",
 			className: cn(className),
@@ -35,6 +37,7 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-light"),
 				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 mr-2" }),
@@ -46,6 +49,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-dark"),
 				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 mr-2" }),
@@ -57,6 +61,7 @@ function ThemeModeDropdown(props) {
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				id: getId(id, "option-system"),
 				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 mr-2" }),

package/dist/theme-toggle/ThemeModeSwitchInside.cjs

@@ -37,7 +37,7 @@ const SIZE_STYLES = {
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const sizeStyles = SIZE_STYLES[size];
 	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
 	const isDark = value === "dark";
@@ -45,6 +45,7 @@ function ThemeModeSwitchInside(props) {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -57,6 +58,7 @@ function ThemeModeSwitchInside(props) {
 		className: (0, __pixpilot_shadcn.cn)(TOGGLE_WRAPPER_CLASS_NAME, sizeStyles.wrapper, disabled && "opacity-50", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeSwitchInside.d.cts

@@ -1,8 +1,9 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
 interface ThemeModeSwitchInsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Visual size of the toggle pill. */
@@ -25,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime18.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.d.ts

@@ -1,8 +1,9 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
 interface ThemeModeSwitchInsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Visual size of the toggle pill. */
@@ -25,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime18.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.js

@@ -33,7 +33,7 @@ const SIZE_STYLES = {
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const sizeStyles = SIZE_STYLES[size];
 	const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
 	const isDark = value === "dark";
@@ -41,6 +41,7 @@ function ThemeModeSwitchInside(props) {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -53,6 +54,7 @@ function ThemeModeSwitchInside(props) {
 		className: cn(TOGGLE_WRAPPER_CLASS_NAME, sizeStyles.wrapper, disabled && "opacity-50", className),
 		children: [
 			/* @__PURE__ */ jsx(Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeSwitchOutside.cjs

@@ -19,12 +19,13 @@ const DEFAULT_ICON_SIZE = 16;
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -42,6 +43,7 @@ function ThemeModeSwitchOutside(props) {
 				}
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Icon size in pixels. */
@@ -22,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
+  id?: string;
   /** Whether to render the sun/moon icons at all. */
   showIcons?: boolean;
   /** Icon size in pixels. */
@@ -22,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchOutside.js

@@ -14,12 +14,13 @@ const DEFAULT_ICON_SIZE = 16;
 * Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const { showIcons = true, id, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
 	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
 		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
+		id,
 		checked: isDark,
 		onCheckedChange,
 		disabled,
@@ -37,6 +38,7 @@ function ThemeModeSwitchOutside(props) {
 				}
 			}),
 			/* @__PURE__ */ jsx(Switch, {
+				id,
 				checked: isDark,
 				onCheckedChange,
 				disabled,

package/dist/theme-toggle/ThemeModeToggleButton.cjs

@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Pure component - toggles between light and dark.
 */
 function ThemeModeToggleButton(props) {
-	const { className, value, onChange, disabled } = props;
+	const { id, className, value, onChange, disabled } = props;
 	const toggleTheme = react.default.useCallback(() => {
 		if (value === "dark") {
 			onChange?.("light");
@@ -26,6 +26,7 @@ function ThemeModeToggleButton(props) {
 		onChange?.("dark");
 	}, [value, onChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+		id,
 		variant: "secondary",
 		size: "icon",
 		className: (0, __pixpilot_shadcn.cn)("group/toggle size-8", className),

package/dist/theme-toggle/ThemeModeToggleButton.d.cts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
+  id?: string;
   className?: string;
   /** The resolved theme value ("light" | "dark") */
   value?: string;
@@ -13,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime16.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeToggleButton.d.ts

@@ -1,7 +1,8 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
+  id?: string;
   className?: string;
   /** The resolved theme value ("light" | "dark") */
   value?: string;
@@ -13,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeToggleButton.js

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Pure component - toggles between light and dark.
 */
 function ThemeModeToggleButton(props) {
-	const { className, value, onChange, disabled } = props;
+	const { id, className, value, onChange, disabled } = props;
 	const toggleTheme = React.useCallback(() => {
 		if (value === "dark") {
 			onChange?.("light");
@@ -21,6 +21,7 @@ function ThemeModeToggleButton(props) {
 		onChange?.("dark");
 	}, [value, onChange]);
 	return /* @__PURE__ */ jsxs(Button, {
+		id,
 		variant: "secondary",
 		size: "icon",
 		className: cn("group/toggle size-8", className),

package/dist/toast/AlertToast.cjs

@@ -11,7 +11,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose,...rest } = props;
+	const { duration, onClose, id,...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
 		icon: true,
 		...rest,
@@ -19,6 +19,7 @@ const AlertToast = (props) => {
 		children: onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex items-start pt-0.5 pl-1",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				id,
 				type: "button",
 				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
 				onClick: onClose,

package/dist/toast/AlertToast.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose,...rest } = props;
+	const { duration, onClose, id,...rest } = props;
 	return /* @__PURE__ */ jsx(Alert$1, {
 		icon: true,
 		...rest,
@@ -14,6 +14,7 @@ const AlertToast = (props) => {
 		children: onClose && /* @__PURE__ */ jsx("div", {
 			className: "flex items-start pt-0.5 pl-1",
 			children: /* @__PURE__ */ jsxs("button", {
+				id,
 				type: "button",
 				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
 				onClick: onClose,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "1.2.7"
+    "@pixpilot/shadcn": "1.3.0"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -63,12 +63,12 @@
     "tailwindcss": "^4.2.2",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/eslint-config": "0.3.0",
-    "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/vitest-config": "0.1.0",
+    "@internal/hooks": "0.0.0",
+    "@internal/eslint-config": "0.3.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {