@vuer-ai/vuer-uikit 0.0.51 → 0.0.52

package/dist/{chunk-HS3WEBRT.js → chunk-2HAD7VLJ.js}

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

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

@@ -2,14 +2,11 @@ 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 = (props) => {
+var LiquidToggleButton = () => {
   const { theme, setTheme, storageKey } = useTheme();
-  const document = useDocument();
   const handleLiquidToggle = () => {
     let newTheme;
     if (theme === "light") {
@@ -25,9 +22,7 @@ var LiquidToggleButton = (props) => {
     } else {
       newTheme = "liquid-light";
     }
-    if (document) {
-      document.cookie = `${storageKey}=${newTheme}`;
-    }
+    document.cookie = `${storageKey}=${newTheme}`;
     setTheme(newTheme);
   };
   const isLiquid = theme === "liquid-light" || theme === "liquid-dark";
@@ -37,12 +32,11 @@ var LiquidToggleButton = (props) => {
       Button,
       {
         icon: true,
+        onClick: handleLiquidToggle,
         variant: "ghost",
         value: isLiquid,
         "aria-label": `Toggle liquid theme: ${isSystem ? "disabled (system mode)" : isLiquid ? "on" : "off"}`,
-        ...props,
-        onClick: handleLiquidToggle,
-        className: cn(props.className, isSystem && "cursor-not-allowed opacity-50"),
+        className: isSystem ? "cursor-not-allowed opacity-50" : "",
         disabled: isSystem,
         children: /* @__PURE__ */ jsx(Droplet, { size: 20 })
       }
@@ -50,9 +44,8 @@ var LiquidToggleButton = (props) => {
     /* @__PURE__ */ jsx(TooltipContent, { children: "Toggle liquid theme" })
   ] });
 };
-var ThemeToggleButton = (props) => {
+var ThemeToggleButton = () => {
   const { theme, setTheme, storageKey } = useTheme();
-  const document = useDocument();
   const handleThemeChange = () => {
     let newTheme;
     if (theme === "light") {
@@ -68,9 +61,7 @@ var ThemeToggleButton = (props) => {
     } else {
       newTheme = "light";
     }
-    if (document) {
-      document.cookie = `${storageKey}=${newTheme}`;
-    }
+    document.cookie = `${storageKey}=${newTheme}`;
     setTheme(newTheme);
   };
   const isDark = theme === "dark" || theme === "liquid-dark";
@@ -79,15 +70,14 @@ var ThemeToggleButton = (props) => {
     Button,
     {
       icon: true,
+      onClick: handleThemeChange,
       variant: "ghost",
       "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, (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 }) }));
+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 }) }));
 
 export { LiquidToggle, ThemeToggle };

package/dist/{chunk-PDXJXH4A.mjs → chunk-ECWK3POQ.mjs}

@@ -1,4 +1,4 @@
-import { TreeView } from './chunk-VSYSYSVQ.mjs';
+import { TreeView } from './chunk-HJMRCBDG.mjs';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-TCN3UDQE.mjs';
 import { cn } from './chunk-WM2VP7MI.mjs';
 import { Magnet, ChevronLeft, ChevronRight } from 'lucide-react';

package/dist/{chunk-VSYSYSVQ.mjs → chunk-HJMRCBDG.mjs}

@@ -13,7 +13,8 @@ function TreeView({
   hoveredId,
   isSelectable = false,
   selectedItemId,
-  onSelectChange
+  onSelectChange,
+  isSearchable = true
 }) {
   const [expandedItems, setExpandedItems] = useState(() => {
     const initial = /* @__PURE__ */ new Set();
@@ -139,7 +140,7 @@ function TreeView({
     ) });
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("border-line-secondary/20 flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
+    isSearchable && /* @__PURE__ */ jsxs("div", { className: "border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
       /* @__PURE__ */ jsx(Search, { className: "text-text-secondary size-4" }),
       /* @__PURE__ */ jsx(
         "input",
@@ -183,13 +184,14 @@ function TreeView({
       "div",
       {
         className: cn(
-          "group relative flex h-[32px] cursor-pointer items-center",
-          hoveredId === item.id && "bg-bg-secondary/80",
-          isSelectable && selectedItemId === item.id && "bg-brand-primary"
+          "group relative flex h-[32px] items-center",
+          !item.disable && "cursor-pointer",
+          hoveredId === item.id && !item.disable && "bg-bg-secondary",
+          isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
         ),
-        onMouseEnter: () => onItemHover == null ? void 0 : onItemHover(item.id),
-        onMouseLeave: () => onItemHover == null ? void 0 : onItemHover(null),
-        onClick: () => handleItemSelect(item.id),
+        onMouseEnter: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(item.id)),
+        onMouseLeave: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(null)),
+        onClick: () => !item.disable && handleItemSelect(item.id),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
             item.ancestors.map((ancestor, index) => {
@@ -242,7 +244,8 @@ function TreeView({
                           {
                             className: cn(
                               "size-4 transition-transform",
-                              !expandedItems.has(item.id) && "-rotate-90"
+                              !expandedItems.has(item.id) && "-rotate-90",
+                              item.disable && "text-icon-tertiary"
                             )
                           }
                         )
@@ -253,13 +256,14 @@ function TreeView({
                       {
                         className: cn(
                           "cursor-pointer transition-opacity",
-                          item.isCollapsible && "group-hover:opacity-0"
+                          item.isCollapsible && "group-hover:opacity-0",
+                          item.disable && "text-icon-tertiary"
                         ),
                         children: getIcon(item)
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate", children: renderLabel(item.label) })
+                  /* @__PURE__ */ jsx("span", { className: cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label) })
                 ] }),
                 item.actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
               ]

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

@@ -4,14 +4,11 @@ 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 = (props) => {
+var LiquidToggleButton = () => {
   const { theme, setTheme, storageKey } = chunk37WZTN4K_js.useTheme();
-  const document = chunkOASPTOVZ_js.useDocument();
   const handleLiquidToggle = () => {
     let newTheme;
     if (theme === "light") {
@@ -27,9 +24,7 @@ var LiquidToggleButton = (props) => {
     } else {
       newTheme = "liquid-light";
     }
-    if (document) {
-      document.cookie = `${storageKey}=${newTheme}`;
-    }
+    document.cookie = `${storageKey}=${newTheme}`;
     setTheme(newTheme);
   };
   const isLiquid = theme === "liquid-light" || theme === "liquid-dark";
@@ -39,12 +34,11 @@ var LiquidToggleButton = (props) => {
       chunkX6APNY5D_js.Button,
       {
         icon: true,
+        onClick: handleLiquidToggle,
         variant: "ghost",
         value: isLiquid,
         "aria-label": `Toggle liquid theme: ${isSystem ? "disabled (system mode)" : isLiquid ? "on" : "off"}`,
-        ...props,
-        onClick: handleLiquidToggle,
-        className: chunk7KYAICHB_js.cn(props.className, isSystem && "cursor-not-allowed opacity-50"),
+        className: isSystem ? "cursor-not-allowed opacity-50" : "",
         disabled: isSystem,
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Droplet, { size: 20 })
       }
@@ -52,9 +46,8 @@ var LiquidToggleButton = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(chunkER6XHUS7_js.TooltipContent, { children: "Toggle liquid theme" })
   ] });
 };
-var ThemeToggleButton = (props) => {
+var ThemeToggleButton = () => {
   const { theme, setTheme, storageKey } = chunk37WZTN4K_js.useTheme();
-  const document = chunkOASPTOVZ_js.useDocument();
   const handleThemeChange = () => {
     let newTheme;
     if (theme === "light") {
@@ -70,9 +63,7 @@ var ThemeToggleButton = (props) => {
     } else {
       newTheme = "light";
     }
-    if (document) {
-      document.cookie = `${storageKey}=${newTheme}`;
-    }
+    document.cookie = `${storageKey}=${newTheme}`;
     setTheme(newTheme);
   };
   const isDark = theme === "dark" || theme === "liquid-dark";
@@ -81,16 +72,15 @@ var ThemeToggleButton = (props) => {
     chunkX6APNY5D_js.Button,
     {
       icon: true,
+      onClick: handleThemeChange,
       variant: "ghost",
       "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, (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 }) }));
+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 }) }));
 
 exports.LiquidToggle = LiquidToggle;
 exports.ThemeToggle = ThemeToggle;

package/dist/{chunk-WEHNW5KY.js → chunk-L3SCK2WT.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkYNKO5FOU_js = require('./chunk-YNKO5FOU.js');
+var chunkVWYDSID4_js = require('./chunk-VWYDSID4.js');
 var chunkER6XHUS7_js = require('./chunk-ER6XHUS7.js');
 var chunk7KYAICHB_js = require('./chunk-7KYAICHB.js');
 var lucideReact = require('lucide-react');
@@ -510,7 +510,7 @@ function Timeline({
   }, [viewStart, viewDuration, updateCursor]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary text-text-primary border-line-secondary/20 rounded-uk-md mx-auto w-full max-w-7xl overflow-hidden border font-sans shadow-[0_4px_16px_0_var(--color-shadow-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkYNKO5FOU_js.TreeView,
+      chunkVWYDSID4_js.TreeView,
       {
         data,
         getIcon,

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

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

package/dist/{chunk-YNKO5FOU.js → chunk-VWYDSID4.js}

@@ -15,7 +15,8 @@ function TreeView({
   hoveredId,
   isSelectable = false,
   selectedItemId,
-  onSelectChange
+  onSelectChange,
+  isSearchable = true
 }) {
   const [expandedItems, setExpandedItems] = react.useState(() => {
     const initial = /* @__PURE__ */ new Set();
@@ -141,7 +142,7 @@ function TreeView({
     ) });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk7KYAICHB_js.cn("border-line-secondary/20 flex flex-col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
+    isSearchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "text-text-secondary size-4" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -185,13 +186,14 @@ function TreeView({
       "div",
       {
         className: chunk7KYAICHB_js.cn(
-          "group relative flex h-[32px] cursor-pointer items-center",
-          hoveredId === item.id && "bg-bg-secondary/80",
-          isSelectable && selectedItemId === item.id && "bg-brand-primary"
+          "group relative flex h-[32px] items-center",
+          !item.disable && "cursor-pointer",
+          hoveredId === item.id && !item.disable && "bg-bg-secondary",
+          isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
         ),
-        onMouseEnter: () => onItemHover == null ? void 0 : onItemHover(item.id),
-        onMouseLeave: () => onItemHover == null ? void 0 : onItemHover(null),
-        onClick: () => handleItemSelect(item.id),
+        onMouseEnter: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(item.id)),
+        onMouseLeave: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(null)),
+        onClick: () => !item.disable && handleItemSelect(item.id),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
             item.ancestors.map((ancestor, index) => {
@@ -244,7 +246,8 @@ function TreeView({
                           {
                             className: chunk7KYAICHB_js.cn(
                               "size-4 transition-transform",
-                              !expandedItems.has(item.id) && "-rotate-90"
+                              !expandedItems.has(item.id) && "-rotate-90",
+                              item.disable && "text-icon-tertiary"
                             )
                           }
                         )
@@ -255,13 +258,14 @@ function TreeView({
                       {
                         className: chunk7KYAICHB_js.cn(
                           "cursor-pointer transition-opacity",
-                          item.isCollapsible && "group-hover:opacity-0"
+                          item.isCollapsible && "group-hover:opacity-0",
+                          item.disable && "text-icon-tertiary"
                         ),
                         children: getIcon(item)
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: renderLabel(item.label) })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk7KYAICHB_js.cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label) })
                 ] }),
                 item.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
               ]

package/dist/index.js

@@ -2,7 +2,7 @@
 
 require('./chunk-GLGYNU3Q.js');
 require('./chunk-EDJTVLBN.js');
-var chunkWWJYQ2DN_js = require('./chunk-WWJYQ2DN.js');
+var chunkHKWVLJ7G_js = require('./chunk-HKWVLJ7G.js');
 var chunk37WZTN4K_js = require('./chunk-37WZTN4K.js');
 var chunkFRMG67QP_js = require('./chunk-FRMG67QP.js');
 require('./chunk-GVDU3F7X.js');
@@ -24,15 +24,15 @@ 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 chunkHS3WEBRT_js = require('./chunk-HS3WEBRT.js');
+var chunk2HAD7VLJ_js = require('./chunk-2HAD7VLJ.js');
 var chunkWRF3C24J_js = require('./chunk-WRF3C24J.js');
 var chunk4HJQPZQ2_js = require('./chunk-4HJQPZQ2.js');
 var chunkUGCFQYE2_js = require('./chunk-UGCFQYE2.js');
 require('./chunk-QPQSH53G.js');
 var chunkJ2ZRCEKZ_js = require('./chunk-J2ZRCEKZ.js');
 var chunkRFFQCDHN_js = require('./chunk-RFFQCDHN.js');
-var chunkWEHNW5KY_js = require('./chunk-WEHNW5KY.js');
-var chunkYNKO5FOU_js = require('./chunk-YNKO5FOU.js');
+var chunkL3SCK2WT_js = require('./chunk-L3SCK2WT.js');
+var chunkVWYDSID4_js = require('./chunk-VWYDSID4.js');
 var chunkER6XHUS7_js = require('./chunk-ER6XHUS7.js');
 var chunkQJR6MCTR_js = require('./chunk-QJR6MCTR.js');
 var chunkLF2XWR4S_js = require('./chunk-LF2XWR4S.js');
@@ -75,11 +75,11 @@ var chunkOTPUWWEB_js = require('./chunk-OTPUWWEB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
+  get: function () { return chunkHKWVLJ7G_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
+  get: function () { return chunkHKWVLJ7G_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 chunkHS3WEBRT_js.VersionBadge; }
+  get: function () { return chunk2HAD7VLJ_js.VersionBadge; }
 });
 Object.defineProperty(exports, "createSelectable", {
   enumerable: true,
@@ -291,11 +291,11 @@ Object.defineProperty(exports, "Switch", {
 });
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkWEHNW5KY_js.Timeline; }
+  get: function () { return chunkL3SCK2WT_js.Timeline; }
 });
 Object.defineProperty(exports, "TreeViewV2", {
   enumerable: true,
-  get: function () { return chunkYNKO5FOU_js.TreeView; }
+  get: function () { return chunkVWYDSID4_js.TreeView; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './chunk-ZFWQLAQA.mjs';
 import './chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from './chunk-6UBBRJGO.mjs';
+export { LiquidToggle, ThemeToggle } from './chunk-5ZAPRYIX.mjs';
 export { ThemeProvider, useTheme } from './chunk-DCSGUVTI.mjs';
 export { ThemeScript } from './chunk-NSI47INE.mjs';
 import './chunk-OJUTHWTF.mjs';
@@ -22,15 +22,15 @@ 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-F43NGNKR.mjs';
+export { VersionBadge } from './chunk-VSGVRZLH.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';
 import './chunk-N6DZ364I.mjs';
 export { Slider } from './chunk-47WYS4WO.mjs';
 export { Switch } from './chunk-SWGYWILR.mjs';
-export { Timeline } from './chunk-PDXJXH4A.mjs';
-export { TreeView as TreeViewV2 } from './chunk-VSYSYSVQ.mjs';
+export { Timeline } from './chunk-ECWK3POQ.mjs';
+export { TreeView as TreeViewV2 } from './chunk-HJMRCBDG.mjs';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './chunk-TCN3UDQE.mjs';
 export { Toaster, toast } from './chunk-EAZQH4IX.mjs';
 export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from './chunk-GL6WU4QP.mjs';

package/dist/ui/index.js

@@ -2,7 +2,7 @@
 
 require('../chunk-GLGYNU3Q.js');
 require('../chunk-EDJTVLBN.js');
-var chunkWWJYQ2DN_js = require('../chunk-WWJYQ2DN.js');
+var chunkHKWVLJ7G_js = require('../chunk-HKWVLJ7G.js');
 var chunk37WZTN4K_js = require('../chunk-37WZTN4K.js');
 var chunkFRMG67QP_js = require('../chunk-FRMG67QP.js');
 require('../chunk-GVDU3F7X.js');
@@ -24,15 +24,15 @@ 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 chunkHS3WEBRT_js = require('../chunk-HS3WEBRT.js');
+var chunk2HAD7VLJ_js = require('../chunk-2HAD7VLJ.js');
 var chunkWRF3C24J_js = require('../chunk-WRF3C24J.js');
 var chunk4HJQPZQ2_js = require('../chunk-4HJQPZQ2.js');
 var chunkUGCFQYE2_js = require('../chunk-UGCFQYE2.js');
 require('../chunk-QPQSH53G.js');
 var chunkJ2ZRCEKZ_js = require('../chunk-J2ZRCEKZ.js');
 var chunkRFFQCDHN_js = require('../chunk-RFFQCDHN.js');
-var chunkWEHNW5KY_js = require('../chunk-WEHNW5KY.js');
-var chunkYNKO5FOU_js = require('../chunk-YNKO5FOU.js');
+var chunkL3SCK2WT_js = require('../chunk-L3SCK2WT.js');
+var chunkVWYDSID4_js = require('../chunk-VWYDSID4.js');
 var chunkER6XHUS7_js = require('../chunk-ER6XHUS7.js');
 var chunkQJR6MCTR_js = require('../chunk-QJR6MCTR.js');
 var chunkLF2XWR4S_js = require('../chunk-LF2XWR4S.js');
@@ -70,11 +70,11 @@ require('../chunk-OTPUWWEB.js');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.LiquidToggle; }
+  get: function () { return chunkHKWVLJ7G_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
+  get: function () { return chunkHKWVLJ7G_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 chunkHS3WEBRT_js.VersionBadge; }
+  get: function () { return chunk2HAD7VLJ_js.VersionBadge; }
 });
 Object.defineProperty(exports, "createSelectable", {
   enumerable: true,
@@ -286,11 +286,11 @@ Object.defineProperty(exports, "Switch", {
 });
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkWEHNW5KY_js.Timeline; }
+  get: function () { return chunkL3SCK2WT_js.Timeline; }
 });
 Object.defineProperty(exports, "TreeViewV2", {
   enumerable: true,
-  get: function () { return chunkYNKO5FOU_js.TreeView; }
+  get: function () { return chunkVWYDSID4_js.TreeView; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,

package/dist/ui/index.mjs

@@ -1,6 +1,6 @@
 import '../chunk-ZFWQLAQA.mjs';
 import '../chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from '../chunk-6UBBRJGO.mjs';
+export { LiquidToggle, ThemeToggle } from '../chunk-5ZAPRYIX.mjs';
 export { ThemeProvider, useTheme } from '../chunk-DCSGUVTI.mjs';
 export { ThemeScript } from '../chunk-NSI47INE.mjs';
 import '../chunk-OJUTHWTF.mjs';
@@ -22,15 +22,15 @@ 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-F43NGNKR.mjs';
+export { VersionBadge } from '../chunk-VSGVRZLH.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';
 import '../chunk-N6DZ364I.mjs';
 export { Slider } from '../chunk-47WYS4WO.mjs';
 export { Switch } from '../chunk-SWGYWILR.mjs';
-export { Timeline } from '../chunk-PDXJXH4A.mjs';
-export { TreeView as TreeViewV2 } from '../chunk-VSYSYSVQ.mjs';
+export { Timeline } from '../chunk-ECWK3POQ.mjs';
+export { TreeView as TreeViewV2 } from '../chunk-HJMRCBDG.mjs';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../chunk-TCN3UDQE.mjs';
 export { Toaster, toast } from '../chunk-EAZQH4IX.mjs';
 export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from '../chunk-GL6WU4QP.mjs';

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

@@ -1,11 +1,6 @@
-import react__default, { ComponentProps } from 'react';
-import { Button } from '../button.mjs';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import react__default from 'react';
 
-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>;
+declare const LiquidToggle: react__default.ComponentType<{}>;
+declare const ThemeToggle: react__default.ComponentType<{}>;
 
 export { LiquidToggle, ThemeToggle };

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

@@ -1,11 +1,6 @@
-import react__default, { ComponentProps } from 'react';
-import { Button } from '../button.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import react__default from 'react';
 
-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>;
+declare const LiquidToggle: react__default.ComponentType<{}>;
+declare const ThemeToggle: react__default.ComponentType<{}>;
 
 export { LiquidToggle, ThemeToggle };

package/dist/ui/theme/ThemeToggles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWWJYQ2DN_js = require('../../chunk-WWJYQ2DN.js');
+var chunkHKWVLJ7G_js = require('../../chunk-HKWVLJ7G.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 chunkWWJYQ2DN_js.LiquidToggle; }
+  get: function () { return chunkHKWVLJ7G_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
+  get: function () { return chunkHKWVLJ7G_js.ThemeToggle; }
 });

package/dist/ui/theme/ThemeToggles.mjs

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

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

@@ -4,6 +4,3 @@ 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,6 +4,3 @@ 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 chunkWWJYQ2DN_js = require('../../chunk-WWJYQ2DN.js');
+var chunkHKWVLJ7G_js = require('../../chunk-HKWVLJ7G.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 chunkWWJYQ2DN_js.LiquidToggle; }
+  get: function () { return chunkHKWVLJ7G_js.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkWWJYQ2DN_js.ThemeToggle; }
+  get: function () { return chunkHKWVLJ7G_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-6UBBRJGO.mjs';
+export { LiquidToggle, ThemeToggle } from '../../chunk-5ZAPRYIX.mjs';
 export { ThemeProvider, useTheme } from '../../chunk-DCSGUVTI.mjs';
 export { ThemeScript } from '../../chunk-NSI47INE.mjs';
 import '../../chunk-TCN3UDQE.mjs';

package/dist/ui/timeline.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkWEHNW5KY_js = require('../chunk-WEHNW5KY.js');
-require('../chunk-YNKO5FOU.js');
+var chunkL3SCK2WT_js = require('../chunk-L3SCK2WT.js');
+require('../chunk-VWYDSID4.js');
 require('../chunk-ER6XHUS7.js');
 require('../chunk-UBVYEZI3.js');
 require('../chunk-W3APG27Q.js');
@@ -15,5 +15,5 @@ require('../chunk-7KYAICHB.js');
 
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkWEHNW5KY_js.Timeline; }
+  get: function () { return chunkL3SCK2WT_js.Timeline; }
 });

package/dist/ui/timeline.mjs

@@ -1,5 +1,5 @@
-export { Timeline } from '../chunk-PDXJXH4A.mjs';
-import '../chunk-VSYSYSVQ.mjs';
+export { Timeline } from '../chunk-ECWK3POQ.mjs';
+import '../chunk-HJMRCBDG.mjs';
 import '../chunk-TCN3UDQE.mjs';
 import '../chunk-AYKQVWMR.mjs';
 import '../chunk-PR4VD5F2.mjs';

package/dist/ui/tree-view-v2.d.mts

@@ -10,6 +10,7 @@ type TreeDataItem = {
     label: string;
     isCollapsible?: boolean;
     actions?: ReactNode;
+    disable?: boolean;
     [key: string]: unknown;
 };
 /**
@@ -29,11 +30,12 @@ type TreeViewProps<T extends TreeDataItem> = {
     isSelectable?: boolean;
     selectedItemId?: string | null;
     onSelectChange?: (id: string | null) => void;
+    isSearchable?: boolean;
 };
 /**
  * Filterable and highlightable tree view with keyboardless interactions.
  * Supports search (plain or regex), hover highlights, and collapsible nodes.
  */
-declare function TreeView<T extends TreeDataItem>({ data, getIcon, onVisibleDataChange, onItemHover, className, hoveredId, isSelectable, selectedItemId, onSelectChange, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
+declare function TreeView<T extends TreeDataItem>({ data, getIcon, onVisibleDataChange, onItemHover, className, hoveredId, isSelectable, selectedItemId, onSelectChange, isSearchable, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
 
 export { type TreeDataItem as TreeDataItemV2, TreeView as TreeViewV2 };

package/dist/ui/tree-view-v2.d.ts

@@ -10,6 +10,7 @@ type TreeDataItem = {
     label: string;
     isCollapsible?: boolean;
     actions?: ReactNode;
+    disable?: boolean;
     [key: string]: unknown;
 };
 /**
@@ -29,11 +30,12 @@ type TreeViewProps<T extends TreeDataItem> = {
     isSelectable?: boolean;
     selectedItemId?: string | null;
     onSelectChange?: (id: string | null) => void;
+    isSearchable?: boolean;
 };
 /**
  * Filterable and highlightable tree view with keyboardless interactions.
  * Supports search (plain or regex), hover highlights, and collapsible nodes.
  */
-declare function TreeView<T extends TreeDataItem>({ data, getIcon, onVisibleDataChange, onItemHover, className, hoveredId, isSelectable, selectedItemId, onSelectChange, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
+declare function TreeView<T extends TreeDataItem>({ data, getIcon, onVisibleDataChange, onItemHover, className, hoveredId, isSelectable, selectedItemId, onSelectChange, isSearchable, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
 
 export { type TreeDataItem as TreeDataItemV2, TreeView as TreeViewV2 };

package/dist/ui/tree-view-v2.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkYNKO5FOU_js = require('../chunk-YNKO5FOU.js');
+var chunkVWYDSID4_js = require('../chunk-VWYDSID4.js');
 require('../chunk-ER6XHUS7.js');
 require('../chunk-UBVYEZI3.js');
 require('../chunk-W3APG27Q.js');
@@ -14,5 +14,5 @@ require('../chunk-7KYAICHB.js');
 
 Object.defineProperty(exports, "TreeViewV2", {
   enumerable: true,
-  get: function () { return chunkYNKO5FOU_js.TreeView; }
+  get: function () { return chunkVWYDSID4_js.TreeView; }
 });

package/dist/ui/tree-view-v2.mjs

@@ -1,4 +1,4 @@
-export { TreeView as TreeViewV2 } from '../chunk-VSYSYSVQ.mjs';
+export { TreeView as TreeViewV2 } from '../chunk-HJMRCBDG.mjs';
 import '../chunk-TCN3UDQE.mjs';
 import '../chunk-AYKQVWMR.mjs';
 import '../chunk-PR4VD5F2.mjs';

package/dist/ui/version-badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkHS3WEBRT_js = require('../chunk-HS3WEBRT.js');
+var chunk2HAD7VLJ_js = require('../chunk-2HAD7VLJ.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 chunkHS3WEBRT_js.VersionBadge; }
+  get: function () { return chunk2HAD7VLJ_js.VersionBadge; }
 });

package/dist/ui/version-badge.mjs

@@ -1,4 +1,4 @@
-export { VersionBadge } from '../chunk-F43NGNKR.mjs';
+export { VersionBadge } from '../chunk-VSGVRZLH.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.51",
+  "version": "0.0.52",
   "description": "React UI Kit components",
   "keywords": [
     "react",

package/src/ui/theme/ThemeToggles.tsx

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

package/src/ui/tree-view-v2.tsx

@@ -13,6 +13,7 @@ type TreeDataItem = {
   label: string;
   isCollapsible?: boolean;
   actions?: ReactNode;
+  disable?: boolean;
   [key: string]: unknown;
 };
 
@@ -29,6 +30,7 @@ type TreeViewProps<T extends TreeDataItem> = {
   isSelectable?: boolean;
   selectedItemId?: string | null;
   onSelectChange?: (id: string | null) => void;
+  isSearchable?: boolean;
 };
 
 /**
@@ -45,6 +47,7 @@ function TreeView<T extends TreeDataItem>({
   isSelectable = false,
   selectedItemId,
   onSelectChange,
+  isSearchable = true,
 }: TreeViewProps<T>) {
   const [expandedItems, setExpandedItems] = useState(() => {
     const initial = new Set<string>();
@@ -201,59 +204,62 @@ function TreeView<T extends TreeDataItem>({
 
   return (
     <div className={cn("border-line-secondary/20 flex flex-col", className)}>
-      <div className="border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2">
-        <Search className="text-text-secondary size-4" />
-        <input
-          type="text"
-          placeholder="Search..."
-          className={cn(
-            "text-uk-md w-full bg-transparent focus:outline-none",
-            !isRegexValid && "text-red-500",
-          )}
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => setIsCaseSensitive((prev) => !prev)}
-                className={cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary")}
-              >
-                <CaseSensitive className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Case Sensitive</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => setIsRegex((prev) => !prev)}
-                className={cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary")}
-              >
-                <Regex className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Use Regular Expression</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      {isSearchable && (
+        <div className="border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2">
+          <Search className="text-text-secondary size-4" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className={cn(
+              "text-uk-md w-full bg-transparent focus:outline-none",
+              !isRegexValid && "text-red-500",
+            )}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setIsCaseSensitive((prev) => !prev)}
+                  className={cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary")}
+                >
+                  <CaseSensitive className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Case Sensitive</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setIsRegex((prev) => !prev)}
+                  className={cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary")}
+                >
+                  <Regex className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Use Regular Expression</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      )}
       <div className="overflow-y-auto">
         {visibleData.map((item) => (
           <div
             key={item.id}
             className={cn(
-              "group relative flex h-[32px] cursor-pointer items-center",
-              hoveredId === item.id && "bg-bg-secondary/80",
-              isSelectable && selectedItemId === item.id && "bg-brand-primary",
+              "group relative flex h-[32px] items-center",
+              !item.disable && "cursor-pointer",
+              hoveredId === item.id && !item.disable && "bg-bg-secondary",
+              isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg",
             )}
-            onMouseEnter={() => onItemHover?.(item.id)}
-            onMouseLeave={() => onItemHover?.(null)}
-            onClick={() => handleItemSelect(item.id)}
+            onMouseEnter={() => !item.disable && onItemHover?.(item.id)}
+            onMouseLeave={() => !item.disable && onItemHover?.(null)}
+            onClick={() => !item.disable && handleItemSelect(item.id)}
           >
             {/* Guide Lines */}
             <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
@@ -304,6 +310,7 @@ function TreeView<T extends TreeDataItem>({
                         className={cn(
                           "size-4 transition-transform",
                           !expandedItems.has(item.id) && "-rotate-90",
+                          item.disable && "text-icon-tertiary",
                         )}
                       />
                     </button>
@@ -312,12 +319,15 @@ function TreeView<T extends TreeDataItem>({
                     className={cn(
                       "cursor-pointer transition-opacity",
                       item.isCollapsible && "group-hover:opacity-0",
+                      item.disable && "text-icon-tertiary",
                     )}
                   >
                     {getIcon(item)}
                   </div>
                 </div>
-                <span className="truncate">{renderLabel(item.label)}</span>
+                <span className={cn("truncate", item.disable && "text-text-tertiary")}>
+                  {renderLabel(item.label)}
+                </span>
               </div>
               {item.actions && (
                 <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>