@luxfi/ui 7.4.0 → 7.4.3

package/dist/switch.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixSwitch from '@radix-ui/react-switch';
+import { Switch } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -14,22 +14,22 @@ var NOOP = () => {
 var SIZE_CLASSES = {
   sm: {
     root: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    thumb: "h-3 w-3",
     label: "text-xs"
   },
   md: {
     root: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    thumb: "h-4 w-4",
     label: "text-sm"
   },
   lg: {
     root: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    thumb: "h-5 w-5",
     label: "text-base"
   }
 };
 var SwitchBase = React.forwardRef(
-  function Switch(props, ref) {
+  function Switch$1(props, ref) {
     const {
       inputProps,
       children,
@@ -55,9 +55,7 @@ var SwitchBase = React.forwardRef(
         if (!isControlled) {
           setInternalChecked(nextChecked);
         }
-        if (onCheckedChange) {
-          onCheckedChange({ checked: nextChecked });
-        }
+        onCheckedChange?.({ checked: nextChecked });
       },
       [isControlled, onCheckedChange]
     );
@@ -78,8 +76,9 @@ var SwitchBase = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxs(
-            RadixSwitch.Root,
+            Switch,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
@@ -94,12 +93,13 @@ var SwitchBase = React.forwardRef(
               children: [
                 trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
                 /* @__PURE__ */ jsx(
-                  RadixSwitch.Thumb,
+                  Switch.Thumb,
                   {
+                    unstyled: true,
+                    "data-thumb": true,
+                    transition: "quicker",
                     className: cn(
                       "block rounded-full bg-white shadow-sm",
-                      "transition-transform duration-200",
-                      "translate-x-0.5",
                       sizeClasses.thumb
                     ),
                     children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })

package/dist/tag.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var gui = require('@hanzo/gui');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/tag.tsx
 function cn(...inputs) {
@@ -67,7 +67,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
@@ -214,7 +214,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React3__namespace.forwardRef(
+var Skeleton = React4__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -223,10 +223,10 @@ var Skeleton = React3__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React3__namespace.isValidElement(children)) return children;
+      if (asChild && React4__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React3__namespace.isValidElement(children)) {
+    if (asChild && React4__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -252,7 +252,7 @@ var Skeleton = React3__namespace.forwardRef(
     );
   }
 );
-React3__namespace.forwardRef(
+React4__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -268,7 +268,7 @@ React3__namespace.forwardRef(
     );
   }
 );
-React3__namespace.forwardRef(
+React4__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -281,26 +281,24 @@ React3__namespace.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React3__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React3__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React4__namespace.useState(false);
+  React4__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React3__namespace.forwardRef(
+var Tooltip = React4__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -319,28 +317,28 @@ var Tooltip = React3__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React3__namespace.useState(defaultOpen);
-    const timeoutRef = React3__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React3__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React4__namespace.useState(defaultOpen);
+    const timeoutRef = React4__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React4__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React3__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React4__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React3__namespace.useCallback(() => {
-      handleOpenChangeManual(false);
-    }, [handleOpenChangeManual]);
+    const handleClickAway = React4__namespace.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React3__namespace.useCallback(() => {
+    const handleTriggerClick = React4__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React3__namespace.useCallback((event) => {
+    const handleContentClick = React4__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -349,7 +347,7 @@ var Tooltip = React3__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React3__namespace.useEffect(() => {
+    React4__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -375,7 +373,7 @@ var Tooltip = React3__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             gui.Tooltip.Trigger,
             {
-              ref: open ? triggerRef : void 0,
+              ref: triggerRef,
               asChild: true,
               ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
@@ -440,7 +438,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React3__namespace.forwardRef(
+var Tag = React4__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,

package/dist/tag.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React3 from 'react';
+import * as React4 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { styled, View, TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
@@ -45,7 +45,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
@@ -192,7 +192,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React3.forwardRef(
+var Skeleton = React4.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -201,10 +201,10 @@ var Skeleton = React3.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React3.isValidElement(children)) return children;
+      if (asChild && React4.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React3.isValidElement(children)) {
+    if (asChild && React4.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -230,7 +230,7 @@ var Skeleton = React3.forwardRef(
     );
   }
 );
-React3.forwardRef(
+React4.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -246,7 +246,7 @@ React3.forwardRef(
     );
   }
 );
-React3.forwardRef(
+React4.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -259,26 +259,24 @@ React3.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React3.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React3.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React4.useState(false);
+  React4.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React3.forwardRef(
+var Tooltip = React4.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -297,28 +295,28 @@ var Tooltip = React3.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React3.useState(defaultOpen);
-    const timeoutRef = React3.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React3.useCallback((nextOpen) => {
+    const [open, setOpen] = React4.useState(defaultOpen);
+    const timeoutRef = React4.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React4.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React3.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React4.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React3.useCallback(() => {
-      handleOpenChangeManual(false);
-    }, [handleOpenChangeManual]);
+    const handleClickAway = React4.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React3.useCallback(() => {
+    const handleTriggerClick = React4.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React3.useCallback((event) => {
+    const handleContentClick = React4.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -327,7 +325,7 @@ var Tooltip = React3.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React3.useEffect(() => {
+    React4.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -353,7 +351,7 @@ var Tooltip = React3.forwardRef(
           /* @__PURE__ */ jsx(
             Tooltip$1.Trigger,
             {
-              ref: open ? triggerRef : void 0,
+              ref: triggerRef,
               asChild: true,
               ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
@@ -418,7 +416,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React3.forwardRef(
+var Tag = React4.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,

package/dist/textarea.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -47,9 +48,10 @@ var Textarea = React__default.default.forwardRef(
       [onChange, onChangeText]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      gui.TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest,
         onChange: handleChange

package/dist/textarea.js

@@ -1,4 +1,5 @@
 "use client";
+import { TextArea } from '@hanzo/gui';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -41,9 +42,10 @@ var Textarea = React.forwardRef(
       [onChange, onChangeText]
     );
     return /* @__PURE__ */ jsx(
-      "textarea",
+      TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest,
         onChange: handleChange

package/dist/tooltip.cjs

@@ -3,7 +3,7 @@
 
 var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
-var React = require('react');
+var React2 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,32 +26,30 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/tooltip.tsx
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsTouch = () => useBelow(TOUCH_PX);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React__namespace.forwardRef(
+var Tooltip = React2__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -70,28 +68,28 @@ var Tooltip = React__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React__namespace.useState(defaultOpen);
-    const timeoutRef = React__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React2__namespace.useState(defaultOpen);
+    const timeoutRef = React2__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React2__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React__namespace.useCallback(() => {
-      handleOpenChangeManual(false);
-    }, [handleOpenChangeManual]);
+    const handleClickAway = React2__namespace.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React__namespace.useCallback(() => {
+    const handleTriggerClick = React2__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React__namespace.useCallback((event) => {
+    const handleContentClick = React2__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -100,7 +98,7 @@ var Tooltip = React__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React__namespace.useEffect(() => {
+    React2__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -126,7 +124,7 @@ var Tooltip = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             gui.Tooltip.Trigger,
             {
-              ref: open ? triggerRef : void 0,
+              ref: triggerRef,
               asChild: true,
               ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,

package/dist/tooltip.js

@@ -1,35 +1,33 @@
 "use client";
 import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
-import * as React from 'react';
+import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/tooltip.tsx
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React2.useState(false);
+  React2.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsTouch = () => useBelow(TOUCH_PX);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React.forwardRef(
+var Tooltip = React2.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -48,28 +46,28 @@ var Tooltip = React.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React.useState(defaultOpen);
-    const timeoutRef = React.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React.useCallback((nextOpen) => {
+    const [open, setOpen] = React2.useState(defaultOpen);
+    const timeoutRef = React2.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React2.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React2.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React.useCallback(() => {
-      handleOpenChangeManual(false);
-    }, [handleOpenChangeManual]);
+    const handleClickAway = React2.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React.useCallback(() => {
+    const handleTriggerClick = React2.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React.useCallback((event) => {
+    const handleContentClick = React2.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -78,7 +76,7 @@ var Tooltip = React.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React.useEffect(() => {
+    React2.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -104,7 +102,7 @@ var Tooltip = React.forwardRef(
           /* @__PURE__ */ jsx(
             Tooltip$1.Trigger,
             {
-              ref: open ? triggerRef : void 0,
+              ref: triggerRef,
               asChild: true,
               ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,