@luxfi/ui 7.4.10 → 7.4.11

package/dist/collapsible.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var Collapsible = require('@radix-ui/react-collapsible');
+var gui = require('@hanzo/gui');
 var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/collapsible.tsx
@@ -485,66 +484,76 @@ function useUpdateEffect(effect, deps) {
   }, deps);
 }
 function scrollToElement(id) {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__namespace.default.useState(isExpandedProp);
   const handleClick = React3__namespace.default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [id, noScroll, onClick]);
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [isExpandedProp, id, noScroll]);
   const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible__namespace.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: text })
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { children })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Collapsible.Content, { children })
   ] });
 };
+var CUT_LENGTH = 3;
 var CollapsibleList = (props) => {
-  const CUT_LENGTH = 3;
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__namespace.default.useState(defaultExpanded);
   React3__namespace.default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React3__namespace.default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React3__namespace.default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Root, { open: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
 
 exports.CollapsibleDetails = CollapsibleDetails;

package/dist/collapsible.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { YStack } from '@hanzo/gui';
 import React__default from 'react';
 import { LinkProps } from './link.cjs';
 
@@ -10,7 +11,7 @@ interface CollapsibleDetailsProps extends LinkProps {
     noScroll?: boolean;
 }
 declare const CollapsibleDetails: (props: CollapsibleDetailsProps) => react_jsx_runtime.JSX.Element;
-interface CollapsibleListProps<T> extends React__default.ComponentPropsWithoutRef<'div'> {
+interface CollapsibleListProps<T> extends Omit<React__default.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
     items: Array<T>;
     renderItem: (item: T, index: number) => React__default.ReactNode;
     triggerProps?: LinkProps;

package/dist/collapsible.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { YStack } from '@hanzo/gui';
 import React__default from 'react';
 import { LinkProps } from './link.js';
 
@@ -10,7 +11,7 @@ interface CollapsibleDetailsProps extends LinkProps {
     noScroll?: boolean;
 }
 declare const CollapsibleDetails: (props: CollapsibleDetailsProps) => react_jsx_runtime.JSX.Element;
-interface CollapsibleListProps<T> extends React__default.ComponentPropsWithoutRef<'div'> {
+interface CollapsibleListProps<T> extends Omit<React__default.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
     items: Array<T>;
     renderItem: (item: T, index: number) => React__default.ReactNode;
     triggerProps?: LinkProps;

package/dist/collapsible.js

@@ -1,5 +1,5 @@
 "use client";
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { Collapsible, YStack } from '@hanzo/gui';
 import * as React3 from 'react';
 import React3__default from 'react';
 import { clsx } from 'clsx';
@@ -463,66 +463,76 @@ function useUpdateEffect(effect, deps) {
   }, deps);
 }
 function scrollToElement(id) {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__default.useState(isExpandedProp);
   const handleClick = React3__default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [id, noScroll, onClick]);
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [isExpandedProp, id, noScroll]);
   const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
-  return /* @__PURE__ */ jsxs(Collapsible.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsx("span", { id, children: text })
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(Collapsible.Content, { children })
   ] });
 };
+var CUT_LENGTH = 3;
 var CollapsibleList = (props) => {
-  const CUT_LENGTH = 3;
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__default.useState(defaultExpanded);
   React3__default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React3__default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React3__default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsx(Collapsible.Root, { open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    items.length > cutLength && /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
 
 export { CollapsibleDetails, CollapsibleList };

package/dist/dialog.d.cts

@@ -57,7 +57,7 @@ declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetF
     unstyled?: boolean | undefined;
     elevation?: number | _hanzogui_web.SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-}>, "forceMount" | "scope"> & {
+}>, "scope" | "forceMount"> & {
     forceMount?: boolean;
 } & {
     scope?: _hanzo_gui.DialogScopes;

package/dist/dialog.d.ts

@@ -57,7 +57,7 @@ declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetF
     unstyled?: boolean | undefined;
     elevation?: number | _hanzogui_web.SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-}>, "forceMount" | "scope"> & {
+}>, "scope" | "forceMount"> & {
     forceMount?: boolean;
 } & {
     scope?: _hanzo_gui.DialogScopes;

package/dist/drawer.cjs

@@ -2,10 +2,7 @@
 'use strict';
 
 var gui = require('@hanzo/gui');
-var RadixDialog = require('@radix-ui/react-dialog');
 var React3 = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,26 +23,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/drawer.tsx
-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);
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 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",
@@ -108,13 +88,35 @@ var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
+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({
   open: false,
   setOpen: () => {
   },
-  modal: true
+  modal: true,
+  narrow: false
 });
 var DrawerRoot = (props) => {
   const {
@@ -129,60 +131,40 @@ var DrawerRoot = (props) => {
   const [uncontrolled, setUncontrolled] = React3__namespace.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
+  const narrow = useIsNarrow();
   const setOpen = React3__namespace.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
   const state = React3__namespace.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [isOpen, setOpen, modal]
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [isOpen, setOpen, modal, narrow]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Root,
-    {
-      open: isOpen,
-      onOpenChange: setOpen,
-      modal,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: narrow ? children : /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog, { open: isOpen, onOpenChange: setOpen, modal, children }) }) }) });
 };
-var PLACEMENT_CLASSES = {
-  right: [
-    "inset-y-0 right-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
-  ].join(" "),
-  left: [
-    "inset-y-0 left-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
-  ].join(" "),
-  top: [
-    "inset-x-0 top-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
-  ].join(" "),
-  bottom: [
-    "inset-x-0 bottom-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
-  ].join(" ")
+var ANCHOR = {
+  right: { top: 0, bottom: 0, right: 0, enterStyle: { x: 24, opacity: 0 }, exitStyle: { x: 24, opacity: 0 } },
+  left: { top: 0, bottom: 0, left: 0, enterStyle: { x: -24, opacity: 0 }, exitStyle: { x: -24, opacity: 0 } },
+  top: { left: 0, right: 0, top: 0, enterStyle: { y: -24, opacity: 0 }, exitStyle: { y: -24, opacity: 0 } },
+  bottom: { left: 0, right: 0, bottom: 0, enterStyle: { y: 24, opacity: 0 }, exitStyle: { y: 24, opacity: 0 } }
 };
-var SIZE_CLASSES = {
-  right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
-  bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
+var ACROSS = {
+  xs: 240,
+  sm: 320,
+  md: 384,
+  lg: 480,
+  xl: 640,
+  full: "100%"
 };
+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(
   function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    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 } = React3__namespace.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
-    if (isNarrow) {
+    const { open, setOpen, modal, narrow } = React3__namespace.useContext(DrawerStateContext);
+    if (narrow) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Sheet,
         {
@@ -200,7 +182,7 @@ var DrawerContent = React3__namespace.forwardRef(
                 transition: "lazy",
                 enterStyle: { opacity: 0 },
                 exitStyle: { opacity: 0 },
-                className: "bg-black/50"
+                backgroundColor: SCRIM
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(gui.Sheet.Handle, {}),
@@ -208,10 +190,11 @@ var DrawerContent = React3__namespace.forwardRef(
               gui.Sheet.Frame,
               {
                 unstyled: true,
-                className: cn(
-                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
-                  className
-                ),
+                flexDirection: "column",
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                backgroundColor: "var(--color-drawer-bg)",
+                shadowColor: "var(--shadow-drawer)",
                 ...rest,
                 children
               }
@@ -222,68 +205,62 @@ var DrawerContent = React3__namespace.forwardRef(
     }
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Overlay,
+        gui.Dialog.Overlay,
         {
-          className: cn(
-            "fixed inset-0 z-50 bg-black/50",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
-          )
-        }
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 50,
+          backgroundColor: SCRIM,
+          transition: "lazy",
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Content,
+        gui.Dialog.Content,
         {
           ref,
-          className: cn(
-            "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
-            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
-            className
-          ),
+          unstyled: true,
+          position: "fixed",
+          zIndex: 50,
+          flexDirection: "column",
+          backgroundColor: "var(--color-drawer-bg)",
+          transition: "medium",
+          ...ANCHOR[placement],
+          ...extent(placement, size),
           ...rest,
           children
-        }
+        },
+        "content"
       )
     ] });
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
+    return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Portal, { children: content }) : content;
   }
 );
 var DrawerCloseTrigger = React3__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    CloseButton,
-    {
-      ref,
-      className: cn("absolute top-7 right-5", props.className),
-      ...props
-    }
-  ) });
+  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 }) }) })
+  );
 });
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
-};
-var DrawerHeader = React3__namespace.forwardRef(
-  function DrawerHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+var DrawerTrigger = ({ asChild = true, children, ...rest }) => {
+  const { setOpen, narrow } = React3__namespace.useContext(DrawerStateContext);
+  if (narrow) {
+    return React3__namespace.isValidElement(children) ? React3__namespace.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-);
-var DrawerBody = React3__namespace.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-var DrawerFooter = React3__namespace.forwardRef(
-  function DrawerFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
-  }
-);
-var DrawerTitle = RadixDialog__namespace.Title;
-var DrawerDescription = RadixDialog__namespace.Description;
-var DrawerActionTrigger = RadixDialog__namespace.Close;
+  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 DrawerTitle = gui.Dialog.Title;
+var DrawerDescription = gui.Dialog.Description;
+var DrawerActionTrigger = gui.Dialog.Close;
 
 exports.DrawerActionTrigger = DrawerActionTrigger;
 exports.DrawerBody = DrawerBody;

package/dist/drawer.d.cts

@@ -1,5 +1,8 @@
+import * as _hanzogui_core from '@hanzogui/core';
+import * as _hanzo_gui from '@hanzo/gui';
+import { Dialog, YStack, XStack } from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React from 'react';
 
 interface DrawerRootProps {
@@ -9,13 +12,15 @@ interface DrawerRootProps {
     onOpenChange?: (details: {
         open: boolean;
     }) => void;
-    placement?: 'left' | 'right' | 'top' | 'bottom';
+    placement?: Placement;
     initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
     lazyMount?: boolean;
     unmountOnExit?: boolean;
     modal?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: Size;
 }
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
 interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'> {
     portalled?: boolean;
@@ -25,12 +30,40 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerCloseTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const DrawerTrigger: (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => react_jsx_runtime.JSX.Element;
-declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerTitle: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const DrawerDescription: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const DrawerActionTrigger: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerTrigger: ({ asChild, children, ...rest }: React.ComponentProps<typeof Dialog.Trigger>) => react_jsx_runtime.JSX.Element;
+declare const DrawerHeader: ({ children, ...props }: React.ComponentProps<typeof YStack>) => react_jsx_runtime.JSX.Element;
+declare const DrawerBody: ({ children, ...props }: React.ComponentProps<typeof YStack>) => react_jsx_runtime.JSX.Element;
+declare const DrawerFooter: ({ children, ...props }: React.ComponentProps<typeof XStack>) => react_jsx_runtime.JSX.Element;
+declare const DrawerTitle: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DrawerDescription: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DrawerActionTrigger: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {}>, "scope" | "displayWhenAdapted"> & {
+    displayWhenAdapted?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    displayWhenAdapted?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {}, _hanzogui_web.StaticConfigPublic>;
 
 export { DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, type DrawerRootProps, DrawerTitle, DrawerTrigger };