@luxfi/ui 7.3.2 → 7.4.2

package/dist/close-button.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +27,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/close-button.tsx
 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 = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",

package/dist/close-button.js

@@ -1,5 +1,5 @@
 "use client";
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/dialog.cjs

@@ -1,11 +1,10 @@
 "use client";
 'use strict';
 
-var dialog = require('@hanzogui/dialog');
+var gui = require('@hanzo/gui');
 var React2 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var core = require('@hanzogui/core');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -33,7 +32,7 @@ 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 = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",
@@ -148,7 +147,7 @@ var DialogRoot = ({
   );
   const ctx = React2__namespace.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog,
+    gui.Dialog,
     {
       open,
       defaultOpen,
@@ -174,9 +173,9 @@ var DialogContent = React2__namespace.forwardRef(function DialogContent2(props,
     ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
   };
   const { size } = useDialogSizeContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-      dialog.Dialog.Overlay,
+      gui.Dialog.Overlay,
       {
         unstyled: true,
         className: "fixed inset-0 z-[1400] bg-black/80"
@@ -191,7 +190,7 @@ var DialogContent = React2__namespace.forwardRef(function DialogContent2(props,
           "overflow-hidden"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          dialog.Dialog.Content,
+          gui.Dialog.Content,
           {
             ref,
             unstyled: true,
@@ -217,7 +216,7 @@ var DialogContent = React2__namespace.forwardRef(function DialogContent2(props,
 });
 var DialogCloseTrigger = React2__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
 var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
@@ -234,7 +233,7 @@ var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, re
       children: [
         startElement,
         /* @__PURE__ */ jsxRuntime.jsx(
-          dialog.Dialog.Title,
+          gui.Dialog.Title,
           {
             unstyled: true,
             className: cn(
@@ -276,11 +275,11 @@ var DialogFooter = React2__namespace.forwardRef(function DialogFooter2({ classNa
     }
   );
 });
-var DialogBackdrop = dialog.Dialog.Overlay;
-var DialogTitle = dialog.Dialog.Title;
-var DialogDescription = dialog.Dialog.Description;
-var DialogTrigger = dialog.Dialog.Trigger;
-var DialogActionTrigger = dialog.Dialog.Close;
+var DialogBackdrop = gui.Dialog.Overlay;
+var DialogTitle = gui.Dialog.Title;
+var DialogDescription = gui.Dialog.Description;
+var DialogTrigger = gui.Dialog.Trigger;
+var DialogActionTrigger = gui.Dialog.Close;
 
 exports.DialogActionTrigger = DialogActionTrigger;
 exports.DialogBackdrop = DialogBackdrop;

package/dist/dialog.d.cts

@@ -1,3 +1,6 @@
+import * as _hanzo_gui from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
+import * as _hanzogui_core from '@hanzogui/core';
 import * as React from 'react';
 
 type DialogSize = 'sm' | 'md' | 'full' | 'cover';
@@ -49,17 +52,67 @@ declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & Reac
 interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogBackdrop: any;
-declare const DialogTitle: any;
-declare const DialogDescription: any;
+declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>, "forceMount" | "scope"> & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DialogTitle: _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 DialogDescription: _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>;
 interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
-declare const DialogTrigger: any;
+declare const DialogTrigger: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {}, _hanzogui_web.StaticConfigPublic>;
 /**
  * `DialogActionTrigger` renders its child and closes the dialog on click.
  * This mirrors the Chakra `Dialog.ActionTrigger` behavior which wraps
  * children in a close action.
  */
-declare const DialogActionTrigger: any;
+declare const DialogActionTrigger: _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 { DialogActionTrigger, DialogBackdrop, DialogBody, type DialogBodyProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogRoot, type DialogRootProps, DialogTitle, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.d.ts

@@ -1,3 +1,6 @@
+import * as _hanzo_gui from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
+import * as _hanzogui_core from '@hanzogui/core';
 import * as React from 'react';
 
 type DialogSize = 'sm' | 'md' | 'full' | 'cover';
@@ -49,17 +52,67 @@ declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & Reac
 interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogBackdrop: any;
-declare const DialogTitle: any;
-declare const DialogDescription: any;
+declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>, "forceMount" | "scope"> & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DialogTitle: _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 DialogDescription: _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>;
 interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
-declare const DialogTrigger: any;
+declare const DialogTrigger: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {}, _hanzogui_web.StaticConfigPublic>;
 /**
  * `DialogActionTrigger` renders its child and closes the dialog on click.
  * This mirrors the Chakra `Dialog.ActionTrigger` behavior which wraps
  * children in a close action.
  */
-declare const DialogActionTrigger: any;
+declare const DialogActionTrigger: _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 { DialogActionTrigger, DialogBackdrop, DialogBody, type DialogBodyProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogRoot, type DialogRootProps, DialogTitle, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.js

@@ -1,9 +1,8 @@
 "use client";
-import { Dialog } from '@hanzogui/dialog';
+import { styled, View, Dialog } from '@hanzo/gui';
 import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/dialog.tsx

package/dist/drawer.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var RadixDialog = require('@radix-ui/react-dialog');
-var React2 = require('react');
+var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var core = require('@hanzogui/core');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,14 +27,27 @@ function _interopNamespace(e) {
 }
 
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+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 = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",
@@ -68,7 +81,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
@@ -95,8 +108,14 @@ var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
-var DrawerPlacementContext = React2__namespace.createContext("right");
-var DrawerSizeContext = React2__namespace.createContext("md");
+var DrawerPlacementContext = React3__namespace.createContext("right");
+var DrawerSizeContext = React3__namespace.createContext("md");
+var DrawerStateContext = React3__namespace.createContext({
+  open: false,
+  setOpen: () => {
+  },
+  modal: true
+});
 var DrawerRoot = (props) => {
   const {
     children,
@@ -107,19 +126,26 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const handleOpenChange = React2__namespace.useCallback((nextOpen) => {
+  const [uncontrolled, setUncontrolled] = React3__namespace.useState(defaultOpen ?? false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolled;
+  const setOpen = React3__namespace.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+  }, [isControlled, onOpenChange]);
+  const state = React3__namespace.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [isOpen, setOpen, modal]
+  );
+  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,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
+      open: isOpen,
+      onOpenChange: setOpen,
       modal,
       children
     }
-  ) }) });
+  ) }) }) });
 };
 var PLACEMENT_CLASSES = {
   right: [
@@ -149,11 +175,51 @@ var SIZE_CLASSES = {
   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 DrawerContent = React2__namespace.forwardRef(
+var DrawerContent = React3__namespace.forwardRef(
   function DrawerContent2(props, ref) {
     const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React2__namespace.useContext(DrawerPlacementContext);
-    const size = React2__namespace.useContext(DrawerSizeContext);
+    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) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        gui.Sheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          modal,
+          dismissOnSnapToBottom: true,
+          snapPointsMode: "percent",
+          snapPoints: [88],
+          transition: "medium",
+          children: [
+            backdrop && /* @__PURE__ */ jsxRuntime.jsx(
+              gui.Sheet.Overlay,
+              {
+                transition: "lazy",
+                enterStyle: { opacity: 0 },
+                exitStyle: { opacity: 0 },
+                className: "bg-black/50"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Sheet.Handle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              gui.Sheet.Frame,
+              {
+                unstyled: true,
+                className: cn(
+                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
+                  className
+                ),
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      );
+    }
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       backdrop && /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialog__namespace.Overlay,
@@ -186,7 +252,7 @@ var DrawerContent = React2__namespace.forwardRef(
     return content;
   }
 );
-var DrawerCloseTrigger = React2__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React3__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     CloseButton,
     {
@@ -200,17 +266,17 @@ var DrawerTrigger = (props) => {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
 };
-var DrawerHeader = React2__namespace.forwardRef(
+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 DrawerBody = React2__namespace.forwardRef(
+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 = React2__namespace.forwardRef(
+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 });
   }

package/dist/drawer.js

@@ -1,12 +1,25 @@
 "use client";
+import { styled, View, Sheet } from '@hanzo/gui';
 import * as RadixDialog from '@radix-ui/react-dialog';
-import * as React2 from 'react';
+import * as React3 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/drawer.tsx
+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);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -45,7 +58,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
@@ -72,8 +85,14 @@ var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
-var DrawerPlacementContext = React2.createContext("right");
-var DrawerSizeContext = React2.createContext("md");
+var DrawerPlacementContext = React3.createContext("right");
+var DrawerSizeContext = React3.createContext("md");
+var DrawerStateContext = React3.createContext({
+  open: false,
+  setOpen: () => {
+  },
+  modal: true
+});
 var DrawerRoot = (props) => {
   const {
     children,
@@ -84,19 +103,26 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const handleOpenChange = React2.useCallback((nextOpen) => {
+  const [uncontrolled, setUncontrolled] = React3.useState(defaultOpen ?? false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolled;
+  const setOpen = React3.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+  }, [isControlled, onOpenChange]);
+  const state = React3.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [isOpen, setOpen, modal]
+  );
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
     RadixDialog.Root,
     {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
+      open: isOpen,
+      onOpenChange: setOpen,
       modal,
       children
     }
-  ) }) });
+  ) }) }) });
 };
 var PLACEMENT_CLASSES = {
   right: [
@@ -126,11 +152,51 @@ var SIZE_CLASSES = {
   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 DrawerContent = React2.forwardRef(
+var DrawerContent = React3.forwardRef(
   function DrawerContent2(props, ref) {
     const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React2.useContext(DrawerPlacementContext);
-    const size = React2.useContext(DrawerSizeContext);
+    const placement = React3.useContext(DrawerPlacementContext);
+    const size = React3.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React3.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+    if (isNarrow) {
+      return /* @__PURE__ */ jsxs(
+        Sheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          modal,
+          dismissOnSnapToBottom: true,
+          snapPointsMode: "percent",
+          snapPoints: [88],
+          transition: "medium",
+          children: [
+            backdrop && /* @__PURE__ */ jsx(
+              Sheet.Overlay,
+              {
+                transition: "lazy",
+                enterStyle: { opacity: 0 },
+                exitStyle: { opacity: 0 },
+                className: "bg-black/50"
+              }
+            ),
+            /* @__PURE__ */ jsx(Sheet.Handle, {}),
+            /* @__PURE__ */ jsx(
+              Sheet.Frame,
+              {
+                unstyled: true,
+                className: cn(
+                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
+                  className
+                ),
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      );
+    }
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
       backdrop && /* @__PURE__ */ jsx(
         RadixDialog.Overlay,
@@ -163,7 +229,7 @@ var DrawerContent = React2.forwardRef(
     return content;
   }
 );
-var DrawerCloseTrigger = React2.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React3.forwardRef(function DrawerCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
     CloseButton,
     {
@@ -177,17 +243,17 @@ var DrawerTrigger = (props) => {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
 };
-var DrawerHeader = React2.forwardRef(
+var DrawerHeader = React3.forwardRef(
   function DrawerHeader2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
   }
 );
-var DrawerBody = React2.forwardRef(
+var DrawerBody = React3.forwardRef(
   function DrawerBody2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
   }
 );
-var DrawerFooter = React2.forwardRef(
+var DrawerFooter = React3.forwardRef(
   function DrawerFooter2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
   }

package/dist/expiration-selector.cjs

@@ -54,8 +54,9 @@ function ExpirationPill({ exp, isSelected, onClick }) {
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
           "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-blue-400/70" : "text-zinc-600",
-          exp.dte <= 7 && !isSelected && "text-amber-600"
+          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
+          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
+          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
         ), children: [
           exp.dte,
           "d"