@vuer-ai/vuer-uikit 0.0.52 → 0.0.54

package/dist/{chunk-L3SCK2WT.js → chunk-5EUKKR3Z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkVWYDSID4_js = require('./chunk-VWYDSID4.js');
+var chunkPONCZ3TF_js = require('./chunk-PONCZ3TF.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(
-      chunkVWYDSID4_js.TreeView,
+      chunkPONCZ3TF_js.TreeView,
       {
         data,
         getIcon,

package/dist/{chunk-VSGVRZLH.mjs → chunk-5NWUT5QH.mjs}

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

package/dist/chunk-6M5BGKUO.mjs

@@ -0,0 +1,200 @@
+import { createClientOnlyComponent } from './chunk-4F2GSF2T.mjs';
+import { cn } from './chunk-WM2VP7MI.mjs';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var toggleGroupVariants = cva(
+  [
+    // Base button styling
+    "inline-flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "font-normal",
+    "transition-all",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-accent",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive",
+    // Toggle group specific styling
+    "min-w-0",
+    "flex-1",
+    "rounded-none",
+    "first:rounded-l-uk-sm",
+    "first:rounded-r-none",
+    "last:rounded-r-uk-sm",
+    "last:rounded-l-none",
+    "[&:not(:first-child):not(:last-child)]:rounded-none",
+    "focus:z-10",
+    "focus-visible:z-10",
+    // Disabled state
+    "disabled:pointer-events-none",
+    "disabled:text-text-secondary/30"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-secondary",
+          "bg-bg-tertiary",
+          "hover:bg-secondary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-brand-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--secondary),inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--secondary)]"
+        ],
+        secondary: [
+          "text-text-secondary",
+          "bg-bg-secondary",
+          "hover:bg-tertiary",
+          "border-solid border border-transparent -mr-[1px]",
+          "data-[state=on]:text-secondary-foreground",
+          "data-[state=on]:bg-bg-primary",
+          "data-[state=on]:border-line-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]"
+        ],
+        ghost: [
+          "bg-bg-primary",
+          "hover:bg-tertiary",
+          "text-text-secondary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-text-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--muted)]"
+        ]
+      },
+      size: {
+        sm: ["text-uk-sm", "h-6", "gap-xxs", "px-md", "[&_svg:not([class*='size-'])]:size-3"],
+        base: ["text-uk-md", "h-8", "gap-xs", "px-lg", "[&_svg:not([class*='size-'])]:size-4"],
+        lg: ["text-uk-lg", "h-9", "gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-5"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base"
+    }
+  }
+);
+var ToggleGroupContext = createContext({
+  size: "base",
+  variant: "primary"
+});
+function ToggleGroupRoot({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group",
+        "flex",
+        "w-fit",
+        "items-center",
+        "rounded-uk-md",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupFallback({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group",
+        "flex",
+        "w-fit",
+        "items-center",
+        "rounded-uk-md",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+var ToggleGroup = createClientOnlyComponent(ToggleGroupRoot, ToggleGroupFallback);
+function ToggleGroupItemRoot({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleGroupVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function ToggleGroupItemFallback({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleGroupVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var ToggleGroupItem = createClientOnlyComponent(ToggleGroupItemRoot, ToggleGroupItemFallback);
+
+export { ToggleGroup, ToggleGroupItem, toggleGroupVariants };

package/dist/{chunk-HJMRCBDG.mjs → chunk-6Y3BHHH7.mjs}

@@ -185,12 +185,13 @@ function TreeView({
       {
         className: cn(
           "group relative flex h-[32px] items-center",
+          isSelectable && "rounded-uk-md",
           !item.disable && "cursor-pointer",
           hoveredId === item.id && !item.disable && "bg-bg-secondary",
           isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
         ),
-        onMouseEnter: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(item.id)),
-        onMouseLeave: () => !item.disable && (onItemHover == null ? void 0 : onItemHover(null)),
+        onMouseEnter: () => onItemHover == null ? void 0 : onItemHover(item.id),
+        onMouseLeave: () => 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: [

package/dist/chunk-BX7MGCJP.mjs

@@ -0,0 +1,241 @@
+import { cn } from './chunk-WM2VP7MI.mjs';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var toggleButtonsVariants = cva(
+  ["rounded-uk-md", "relative", "inline-flex", "items-center"],
+  {
+    variants: {
+      variant: {
+        primary: "bg-bg-secondary",
+        secondary: "bg-bg-secondary",
+        ghost: "bg-transparent"
+      },
+      padding: {
+        true: "p-xs",
+        false: "p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      padding: true
+    }
+  }
+);
+var toggleButtonHighlightVariants = cva(
+  ["pointer-events-none", "absolute", "transition-all", "duration-200", "ease-out"],
+  {
+    variants: {
+      variant: {
+        primary: ["bg-brand-primary", "shadow-sm", "rounded-uk-sm"],
+        secondary: ["bg-bg-primary", "shadow-sm", "rounded-uk-sm"],
+        ghost: ["bg-bg-primary", "shadow-sm", "rounded-uk-md"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var toggleButtonVariants = cva(
+  [
+    "focus-visible:ring-ring",
+    "relative",
+    "z-10",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "font-normal",
+    "whitespace-nowrap",
+    "transition-colors",
+    "focus-visible:ring-2",
+    "focus-visible:outline-none",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-primary",
+          "hover:text-text-primary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-withbg"
+        ],
+        secondary: [
+          "text-text-tertiary",
+          "hover:text-text-secondary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-primary"
+        ],
+        ghost: [
+          "text-text-tertiary",
+          "hover:text-text-secondary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-primary"
+        ]
+      },
+      size: {
+        sm: "text-uk-sm gap-xxs",
+        base: "text-uk-md gap-xs",
+        lg: "text-uk-lg gap-xs"
+      },
+      icon: {
+        false: "",
+        true: "shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none"
+      },
+      corner: {
+        sm: "rounded-uk-sm",
+        md: "rounded-uk-md"
+      }
+    },
+    compoundVariants: [
+      // Icon button sizes
+      { size: "sm", icon: false, class: "h-6 px-md" },
+      { size: "base", icon: false, class: "h-7 px-lg" },
+      { size: "lg", icon: false, class: "h-8 px-xl" },
+      { size: "sm", icon: true, class: "size-6 p-xs" },
+      { size: "base", icon: true, class: "size-8 p-sm" },
+      { size: "lg", icon: true, class: "size-9 p-md" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+      icon: false,
+      corner: "sm"
+    }
+  }
+);
+var ToggleButtonsContext = React.createContext(null);
+var ToggleButtons = React.forwardRef(
+  ({
+    value,
+    onValueChange,
+    children,
+    className,
+    size = "base",
+    padding = true,
+    variant = "primary",
+    ...props
+  }, ref) => {
+    const containerRef = React.useRef(null);
+    const [items, setItems] = React.useState(/* @__PURE__ */ new Map());
+    const [highlightStyle, setHighlightStyle] = React.useState({
+      opacity: 0
+    });
+    const registerItem = React.useCallback((itemValue, element) => {
+      setItems((prev) => new Map(prev).set(itemValue, element));
+    }, []);
+    const unregisterItem = React.useCallback((itemValue) => {
+      setItems((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(itemValue);
+        return newMap;
+      });
+    }, []);
+    React.useEffect(() => {
+      const selectedElement = items.get(value);
+      const container = containerRef.current;
+      if (selectedElement && container) {
+        const rafId = requestAnimationFrame(() => {
+          const containerRect = container.getBoundingClientRect();
+          const selectedRect = selectedElement.getBoundingClientRect();
+          const paddingOffset = padding ? 4 : 0;
+          const left = selectedRect.left - containerRect.left - paddingOffset;
+          const top = selectedRect.top - containerRect.top - paddingOffset;
+          setHighlightStyle({
+            width: selectedRect.width,
+            height: selectedRect.height,
+            transform: `translate(${left}px, ${top}px)`,
+            opacity: 1
+          });
+        });
+        return () => cancelAnimationFrame(rafId);
+      } else {
+        setHighlightStyle((prev) => ({ ...prev, opacity: 0 }));
+      }
+    }, [value, items, padding]);
+    return /* @__PURE__ */ jsx(
+      ToggleButtonsContext.Provider,
+      {
+        value: { value, onValueChange, size, variant, registerItem, unregisterItem },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (node) => {
+              containerRef.current = node;
+              if (typeof ref === "function") ref(node);
+              else if (ref) ref.current = node;
+            },
+            className: cn(toggleButtonsVariants({ variant, padding }), className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn(toggleButtonHighlightVariants({ variant })), style: highlightStyle }),
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ToggleButtons.displayName = "ToggleButtons";
+var ToggleButton = React.forwardRef(
+  ({ value, children, className, asChild = false, icon = false, size, variant, corner, ...props }, ref) => {
+    const context = React.useContext(ToggleButtonsContext);
+    const itemRef = React.useRef(null);
+    if (!context) {
+      throw new Error("ToggleButton must be used within ToggleButtons");
+    }
+    const {
+      value: selectedValue,
+      onValueChange,
+      size: contextSize,
+      variant: contextVariant,
+      registerItem,
+      unregisterItem
+    } = context;
+    const isSelected = selectedValue === value;
+    const finalSize = size ?? contextSize;
+    const finalVariant = variant ?? contextVariant;
+    const finalCorner = corner ?? (finalVariant === "ghost" ? "md" : "sm");
+    const Comp = asChild ? Slot : "button";
+    React.useEffect(() => {
+      const element = itemRef.current;
+      if (element) {
+        registerItem(value, element);
+        return () => unregisterItem(value);
+      }
+    }, [value, registerItem, unregisterItem]);
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref: (node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        ...props,
+        "data-selected": isSelected,
+        className: cn(
+          toggleButtonVariants({
+            variant: finalVariant,
+            size: finalSize,
+            icon,
+            corner: finalCorner
+          }),
+          className
+        ),
+        onClick: () => onValueChange(value),
+        type: asChild ? void 0 : "button",
+        children
+      }
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton, ToggleButtons, toggleButtonHighlightVariants, toggleButtonVariants, toggleButtonsVariants };

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

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

package/dist/{chunk-FSFUZ7Y6.js → chunk-GDW2K5OF.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkEAN5SZYQ_js = require('./chunk-EAN5SZYQ.js');
 var chunkQG7ZF6TO_js = require('./chunk-QG7ZF6TO.js');
 var chunk7KYAICHB_js = require('./chunk-7KYAICHB.js');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var classVarianceAuthority = require('class-variance-authority');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,6 +27,87 @@ function _interopNamespace(e) {
 
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 
+var toggleGroupVariants = classVarianceAuthority.cva(
+  [
+    // Base button styling
+    "inline-flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "font-normal",
+    "transition-all",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-accent",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive",
+    // Toggle group specific styling
+    "min-w-0",
+    "flex-1",
+    "rounded-none",
+    "first:rounded-l-uk-sm",
+    "first:rounded-r-none",
+    "last:rounded-r-uk-sm",
+    "last:rounded-l-none",
+    "[&:not(:first-child):not(:last-child)]:rounded-none",
+    "focus:z-10",
+    "focus-visible:z-10",
+    // Disabled state
+    "disabled:pointer-events-none",
+    "disabled:text-text-secondary/30"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-secondary",
+          "bg-bg-tertiary",
+          "hover:bg-secondary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-brand-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--secondary),inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--secondary)]"
+        ],
+        secondary: [
+          "text-text-secondary",
+          "bg-bg-secondary",
+          "hover:bg-tertiary",
+          "border-solid border border-transparent -mr-[1px]",
+          "data-[state=on]:text-secondary-foreground",
+          "data-[state=on]:bg-bg-primary",
+          "data-[state=on]:border-line-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]"
+        ],
+        ghost: [
+          "bg-bg-primary",
+          "hover:bg-tertiary",
+          "text-text-secondary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-text-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--muted)]"
+        ]
+      },
+      size: {
+        sm: ["text-uk-sm", "h-6", "gap-xxs", "px-md", "[&_svg:not([class*='size-'])]:size-3"],
+        base: ["text-uk-md", "h-8", "gap-xs", "px-lg", "[&_svg:not([class*='size-'])]:size-4"],
+        lg: ["text-uk-lg", "h-9", "gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-5"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base"
+    }
+  }
+);
 var ToggleGroupContext = react.createContext({
   size: "base",
   variant: "primary"
@@ -99,20 +180,10 @@ function ToggleGroupItemRoot({
       "data-variant": context.variant || variant,
       "data-size": context.size || size,
       className: chunk7KYAICHB_js.cn(
-        chunkEAN5SZYQ_js.toggleVariants({
+        toggleGroupVariants({
           variant: context.variant || variant,
           size: context.size || size
         }),
-        "min-w-0",
-        "flex-1",
-        "shrink-0",
-        "rounded-none",
-        "first:rounded-l-md",
-        "last:rounded-r-md",
-        "focus:z-10",
-        "focus-visible:z-10",
-        "data-[variant=outline]:border-l-0",
-        "data-[variant=outline]:first:border-l",
         className
       ),
       ...props,
@@ -135,18 +206,10 @@ function ToggleGroupItemFallback({
       "data-variant": context.variant || variant,
       "data-size": context.size || size,
       className: chunk7KYAICHB_js.cn(
-        chunkEAN5SZYQ_js.toggleVariants({
+        toggleGroupVariants({
           variant: context.variant || variant,
           size: context.size || size
         }),
-        "min-w-0",
-        "flex-1",
-        "shrink-0",
-        "rounded-none",
-        "first:rounded-l-md",
-        "last:rounded-r-md",
-        "focus:z-10",
-        "focus-visible:z-10",
         className
       ),
       ...props,
@@ -158,3 +221,4 @@ var ToggleGroupItem = chunkQG7ZF6TO_js.createClientOnlyComponent(ToggleGroupItem
 
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
+exports.toggleGroupVariants = toggleGroupVariants;