@vuer-ai/vuer-uikit 0.0.19 → 0.0.20

package/dist/chunk-2JCULHBM.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsiblePrimitive__namespace.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      className: chunkXXWQ4RVP_js.cn(
+        [
+          "overflow-hidden",
+          "data-[state=open]:animate-collapsible-down",
+          "data-[state=closed]:animate-collapsible-up"
+        ],
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent2;
+exports.CollapsibleTrigger = CollapsibleTrigger2;

package/dist/chunk-2TRYGIGT.mjs

@@ -0,0 +1,76 @@
+import { toggleVariants } from './chunk-WDUTW7HS.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ToggleGroupContext = createContext({
+  size: "base",
+  variant: "primary"
+});
+function ToggleGroup({
+  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",
+        "data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  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(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0",
+        "flex-1",
+        "shrink-0",
+        "rounded-none",
+        "shadow-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,
+      children
+    }
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/chunk-2YCL2ET2.js

@@ -0,0 +1,431 @@
+'use strict';
+
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+
+var treeVariants = classVarianceAuthority.cva(
+  "text-uk-md group py-1 h-9 text-text-primary rounded transition-colors cursor-pointer text-left relative z-20"
+);
+var selectedTreeVariants = classVarianceAuthority.cva("");
+var dragOverVariants = classVarianceAuthority.cva("bg-primary/20 text-primary-foreground");
+var TreeView = react.forwardRef(
+  ({
+    data,
+    initialSelectedItemId,
+    onSelectChange,
+    expandAll,
+    defaultLeafIcon,
+    defaultNodeIcon,
+    className,
+    onDocumentDrag,
+    ...props
+  }, ref) => {
+    const [selectedItemId, setSelectedItemId] = react.useState(initialSelectedItemId);
+    const [draggedItem, setDraggedItem] = react.useState(null);
+    const [hoverBackgroundStyle, setHoverBackgroundStyle] = react.useState({ display: "none", top: 0, height: 0 });
+    const handleSelectChange = react.useCallback(
+      (item) => {
+        setSelectedItemId(item == null ? void 0 : item.id);
+        if (onSelectChange) {
+          onSelectChange(item);
+        }
+      },
+      [onSelectChange]
+    );
+    const handleDragStart = react.useCallback((item) => {
+      setDraggedItem(item);
+    }, []);
+    const handleDrop = react.useCallback(
+      (targetItem) => {
+        if (draggedItem && onDocumentDrag && draggedItem.id !== targetItem.id) {
+          onDocumentDrag(draggedItem, targetItem);
+        }
+        setDraggedItem(null);
+      },
+      [draggedItem, onDocumentDrag]
+    );
+    const handleItemHover = react.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 = react.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkXXWQ4RVP_js.cn(
+          "bg-bg-primary rounded-uk-md relative max-w-[300px] min-w-[240px] overflow-hidden p-2",
+          className
+        ),
+        "data-tree-container": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              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,
+                height: hoverBackgroundStyle.height
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TreeItem,
+            {
+              data,
+              ref,
+              selectedItemId,
+              handleSelectChange,
+              expandedItemIds,
+              defaultLeafIcon,
+              defaultNodeIcon,
+              handleDragStart,
+              handleDrop,
+              draggedItem,
+              onItemHover: handleItemHover,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "h-[48px] w-full",
+              onDrop: () => {
+                handleDrop({ id: "", name: "parent_div" });
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+var TreeItem = react.forwardRef(
+  ({
+    className,
+    data,
+    selectedItemId,
+    handleSelectChange,
+    expandedItemIds,
+    defaultLeafIcon,
+    defaultNodeIcon,
+    handleDragStart,
+    handleDrop,
+    draggedItem,
+    onItemHover,
+    ...props
+  }, ref) => {
+    if (!(data instanceof Array)) {
+      data = [data];
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tree", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: "1rem" }, children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { margin: 0 }, children: item.children ? /* @__PURE__ */ jsxRuntime.jsx(
+      TreeNode,
+      {
+        item,
+        handleSelectChange,
+        expandedItemIds,
+        selectedItemId,
+        defaultNodeIcon,
+        defaultLeafIcon,
+        handleDragStart,
+        handleDrop,
+        draggedItem,
+        onItemHover
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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] = react.useState(expandedItemIds.includes(item.id) ? [item.id] : []);
+  const [isDragOver, setIsDragOver] = react.useState(false);
+  const [isHovered, setIsHovered] = react.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__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { type: "multiple", value, onValueChange: (s) => setValue(s), children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionPrimitive__namespace.Item, { value: item.id, className: "m-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      AccordionTrigger,
+      {
+        style: { margin: 0 },
+        className: chunkXXWQ4RVP_js.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsxRuntime.jsx(
+            TreeIcon,
+            {
+              item,
+              isSelected: selectedItemId === item.id,
+              isOpen: value.includes(item.id),
+              default: defaultNodeIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary text-uk-md flex-grow truncate text-left", children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TreeItem,
+      {
+        data: item.children ? item.children : item,
+        selectedItemId,
+        handleSelectChange,
+        expandedItemIds,
+        defaultLeafIcon,
+        defaultNodeIcon,
+        handleDragStart,
+        handleDrop,
+        draggedItem,
+        onItemHover
+      }
+    ) })
+  ] }) });
+};
+var TreeLeaf = react.forwardRef(
+  ({
+    className,
+    item,
+    selectedItemId,
+    handleSelectChange,
+    defaultLeafIcon,
+    handleDragStart,
+    handleDrop,
+    draggedItem,
+    onItemHover,
+    ...props
+  }, ref) => {
+    const [isDragOver, setIsDragOver] = react.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkXXWQ4RVP_js.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__ */ jsxRuntime.jsx(TreeIcon, { item, isSelected: selectedItemId === item.id, default: defaultLeafIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-primary text-uk-md flex-grow truncate text-left", children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(TreeActions, { isSelected: selectedItemId === item.id && !item.disabled, children: item.actions })
+        ]
+      }
+    );
+  }
+);
+TreeLeaf.displayName = "TreeLeaf";
+var AccordionTrigger = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { style: { margin: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: chunkXXWQ4RVP_js.cn(
+      "relative flex w-full flex-1 items-center justify-between text-left font-medium transition-all",
+      className
+    ),
+    ...props,
+    children
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
+var AccordionContent = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: chunkXXWQ4RVP_js.cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-uk-md overflow-hidden transition-all",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-0 pb-0", children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive__namespace.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 ? lucideReact.Folder : lucideReact.File;
+  }
+  return Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-text-primary mr-2 h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+var TreeActions = ({ children, isSelected }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkXXWQ4RVP_js.cn(isSelected ? "block" : "hidden", "absolute right-3 group-hover:block"), children });
+};
+
+exports.TreeView = TreeView;

package/dist/chunk-3FR3WKI4.mjs

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+// src/highlight-cursor/cursor-context.tsx
+var defaultDimensions = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0
+};
+var defaultContext = {
+  mousePosition: { x: 0, y: 0 },
+  hoveredElementId: null,
+  elementDimensions: defaultDimensions,
+  registerHoveredElement: () => {
+  },
+  unregisterHoveredElement: () => {
+  },
+  updateElementDimensions: () => {
+  }
+};
+var CursorContext = createContext(defaultContext);
+var useCursor = () => useContext(CursorContext);
+
+export { CursorContext, useCursor };

package/dist/chunk-44KW6PTD.mjs

@@ -0,0 +1,111 @@
+import { useCursor } from './chunk-3FR3WKI4.mjs';
+import { forwardRef, useId, useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var getVisibleRect = (element, elementRect) => {
+  let parent = element.parentElement;
+  let visibleRect = {
+    ...elementRect,
+    left: elementRect.left,
+    right: elementRect.right,
+    top: elementRect.top,
+    bottom: elementRect.bottom,
+    width: elementRect.width,
+    height: elementRect.height,
+    x: elementRect.x,
+    y: elementRect.y
+  };
+  while (parent) {
+    if (typeof window === "undefined") break;
+    const style = window.getComputedStyle(parent);
+    const hasOverflow = [style.overflowY, style.overflowX].some(
+      (overflow) => ["auto", "scroll", "hidden"].includes(overflow)
+    );
+    if (hasOverflow) {
+      const parentRect = parent.getBoundingClientRect();
+      const newLeft = Math.max(visibleRect.left, parentRect.left);
+      const newTop = Math.max(visibleRect.top, parentRect.top);
+      const newRight = Math.min(visibleRect.right, parentRect.right);
+      const newBottom = Math.min(visibleRect.bottom, parentRect.bottom);
+      visibleRect = {
+        ...visibleRect,
+        left: newLeft,
+        top: newTop,
+        right: newRight,
+        bottom: newBottom,
+        width: Math.max(0, newRight - newLeft),
+        height: Math.max(0, newBottom - newTop),
+        x: newLeft,
+        y: newTop
+      };
+      if (visibleRect.width <= 0 || visibleRect.height <= 0) {
+        return new DOMRect(0, 0, 0, 0);
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return DOMRect.fromRect(visibleRect);
+};
+function withCursor(Component) {
+  const displayName = Component.displayName || Component.name || "Component";
+  const EnhancedComponent = forwardRef(
+    ({ id: propId, onMouseEnter, onMouseMove, onMouseLeave, ...props }, ref) => {
+      const { registerHoveredElement, unregisterHoveredElement, updateElementDimensions } = useCursor();
+      const generatedId = useId();
+      const id = propId || `cursor-element-${generatedId}`;
+      const elementRef = useRef(null);
+      const handleMouseEnter = (event) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          registerHoveredElement(id, visibleRect, elementRef.current);
+        }
+        onMouseEnter == null ? void 0 : onMouseEnter(event);
+      };
+      const handleMouseMove = (event) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          updateElementDimensions(visibleRect);
+        }
+        onMouseMove == null ? void 0 : onMouseMove(event);
+      };
+      const handleMouseOut = (event) => {
+        var _a;
+        const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+          const { clientX, clientY } = event;
+          const isOutside = clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom;
+          if (isOutside) {
+            unregisterHoveredElement();
+          }
+        } else {
+          unregisterHoveredElement();
+        }
+        onMouseLeave == null ? void 0 : onMouseLeave(event);
+      };
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...props,
+          id,
+          ref: (node) => {
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            elementRef.current = node;
+          },
+          onMouseEnter: handleMouseEnter,
+          onMouseMove: handleMouseMove,
+          onMouseOut: handleMouseOut
+        }
+      );
+    }
+  );
+  EnhancedComponent.displayName = `withCursor(${displayName})`;
+  return EnhancedComponent;
+}
+
+export { withCursor };