@pixpilot/shadcn-ui 0.29.0 → 0.31.0

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

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

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

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

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

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

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

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

package/dist/icon-selector/IconPicker.cjs

@@ -5,6 +5,10 @@ require('../hooks/index.cjs');
 const require_constants = require('./constants.cjs');
 const require_icon_picker_container = require('./icon-picker-container.cjs');
 const require_icon_picker_content = require('./icon-picker-content.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,7 +17,8 @@ let __iconify_react = require("@iconify/react");
 __iconify_react = require_rolldown_runtime.__toESM(__iconify_react);
 
 //#region src/icon-selector/IconPicker.tsx
-const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp }) => {
+const ICON_SIZE = "!h-4 !w-4";
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, 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) => {
@@ -21,15 +26,25 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		setIsOpen(false);
 		onOpenChange?.(false);
 	}, [onChange, onOpenChange]);
+	const handleClearIcon = (0, react.useCallback)(() => {
+		onChange?.("");
+		setIsOpen(false);
+		onOpenChange?.(false);
+	}, [onChange, onOpenChange]);
 	const hasValue = typeof value === "string" && value.length > 0;
-	const displayIcon = hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
-		icon: value,
-		width: "20",
-		height: "20"
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "text-sm text-muted-foreground",
-		children: "No icon selected"
-	});
+	const renderIconDisplay = (emptyClassName, ariaHidden) => {
+		if (hasValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
+			icon: value,
+			width: "20",
+			height: "20"
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": ariaHidden,
+			className: (0, __pixpilot_shadcn.cn)("min-w-6 text-muted-foreground flex items-center justify-center", emptyClassName),
+			children: emptyText
+		});
+	};
+	const displayIcon = renderIconDisplay("text-sm");
 	const selectorContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_content.default, {
 		providers: providersProp,
 		onChange: handleSelectIcon,
@@ -42,50 +57,64 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 	else effectiveMode = pickerMode;
 	const isIconButtonVariant = variant === "icon-button";
 	const iconButtonLabel = hasValue ? `Change selected icon (${value})` : "Select an icon";
-	const iconButtonContent = hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__iconify_react.Icon, {
-		icon: value,
-		width: "20",
-		height: "20"
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		"aria-hidden": "true",
-		className: "text-muted-foreground text-lg",
-		children: "+"
-	});
+	const shouldShowClearButton = showClearButton && hasValue;
+	const iconButtonContent = renderIconDisplay("text-lg", true);
 	if (isIconButtonVariant) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_container.IconPickerContainer, {
 		effectiveMode,
 		isOpen,
 		setIsOpen,
 		selectorContent,
 		popover,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
 			type: "button",
 			variant: "outline",
-			className: "p-2",
 			"aria-label": iconButtonLabel,
-			children: iconButtonContent
+			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, {
+				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),
+				"aria-label": "Clear icon",
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					handleClearIcon();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "!h-3 !w-3" })
+			})]
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
-			children: [displayIcon, hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-sm text-muted-foreground",
-				children: value
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_container.IconPickerContainer, {
-			effectiveMode,
-			isOpen,
-			setIsOpen,
-			selectorContent,
-			popover,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", slots?.root?.className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2", slots?.preview?.className),
+				children: [displayIcon, showValueText && hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: (0, __pixpilot_shadcn.cn)("text-sm text-muted-foreground", slots?.valueText?.className),
+					children: value
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_picker_container.IconPickerContainer, {
+				effectiveMode,
+				isOpen,
+				setIsOpen,
+				selectorContent,
+				popover,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "outline",
+					className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.trigger?.className),
+					children: hasValue ? "Change Icon" : "Select Icon"
+				})
+			}),
+			shouldShowClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 				type: "button",
 				variant: "outline",
-				className: "whitespace-nowrap",
-				children: hasValue ? "Change Icon" : "Select Icon"
+				className: (0, __pixpilot_shadcn.cn)("whitespace-nowrap", slots?.clearButton?.className),
+				onClick: handleClearIcon,
+				children: "Clear"
 			})
-		})]
+		]
 	});
 };
 

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

@@ -5,7 +5,6 @@ import { FC } from "react";
 //#region src/icon-selector/IconPicker.d.ts
 
 /**
- * Mount type for the icon selector picker
  * - 'dialog': Always display as a modal dialog
  * - 'popover': Always display as a popover anchored to the trigger button
  */
@@ -28,6 +27,29 @@ interface IconPickerProps {
     prefix: string;
     name: string;
   }>) => void;
+  showValueText?: boolean;
+  emptyText?: React.ReactNode;
+  showClearButton?: boolean;
+  slots?: {
+    root?: {
+      className?: string;
+    };
+    preview?: {
+      className?: string;
+    };
+    trigger?: {
+      className?: string;
+    };
+    clearButton?: {
+      className?: string;
+    };
+    valueText?: {
+      className?: string;
+    };
+    clearIcon?: {
+      className?: string;
+    };
+  };
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

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

@@ -5,7 +5,6 @@ import { FC } from "react";
 //#region src/icon-selector/IconPicker.d.ts
 
 /**
- * Mount type for the icon selector picker
  * - 'dialog': Always display as a modal dialog
  * - 'popover': Always display as a popover anchored to the trigger button
  */
@@ -28,6 +27,29 @@ interface IconPickerProps {
     prefix: string;
     name: string;
   }>) => void;
+  showValueText?: boolean;
+  emptyText?: React.ReactNode;
+  showClearButton?: boolean;
+  slots?: {
+    root?: {
+      className?: string;
+    };
+    preview?: {
+      className?: string;
+    };
+    trigger?: {
+      className?: string;
+    };
+    clearButton?: {
+      className?: string;
+    };
+    valueText?: {
+      className?: string;
+    };
+    clearIcon?: {
+      className?: string;
+    };
+  };
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

package/dist/icon-selector/IconPicker.js

@@ -1,15 +1,18 @@
-import { Button } from "../Button.js";
+import { Button as Button$1 } from "../Button.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import "../hooks/index.js";
 import { ICON_SELECTOR_ERROR_MESSAGE } from "./constants.js";
 import { IconPickerContainer } from "./icon-picker-container.js";
 import icon_picker_content_default from "./icon-picker-content.js";
+import { cn } from "@pixpilot/shadcn";
+import { Plus, X } from "lucide-react";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@iconify/react";
 
 //#region src/icon-selector/IconPicker.tsx
-const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp }) => {
+const ICON_SIZE = "!h-4 !w-4";
+const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, 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) => {
@@ -17,15 +20,25 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 		setIsOpen(false);
 		onOpenChange?.(false);
 	}, [onChange, onOpenChange]);
+	const handleClearIcon = useCallback(() => {
+		onChange?.("");
+		setIsOpen(false);
+		onOpenChange?.(false);
+	}, [onChange, onOpenChange]);
 	const hasValue = typeof value === "string" && value.length > 0;
-	const displayIcon = hasValue ? /* @__PURE__ */ jsx(Icon, {
-		icon: value,
-		width: "20",
-		height: "20"
-	}) : /* @__PURE__ */ jsx("span", {
-		className: "text-sm text-muted-foreground",
-		children: "No icon selected"
-	});
+	const renderIconDisplay = (emptyClassName, ariaHidden) => {
+		if (hasValue) return /* @__PURE__ */ jsx(Icon, {
+			icon: value,
+			width: "20",
+			height: "20"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": ariaHidden,
+			className: cn("min-w-6 text-muted-foreground flex items-center justify-center", emptyClassName),
+			children: emptyText
+		});
+	};
+	const displayIcon = renderIconDisplay("text-sm");
 	const selectorContent = /* @__PURE__ */ jsx(icon_picker_content_default, {
 		providers: providersProp,
 		onChange: handleSelectIcon,
@@ -37,50 +50,64 @@ const IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popo
 	else effectiveMode = pickerMode;
 	const isIconButtonVariant = variant === "icon-button";
 	const iconButtonLabel = hasValue ? `Change selected icon (${value})` : "Select an icon";
-	const iconButtonContent = hasValue ? /* @__PURE__ */ jsx(Icon, {
-		icon: value,
-		width: "20",
-		height: "20"
-	}) : /* @__PURE__ */ jsx("span", {
-		"aria-hidden": "true",
-		className: "text-muted-foreground text-lg",
-		children: "+"
-	});
+	const shouldShowClearButton = showClearButton && hasValue;
+	const iconButtonContent = renderIconDisplay("text-lg", true);
 	if (isIconButtonVariant) return /* @__PURE__ */ jsx(IconPickerContainer, {
 		effectiveMode,
 		isOpen,
 		setIsOpen,
 		selectorContent,
 		popover,
-		children: /* @__PURE__ */ jsx(Button, {
+		children: /* @__PURE__ */ jsxs(Button$1, {
 			type: "button",
 			variant: "outline",
-			className: "p-2",
 			"aria-label": iconButtonLabel,
-			children: iconButtonContent
+			className: cn("p-2 min-w-10", slots?.preview?.className),
+			children: [iconButtonContent, shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
+				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),
+				"aria-label": "Clear icon",
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					handleClearIcon();
+				},
+				children: /* @__PURE__ */ jsx(X, { className: "!h-3 !w-3" })
+			})]
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
-			children: [displayIcon, hasValue && /* @__PURE__ */ jsx("span", {
-				className: "text-sm text-muted-foreground",
-				children: value
-			})]
-		}), /* @__PURE__ */ jsx(IconPickerContainer, {
-			effectiveMode,
-			isOpen,
-			setIsOpen,
-			selectorContent,
-			popover,
-			children: /* @__PURE__ */ jsx(Button, {
+		className: cn("flex items-center gap-2", slots?.root?.className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2", slots?.preview?.className),
+				children: [displayIcon, showValueText && hasValue && /* @__PURE__ */ jsx("span", {
+					className: cn("text-sm text-muted-foreground", slots?.valueText?.className),
+					children: value
+				})]
+			}),
+			/* @__PURE__ */ jsx(IconPickerContainer, {
+				effectiveMode,
+				isOpen,
+				setIsOpen,
+				selectorContent,
+				popover,
+				children: /* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					variant: "outline",
+					className: cn("whitespace-nowrap", slots?.trigger?.className),
+					children: hasValue ? "Change Icon" : "Select Icon"
+				})
+			}),
+			shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				variant: "outline",
-				className: "whitespace-nowrap",
-				children: hasValue ? "Change Icon" : "Select Icon"
+				className: cn("whitespace-nowrap", slots?.clearButton?.className),
+				onClick: handleClearIcon,
+				children: "Clear"
 			})
-		})]
+		]
 	});
 };
 

package/dist/icon-selector/icon-picker-container.cjs

@@ -22,11 +22,17 @@ const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PopoverContent, {
 			side: "right",
 			...popover,
 			className: (0, __pixpilot_shadcn.cn)("w-full min-w-sm lg:min-w-lg p-4", "max-h-dvh md:max-h-auto", popover?.className),
-			children: selectorContent
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-lg font-semibold",
+					children: "Select an Icon"
+				})
+			}), selectorContent]
 		})]
 	})] });
 };

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

@@ -19,11 +19,17 @@ const IconPickerContainer = ({ effectiveMode, isOpen, setIsOpen, selectorContent
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ jsx(PopoverContent, {
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			side: "right",
 			...popover,
 			className: cn("w-full min-w-sm lg:min-w-lg p-4", "max-h-dvh md:max-h-auto", popover?.className),
-			children: selectorContent
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx("h3", {
+					className: "text-lg font-semibold",
+					children: "Select an Icon"
+				})
+			}), selectorContent]
 		})]
 	})] });
 };

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime8.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime7.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_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime7.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime9.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -22,7 +22,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_runtime12.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime8.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime8.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -57,11 +57,11 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/hooks": "0.0.0",
     "@internal/eslint-config": "0.3.0",
+    "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/tsdown-config": "0.1.0",
     "@internal/tsconfig": "0.1.0",
+    "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",