@pixpilot/shadcn-ui 0.28.0 → 0.30.0

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,7 @@ 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 IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp, showValueText = true, emptyText = "+", showClearButton = true }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const isMobile = require_use_media_query.useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = (0, react.useCallback)((iconName) => {
@@ -21,15 +25,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 +56,67 @@ 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, {
-			type: "button",
-			variant: "outline",
-			className: "p-2",
-			"aria-label": iconButtonLabel,
-			children: iconButtonContent
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "relative inline-flex",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				variant: "outline",
+				className: "p-2",
+				"aria-label": iconButtonLabel,
+				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 h-4 w-4 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"),
+				"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, {
+		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, showValueText && 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, {
+					type: "button",
+					variant: "outline",
+					className: "whitespace-nowrap",
+					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"
+				onClick: handleClearIcon,
+				children: "Clear"
 			})
-		})]
+		]
 	});
 };
 

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

@@ -28,6 +28,9 @@ interface IconPickerProps {
     prefix: string;
     name: string;
   }>) => void;
+  showValueText?: boolean;
+  emptyText?: React.ReactNode;
+  showClearButton?: boolean;
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

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

@@ -28,6 +28,9 @@ interface IconPickerProps {
     prefix: string;
     name: string;
   }>) => void;
+  showValueText?: boolean;
+  emptyText?: React.ReactNode;
+  showClearButton?: boolean;
 }
 declare const IconPicker: FC<IconPickerProps>;
 //#endregion

package/dist/icon-selector/IconPicker.js

@@ -1,15 +1,17 @@
-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 { 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 IconPicker = ({ value, onChange, onOpenChange, pickerMode = "dialog", popover, variant = "default", providers: providersProp, showValueText = true, emptyText = "+", showClearButton = true }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const isMobile = useMediaQuery({ maxWidth: 768 });
 	const handleSelectIcon = useCallback((iconName) => {
@@ -17,15 +19,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 +49,67 @@ 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, {
-			type: "button",
-			variant: "outline",
-			className: "p-2",
-			"aria-label": iconButtonLabel,
-			children: iconButtonContent
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "relative inline-flex",
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				type: "button",
+				variant: "outline",
+				className: "p-2",
+				"aria-label": iconButtonLabel,
+				children: iconButtonContent
+			}), shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
+				type: "button",
+				title: "Clear selected icon",
+				className: cn("absolute -right-1 -top-1 inline-flex h-4 w-4 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"),
+				"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, {
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2",
+				children: [displayIcon, showValueText && hasValue && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: value
+				})]
+			}),
+			/* @__PURE__ */ jsx(IconPickerContainer, {
+				effectiveMode,
+				isOpen,
+				setIsOpen,
+				selectorContent,
+				popover,
+				children: /* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					variant: "outline",
+					className: "whitespace-nowrap",
+					children: hasValue ? "Change Icon" : "Select Icon"
+				})
+			}),
+			shouldShowClearButton && /* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				variant: "outline",
 				className: "whitespace-nowrap",
-				children: hasValue ? "Change Icon" : "Select Icon"
+				onClick: handleClearIcon,
+				children: "Clear"
 			})
-		})]
+		]
 	});
 };
 

package/dist/theme-toggle/ThemeModeDropdown.cjs

@@ -15,11 +15,11 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 /**
 * Theme mode selector dropdown.
 * Provides Light / Dark / System options.
-* Pure component - requires theme and setTheme props.
+* Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, theme, setTheme, resolvedTheme, disabled } = props;
-	const isDark = resolvedTheme === "dark";
+	const { 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, {
@@ -40,36 +40,36 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
-				onClick: () => setTheme?.("light"),
+				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "flex-1",
 						children: "Light"
 					}),
-					theme === "light" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "light" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
-				onClick: () => setTheme?.("dark"),
+				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "flex-1",
 						children: "Dark"
 					}),
-					theme === "dark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "dark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
-				onClick: () => setTheme?.("system"),
+				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "flex-1",
 						children: "System"
 					}),
-					theme === "system" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "system" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
 				]
 			})
 		]

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

@@ -1,23 +1,23 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
   align?: 'start' | 'center' | 'end';
   className?: string;
-  /** Current theme value ("light" | "dark" | "system") */
-  theme?: string;
+  /** Current theme selection ("light" | "dark" | "system") */
+  themeValue?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  onChange?: (theme: string) => void;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   disabled?: boolean;
 }
 /**
  * Theme mode selector dropdown.
  * Provides Light / Dark / System options.
- * Pure component - requires theme and setTheme props.
+ * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -4,18 +4,18 @@ import * as react_jsx_runtime10 from "react/jsx-runtime";
 interface ThemeModeDropdownProps {
   align?: 'start' | 'center' | 'end';
   className?: string;
-  /** Current theme value ("light" | "dark" | "system") */
-  theme?: string;
+  /** Current theme selection ("light" | "dark" | "system") */
+  themeValue?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  onChange?: (theme: string) => void;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   disabled?: boolean;
 }
 /**
  * Theme mode selector dropdown.
  * Provides Light / Dark / System options.
- * Pure component - requires theme and setTheme props.
+ * Pure component - requires themeValue and onChange props.
  */
 declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
 declare namespace ThemeModeDropdown {

package/dist/theme-toggle/ThemeModeDropdown.js

@@ -10,11 +10,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Theme mode selector dropdown.
 * Provides Light / Dark / System options.
-* Pure component - requires theme and setTheme props.
+* Pure component - requires themeValue and onChange props.
 */
 function ThemeModeDropdown(props) {
-	const { align = "end", className, theme, setTheme, resolvedTheme, disabled } = props;
-	const isDark = resolvedTheme === "dark";
+	const { 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, {
@@ -35,36 +35,36 @@ function ThemeModeDropdown(props) {
 		align,
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => setTheme?.("light"),
+				onClick: () => onChange?.("light"),
 				children: [
 					/* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1",
 						children: "Light"
 					}),
-					theme === "light" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "light" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => setTheme?.("dark"),
+				onClick: () => onChange?.("dark"),
 				children: [
 					/* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1",
 						children: "Dark"
 					}),
-					theme === "dark" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "dark" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
 				]
 			}),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => setTheme?.("system"),
+				onClick: () => onChange?.("system"),
 				children: [
 					/* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 mr-2" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1",
 						children: "System"
 					}),
-					theme === "system" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
+					themeValue === "system" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
 				]
 			})
 		]

package/dist/theme-toggle/ThemeModeSwitchInside.cjs

@@ -16,9 +16,9 @@ const ICON_CLASS_NAME = (0, __pixpilot_shadcn.cn)("pointer-events-none rounded-f
 const SWITCH_OVERLAY_CLASS_NAME = (0, __pixpilot_shadcn.cn)("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
 const SIZE_STYLES = {
 	sm: {
-		wrapper: "h-8",
+		wrapper: "h-7",
 		iconPadding: "p-1",
-		defaultIconSize: 22
+		defaultIconSize: 20
 	},
 	md: {
 		wrapper: "h-8/5",
@@ -34,15 +34,15 @@ const SIZE_STYLES = {
 /**
 * Light/Dark theme switch with icons inside the switch.
 * Icons are embedded within the switch control.
-* Pure component - requires resolvedTheme and setTheme props.
+* Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const { showIcons = true, 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 = resolvedTheme === "dark";
+	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
-		setTheme?.(checked ? "dark" : "light");
+		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
 		checked: isDark,

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';
@@ -15,17 +15,17 @@ interface ThemeModeSwitchInsideProps {
   switchClassName?: string;
   disabled?: boolean;
   ariaLabel?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
 }
 /**
  * Light/Dark theme switch with icons inside the switch.
  * Icons are embedded within the switch control.
- * Pure component - requires resolvedTheme and setTheme props.
+ * 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/ThemeModeSwitchInside.d.ts

@@ -15,15 +15,15 @@ interface ThemeModeSwitchInsideProps {
   switchClassName?: string;
   disabled?: boolean;
   ariaLabel?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
 }
 /**
  * Light/Dark theme switch with icons inside the switch.
  * Icons are embedded within the switch control.
- * Pure component - requires resolvedTheme and setTheme props.
+ * Pure component - requires value and onChange props.
  */
 declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeSwitchInside {

package/dist/theme-toggle/ThemeModeSwitchInside.js

@@ -12,9 +12,9 @@ const ICON_CLASS_NAME = cn("pointer-events-none rounded-full transition-colors")
 const SWITCH_OVERLAY_CLASS_NAME = cn("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
 const SIZE_STYLES = {
 	sm: {
-		wrapper: "h-8",
+		wrapper: "h-7",
 		iconPadding: "p-1",
-		defaultIconSize: 22
+		defaultIconSize: 20
 	},
 	md: {
 		wrapper: "h-8/5",
@@ -30,15 +30,15 @@ const SIZE_STYLES = {
 /**
 * Light/Dark theme switch with icons inside the switch.
 * Icons are embedded within the switch control.
-* Pure component - requires resolvedTheme and setTheme props.
+* Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchInside(props) {
-	const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
+	const { showIcons = true, 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 = resolvedTheme === "dark";
+	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
-		setTheme?.(checked ? "dark" : "light");
+		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
 		checked: isDark,

package/dist/theme-toggle/ThemeModeSwitchOutside.cjs

@@ -16,13 +16,13 @@ const DEFAULT_ICON_SIZE = 16;
 /**
 * Light/Dark theme switch with icons outside the switch.
 * Icons flank the switch control on either side.
-* Pure component - requires resolvedTheme and setTheme props.
+* Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
-	const isDark = resolvedTheme === "dark";
+	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
-		setTheme?.(checked ? "dark" : "light");
+		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
 		checked: isDark,

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

@@ -12,15 +12,15 @@ interface ThemeModeSwitchOutsideProps {
   switchClassName?: string;
   disabled?: boolean;
   ariaLabel?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
 }
 /**
  * Light/Dark theme switch with icons outside the switch.
  * Icons flank the switch control on either side.
- * Pure component - requires resolvedTheme and setTheme props.
+ * Pure component - requires value and onChange props.
  */
 declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeSwitchOutside {

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

@@ -12,15 +12,15 @@ interface ThemeModeSwitchOutsideProps {
   switchClassName?: string;
   disabled?: boolean;
   ariaLabel?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
 }
 /**
  * Light/Dark theme switch with icons outside the switch.
  * Icons flank the switch control on either side.
- * Pure component - requires resolvedTheme and setTheme props.
+ * Pure component - requires value and onChange props.
  */
 declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeSwitchOutside {

package/dist/theme-toggle/ThemeModeSwitchOutside.js

@@ -11,13 +11,13 @@ const DEFAULT_ICON_SIZE = 16;
 /**
 * Light/Dark theme switch with icons outside the switch.
 * Icons flank the switch control on either side.
-* Pure component - requires resolvedTheme and setTheme props.
+* Pure component - requires value and onChange props.
 */
 function ThemeModeSwitchOutside(props) {
-	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", resolvedTheme, setTheme } = props;
-	const isDark = resolvedTheme === "dark";
+	const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
+	const isDark = value === "dark";
 	const onCheckedChange = (checked) => {
-		setTheme?.(checked ? "dark" : "light");
+		onChange?.(checked ? "dark" : "light");
 	};
 	if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
 		checked: isDark,

package/dist/theme-toggle/ThemeModeToggleButton.cjs

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

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

@@ -3,10 +3,10 @@ import * as react_jsx_runtime9 from "react/jsx-runtime";
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
   className?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
   disabled?: boolean;
 }
 /**

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

@@ -3,10 +3,10 @@ import * as react_jsx_runtime9 from "react/jsx-runtime";
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
   className?: string;
-  /** The resolved theme ("light" | "dark") */
-  resolvedTheme?: string;
+  /** The resolved theme value ("light" | "dark") */
+  value?: string;
   /** Function to change the theme */
-  setTheme?: (theme: string) => void;
+  onChange?: (theme: string) => void;
   disabled?: boolean;
 }
 /**

package/dist/theme-toggle/ThemeModeToggleButton.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "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/hooks": "0.0.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"