@vuer-ai/vuer-uikit 0.0.3 → 0.0.4

package/dist/chunk-LVSI4HYF.mjs

@@ -0,0 +1,409 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cva } from 'class-variance-authority';
+import { ChevronDown, ChevronRight, Folder, File } from 'lucide-react';
+import { forwardRef, useState, useCallback, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var treeVariants = cva(
+  "text-[14px] group py-1 h-9 text-text-primary rounded transition-colors cursor-pointer text-left relative z-20"
+);
+var selectedTreeVariants = cva("");
+var dragOverVariants = cva("bg-primary/20 text-primary-foreground");
+var TreeView = forwardRef(
+  ({
+    data,
+    initialSelectedItemId,
+    onSelectChange,
+    expandAll,
+    defaultLeafIcon,
+    defaultNodeIcon,
+    className,
+    onDocumentDrag,
+    ...props
+  }, ref) => {
+    const [selectedItemId, setSelectedItemId] = useState(initialSelectedItemId);
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [hoverBackgroundStyle, setHoverBackgroundStyle] = useState({ display: "none", top: 0, height: 0 });
+    const handleSelectChange = useCallback(
+      (item) => {
+        setSelectedItemId(item == null ? void 0 : item.id);
+        if (onSelectChange) {
+          onSelectChange(item);
+        }
+      },
+      [onSelectChange]
+    );
+    const handleDragStart = useCallback((item) => {
+      setDraggedItem(item);
+    }, []);
+    const handleDrop = useCallback(
+      (targetItem) => {
+        if (draggedItem && onDocumentDrag && draggedItem.id !== targetItem.id) {
+          onDocumentDrag(draggedItem, targetItem);
+        }
+        setDraggedItem(null);
+      },
+      [draggedItem, onDocumentDrag]
+    );
+    const handleItemHover = useCallback((element) => {
+      var _a;
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        const containerRect = (_a = element.closest("[data-tree-container]")) == null ? void 0 : _a.getBoundingClientRect();
+        if (containerRect) {
+          setHoverBackgroundStyle({
+            display: "block",
+            top: rect.top - containerRect.top,
+            height: rect.height
+          });
+        }
+      } else {
+        setHoverBackgroundStyle({ display: "none", top: 0, height: 0 });
+      }
+    }, []);
+    const expandedItemIds = useMemo(() => {
+      if (!initialSelectedItemId) {
+        return [];
+      }
+      const ids = [];
+      function walkTreeItems(items, targetId) {
+        if (items instanceof Array) {
+          for (let i = 0; i < items.length; i++) {
+            ids.push(items[i].id);
+            if (walkTreeItems(items[i], targetId) && !expandAll) {
+              return true;
+            }
+            if (!expandAll) ids.pop();
+          }
+        } else if (!expandAll && items.id === targetId) {
+          return true;
+        } else if (items.children) {
+          return walkTreeItems(items.children, targetId);
+        }
+      }
+      walkTreeItems(data, initialSelectedItemId);
+      return ids;
+    }, [data, expandAll, initialSelectedItemId]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-bg-primary relative min-w-[240px] max-w-[300px] overflow-hidden p-2",
+          className
+        ),
+        "data-tree-container": true,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-bg-tertiary pointer-events-none absolute left-2 right-2 z-10 rounded-uk-sm transition-all duration-150",
+              style: {
+                display: hoverBackgroundStyle.display,
+                top: hoverBackgroundStyle.top,
+                height: hoverBackgroundStyle.height
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TreeItem,
+            {
+              data,
+              ref,
+              selectedItemId,
+              handleSelectChange,
+              expandedItemIds,
+              defaultLeafIcon,
+              defaultNodeIcon,
+              handleDragStart,
+              handleDrop,
+              draggedItem,
+              onItemHover: handleItemHover,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-[48px] w-full",
+              onDrop: (e) => {
+                handleDrop({ id: "", name: "parent_div" });
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+var TreeItem = forwardRef(
+  ({
+    className,
+    data,
+    selectedItemId,
+    handleSelectChange,
+    expandedItemIds,
+    defaultLeafIcon,
+    defaultNodeIcon,
+    handleDragStart,
+    handleDrop,
+    draggedItem,
+    onItemHover,
+    ...props
+  }, ref) => {
+    if (!(data instanceof Array)) {
+      data = [data];
+    }
+    return /* @__PURE__ */ jsx("div", { ref, role: "tree", className, ...props, children: /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "1rem" }, children: data.map((item) => /* @__PURE__ */ jsx("li", { style: { margin: 0 }, children: item.children ? /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        item,
+        handleSelectChange,
+        expandedItemIds,
+        selectedItemId,
+        defaultNodeIcon,
+        defaultLeafIcon,
+        handleDragStart,
+        handleDrop,
+        draggedItem,
+        onItemHover
+      }
+    ) : /* @__PURE__ */ jsx(
+      TreeLeaf,
+      {
+        item,
+        selectedItemId,
+        handleSelectChange,
+        defaultLeafIcon,
+        handleDragStart,
+        handleDrop,
+        draggedItem,
+        onItemHover
+      }
+    ) }, item.id)) }) });
+  }
+);
+TreeItem.displayName = "TreeItem";
+var TreeNode = ({
+  item,
+  handleSelectChange,
+  expandedItemIds,
+  selectedItemId,
+  defaultNodeIcon,
+  defaultLeafIcon,
+  handleDragStart,
+  handleDrop,
+  draggedItem,
+  onItemHover
+}) => {
+  const [value, setValue] = useState(expandedItemIds.includes(item.id) ? [item.id] : []);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const onDragStart = (e) => {
+    if (!item.draggable) {
+      e.preventDefault();
+      return;
+    }
+    e.dataTransfer.setData("text/plain", item.id);
+    handleDragStart == null ? void 0 : handleDragStart(item);
+  };
+  const onDragOver = (e) => {
+    if (item.droppable !== false && draggedItem && draggedItem.id !== item.id) {
+      e.preventDefault();
+      setIsDragOver(true);
+    }
+  };
+  const onDragLeave = () => {
+    setIsDragOver(false);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleDrop == null ? void 0 : handleDrop(item);
+  };
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { type: "multiple", value, onValueChange: (s) => setValue(s), children: /* @__PURE__ */ jsxs(AccordionPrimitive.Item, { value: item.id, className: "m-0", children: [
+    /* @__PURE__ */ jsxs(
+      AccordionTrigger,
+      {
+        style: { margin: 0 },
+        className: cn(
+          treeVariants(),
+          selectedItemId === item.id && selectedTreeVariants(),
+          isDragOver && dragOverVariants(),
+          item.disabled && "hover:bg-bg-primary pointer-events-none cursor-not-allowed opacity-50"
+        ),
+        onClick: () => {
+          var _a;
+          if (item.disabled) return;
+          handleSelectChange(item);
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+        },
+        onMouseEnter: (e) => {
+          setIsHovered(true);
+          onItemHover == null ? void 0 : onItemHover(e.currentTarget);
+        },
+        onMouseLeave: () => {
+          setIsHovered(false);
+          onItemHover == null ? void 0 : onItemHover(null);
+        },
+        draggable: !!item.draggable && !item.disabled,
+        onDragStart,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        children: [
+          isHovered ? value.includes(item.id) ? /* @__PURE__ */ jsx(ChevronDown, { className: "text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsx(
+            TreeIcon,
+            {
+              item,
+              isSelected: selectedItemId === item.id,
+              isOpen: value.includes(item.id),
+              default: defaultNodeIcon
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-text-primary flex-grow truncate text-left text-sm", children: item.name }),
+          /* @__PURE__ */ jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(
+      TreeItem,
+      {
+        data: item.children ? item.children : item,
+        selectedItemId,
+        handleSelectChange,
+        expandedItemIds,
+        defaultLeafIcon,
+        defaultNodeIcon,
+        handleDragStart,
+        handleDrop,
+        draggedItem,
+        onItemHover
+      }
+    ) })
+  ] }) });
+};
+var TreeLeaf = forwardRef(
+  ({
+    className,
+    item,
+    selectedItemId,
+    handleSelectChange,
+    defaultLeafIcon,
+    handleDragStart,
+    handleDrop,
+    draggedItem,
+    onItemHover,
+    ...props
+  }, ref) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const onDragStart = (e) => {
+      if (!item.draggable || item.disabled) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData("text/plain", item.id);
+      handleDragStart == null ? void 0 : handleDragStart(item);
+    };
+    const onDragOver = (e) => {
+      if (item.droppable !== false && !item.disabled && draggedItem && draggedItem.id !== item.id) {
+        e.preventDefault();
+        setIsDragOver(true);
+      }
+    };
+    const onDragLeave = () => {
+      setIsDragOver(false);
+    };
+    const onDrop = (e) => {
+      if (item.disabled) return;
+      e.preventDefault();
+      setIsDragOver(false);
+      handleDrop == null ? void 0 : handleDrop(item);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center",
+          treeVariants(),
+          className,
+          selectedItemId === item.id && selectedTreeVariants(),
+          isDragOver && dragOverVariants(),
+          item.disabled && "hover:bg-bg-primary pointer-events-none cursor-not-allowed opacity-50"
+        ),
+        onClick: () => {
+          var _a;
+          if (item.disabled) return;
+          handleSelectChange(item);
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+        },
+        onMouseEnter: (e) => onItemHover == null ? void 0 : onItemHover(e.currentTarget),
+        onMouseLeave: () => onItemHover == null ? void 0 : onItemHover(null),
+        draggable: !!item.draggable && !item.disabled,
+        onDragStart,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(TreeIcon, { item, isSelected: selectedItemId === item.id, default: defaultLeafIcon }),
+          /* @__PURE__ */ jsx("span", { className: "text-text-primary flex-grow truncate text-left text-sm", children: item.name }),
+          /* @__PURE__ */ jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
+        ]
+      }
+    );
+  }
+);
+TreeLeaf.displayName = "TreeLeaf";
+var AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { style: { margin: 0 }, children: /* @__PURE__ */ jsx(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full flex-1 items-center justify-between text-left font-medium transition-all",
+      className
+    ),
+    ...props,
+    children
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "pb-0 pt-0", children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var TreeIcon = ({
+  item,
+  isOpen,
+  isSelected,
+  default: defaultIcon
+}) => {
+  let Icon = defaultIcon;
+  if (isSelected && item.selectedIcon) {
+    Icon = item.selectedIcon;
+  } else if (isOpen && item.openIcon) {
+    Icon = item.openIcon;
+  } else if (item.icon) {
+    Icon = item.icon;
+  }
+  if (!Icon) {
+    Icon = item.children && item.children.length > 0 ? Folder : File;
+  }
+  return Icon ? /* @__PURE__ */ jsx(Icon, { className: "text-text-primary mr-2 h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(Fragment, {});
+};
+var TreeActions = ({ children, isSelected }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn(isSelected ? "block" : "hidden", "absolute right-3 group-hover:block"), children });
+};
+
+export { TreeView };

package/dist/{chunk-ZKYQYCKN.mjs → chunk-M3KBBKQR.mjs}

@@ -1,8 +1,8 @@
-import { SelectTrigger } from './chunk-KAPV3EZO.mjs';
-import { Tabs } from './chunk-GA2JCN3F.mjs';
-import { Textarea } from './chunk-JOBQTBEM.mjs';
+import { Tabs } from './chunk-QOUX33X5.mjs';
+import { Textarea } from './chunk-5GPQ7U5B.mjs';
+import { SelectTrigger } from './chunk-66JQXJEV.mjs';
 import { Button } from './chunk-Q3APPCB2.mjs';
-import { InputRoot } from './chunk-KVDEBKWR.mjs';
+import { InputRoot } from './chunk-25GQKTNF.mjs';
 import { withCursor } from './chunk-CP7QYV4N.mjs';
 
 // src/highlight-cursor/enhanced-components.tsx

package/dist/chunk-NN7R5DNL.mjs

@@ -0,0 +1,119 @@
+import { cn } from './chunk-HW6SLBO3.mjs';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: cn("focus:outline-none focus:ring-0"), ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-bg-primary/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 p-xl",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+          className
+        ),
+        ...props,
+        children: [
+          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" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-md pb-xl", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-lg pt-xl", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-[14px] text-text-highlight font-medium", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-[12px] text-text-secondary", className),
+      ...props
+    }
+  );
+}
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/{chunk-I6VKLSAJ.js → chunk-OTDY2E2A.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZYBSCTBR_js = require('./chunk-ZYBSCTBR.js');
+var chunkENZI5WM7_js = require('./chunk-ENZI5WM7.js');
 var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
 var react$1 = require('@use-gesture/react');
 var react = require('react');
@@ -109,7 +109,7 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
       ...bind(),
       className: chunkUWO6RBCE_js.cn("gap-xs flex cursor-crosshair touch-none select-none flex-col"),
       children: value.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        chunkZYBSCTBR_js.InputRoot,
+        chunkENZI5WM7_js.InputRoot,
         {
           ref: (r) => {
             inputs.current.set(index.toString(), r);
@@ -142,7 +142,7 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
             "group-data-[hover=y]/number-input:cursor-row-resize"
           ]),
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkZYBSCTBR_js.InputSlot,
+            chunkENZI5WM7_js.InputSlot,
             {
               className: chunkUWO6RBCE_js.cn(
                 "cursor-crosshair",

package/dist/{chunk-GA2JCN3F.mjs → chunk-QOUX33X5.mjs}

@@ -1,5 +1,5 @@
+import { useTabsCursor, TabsCursorProvider } from './chunk-6L4KPPOD.mjs';
 import { cn } from './chunk-HW6SLBO3.mjs';
-import { TabsCursorProvider, useTabsCursor } from './chunk-FYEZTS4S.mjs';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cva } from 'class-variance-authority';
 import { createContext, useContext } from 'react';
@@ -14,14 +14,14 @@ var useTabsContext = () => {
   return context;
 };
 function Tabs({ className, size = "base", ...props }) {
-  return /* @__PURE__ */ jsx(TabsCursorProvider, { children: /* @__PURE__ */ jsx(TabsContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
     {
       "data-slot": "tabs",
       className: cn("flex w-full flex-col gap-2", className),
       ...props
     }
-  ) }) });
+  ) });
 }
 var tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
   variants: {
@@ -38,7 +38,7 @@ var tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
 function TabsList({ className, ...props }) {
   const { setCursorTarget } = useTabsCursor();
   const { size } = useTabsContext();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TabsCursorProvider, { children: /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
       onMouseLeave: () => setCursorTarget(null),
@@ -46,7 +46,7 @@ function TabsList({ className, ...props }) {
       className: cn(tabsListVariants({ size }), "justify-start", className),
       ...props
     }
-  );
+  ) });
 }
 var tabsTriggerVariants = cva(
   [

package/dist/{chunk-SZU2TX5H.js → chunk-QZASHJNJ.js}

@@ -9,7 +9,7 @@ var Toaster = ({ ...props }) => {
     sonner.Toaster,
     {
       toastOptions: {
-        className: "vk-toast",
+        className: "vk-toast liquid:liquid-bg",
         descriptionClassName: "vk-toast-description"
       },
       ...props