@vuer-ai/vuer-uikit 0.0.50 → 0.0.51

package/dist/{chunk-WZ6GCPO6.mjs → chunk-6UBBRJGO.mjs}

@@ -2,11 +2,14 @@ import { useTheme } from './chunk-DCSGUVTI.mjs';
 import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-TCN3UDQE.mjs';
 import { Button } from './chunk-GY65PGYR.mjs';
 import { createClientOnlyComponent } from './chunk-4F2GSF2T.mjs';
+import { useDocument } from './chunk-QG5Z4C65.mjs';
+import { cn } from './chunk-WM2VP7MI.mjs';
 import { Droplet, Sun, SunMoon, Moon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var LiquidToggleButton = () => {
+var LiquidToggleButton = (props) => {
   const { theme, setTheme, storageKey } = useTheme();
+  const document = useDocument();
   const handleLiquidToggle = () => {
     let newTheme;
     if (theme === "light") {
@@ -22,7 +25,9 @@ var LiquidToggleButton = () => {
     } else {
       newTheme = "liquid-light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
   const isLiquid = theme === "liquid-light" || theme === "liquid-dark";
@@ -32,11 +37,12 @@ var LiquidToggleButton = () => {
       Button,
       {
         icon: true,
-        onClick: handleLiquidToggle,
         variant: "ghost",
         value: isLiquid,
         "aria-label": `Toggle liquid theme: ${isSystem ? "disabled (system mode)" : isLiquid ? "on" : "off"}`,
-        className: isSystem ? "cursor-not-allowed opacity-50" : "",
+        ...props,
+        onClick: handleLiquidToggle,
+        className: cn(props.className, isSystem && "cursor-not-allowed opacity-50"),
         disabled: isSystem,
         children: /* @__PURE__ */ jsx(Droplet, { size: 20 })
       }
@@ -44,8 +50,9 @@ var LiquidToggleButton = () => {
     /* @__PURE__ */ jsx(TooltipContent, { children: "Toggle liquid theme" })
   ] });
 };
-var ThemeToggleButton = () => {
+var ThemeToggleButton = (props) => {
   const { theme, setTheme, storageKey } = useTheme();
+  const document = useDocument();
   const handleThemeChange = () => {
     let newTheme;
     if (theme === "light") {
@@ -61,7 +68,9 @@ var ThemeToggleButton = () => {
     } else {
       newTheme = "light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
   const isDark = theme === "dark" || theme === "liquid-dark";
@@ -70,15 +79,15 @@ var ThemeToggleButton = () => {
     Button,
     {
       icon: true,
-      onClick: handleThemeChange,
       variant: "ghost",
-      value: !isSystem,
       "aria-label": `Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`,
+      ...props,
+      onClick: handleThemeChange,
       children: isSystem ? /* @__PURE__ */ jsx(SunMoon, { size: 20 }) : isDark ? /* @__PURE__ */ jsx(Moon, { size: 20 }) : /* @__PURE__ */ jsx(Sun, { size: 20 })
     }
   );
 };
-var LiquidToggle = createClientOnlyComponent(LiquidToggleButton, () => /* @__PURE__ */ jsx(Button, { icon: true, variant: "ghost", "aria-label": "Liquid toggle loading...", children: /* @__PURE__ */ jsx(Droplet, { size: 20 }) }));
-var ThemeToggle = createClientOnlyComponent(ThemeToggleButton, () => /* @__PURE__ */ jsx(Button, { icon: true, variant: "ghost", "aria-label": "Theme toggle loading...", children: /* @__PURE__ */ jsx(Sun, { size: 20 }) }));
+var LiquidToggle = createClientOnlyComponent(LiquidToggleButton, (props) => /* @__PURE__ */ jsx(Button, { icon: true, variant: "ghost", "aria-label": "Liquid toggle loading...", ...props, children: /* @__PURE__ */ jsx(Droplet, { size: 20 }) }));
+var ThemeToggle = createClientOnlyComponent(ThemeToggleButton, (props) => /* @__PURE__ */ jsx(Button, { icon: true, variant: "ghost", "aria-label": "Theme toggle loading...", ...props, children: /* @__PURE__ */ jsx(Sun, { size: 20 }) }));
 
 export { LiquidToggle, ThemeToggle };

package/dist/{chunk-FIEU3WRH.mjs → chunk-F43NGNKR.mjs}

@@ -1,7 +1,7 @@
 import { Badge } from './chunk-IZCHLZ4H.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-var PACKAGE_VERSION = "0.0.50" ;
+var PACKAGE_VERSION = "0.0.51" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
 function VersionBadge({
   className,

package/dist/{chunk-CSRGTGG7.js → chunk-HS3WEBRT.js}

@@ -3,7 +3,7 @@
 var chunkILJK43VJ_js = require('./chunk-ILJK43VJ.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.50" ;
+var PACKAGE_VERSION = "0.0.51" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
 function VersionBadge({
   className,

package/dist/{chunk-EPHUL35Z.js → chunk-WWJYQ2DN.js}

@@ -4,11 +4,14 @@ var chunk37WZTN4K_js = require('./chunk-37WZTN4K.js');
 var chunkER6XHUS7_js = require('./chunk-ER6XHUS7.js');
 var chunkX6APNY5D_js = require('./chunk-X6APNY5D.js');
 var chunkQG7ZF6TO_js = require('./chunk-QG7ZF6TO.js');
+var chunkOASPTOVZ_js = require('./chunk-OASPTOVZ.js');
+var chunk7KYAICHB_js = require('./chunk-7KYAICHB.js');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var LiquidToggleButton = () => {
+var LiquidToggleButton = (props) => {
   const { theme, setTheme, storageKey } = chunk37WZTN4K_js.useTheme();
+  const document = chunkOASPTOVZ_js.useDocument();
   const handleLiquidToggle = () => {
     let newTheme;
     if (theme === "light") {
@@ -24,7 +27,9 @@ var LiquidToggleButton = () => {
     } else {
       newTheme = "liquid-light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
   const isLiquid = theme === "liquid-light" || theme === "liquid-dark";
@@ -34,11 +39,12 @@ var LiquidToggleButton = () => {
       chunkX6APNY5D_js.Button,
       {
         icon: true,
-        onClick: handleLiquidToggle,
         variant: "ghost",
         value: isLiquid,
         "aria-label": `Toggle liquid theme: ${isSystem ? "disabled (system mode)" : isLiquid ? "on" : "off"}`,
-        className: isSystem ? "cursor-not-allowed opacity-50" : "",
+        ...props,
+        onClick: handleLiquidToggle,
+        className: chunk7KYAICHB_js.cn(props.className, isSystem && "cursor-not-allowed opacity-50"),
         disabled: isSystem,
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Droplet, { size: 20 })
       }
@@ -46,8 +52,9 @@ var LiquidToggleButton = () => {
     /* @__PURE__ */ jsxRuntime.jsx(chunkER6XHUS7_js.TooltipContent, { children: "Toggle liquid theme" })
   ] });
 };
-var ThemeToggleButton = () => {
+var ThemeToggleButton = (props) => {
   const { theme, setTheme, storageKey } = chunk37WZTN4K_js.useTheme();
+  const document = chunkOASPTOVZ_js.useDocument();
   const handleThemeChange = () => {
     let newTheme;
     if (theme === "light") {
@@ -63,7 +70,9 @@ var ThemeToggleButton = () => {
     } else {
       newTheme = "light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
   const isDark = theme === "dark" || theme === "liquid-dark";
@@ -72,16 +81,16 @@ var ThemeToggleButton = () => {
     chunkX6APNY5D_js.Button,
     {
       icon: true,
-      onClick: handleThemeChange,
       variant: "ghost",
-      value: !isSystem,
       "aria-label": `Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`,
+      ...props,
+      onClick: handleThemeChange,
       children: isSystem ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, { size: 20 }) : isDark ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 20 })
     }
   );
 };
-var LiquidToggle = chunkQG7ZF6TO_js.createClientOnlyComponent(LiquidToggleButton, () => /* @__PURE__ */ jsxRuntime.jsx(chunkX6APNY5D_js.Button, { icon: true, variant: "ghost", "aria-label": "Liquid toggle loading...", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Droplet, { size: 20 }) }));
-var ThemeToggle = chunkQG7ZF6TO_js.createClientOnlyComponent(ThemeToggleButton, () => /* @__PURE__ */ jsxRuntime.jsx(chunkX6APNY5D_js.Button, { icon: true, variant: "ghost", "aria-label": "Theme toggle loading...", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 20 }) }));
+var LiquidToggle = chunkQG7ZF6TO_js.createClientOnlyComponent(LiquidToggleButton, (props) => /* @__PURE__ */ jsxRuntime.jsx(chunkX6APNY5D_js.Button, { icon: true, variant: "ghost", "aria-label": "Liquid toggle loading...", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Droplet, { size: 20 }) }));
+var ThemeToggle = chunkQG7ZF6TO_js.createClientOnlyComponent(ThemeToggleButton, (props) => /* @__PURE__ */ jsxRuntime.jsx(chunkX6APNY5D_js.Button, { icon: true, variant: "ghost", "aria-label": "Theme toggle loading...", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 20 }) }));
 
 exports.LiquidToggle = LiquidToggle;
 exports.ThemeToggle = ThemeToggle;

package/dist/index.js

@@ -2,7 +2,7 @@
 
 require('./chunk-GLGYNU3Q.js');
 require('./chunk-EDJTVLBN.js');
-var chunkEPHUL35Z_js = require('./chunk-EPHUL35Z.js');
+var chunkWWJYQ2DN_js = require('./chunk-WWJYQ2DN.js');
 var chunk37WZTN4K_js = require('./chunk-37WZTN4K.js');
 var chunkFRMG67QP_js = require('./chunk-FRMG67QP.js');
 require('./chunk-GVDU3F7X.js');
@@ -24,7 +24,7 @@ var chunk6TMEH2MB_js = require('./chunk-6TMEH2MB.js');
 var chunkFSFUZ7Y6_js = require('./chunk-FSFUZ7Y6.js');
 var chunkEAN5SZYQ_js = require('./chunk-EAN5SZYQ.js');
 var chunkEOTROHFU_js = require('./chunk-EOTROHFU.js');
-var chunkCSRGTGG7_js = require('./chunk-CSRGTGG7.js');
+var chunkHS3WEBRT_js = require('./chunk-HS3WEBRT.js');
 var chunkWRF3C24J_js = require('./chunk-WRF3C24J.js');
 var chunk4HJQPZQ2_js = require('./chunk-4HJQPZQ2.js');
 var chunkUGCFQYE2_js = require('./chunk-UGCFQYE2.js');
@@ -75,11 +75,11 @@ var chunkOTPUWWEB_js = require('./chunk-OTPUWWEB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.LiquidToggle; }
+  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.ThemeToggle; }
+  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
@@ -171,7 +171,7 @@ Object.defineProperty(exports, "TreeView", {
 });
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunkCSRGTGG7_js.VersionBadge; }
+  get: function () { return chunkHS3WEBRT_js.VersionBadge; }
 });
 Object.defineProperty(exports, "createSelectable", {
   enumerable: true,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './chunk-ZFWQLAQA.mjs';
 import './chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from './chunk-WZ6GCPO6.mjs';
+export { LiquidToggle, ThemeToggle } from './chunk-6UBBRJGO.mjs';
 export { ThemeProvider, useTheme } from './chunk-DCSGUVTI.mjs';
 export { ThemeScript } from './chunk-NSI47INE.mjs';
 import './chunk-OJUTHWTF.mjs';
@@ -22,7 +22,7 @@ export { NumberInput } from './chunk-QD6L25T6.mjs';
 export { ToggleGroup, ToggleGroupItem } from './chunk-G6CSH3FC.mjs';
 export { Toggle, toggleVariants } from './chunk-K6R7H7R2.mjs';
 export { TreeView } from './chunk-DDG2W6BX.mjs';
-export { VersionBadge } from './chunk-FIEU3WRH.mjs';
+export { VersionBadge } from './chunk-F43NGNKR.mjs';
 export { createSelectable } from './chunk-TVKPO5VK.mjs';
 export { DragSelectProvider, useDragSelectContext } from './chunk-JBQP2CBI.mjs';
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './chunk-SG2PPP7N.mjs';

package/dist/ui/index.js

@@ -2,7 +2,7 @@
 
 require('../chunk-GLGYNU3Q.js');
 require('../chunk-EDJTVLBN.js');
-var chunkEPHUL35Z_js = require('../chunk-EPHUL35Z.js');
+var chunkWWJYQ2DN_js = require('../chunk-WWJYQ2DN.js');
 var chunk37WZTN4K_js = require('../chunk-37WZTN4K.js');
 var chunkFRMG67QP_js = require('../chunk-FRMG67QP.js');
 require('../chunk-GVDU3F7X.js');
@@ -24,7 +24,7 @@ var chunk6TMEH2MB_js = require('../chunk-6TMEH2MB.js');
 var chunkFSFUZ7Y6_js = require('../chunk-FSFUZ7Y6.js');
 var chunkEAN5SZYQ_js = require('../chunk-EAN5SZYQ.js');
 var chunkEOTROHFU_js = require('../chunk-EOTROHFU.js');
-var chunkCSRGTGG7_js = require('../chunk-CSRGTGG7.js');
+var chunkHS3WEBRT_js = require('../chunk-HS3WEBRT.js');
 var chunkWRF3C24J_js = require('../chunk-WRF3C24J.js');
 var chunk4HJQPZQ2_js = require('../chunk-4HJQPZQ2.js');
 var chunkUGCFQYE2_js = require('../chunk-UGCFQYE2.js');
@@ -70,11 +70,11 @@ require('../chunk-OTPUWWEB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.LiquidToggle; }
+  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.ThemeToggle; }
+  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
@@ -166,7 +166,7 @@ Object.defineProperty(exports, "TreeView", {
 });
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunkCSRGTGG7_js.VersionBadge; }
+  get: function () { return chunkHS3WEBRT_js.VersionBadge; }
 });
 Object.defineProperty(exports, "createSelectable", {
   enumerable: true,

package/dist/ui/index.mjs

@@ -1,6 +1,6 @@
 import '../chunk-ZFWQLAQA.mjs';
 import '../chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from '../chunk-WZ6GCPO6.mjs';
+export { LiquidToggle, ThemeToggle } from '../chunk-6UBBRJGO.mjs';
 export { ThemeProvider, useTheme } from '../chunk-DCSGUVTI.mjs';
 export { ThemeScript } from '../chunk-NSI47INE.mjs';
 import '../chunk-OJUTHWTF.mjs';
@@ -22,7 +22,7 @@ export { NumberInput } from '../chunk-QD6L25T6.mjs';
 export { ToggleGroup, ToggleGroupItem } from '../chunk-G6CSH3FC.mjs';
 export { Toggle, toggleVariants } from '../chunk-K6R7H7R2.mjs';
 export { TreeView } from '../chunk-DDG2W6BX.mjs';
-export { VersionBadge } from '../chunk-FIEU3WRH.mjs';
+export { VersionBadge } from '../chunk-F43NGNKR.mjs';
 export { createSelectable } from '../chunk-TVKPO5VK.mjs';
 export { DragSelectProvider, useDragSelectContext } from '../chunk-JBQP2CBI.mjs';
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from '../chunk-SG2PPP7N.mjs';

package/dist/ui/theme/ThemeToggles.d.mts

@@ -1,6 +1,11 @@
-import react__default from 'react';
+import react__default, { ComponentProps } from 'react';
+import { Button } from '../button.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
-declare const LiquidToggle: react__default.ComponentType<{}>;
-declare const ThemeToggle: react__default.ComponentType<{}>;
+type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+declare const LiquidToggle: react__default.ComponentType<LiquidToggleProps>;
+declare const ThemeToggle: react__default.ComponentType<ThemeToggleProps>;
 
 export { LiquidToggle, ThemeToggle };

package/dist/ui/theme/ThemeToggles.d.ts

@@ -1,6 +1,11 @@
-import react__default from 'react';
+import react__default, { ComponentProps } from 'react';
+import { Button } from '../button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
-declare const LiquidToggle: react__default.ComponentType<{}>;
-declare const ThemeToggle: react__default.ComponentType<{}>;
+type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+declare const LiquidToggle: react__default.ComponentType<LiquidToggleProps>;
+declare const ThemeToggle: react__default.ComponentType<ThemeToggleProps>;
 
 export { LiquidToggle, ThemeToggle };

package/dist/ui/theme/ThemeToggles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkEPHUL35Z_js = require('../../chunk-EPHUL35Z.js');
+var chunkWWJYQ2DN_js = require('../../chunk-WWJYQ2DN.js');
 require('../../chunk-37WZTN4K.js');
 require('../../chunk-FRMG67QP.js');
 require('../../chunk-ER6XHUS7.js');
@@ -17,9 +17,9 @@ require('../../chunk-7KYAICHB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.LiquidToggle; }
+  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.ThemeToggle; }
+  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
 });

package/dist/ui/theme/ThemeToggles.mjs

@@ -1,4 +1,4 @@
-export { LiquidToggle, ThemeToggle } from '../../chunk-WZ6GCPO6.mjs';
+export { LiquidToggle, ThemeToggle } from '../../chunk-6UBBRJGO.mjs';
 import '../../chunk-DCSGUVTI.mjs';
 import '../../chunk-NSI47INE.mjs';
 import '../../chunk-TCN3UDQE.mjs';

package/dist/ui/theme/index.d.mts

@@ -4,3 +4,6 @@ export { ThemeScript } from './themeScript.mjs';
 export { Attribute, ThemeProviderProps, UseThemeProps } from './types.mjs';
 import 'react/jsx-runtime';
 import 'react';
+import '../button.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';

package/dist/ui/theme/index.d.ts

@@ -4,3 +4,6 @@ export { ThemeScript } from './themeScript.js';
 export { Attribute, ThemeProviderProps, UseThemeProps } from './types.js';
 import 'react/jsx-runtime';
 import 'react';
+import '../button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';

package/dist/ui/theme/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('../../chunk-EDJTVLBN.js');
-var chunkEPHUL35Z_js = require('../../chunk-EPHUL35Z.js');
+var chunkWWJYQ2DN_js = require('../../chunk-WWJYQ2DN.js');
 var chunk37WZTN4K_js = require('../../chunk-37WZTN4K.js');
 var chunkFRMG67QP_js = require('../../chunk-FRMG67QP.js');
 require('../../chunk-ER6XHUS7.js');
@@ -18,11 +18,11 @@ require('../../chunk-7KYAICHB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.LiquidToggle; }
+  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkEPHUL35Z_js.ThemeToggle; }
+  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,

package/dist/ui/theme/index.mjs

@@ -1,5 +1,5 @@
 import '../../chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from '../../chunk-WZ6GCPO6.mjs';
+export { LiquidToggle, ThemeToggle } from '../../chunk-6UBBRJGO.mjs';
 export { ThemeProvider, useTheme } from '../../chunk-DCSGUVTI.mjs';
 export { ThemeScript } from '../../chunk-NSI47INE.mjs';
 import '../../chunk-TCN3UDQE.mjs';

package/dist/ui/version-badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCSRGTGG7_js = require('../chunk-CSRGTGG7.js');
+var chunkHS3WEBRT_js = require('../chunk-HS3WEBRT.js');
 require('../chunk-ILJK43VJ.js');
 require('../chunk-UBVYEZI3.js');
 require('../chunk-W3APG27Q.js');
@@ -14,5 +14,5 @@ require('../chunk-7KYAICHB.js');
 
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunkCSRGTGG7_js.VersionBadge; }
+  get: function () { return chunkHS3WEBRT_js.VersionBadge; }
 });

package/dist/ui/version-badge.mjs

@@ -1,4 +1,4 @@
-export { VersionBadge } from '../chunk-FIEU3WRH.mjs';
+export { VersionBadge } from '../chunk-F43NGNKR.mjs';
 import '../chunk-IZCHLZ4H.mjs';
 import '../chunk-AYKQVWMR.mjs';
 import '../chunk-PR4VD5F2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuer-ai/vuer-uikit",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "React UI Kit components",
   "keywords": [
     "react",

package/src/ui/theme/ThemeToggles.tsx

@@ -1,14 +1,16 @@
 // Liquid toggle component
+import React, { type ComponentProps } from "react";
 import { Droplet, Moon, Sun, SunMoon } from "lucide-react";
-import React from "react";
-
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { useTheme } from "./ThemeProvider";
-import { createClientOnlyComponent } from "../../hooks";
+import { createClientOnlyComponent, useDocument, cn } from "../../hooks";
+
+type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
-const LiquidToggleButton: React.FC = () => {
+const LiquidToggleButton: React.FC<LiquidToggleProps> = (props) => {
   const { theme, setTheme, storageKey } = useTheme();
+  const document = useDocument();
 
   const handleLiquidToggle = () => {
     let newTheme: string;
@@ -27,7 +29,9 @@ const LiquidToggleButton: React.FC = () => {
       // Default fallback
       newTheme = "liquid-light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
 
@@ -39,11 +43,12 @@ const LiquidToggleButton: React.FC = () => {
       <TooltipTrigger asChild>
         <Button
           icon
-          onClick={handleLiquidToggle}
           variant="ghost"
           value={isLiquid}
           aria-label={`Toggle liquid theme: ${isSystem ? "disabled (system mode)" : isLiquid ? "on" : "off"}`}
-          className={isSystem ? "cursor-not-allowed opacity-50" : ""}
+          {...props}
+          onClick={handleLiquidToggle}
+          className={cn(props.className, isSystem && "cursor-not-allowed opacity-50")}
           disabled={isSystem}
         >
           <Droplet size={20} />
@@ -54,8 +59,11 @@ const LiquidToggleButton: React.FC = () => {
   );
 };
 // Theme toggle component for light/dark
-const ThemeToggleButton: React.FC = () => {
+type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+
+const ThemeToggleButton: React.FC<ThemeToggleProps> = (props) => {
   const { theme, setTheme, storageKey } = useTheme();
+  const document = useDocument();
 
   const handleThemeChange = () => {
     let newTheme: string;
@@ -73,7 +81,9 @@ const ThemeToggleButton: React.FC = () => {
       // Default fallback
       newTheme = "light";
     }
-    document.cookie = `${storageKey}=${newTheme}`;
+    if (document) {
+      document.cookie = `${storageKey}=${newTheme}`;
+    }
     setTheme(newTheme);
   };
 
@@ -83,23 +93,24 @@ const ThemeToggleButton: React.FC = () => {
   return (
     <Button
       icon
-      onClick={handleThemeChange}
       variant="ghost"
       aria-label={`Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`}
+      {...props}
+      onClick={handleThemeChange}
     >
       {isSystem ? <SunMoon size={20} /> : isDark ? <Moon size={20} /> : <Sun size={20} />}
     </Button>
   );
 };
 // Create client-only versions to prevent hydration mismatch
-export const LiquidToggle = createClientOnlyComponent(LiquidToggleButton, () => (
-  <Button icon variant="ghost" aria-label="Liquid toggle loading...">
+export const LiquidToggle = createClientOnlyComponent(LiquidToggleButton, (props: LiquidToggleProps) => (
+  <Button icon variant="ghost" aria-label="Liquid toggle loading..." {...props}>
     <Droplet size={20} />
   </Button>
 ));
 
-export const ThemeToggle = createClientOnlyComponent(ThemeToggleButton, () => (
-  <Button icon variant="ghost" aria-label="Theme toggle loading...">
+export const ThemeToggle = createClientOnlyComponent(ThemeToggleButton, (props: ThemeToggleProps) => (
+  <Button icon variant="ghost" aria-label="Theme toggle loading..." {...props}>
     <Sun size={20} />
   </Button>
 ));