@vuer-ai/vuer-uikit 0.0.22 → 0.0.24

package/dist/{chunk-FORVP7XH.js → chunk-6RTJSAVW.js}

@@ -2,10 +2,13 @@
 
 var chunkSKO72K64_js = require('./chunk-SKO72K64.js');
 var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
-var react$1 = require('@use-gesture/react');
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 var getHoverElementAndIndex = (element, inputs) => {
   if (!element) return null;
   const container = element == null ? void 0 : element.closest("[data-input]");
@@ -26,12 +29,14 @@ var changeElementsHoverState = (inputs, range, changed) => {
     }
   });
 };
-var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValuesChange, prefix, step = 0.1 }, ref) {
-  const inputs = react.useRef(/* @__PURE__ */ new Map());
-  const selectRange = react.useRef([null, null]);
-  const inputChange = react.useRef(false);
-  const stopClick = react.useCallback(() => {
-    if (typeof document === "undefined") return;
+var InputNumbers = React.forwardRef(function InputNumbers2({ size, value, onValuesChange, prefix, step = 0.1 }, ref) {
+  const inputs = React.useRef(/* @__PURE__ */ new Map());
+  const selectRange = React.useRef([null, null]);
+  const inputChange = React.useRef(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragStart = React.useRef({ x: 0, y: 0 });
+  const accumulatedDelta = React.useRef(0);
+  const stopClick = React.useCallback(() => {
     const stopClick2 = (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -39,51 +44,84 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
     };
     document.addEventListener("click", stopClick2, true);
   }, []);
-  const bind = react$1.useGesture({
-    onDrag: ({ delta: [dx], event, initial, distance: [, oy], xy, memo = 0 }) => {
-      event.stopPropagation();
-      event.preventDefault();
-      if (selectRange.current[0] === null) {
-        selectRange.current[0] = getHoverElementAndIndex(
-          typeof document !== "undefined" ? document.elementFromPoint(...initial) : null,
-          inputs.current
-        );
-      }
-      let newMX = memo + dx / 2;
-      if (Math.abs(newMX) >= (inputChange.current ? 1 : 5)) {
-        const multiplyStep = event.shiftKey ? 5 : event.altKey ? 1 / 5 : 1;
+  const handleMouseDown = React.useCallback((e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    accumulatedDelta.current = 0;
+    inputChange.current = false;
+    selectRange.current[0] = getHoverElementAndIndex(
+      document.elementFromPoint(e.clientX, e.clientY),
+      inputs.current
+    );
+  }, []);
+  const handleMouseMove = React.useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const deltaX = e.clientX - dragStart.current.x;
+      const deltaY = e.clientY - dragStart.current.y;
+      accumulatedDelta.current += deltaX / 2;
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      if (Math.abs(accumulatedDelta.current) >= (inputChange.current ? 1 : 5)) {
+        const multiplyStep = e.shiftKey ? 5 : e.altKey ? 1 / 5 : 1;
         const newValue = value.map((v, i) => {
           const [first, last] = selectRange.current;
           if (first === null || last === null) {
             return v;
           } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
-            return Number(((v || 0) + Math.floor(newMX) * step * multiplyStep).toPrecision(6));
+            return Number(
+              ((v || 0) + Math.floor(accumulatedDelta.current) * step * multiplyStep).toPrecision(
+                6
+              )
+            );
           } else {
             return v;
           }
         });
         onValuesChange == null ? void 0 : onValuesChange(newValue);
-        newMX = 0;
+        accumulatedDelta.current = 0;
         inputChange.current = true;
         changeElementsHoverState(inputs.current, selectRange.current, "x");
         stopClick();
       }
       if (!inputChange.current) {
-        const currentElement = typeof document !== "undefined" ? document.elementFromPoint(...xy) : null;
+        const currentElement = document.elementFromPoint(e.clientX, e.clientY);
         const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
         selectRange.current[1] = currentIndex ?? selectRange.current[1];
-        changeElementsHoverState(inputs.current, selectRange.current, oy !== 0 ? "y" : "none");
+        changeElementsHoverState(inputs.current, selectRange.current, deltaY !== 0 ? "y" : "none");
         stopClick();
       }
-      return newMX;
     },
-    onDragEnd: () => {
-      selectRange.current = [null, null];
-      inputChange.current = false;
-      changeElementsHoverState(inputs.current, selectRange.current, "none");
+    [isDragging, value, onValuesChange, step, stopClick]
+  );
+  const handleMouseUp = React.useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    selectRange.current = [null, null];
+    inputChange.current = false;
+    changeElementsHoverState(inputs.current, selectRange.current, "none");
+  }, [isDragging]);
+  React__default.default.useEffect(() => {
+    if (isDragging) {
+      const handleGlobalMouseMove = (e) => {
+        handleMouseMove(e);
+      };
+      const handleGlobalMouseUp = () => {
+        handleMouseUp();
+      };
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+        document.removeEventListener("mouseup", handleGlobalMouseUp);
+      };
     }
-  });
-  const valueChangeHandler = react.useCallback(
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const valueChangeHandler = React.useCallback(
     (index) => {
       return (e) => {
         const inputValue = e.target.value;
@@ -107,7 +145,7 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
     "div",
     {
       ref,
-      ...bind(),
+      onMouseDown: handleMouseDown,
       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,
@@ -134,13 +172,13 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
             "data-[hover=y]:bg-bg-tertiary",
             "data-[hover=down]:cursor-move",
             "data-[hover=x]:cursor-col-resize",
-            "data-[hover=y]:cursor-ns-resize"
+            "data-[hover=y]:cursor-row-resize"
           ]),
           inputClassName: chunkXXWQ4RVP_js.cn([
             "cursor-crosshair",
             "group-data-[hover=down]/number-input:cursor-move",
             "group-data-[hover=x]/number-input:cursor-col-resize",
-            "group-data-[hover=y]/number-input:cursor-ns-resize"
+            "group-data-[hover=y]/number-input:cursor-row-resize"
           ]),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             chunkSKO72K64_js.InputSlot,
@@ -149,7 +187,7 @@ var InputNumbers = react.forwardRef(function InputNumbers2({ size, value, onValu
                 "cursor-crosshair",
                 "group-data-[hover=down]/number-input:cursor-move",
                 "group-data-[hover=x]/number-input:cursor-col-resize",
-                "group-data-[hover=y]/number-input:cursor-ns-resize"
+                "group-data-[hover=y]/number-input:cursor-row-resize"
               ),
               children: prefix == null ? void 0 : prefix[index]
             }

package/dist/{chunk-YW3YL6GR.mjs → chunk-FEYQ2OWB.mjs}

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

package/dist/{chunk-G5KMD72J.mjs → chunk-H5C3BWSK.mjs}

@@ -1,7 +1,6 @@
 import { InputRoot, InputSlot } from './chunk-QYRRQ65X.mjs';
 import { cn } from './chunk-KTNZSZ5Y.mjs';
-import { useGesture } from '@use-gesture/react';
-import { forwardRef, useRef, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var getHoverElementAndIndex = (element, inputs) => {
@@ -28,8 +27,10 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
   const inputs = useRef(/* @__PURE__ */ new Map());
   const selectRange = useRef([null, null]);
   const inputChange = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const accumulatedDelta = useRef(0);
   const stopClick = useCallback(() => {
-    if (typeof document === "undefined") return;
     const stopClick2 = (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -37,50 +38,83 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
     };
     document.addEventListener("click", stopClick2, true);
   }, []);
-  const bind = useGesture({
-    onDrag: ({ delta: [dx], event, initial, distance: [, oy], xy, memo = 0 }) => {
-      event.stopPropagation();
-      event.preventDefault();
-      if (selectRange.current[0] === null) {
-        selectRange.current[0] = getHoverElementAndIndex(
-          typeof document !== "undefined" ? document.elementFromPoint(...initial) : null,
-          inputs.current
-        );
-      }
-      let newMX = memo + dx / 2;
-      if (Math.abs(newMX) >= (inputChange.current ? 1 : 5)) {
-        const multiplyStep = event.shiftKey ? 5 : event.altKey ? 1 / 5 : 1;
+  const handleMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    accumulatedDelta.current = 0;
+    inputChange.current = false;
+    selectRange.current[0] = getHoverElementAndIndex(
+      document.elementFromPoint(e.clientX, e.clientY),
+      inputs.current
+    );
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const deltaX = e.clientX - dragStart.current.x;
+      const deltaY = e.clientY - dragStart.current.y;
+      accumulatedDelta.current += deltaX / 2;
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      if (Math.abs(accumulatedDelta.current) >= (inputChange.current ? 1 : 5)) {
+        const multiplyStep = e.shiftKey ? 5 : e.altKey ? 1 / 5 : 1;
         const newValue = value.map((v, i) => {
           const [first, last] = selectRange.current;
           if (first === null || last === null) {
             return v;
           } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
-            return Number(((v || 0) + Math.floor(newMX) * step * multiplyStep).toPrecision(6));
+            return Number(
+              ((v || 0) + Math.floor(accumulatedDelta.current) * step * multiplyStep).toPrecision(
+                6
+              )
+            );
           } else {
             return v;
           }
         });
         onValuesChange == null ? void 0 : onValuesChange(newValue);
-        newMX = 0;
+        accumulatedDelta.current = 0;
         inputChange.current = true;
         changeElementsHoverState(inputs.current, selectRange.current, "x");
         stopClick();
       }
       if (!inputChange.current) {
-        const currentElement = typeof document !== "undefined" ? document.elementFromPoint(...xy) : null;
+        const currentElement = document.elementFromPoint(e.clientX, e.clientY);
         const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
         selectRange.current[1] = currentIndex ?? selectRange.current[1];
-        changeElementsHoverState(inputs.current, selectRange.current, oy !== 0 ? "y" : "none");
+        changeElementsHoverState(inputs.current, selectRange.current, deltaY !== 0 ? "y" : "none");
         stopClick();
       }
-      return newMX;
     },
-    onDragEnd: () => {
-      selectRange.current = [null, null];
-      inputChange.current = false;
-      changeElementsHoverState(inputs.current, selectRange.current, "none");
+    [isDragging, value, onValuesChange, step, stopClick]
+  );
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    selectRange.current = [null, null];
+    inputChange.current = false;
+    changeElementsHoverState(inputs.current, selectRange.current, "none");
+  }, [isDragging]);
+  React.useEffect(() => {
+    if (isDragging) {
+      const handleGlobalMouseMove = (e) => {
+        handleMouseMove(e);
+      };
+      const handleGlobalMouseUp = () => {
+        handleMouseUp();
+      };
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+        document.removeEventListener("mouseup", handleGlobalMouseUp);
+      };
     }
-  });
+  }, [isDragging, handleMouseMove, handleMouseUp]);
   const valueChangeHandler = useCallback(
     (index) => {
       return (e) => {
@@ -105,7 +139,7 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
     "div",
     {
       ref,
-      ...bind(),
+      onMouseDown: handleMouseDown,
       className: cn("gap-xs flex cursor-crosshair touch-none flex-col select-none"),
       children: value.map((item, index) => /* @__PURE__ */ jsx(
         InputRoot,
@@ -132,13 +166,13 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
             "data-[hover=y]:bg-bg-tertiary",
             "data-[hover=down]:cursor-move",
             "data-[hover=x]:cursor-col-resize",
-            "data-[hover=y]:cursor-ns-resize"
+            "data-[hover=y]:cursor-row-resize"
           ]),
           inputClassName: cn([
             "cursor-crosshair",
             "group-data-[hover=down]/number-input:cursor-move",
             "group-data-[hover=x]/number-input:cursor-col-resize",
-            "group-data-[hover=y]/number-input:cursor-ns-resize"
+            "group-data-[hover=y]/number-input:cursor-row-resize"
           ]),
           children: /* @__PURE__ */ jsx(
             InputSlot,
@@ -147,7 +181,7 @@ var InputNumbers = forwardRef(function InputNumbers2({ size, value, onValuesChan
                 "cursor-crosshair",
                 "group-data-[hover=down]/number-input:cursor-move",
                 "group-data-[hover=x]/number-input:cursor-col-resize",
-                "group-data-[hover=y]/number-input:cursor-ns-resize"
+                "group-data-[hover=y]/number-input:cursor-row-resize"
               ),
               children: prefix == null ? void 0 : prefix[index]
             }

package/dist/{chunk-6ESGGXBG.js → chunk-OO7LYJQL.js}

@@ -3,7 +3,7 @@
 var chunkEFIRD3FN_js = require('./chunk-EFIRD3FN.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.22" ;
+var PACKAGE_VERSION = "0.0.24" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
 function VersionBadge({
   className,

package/dist/index.js

@@ -2,7 +2,7 @@
 
 require('./chunk-N7CINZS2.js');
 var chunk2YCL2ET2_js = require('./chunk-2YCL2ET2.js');
-var chunk6ESGGXBG_js = require('./chunk-6ESGGXBG.js');
+var chunkOO7LYJQL_js = require('./chunk-OO7LYJQL.js');
 var chunkH5P4IX7R_js = require('./chunk-H5P4IX7R.js');
 var chunkPVRQNCSJ_js = require('./chunk-PVRQNCSJ.js');
 var chunkAOUGWGQR_js = require('./chunk-AOUGWGQR.js');
@@ -22,7 +22,7 @@ var chunkX55EAYE2_js = require('./chunk-X55EAYE2.js');
 var chunk5TVG5JK5_js = require('./chunk-5TVG5JK5.js');
 var chunk2JCULHBM_js = require('./chunk-2JCULHBM.js');
 var chunkFP26SRGL_js = require('./chunk-FP26SRGL.js');
-var chunkFORVP7XH_js = require('./chunk-FORVP7XH.js');
+var chunk6RTJSAVW_js = require('./chunk-6RTJSAVW.js');
 var chunk6N5422RT_js = require('./chunk-6N5422RT.js');
 require('./chunk-KJ42IGH6.js');
 var chunkQEY7BWIR_js = require('./chunk-QEY7BWIR.js');
@@ -47,7 +47,7 @@ Object.defineProperty(exports, "TreeView", {
 });
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunk6ESGGXBG_js.VersionBadge; }
+  get: function () { return chunkOO7LYJQL_js.VersionBadge; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
@@ -327,7 +327,7 @@ Object.defineProperty(exports, "DropdownMenuTrigger", {
 });
 Object.defineProperty(exports, "InputNumbers", {
   enumerable: true,
-  get: function () { return chunkFORVP7XH_js.InputNumbers; }
+  get: function () { return chunk6RTJSAVW_js.InputNumbers; }
 });
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './chunk-F56ZKT7B.mjs';
 export { TreeView } from './chunk-UKFVRXAR.mjs';
-export { VersionBadge } from './chunk-YW3YL6GR.mjs';
+export { VersionBadge } from './chunk-FEYQ2OWB.mjs';
 export { Switch } from './chunk-JAMJUXBY.mjs';
 export { ThemeProvider, useTheme } from './chunk-LEPXSM36.mjs';
 export { Timeline } from './chunk-ZVG2UKKC.mjs';
@@ -20,7 +20,7 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Checkbox } from './chunk-G6PRZVSE.mjs';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './chunk-FRT225GK.mjs';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './chunk-EUY74AXP.mjs';
-export { InputNumbers } from './chunk-G5KMD72J.mjs';
+export { InputNumbers } from './chunk-H5C3BWSK.mjs';
 export { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from './chunk-F776EMXP.mjs';
 import './chunk-VGCVIHBR.mjs';
 export { CursorProvider } from './chunk-OOI3SJDU.mjs';

package/dist/ui/index.js

@@ -2,7 +2,7 @@
 
 require('../chunk-N7CINZS2.js');
 var chunk2YCL2ET2_js = require('../chunk-2YCL2ET2.js');
-var chunk6ESGGXBG_js = require('../chunk-6ESGGXBG.js');
+var chunkOO7LYJQL_js = require('../chunk-OO7LYJQL.js');
 var chunkH5P4IX7R_js = require('../chunk-H5P4IX7R.js');
 var chunkPVRQNCSJ_js = require('../chunk-PVRQNCSJ.js');
 var chunkAOUGWGQR_js = require('../chunk-AOUGWGQR.js');
@@ -22,7 +22,7 @@ var chunkX55EAYE2_js = require('../chunk-X55EAYE2.js');
 var chunk5TVG5JK5_js = require('../chunk-5TVG5JK5.js');
 var chunk2JCULHBM_js = require('../chunk-2JCULHBM.js');
 var chunkFP26SRGL_js = require('../chunk-FP26SRGL.js');
-var chunkFORVP7XH_js = require('../chunk-FORVP7XH.js');
+var chunk6RTJSAVW_js = require('../chunk-6RTJSAVW.js');
 var chunk6N5422RT_js = require('../chunk-6N5422RT.js');
 var chunkIXHMIR5P_js = require('../chunk-IXHMIR5P.js');
 var chunk5OUTEHVX_js = require('../chunk-5OUTEHVX.js');
@@ -42,7 +42,7 @@ Object.defineProperty(exports, "TreeView", {
 });
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunk6ESGGXBG_js.VersionBadge; }
+  get: function () { return chunkOO7LYJQL_js.VersionBadge; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
@@ -322,7 +322,7 @@ Object.defineProperty(exports, "DropdownMenuTrigger", {
 });
 Object.defineProperty(exports, "InputNumbers", {
   enumerable: true,
-  get: function () { return chunkFORVP7XH_js.InputNumbers; }
+  get: function () { return chunk6RTJSAVW_js.InputNumbers; }
 });
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,

package/dist/ui/index.mjs

@@ -1,6 +1,6 @@
 import '../chunk-F56ZKT7B.mjs';
 export { TreeView } from '../chunk-UKFVRXAR.mjs';
-export { VersionBadge } from '../chunk-YW3YL6GR.mjs';
+export { VersionBadge } from '../chunk-FEYQ2OWB.mjs';
 export { Switch } from '../chunk-JAMJUXBY.mjs';
 export { ThemeProvider, useTheme } from '../chunk-LEPXSM36.mjs';
 export { Timeline } from '../chunk-ZVG2UKKC.mjs';
@@ -20,7 +20,7 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Checkbox } from '../chunk-G6PRZVSE.mjs';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../chunk-FRT225GK.mjs';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../chunk-EUY74AXP.mjs';
-export { InputNumbers } from '../chunk-G5KMD72J.mjs';
+export { InputNumbers } from '../chunk-H5C3BWSK.mjs';
 export { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '../chunk-F776EMXP.mjs';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from '../chunk-MRVMXKZO.mjs';
 export { Textarea } from '../chunk-DDOX4EEM.mjs';

package/dist/ui/input-numbers.d.mts

@@ -1,5 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
+import react__default, { ReactNode } from 'react';
 import { InputRootProps } from './input.mjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
@@ -10,6 +9,6 @@ interface InputNumbersProps extends Pick<InputRootProps, "size"> {
     prefix?: ReactNode[];
     onValuesChange?: (value: Array<number>) => void;
 }
-declare const InputNumbers: react.ForwardRefExoticComponent<InputNumbersProps & react.RefAttributes<HTMLDivElement>>;
+declare const InputNumbers: react__default.ForwardRefExoticComponent<InputNumbersProps & react__default.RefAttributes<HTMLDivElement>>;
 
 export { InputNumbers, type InputNumbersProps };

package/dist/ui/input-numbers.d.ts

@@ -1,5 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
+import react__default, { ReactNode } from 'react';
 import { InputRootProps } from './input.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
@@ -10,6 +9,6 @@ interface InputNumbersProps extends Pick<InputRootProps, "size"> {
     prefix?: ReactNode[];
     onValuesChange?: (value: Array<number>) => void;
 }
-declare const InputNumbers: react.ForwardRefExoticComponent<InputNumbersProps & react.RefAttributes<HTMLDivElement>>;
+declare const InputNumbers: react__default.ForwardRefExoticComponent<InputNumbersProps & react__default.RefAttributes<HTMLDivElement>>;
 
 export { InputNumbers, type InputNumbersProps };

package/dist/ui/input-numbers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkFORVP7XH_js = require('../chunk-FORVP7XH.js');
+var chunk6RTJSAVW_js = require('../chunk-6RTJSAVW.js');
 require('../chunk-SKO72K64.js');
 require('../chunk-XWS4SIB5.js');
 require('../chunk-EOFYA6CS.js');
@@ -10,5 +10,5 @@ require('../chunk-XXWQ4RVP.js');
 
 Object.defineProperty(exports, "InputNumbers", {
   enumerable: true,
-  get: function () { return chunkFORVP7XH_js.InputNumbers; }
+  get: function () { return chunk6RTJSAVW_js.InputNumbers; }
 });

package/dist/ui/input-numbers.mjs

@@ -1,4 +1,4 @@
-export { InputNumbers } from '../chunk-G5KMD72J.mjs';
+export { InputNumbers } from '../chunk-H5C3BWSK.mjs';
 import '../chunk-QYRRQ65X.mjs';
 import '../chunk-M4IVLZIH.mjs';
 import '../chunk-Q5KEB4UK.mjs';

package/dist/ui/version-badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6ESGGXBG_js = require('../chunk-6ESGGXBG.js');
+var chunkOO7LYJQL_js = require('../chunk-OO7LYJQL.js');
 require('../chunk-EFIRD3FN.js');
 require('../chunk-XWS4SIB5.js');
 require('../chunk-EOFYA6CS.js');
@@ -10,5 +10,5 @@ require('../chunk-XXWQ4RVP.js');
 
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunk6ESGGXBG_js.VersionBadge; }
+  get: function () { return chunkOO7LYJQL_js.VersionBadge; }
 });

package/dist/ui/version-badge.mjs

@@ -1,4 +1,4 @@
-export { VersionBadge } from '../chunk-YW3YL6GR.mjs';
+export { VersionBadge } from '../chunk-FEYQ2OWB.mjs';
 import '../chunk-WO3WHXDP.mjs';
 import '../chunk-M4IVLZIH.mjs';
 import '../chunk-Q5KEB4UK.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuer-ai/vuer-uikit",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "React UI Kit components",
   "keywords": [
     "react",
@@ -52,7 +52,6 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.10",
-    "@use-gesture/react": "^10.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",

package/src/ui/input-numbers.tsx

@@ -1,5 +1,12 @@
-import { useGesture } from "@use-gesture/react";
-import { ChangeEvent, forwardRef, ReactNode, useCallback, useRef } from "react";
+import React, {
+  ChangeEvent,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+  MouseEvent as ReactMouseEvent,
+} from "react";
 
 import { InputRoot, InputRootProps, InputSlot } from "./input";
 import { cn } from "../utils";
@@ -51,11 +58,12 @@ const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function Inpu
   const inputs = useRef<Map<string, HTMLInputElement | null>>(new Map());
   const selectRange = useRef<[number | null, number | null]>([null, null]);
   const inputChange = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const accumulatedDelta = useRef(0);
 
   const stopClick = useCallback(() => {
-    if (typeof document === "undefined") return;
-
-    const stopClick = (e: MouseEvent) => {
+    const stopClick = (e: Event) => {
       e.stopPropagation();
       e.preventDefault();
       document.removeEventListener("click", stopClick, true);
@@ -63,62 +71,101 @@ const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function Inpu
     document.addEventListener("click", stopClick, true);
   }, []);
 
-  const bind = useGesture({
-    onDrag: ({ delta: [dx], event, initial, distance: [, oy], xy, memo = 0 }) => {
-      event.stopPropagation();
-      event.preventDefault();
+  const handleMouseDown = useCallback((e: ReactMouseEvent) => {
+    if (e.button !== 0) return; // Only left mouse button
 
-      if (selectRange.current[0] === null) {
-        selectRange.current[0] = getHoverElementAndIndex(
-          typeof document !== "undefined" ? document.elementFromPoint(...initial) : null,
-          inputs.current,
-        );
-      }
+    e.preventDefault();
+    e.stopPropagation();
 
-      let newMX: number = memo + dx / 2;
+    setIsDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    accumulatedDelta.current = 0;
+    inputChange.current = false;
+
+    selectRange.current[0] = getHoverElementAndIndex(
+      document.elementFromPoint(e.clientX, e.clientY),
+      inputs.current,
+    );
+  }, []);
 
-      if (Math.abs(newMX) >= (inputChange.current ? 1 : 5)) {
-        const multiplyStep = event.shiftKey ? 5 : event.altKey ? 1 / 5 : 1;
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const deltaX = e.clientX - dragStart.current.x;
+      const deltaY = e.clientY - dragStart.current.y;
+
+      accumulatedDelta.current += deltaX / 2;
+      dragStart.current = { x: e.clientX, y: e.clientY };
+
+      if (Math.abs(accumulatedDelta.current) >= (inputChange.current ? 1 : 5)) {
+        const multiplyStep = e.shiftKey ? 5 : e.altKey ? 1 / 5 : 1;
 
         const newValue = value.map((v, i) => {
           const [first, last] = selectRange.current;
           if (first === null || last === null) {
             return v;
           } else if (i <= Math.max(first, last) && i >= Math.min(first, last)) {
-            return Number(((v || 0) + Math.floor(newMX) * step * multiplyStep).toPrecision(6));
+            return Number(
+              ((v || 0) + Math.floor(accumulatedDelta.current) * step * multiplyStep).toPrecision(
+                6,
+              ),
+            );
           } else {
             return v;
           }
         });
         onValuesChange?.(newValue);
-        newMX = 0;
+        accumulatedDelta.current = 0;
         inputChange.current = true;
 
         changeElementsHoverState(inputs.current, selectRange.current, "x");
-
         stopClick();
       }
 
       if (!inputChange.current) {
-        const currentElement =
-          typeof document !== "undefined" ? document.elementFromPoint(...xy) : null;
-
+        const currentElement = document.elementFromPoint(e.clientX, e.clientY);
         const currentIndex = getHoverElementAndIndex(currentElement, inputs.current);
         selectRange.current[1] = currentIndex ?? selectRange.current[1];
 
-        changeElementsHoverState(inputs.current, selectRange.current, oy !== 0 ? "y" : "none");
-
+        changeElementsHoverState(inputs.current, selectRange.current, deltaY !== 0 ? "y" : "none");
         stopClick();
       }
-
-      return newMX;
-    },
-    onDragEnd: () => {
-      selectRange.current = [null, null];
-      inputChange.current = false;
-      changeElementsHoverState(inputs.current, selectRange.current, "none");
     },
-  });
+    [isDragging, value, onValuesChange, step, stopClick],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+    selectRange.current = [null, null];
+    inputChange.current = false;
+    changeElementsHoverState(inputs.current, selectRange.current, "none");
+  }, [isDragging]);
+
+  // Add global mouse event listeners
+  React.useEffect(() => {
+    if (isDragging) {
+      const handleGlobalMouseMove = (e: MouseEvent) => {
+        handleMouseMove(e);
+      };
+      const handleGlobalMouseUp = () => {
+        handleMouseUp();
+      };
+
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+        document.removeEventListener("mouseup", handleGlobalMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
 
   const valueChangeHandler = useCallback(
     (index: number) => {
@@ -145,7 +192,7 @@ const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function Inpu
   return (
     <div
       ref={ref}
-      {...bind()}
+      onMouseDown={handleMouseDown}
       className={cn("gap-xs flex cursor-crosshair touch-none flex-col select-none")}
     >
       {value.map((item, index) => (
@@ -172,13 +219,13 @@ const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function Inpu
             "data-[hover=y]:bg-bg-tertiary",
             "data-[hover=down]:cursor-move",
             "data-[hover=x]:cursor-col-resize",
-            "data-[hover=y]:cursor-ns-resize",
+            "data-[hover=y]:cursor-row-resize",
           ])}
           inputClassName={cn([
             "cursor-crosshair",
             "group-data-[hover=down]/number-input:cursor-move",
             "group-data-[hover=x]/number-input:cursor-col-resize",
-            "group-data-[hover=y]/number-input:cursor-ns-resize",
+            "group-data-[hover=y]/number-input:cursor-row-resize",
           ])}
         >
           <InputSlot
@@ -186,7 +233,7 @@ const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(function Inpu
               "cursor-crosshair",
               "group-data-[hover=down]/number-input:cursor-move",
               "group-data-[hover=x]/number-input:cursor-col-resize",
-              "group-data-[hover=y]/number-input:cursor-ns-resize",
+              "group-data-[hover=y]/number-input:cursor-row-resize",
             )}
           >
             {prefix?.[index]}