@pixpilot/shadcn-ui 0.28.0 → 0.29.0

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-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-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-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/input/Input.d.ts

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

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

@@ -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.d.ts

@@ -1,23 +1,23 @@
-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 {
   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_runtime9.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -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.d.ts

@@ -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.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

@@ -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 {
@@ -12,17 +12,17 @@ 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 function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,19 +1,19 @@
-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 {
   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;
 }
 /**
  * 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.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.29.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/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
+    "@internal/eslint-config": "0.3.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
+    "@internal/tsconfig": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",