@luxfi/ui 7.4.0 → 7.4.2

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(() => {
+    const handleClickAway = React4__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [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);
@@ -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(() => {
+    const handleClickAway = React4.useCallback(() => {
       handleOpenChangeManual(false);
     }, [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);
@@ -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(() => {
+    const handleClickAway = React2__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [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);

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(() => {
+    const handleClickAway = React2.useCallback(() => {
       handleOpenChangeManual(false);
     }, [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);

package/dist/use-narrow.cjs

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var NARROW_PX = 640;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React__namespace.useState(false);
+  React__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 useIsNarrow = () => useBelow(NARROW_PX);
+var useIsTouch = () => useBelow(TOUCH_PX);
+
+exports.NARROW_PX = NARROW_PX;
+exports.TOUCH_PX = TOUCH_PX;
+exports.useBelow = useBelow;
+exports.useIsNarrow = useIsNarrow;
+exports.useIsTouch = useIsTouch;

package/dist/use-narrow.d.cts

@@ -0,0 +1,12 @@
+/** Below this the UI is a phone: menus become sheets, drawers drag. */
+declare const NARROW_PX = 640;
+/** Below this the pointer is a finger: hover-only affordances are suppressed. */
+declare const TOUCH_PX = 1024;
+/** True while the viewport is narrower than `px`. */
+declare function useBelow(px: number): boolean;
+/** Phone-sized: present menus as sheets. */
+declare const useIsNarrow: () => boolean;
+/** Touch-sized: no hover, so hover-only affordances must not be the only path. */
+declare const useIsTouch: () => boolean;
+
+export { NARROW_PX, TOUCH_PX, useBelow, useIsNarrow, useIsTouch };

package/dist/use-narrow.d.ts

@@ -0,0 +1,12 @@
+/** Below this the UI is a phone: menus become sheets, drawers drag. */
+declare const NARROW_PX = 640;
+/** Below this the pointer is a finger: hover-only affordances are suppressed. */
+declare const TOUCH_PX = 1024;
+/** True while the viewport is narrower than `px`. */
+declare function useBelow(px: number): boolean;
+/** Phone-sized: present menus as sheets. */
+declare const useIsNarrow: () => boolean;
+/** Touch-sized: no hover, so hover-only affordances must not be the only path. */
+declare const useIsTouch: () => boolean;
+
+export { NARROW_PX, TOUCH_PX, useBelow, useIsNarrow, useIsTouch };

package/dist/use-narrow.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from 'react';
+
+var NARROW_PX = 640;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React.useState(false);
+  React.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 useIsNarrow = () => useBelow(NARROW_PX);
+var useIsTouch = () => useBelow(TOUCH_PX);
+
+export { NARROW_PX, TOUCH_PX, useBelow, useIsNarrow, useIsTouch };