@luxfi/ui 8.2.7 → 8.2.8

package/dist/dialog.js

@@ -1,67 +1,10 @@
 'use client';
-import { styled, View, Dialog } from '@hanzo/gui';
+import { Dialog } from '@hanzo/gui';
 import { sx, Box, cn, css } from '@hanzo/ui';
-import * as React2 from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { CloseButton } from './close-button.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = styled(View, {
-  name: "LuxCloseButton",
-  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    CloseButtonFrame,
-    {
-      ref,
-      className,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: 20,
-          height: 20,
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
 function BackToButton({ onClick }) {
   return /* @__PURE__ */ jsx(
     Box,
@@ -75,9 +18,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogSizeContext = React2.createContext({ size: "md" });
+var DialogSizeContext = React.createContext({ size: "md" });
 function useDialogSizeContext() {
-  return React2.useContext(DialogSizeContext);
+  return React.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -109,13 +52,13 @@ var DialogRoot = ({
   modal = true
   // motionPreset is intentionally unused -- kept for API compat
 }) => {
-  const handleOpenChange = React2.useCallback(
+  const handleOpenChange = React.useCallback(
     (nextOpen) => {
       onOpenChange?.({ open: nextOpen });
     },
     [onOpenChange]
   );
-  const ctx = React2.useMemo(() => ({ size }), [size]);
+  const ctx = React.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -127,7 +70,7 @@ var DialogRoot = ({
     }
   ) });
 };
-var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
+var DialogContent = React.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
     portalled: _portalled = true,
@@ -184,11 +127,11 @@ var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
     )
   ] });
 });
-var DialogCloseTrigger = React2.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
-var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
+var DialogHeader = React.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
   const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
   return /* @__PURE__ */ jsxs(
@@ -218,7 +161,7 @@ var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
     }
   );
 });
-var DialogBody = React2.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+var DialogBody = React.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
   const bodyStyle = {
     ...styleProp,
     ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
@@ -235,7 +178,7 @@ var DialogBody = React2.forwardRef(function DialogBody2({ className, pt, display
     }
   );
 });
-var DialogFooter = React2.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+var DialogFooter = React.forwardRef(function DialogFooter2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     Box,
     {

package/dist/drawer.cjs

@@ -2,7 +2,10 @@
 'use strict';
 
 var gui = require('@hanzo/gui');
-var React3 = require('react');
+var React = require('react');
+var closeButton_js = require('./close-button.js');
+var ink_js = require('./ink.js');
+var useNarrow_js = require('./use-narrow.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -23,90 +26,11 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = gui.styled(gui.View, {
-  name: "LuxCloseButton",
-  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CloseButtonFrame,
-    {
-      ref,
-      className,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          width: 20,
-          height: 20,
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
-var ink = (children, Wrap = gui.Text, props = {}) => {
-  let hasText = false;
-  React3.Children.forEach(children, (child) => {
-    if (typeof child === "string" || typeof child === "number") hasText = true;
-  });
-  if (!hasText) return children;
-  return React3.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React3.createElement(Wrap, props, child) : child);
-};
-var NARROW_PX = 640;
-function useBelow(px) {
-  const [below, setBelow] = React3__namespace.useState(false);
-  React3__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 DrawerPlacementContext = React3__namespace.createContext("right");
-var DrawerSizeContext = React3__namespace.createContext("md");
-var DrawerStateContext = React3__namespace.createContext({
+var DrawerPlacementContext = React__namespace.createContext("right");
+var DrawerSizeContext = React__namespace.createContext("md");
+var DrawerStateContext = React__namespace.createContext({
   open: false,
   setOpen: () => {
   },
@@ -123,15 +47,15 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const [uncontrolled, setUncontrolled] = React3__namespace.useState(defaultOpen ?? false);
+  const [uncontrolled, setUncontrolled] = React__namespace.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
-  const narrow = useIsNarrow();
-  const setOpen = React3__namespace.useCallback((nextOpen) => {
+  const narrow = useNarrow_js.useIsNarrow();
+  const setOpen = React__namespace.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
-  const state = React3__namespace.useMemo(
+  const state = React__namespace.useMemo(
     () => ({ open: isOpen, setOpen, modal, narrow }),
     [isOpen, setOpen, modal, narrow]
   );
@@ -153,12 +77,12 @@ var ACROSS = {
 };
 var extent = (placement, size) => placement === "left" || placement === "right" ? { width: ACROSS[size], maxWidth: "100%" } : { height: ACROSS[size], maxHeight: "100%" };
 var SCRIM = "rgba(0,0,0,0.5)";
-var DrawerContent = React3__namespace.forwardRef(
+var DrawerContent = React__namespace.forwardRef(
   function DrawerContent2(props, ref) {
     const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
-    const placement = React3__namespace.useContext(DrawerPlacementContext);
-    const size = React3__namespace.useContext(DrawerSizeContext);
-    const { open, setOpen, modal, narrow } = React3__namespace.useContext(DrawerStateContext);
+    const placement = React__namespace.useContext(DrawerPlacementContext);
+    const size = React__namespace.useContext(DrawerSizeContext);
+    const { open, setOpen, modal, narrow } = React__namespace.useContext(DrawerStateContext);
     if (narrow) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Sheet,
@@ -236,23 +160,23 @@ var DrawerContent = React3__namespace.forwardRef(
     return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Portal, { children: content }) : content;
   }
 );
-var DrawerCloseTrigger = React3__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
   return (
     // Placement belongs to the surrounding box, not to the button: CloseButton
     // is a fixed 20px control and has no opinion about where it sits.
-    /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, ...props }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(closeButton_js.CloseButton, { ref, ...props }) }) })
   );
 });
 var DrawerTrigger = ({ asChild = true, children, ...rest }) => {
-  const { setOpen, narrow } = React3__namespace.useContext(DrawerStateContext);
+  const { setOpen, narrow } = React__namespace.useContext(DrawerStateContext);
   if (narrow) {
-    return React3__namespace.isValidElement(children) ? React3__namespace.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+    return React__namespace.isValidElement(children) ? React__namespace.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Trigger, { asChild, ...rest, children });
 };
-var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink(children) });
-var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink(children) });
-var DrawerFooter = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", justifyContent: "flex-end", gap: 8, padding: 24, paddingTop: 0, ...props, children: ink(children) });
+var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink_js.ink(children) });
+var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink_js.ink(children) });
+var DrawerFooter = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", justifyContent: "flex-end", gap: 8, padding: 24, paddingTop: 0, ...props, children: ink_js.ink(children) });
 var DrawerTitle = gui.Dialog.Title;
 var DrawerDescription = gui.Dialog.Description;
 var DrawerActionTrigger = gui.Dialog.Close;

package/dist/drawer.js

@@ -1,91 +1,14 @@
 'use client';
-import { styled, View, Sheet, Dialog, YStack, Text, XStack } from '@hanzo/gui';
-import * as React3 from 'react';
-import { Children, createElement } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Sheet, Dialog, View, YStack, XStack } from '@hanzo/gui';
+import * as React from 'react';
+import { CloseButton } from './close-button.js';
+import { ink } from './ink.js';
+import { useIsNarrow } from './use-narrow.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = styled(View, {
-  name: "LuxCloseButton",
-  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    CloseButtonFrame,
-    {
-      ref,
-      className,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: 20,
-          height: 20,
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
-var ink = (children, Wrap = Text, props = {}) => {
-  let hasText = false;
-  Children.forEach(children, (child) => {
-    if (typeof child === "string" || typeof child === "number") hasText = true;
-  });
-  if (!hasText) return children;
-  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
-};
-var NARROW_PX = 640;
-function useBelow(px) {
-  const [below, setBelow] = React3.useState(false);
-  React3.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 DrawerPlacementContext = React3.createContext("right");
-var DrawerSizeContext = React3.createContext("md");
-var DrawerStateContext = React3.createContext({
+var DrawerPlacementContext = React.createContext("right");
+var DrawerSizeContext = React.createContext("md");
+var DrawerStateContext = React.createContext({
   open: false,
   setOpen: () => {
   },
@@ -102,15 +25,15 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const [uncontrolled, setUncontrolled] = React3.useState(defaultOpen ?? false);
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
   const narrow = useIsNarrow();
-  const setOpen = React3.useCallback((nextOpen) => {
+  const setOpen = React.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
-  const state = React3.useMemo(
+  const state = React.useMemo(
     () => ({ open: isOpen, setOpen, modal, narrow }),
     [isOpen, setOpen, modal, narrow]
   );
@@ -132,12 +55,12 @@ var ACROSS = {
 };
 var extent = (placement, size) => placement === "left" || placement === "right" ? { width: ACROSS[size], maxWidth: "100%" } : { height: ACROSS[size], maxHeight: "100%" };
 var SCRIM = "rgba(0,0,0,0.5)";
-var DrawerContent = React3.forwardRef(
+var DrawerContent = React.forwardRef(
   function DrawerContent2(props, ref) {
     const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
-    const placement = React3.useContext(DrawerPlacementContext);
-    const size = React3.useContext(DrawerSizeContext);
-    const { open, setOpen, modal, narrow } = React3.useContext(DrawerStateContext);
+    const placement = React.useContext(DrawerPlacementContext);
+    const size = React.useContext(DrawerSizeContext);
+    const { open, setOpen, modal, narrow } = React.useContext(DrawerStateContext);
     if (narrow) {
       return /* @__PURE__ */ jsxs(
         Sheet,
@@ -215,7 +138,7 @@ var DrawerContent = React3.forwardRef(
     return portalled ? /* @__PURE__ */ jsx(Dialog.Portal, { children: content }) : content;
   }
 );
-var DrawerCloseTrigger = React3.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React.forwardRef(function DrawerCloseTrigger2(props, ref) {
   return (
     // Placement belongs to the surrounding box, not to the button: CloseButton
     // is a fixed 20px control and has no opinion about where it sits.
@@ -223,9 +146,9 @@ var DrawerCloseTrigger = React3.forwardRef(function DrawerCloseTrigger2(props, r
   );
 });
 var DrawerTrigger = ({ asChild = true, children, ...rest }) => {
-  const { setOpen, narrow } = React3.useContext(DrawerStateContext);
+  const { setOpen, narrow } = React.useContext(DrawerStateContext);
   if (narrow) {
-    return React3.isValidElement(children) ? React3.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsx(Fragment, { children });
+    return React.isValidElement(children) ? React.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsx(Dialog.Trigger, { asChild, ...rest, children });
 };