@vuer-ai/vuer-uikit 0.0.5 → 0.0.11

package/README.md

@@ -1,5 +1,7 @@
 # vuer-uikit
 
+**Documentation & Examples**: [uikit.vuer.ai](https://uikit.vuer.ai)
+
 ## Installation
 
 Getting up and running is quick and easy.

package/dist/{chunk-6TYLO2AU.js → chunk-2YCL2ET2.js}

@@ -111,7 +111,7 @@ var TreeView = react.forwardRef(
       "div",
       {
         className: chunkXXWQ4RVP_js.cn(
-          "bg-bg-primary relative min-w-[240px] max-w-[300px] overflow-hidden p-2",
+          "bg-bg-primary rounded-uk-md relative max-w-[300px] min-w-[240px] overflow-hidden p-2",
           className
         ),
         "data-tree-container": true,
@@ -119,7 +119,7 @@ var TreeView = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "bg-bg-tertiary rounded-uk-sm pointer-events-none absolute left-2 right-2 z-10 transition-all duration-150",
+              className: "bg-bg-tertiary rounded-uk-sm pointer-events-none absolute right-2 left-2 z-10 transition-all duration-150",
               style: {
                 display: hoverBackgroundStyle.display,
                 top: hoverBackgroundStyle.top,
@@ -401,7 +401,7 @@ var AccordionContent = react.forwardRef(({ className, children, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-0 pt-0", children })
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-0 pb-0", children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;

package/dist/{chunk-735HE3BG.js → chunk-5SR53QBZ.js}

@@ -36,7 +36,7 @@ function SheetClose({ ...props }) {
     SheetPrimitive__namespace.Close,
     {
       "data-slot": "sheet-close",
-      className: chunkXXWQ4RVP_js.cn("focus:outline-none focus:ring-0"),
+      className: chunkXXWQ4RVP_js.cn("focus:ring-0 focus:outline-none"),
       ...props
     }
   );
@@ -80,7 +80,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.Close, { className: "text-icon-primary hover:text-icon-highlight absolute right-4 top-4 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.Close, { className: "text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })

package/dist/{chunk-VMPVNLEN.js → chunk-66DYOZI3.js}

@@ -107,7 +107,7 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
     {
       ref,
       ...bind(),
-      className: chunkXXWQ4RVP_js.cn("gap-xs flex cursor-crosshair touch-none select-none flex-col"),
+      className: chunkXXWQ4RVP_js.cn("gap-xs flex cursor-crosshair touch-none flex-col select-none"),
       children: value.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         chunkSKO72K64_js.InputRoot,
         {

package/dist/{chunk-4IU7VY4X.js → chunk-6N5422RT.js}

@@ -80,7 +80,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
           {
             key: index,
             className: chunkXXWQ4RVP_js.cn(
-              `ring-background relative ring-2 z-[${zIndex}] hover:scale-120 transition-all duration-200 ease-in-out hover:z-[100]`,
+              `ring-background relative ring-2 z-[${zIndex}] transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
               (_a = child.props) == null ? void 0 : _a.className
             )
           }
@@ -92,7 +92,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
       Avatar,
       {
         className: chunkXXWQ4RVP_js.cn(
-          "ring-background hover:scale-120 relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100]",
+          "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
           `z-[${30 - displayChildren.length}]`
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarFallback, { children: [

package/dist/{chunk-RX22QM5B.mjs → chunk-7X6N54LX.mjs}

@@ -105,7 +105,7 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
     {
       ref,
       ...bind(),
-      className: cn("gap-xs flex cursor-crosshair touch-none select-none flex-col"),
+      className: cn("gap-xs flex cursor-crosshair touch-none flex-col select-none"),
       children: value.map((item, index) => /* @__PURE__ */ jsx(
         InputRoot,
         {

package/dist/chunk-CCGUGCCV.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var chunkMZ4POL3U_js = require('./chunk-MZ4POL3U.js');
+var chunk5MZCQW4U_js = require('./chunk-5MZCQW4U.js');
+var chunk5OUTEHVX_js = require('./chunk-5OUTEHVX.js');
+var chunkSKO72K64_js = require('./chunk-SKO72K64.js');
+var chunkZJXBC33M_js = require('./chunk-ZJXBC33M.js');
+var chunkQA7H2Z3Z_js = require('./chunk-QA7H2Z3Z.js');
+
+// src/highlight-cursor/enhanced-components.tsx
+var CursorButton = chunkZJXBC33M_js.withCursor(chunkQA7H2Z3Z_js.Button);
+var CursorTabs = chunkZJXBC33M_js.withCursor(chunk5MZCQW4U_js.Tabs);
+var CursorInputRoot = chunkZJXBC33M_js.withCursor(chunkSKO72K64_js.InputRoot);
+var CursorSelectTrigger = chunkZJXBC33M_js.withCursor(chunkMZ4POL3U_js.SelectTrigger);
+var CursorTextarea = chunkZJXBC33M_js.withCursor(chunk5OUTEHVX_js.Textarea);
+
+exports.CursorButton = CursorButton;
+exports.CursorInputRoot = CursorInputRoot;
+exports.CursorSelectTrigger = CursorSelectTrigger;
+exports.CursorTabs = CursorTabs;
+exports.CursorTextarea = CursorTextarea;

package/dist/{chunk-U276W75T.mjs → chunk-DZ4J7I7I.mjs}

@@ -14,7 +14,7 @@ function SheetClose({ ...props }) {
     SheetPrimitive.Close,
     {
       "data-slot": "sheet-close",
-      className: cn("focus:outline-none focus:ring-0"),
+      className: cn("focus:ring-0 focus:outline-none"),
       ...props
     }
   );
@@ -58,7 +58,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "text-icon-primary hover:text-icon-highlight absolute right-4 top-4 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })

package/dist/{chunk-D4C5V4EN.mjs → chunk-E5KWKBH3.mjs}

@@ -14,17 +14,22 @@ function ThemeProvider({
   ...props
 }) {
   const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
     return localStorage.getItem(storageKey) || defaultTheme;
   });
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const root = window.document.documentElement;
     root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    root.removeAttribute("data-theme");
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       root.classList.add(systemTheme);
+      root.setAttribute("data-theme", "auto");
       return;
     }
     root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ jsx(
     ThemeProviderContext.Provider,
@@ -34,7 +39,9 @@ function ThemeProvider({
         () => ({
           theme,
           setTheme: (theme2) => {
-            localStorage.setItem(storageKey, theme2);
+            if (typeof window !== "undefined") {
+              localStorage.setItem(storageKey, theme2);
+            }
             setTheme(theme2);
           }
         }),

package/dist/{chunk-4PAHMURP.js → chunk-EFIRD3FN.js}

@@ -32,7 +32,8 @@ var badgeVariants = classVarianceAuthority.cva(
         secondary: "bg-bg-secondary",
         destructive: "bg-danger-primary",
         success: "bg-accent-success",
-        warning: "bg-accent-warning"
+        warning: "bg-accent-warning",
+        accent: "bg-accent-primary text-text-primary"
       },
       type: {
         default: "",

package/dist/{chunk-34L2NURS.mjs → chunk-F776EMXP.mjs}

@@ -55,7 +55,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
           {
             key: index,
             className: cn(
-              `ring-background relative ring-2 z-[${zIndex}] hover:scale-120 transition-all duration-200 ease-in-out hover:z-[100]`,
+              `ring-background relative ring-2 z-[${zIndex}] transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
               (_a = child.props) == null ? void 0 : _a.className
             )
           }
@@ -67,7 +67,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }) {
       Avatar,
       {
         className: cn(
-          "ring-background hover:scale-120 relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100]",
+          "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
           `z-[${30 - displayChildren.length}]`
         ),
         children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [

package/dist/{chunk-75QDQ67T.js → chunk-FSMKJAZT.js}

@@ -16,17 +16,22 @@ function ThemeProvider({
   ...props
 }) {
   const [theme, setTheme] = react.useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
     return localStorage.getItem(storageKey) || defaultTheme;
   });
   react.useEffect(() => {
+    if (typeof window === "undefined") return;
     const root = window.document.documentElement;
     root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    root.removeAttribute("data-theme");
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       root.classList.add(systemTheme);
+      root.setAttribute("data-theme", "auto");
       return;
     }
     root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ThemeProviderContext.Provider,
@@ -36,7 +41,9 @@ function ThemeProvider({
         () => ({
           theme,
           setTheme: (theme2) => {
-            localStorage.setItem(storageKey, theme2);
+            if (typeof window !== "undefined") {
+              localStorage.setItem(storageKey, theme2);
+            }
             setTheme(theme2);
           }
         }),

package/dist/{chunk-QD7TNSTX.js → chunk-IOI3YFTY.js}

@@ -183,7 +183,7 @@ function TreeView({
         onMouseEnter: () => onItemHover == null ? void 0 : onItemHover(item.id),
         onMouseLeave: () => onItemHover == null ? void 0 : onItemHover(null),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-[-0.28rem] top-0 z-0 flex h-full items-center", 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) => {
               var _a;
               const parentIsLast = (_a = dataWithMeta.find((d) => d.id === ancestor.id)) == null ? void 0 : _a.isLast;
@@ -204,19 +204,19 @@ function TreeView({
                 "div",
                 {
                   className: chunkXXWQ4RVP_js.cn(
-                    "absolute left-0 top-0 h-1/2 w-1/2 border-b border-l",
+                    "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
                     item.isLast ? "rounded-bl-md" : "",
                     "border-line-secondary/20"
                   )
                 }
               ),
-              !item.isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-line-secondary/20 absolute left-0 top-1/2 h-1/2 w-1/2 border-l" })
+              !item.isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-line-secondary/20 absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "text-uk-md z-10 flex w-full items-center gap-2 whitespace-nowrap px-2",
+              className: "text-uk-md z-10 flex w-full items-center gap-2 px-2 whitespace-nowrap",
               style: { paddingLeft: `${item.indent * 1.25 + 0.5}rem` },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
@@ -224,7 +224,7 @@ function TreeView({
                     "button",
                     {
                       onClick: () => toggleItem(item.id),
-                      className: "absolute inset-0 z-20 opacity-0 transition-opacity group-hover:opacity-100",
+                      className: "absolute z-20 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         lucideReact.ChevronDown,
                         {

package/dist/{chunk-GI5ZA3AG.js → chunk-KQAHAGUG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQD7TNSTX_js = require('./chunk-QD7TNSTX.js');
+var chunkIOI3YFTY_js = require('./chunk-IOI3YFTY.js');
 var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
 var lucideReact = require('lucide-react');
 var React = require('react');
@@ -276,7 +276,7 @@ function Timeline({ data, totalDuration, getIcon }) {
   }, [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-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkQD7TNSTX_js.TreeView,
+      chunkIOI3YFTY_js.TreeView,
       {
         data,
         getIcon,
@@ -366,7 +366,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "div",
                             {
                               className: chunkXXWQ4RVP_js.cn(
-                                "absolute left-0 top-1/2 h-2 w-px -translate-y-1/2",
+                                "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
                                 colorClasses[item.color]
                               )
                             }
@@ -384,7 +384,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "div",
                             {
                               className: chunkXXWQ4RVP_js.cn(
-                                "absolute right-0 top-1/2 h-2 w-px -translate-y-1/2",
+                                "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
                                 colorClasses[item.color]
                               )
                             }
@@ -425,7 +425,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "span",
                             {
                               className: chunkXXWQ4RVP_js.cn(
-                                "text-uk-sm whitespace-nowrap font-medium",
+                                "text-uk-sm font-medium whitespace-nowrap",
                                 item.color === "gray-light" || item.color === "gray-medium" ? "text-slate-600 dark:text-slate-300" : "text-text-highlight"
                               ),
                               children: formatDuration(item.duration)
@@ -455,9 +455,9 @@ function Timeline({ data, totalDuration, getIcon }) {
                           width: `${item.duration / viewDuration * 100}%`
                         },
                         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute left-0 top-1/2 h-2 w-px -translate-y-1/2" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" }),
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-line-secondary w-full border-t border-dashed" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute right-0 top-1/2 h-2 w-px -translate-y-1/2" })
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" })
                         ] })
                       }
                     ),
@@ -476,7 +476,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             left: `${timeToPercent(visibleStart)}%`,
                             width: `${visibleWidthPercent}%`
                           },
-                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-highlight text-uk-sm flex h-5 items-center whitespace-nowrap rounded-full bg-orange-500/85 px-2 font-medium", children: formatDuration(item.duration) })
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-highlight text-uk-sm flex h-5 items-center rounded-full bg-orange-500/85 px-2 font-medium whitespace-nowrap", children: formatDuration(item.duration) })
                         }
                       );
                     })(),
@@ -495,7 +495,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                 item.id
               );
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
               const barEnd = item.startTime !== void 0 && item.duration !== void 0 ? item.startTime + item.duration : void 0;
               const isOffscreenLeft = barEnd !== void 0 && barEnd < viewStart || item.time !== void 0 && item.time < viewStart;
               if (isOffscreenLeft && item.color) {
@@ -516,7 +516,7 @@ function Timeline({ data, totalDuration, getIcon }) {
               }
               return null;
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute right-0 top-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 right-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
               const barStart = item.startTime;
               const viewEnd = viewStart + viewDuration;
               const isOffscreenRight = barStart !== void 0 && barStart > viewEnd || item.time !== void 0 && item.time > viewEnd;
@@ -542,7 +542,7 @@ function Timeline({ data, totalDuration, getIcon }) {
               "div",
               {
                 ref: cursorContainerRef,
-                className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-full opacity-0 transition-opacity duration-150",
+                className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-full opacity-0 transition-opacity duration-150",
                 style: {
                   "--cursor-left": "0%",
                   "--readout-text": '""',
@@ -559,7 +559,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
-                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center whitespace-nowrap border px-2 py-0.5 shadow-lg",
+                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-lg",
                       style: {
                         left: "var(--cursor-left)",
                         transform: "translateX(-50%)",

package/dist/chunk-M4TZHOUK.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var chunkEFIRD3FN_js = require('./chunk-EFIRD3FN.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PACKAGE_VERSION = "0.0.11";
+var PACKAGE_NAME = "@vuer-ai/vuer-uikit";
+function VersionBadge({
+  className,
+  showPrefix = true,
+  linkable = true,
+  version: overrideVersion
+}) {
+  const currentVersion = overrideVersion || PACKAGE_VERSION;
+  const displayVersion = showPrefix ? `v${currentVersion}` : currentVersion;
+  const npmUrl = `https://www.npmjs.com/package/${PACKAGE_NAME}/v/${currentVersion}`;
+  const badge = /* @__PURE__ */ jsxRuntime.jsx(
+    chunkEFIRD3FN_js.Badge,
+    {
+      variant: "accent",
+      className,
+      style: linkable ? { cursor: "pointer" } : void 0,
+      children: displayVersion
+    }
+  );
+  if (linkable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: npmUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "no-underline hover:no-underline",
+        children: badge
+      }
+    );
+  }
+  return badge;
+}
+
+exports.VersionBadge = VersionBadge;

package/dist/{chunk-XU3E2EDQ.mjs → chunk-O4TK3AKI.mjs}

@@ -181,7 +181,7 @@ function TreeView({
         onMouseEnter: () => onItemHover == null ? void 0 : onItemHover(item.id),
         onMouseLeave: () => onItemHover == null ? void 0 : onItemHover(null),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "absolute left-[-0.28rem] top-0 z-0 flex h-full items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
             item.ancestors.map((ancestor, index) => {
               var _a;
               const parentIsLast = (_a = dataWithMeta.find((d) => d.id === ancestor.id)) == null ? void 0 : _a.isLast;
@@ -202,19 +202,19 @@ function TreeView({
                 "div",
                 {
                   className: cn(
-                    "absolute left-0 top-0 h-1/2 w-1/2 border-b border-l",
+                    "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
                     item.isLast ? "rounded-bl-md" : "",
                     "border-line-secondary/20"
                   )
                 }
               ),
-              !item.isLast && /* @__PURE__ */ jsx("div", { className: "border-line-secondary/20 absolute left-0 top-1/2 h-1/2 w-1/2 border-l" })
+              !item.isLast && /* @__PURE__ */ jsx("div", { className: "border-line-secondary/20 absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "text-uk-md z-10 flex w-full items-center gap-2 whitespace-nowrap px-2",
+              className: "text-uk-md z-10 flex w-full items-center gap-2 px-2 whitespace-nowrap",
               style: { paddingLeft: `${item.indent * 1.25 + 0.5}rem` },
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
@@ -222,7 +222,7 @@ function TreeView({
                     "button",
                     {
                       onClick: () => toggleItem(item.id),
-                      className: "absolute inset-0 z-20 opacity-0 transition-opacity group-hover:opacity-100",
+                      className: "absolute z-20 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
                       children: /* @__PURE__ */ jsx(
                         ChevronDown,
                         {

package/dist/chunk-T3WBC5YK.mjs

@@ -0,0 +1,39 @@
+import { Badge } from './chunk-WO3WHXDP.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var PACKAGE_VERSION = "0.0.11";
+var PACKAGE_NAME = "@vuer-ai/vuer-uikit";
+function VersionBadge({
+  className,
+  showPrefix = true,
+  linkable = true,
+  version: overrideVersion
+}) {
+  const currentVersion = overrideVersion || PACKAGE_VERSION;
+  const displayVersion = showPrefix ? `v${currentVersion}` : currentVersion;
+  const npmUrl = `https://www.npmjs.com/package/${PACKAGE_NAME}/v/${currentVersion}`;
+  const badge = /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: "accent",
+      className,
+      style: linkable ? { cursor: "pointer" } : void 0,
+      children: displayVersion
+    }
+  );
+  if (linkable) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: npmUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "no-underline hover:no-underline",
+        children: badge
+      }
+    );
+  }
+  return badge;
+}
+
+export { VersionBadge };

package/dist/{chunk-LWFIF2HF.mjs → chunk-UKFVRXAR.mjs}

@@ -89,7 +89,7 @@ var TreeView = forwardRef(
       "div",
       {
         className: cn(
-          "bg-bg-primary relative min-w-[240px] max-w-[300px] overflow-hidden p-2",
+          "bg-bg-primary rounded-uk-md relative max-w-[300px] min-w-[240px] overflow-hidden p-2",
           className
         ),
         "data-tree-container": true,
@@ -97,7 +97,7 @@ var TreeView = forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "bg-bg-tertiary rounded-uk-sm pointer-events-none absolute left-2 right-2 z-10 transition-all duration-150",
+              className: "bg-bg-tertiary rounded-uk-sm pointer-events-none absolute right-2 left-2 z-10 transition-all duration-150",
               style: {
                 display: hoverBackgroundStyle.display,
                 top: hoverBackgroundStyle.top,
@@ -379,7 +379,7 @@ var AccordionContent = forwardRef(({ className, children, ...props }, ref) => /*
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "pb-0 pt-0", children })
+    children: /* @__PURE__ */ jsx("div", { className: "pt-0 pb-0", children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;

package/dist/{chunk-SP3DH5MP.mjs → chunk-WO3WHXDP.mjs}

@@ -30,7 +30,8 @@ var badgeVariants = cva(
         secondary: "bg-bg-secondary",
         destructive: "bg-danger-primary",
         success: "bg-accent-success",
-        warning: "bg-accent-warning"
+        warning: "bg-accent-warning",
+        accent: "bg-accent-primary text-text-primary"
       },
       type: {
         default: "",

package/dist/{chunk-AWWKK6AT.mjs → chunk-XCCC7HVN.mjs}

@@ -1,4 +1,4 @@
-import { TreeView } from './chunk-XU3E2EDQ.mjs';
+import { TreeView } from './chunk-O4TK3AKI.mjs';
 import { cn } from './chunk-KTNZSZ5Y.mjs';
 import { Magnet, ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
@@ -360,7 +360,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "div",
                             {
                               className: cn(
-                                "absolute left-0 top-1/2 h-2 w-px -translate-y-1/2",
+                                "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
                                 colorClasses[item.color]
                               )
                             }
@@ -378,7 +378,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "div",
                             {
                               className: cn(
-                                "absolute right-0 top-1/2 h-2 w-px -translate-y-1/2",
+                                "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
                                 colorClasses[item.color]
                               )
                             }
@@ -419,7 +419,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             "span",
                             {
                               className: cn(
-                                "text-uk-sm whitespace-nowrap font-medium",
+                                "text-uk-sm font-medium whitespace-nowrap",
                                 item.color === "gray-light" || item.color === "gray-medium" ? "text-slate-600 dark:text-slate-300" : "text-text-highlight"
                               ),
                               children: formatDuration(item.duration)
@@ -449,9 +449,9 @@ function Timeline({ data, totalDuration, getIcon }) {
                           width: `${item.duration / viewDuration * 100}%`
                         },
                         children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
-                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute left-0 top-1/2 h-2 w-px -translate-y-1/2" }),
+                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" }),
                           /* @__PURE__ */ jsx("div", { className: "border-line-secondary w-full border-t border-dashed" }),
-                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute right-0 top-1/2 h-2 w-px -translate-y-1/2" })
+                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" })
                         ] })
                       }
                     ),
@@ -470,7 +470,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                             left: `${timeToPercent(visibleStart)}%`,
                             width: `${visibleWidthPercent}%`
                           },
-                          children: /* @__PURE__ */ jsx("div", { className: "text-text-highlight text-uk-sm flex h-5 items-center whitespace-nowrap rounded-full bg-orange-500/85 px-2 font-medium", children: formatDuration(item.duration) })
+                          children: /* @__PURE__ */ jsx("div", { className: "text-text-highlight text-uk-sm flex h-5 items-center rounded-full bg-orange-500/85 px-2 font-medium whitespace-nowrap", children: formatDuration(item.duration) })
                         }
                       );
                     })(),
@@ -489,7 +489,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                 item.id
               );
             }) }),
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
               const barEnd = item.startTime !== void 0 && item.duration !== void 0 ? item.startTime + item.duration : void 0;
               const isOffscreenLeft = barEnd !== void 0 && barEnd < viewStart || item.time !== void 0 && item.time < viewStart;
               if (isOffscreenLeft && item.color) {
@@ -510,7 +510,7 @@ function Timeline({ data, totalDuration, getIcon }) {
               }
               return null;
             }) }),
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 top-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 right-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
               const barStart = item.startTime;
               const viewEnd = viewStart + viewDuration;
               const isOffscreenRight = barStart !== void 0 && barStart > viewEnd || item.time !== void 0 && item.time > viewEnd;
@@ -536,7 +536,7 @@ function Timeline({ data, totalDuration, getIcon }) {
               "div",
               {
                 ref: cursorContainerRef,
-                className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-full opacity-0 transition-opacity duration-150",
+                className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-full opacity-0 transition-opacity duration-150",
                 style: {
                   "--cursor-left": "0%",
                   "--readout-text": '""',
@@ -553,7 +553,7 @@ function Timeline({ data, totalDuration, getIcon }) {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center whitespace-nowrap border px-2 py-0.5 shadow-lg",
+                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-lg",
                       style: {
                         left: "var(--cursor-left)",
                         transform: "translateX(-50%)",