@luxfi/ui 7.4.10 → 7.4.12

package/dist/drawer.js

@@ -1,28 +1,10 @@
 "use client";
-import { styled, View, Sheet } from '@hanzo/gui';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { styled, View, Sheet, Dialog, YStack, Text, XStack } from '@hanzo/gui';
 import * as React3 from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 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));
-}
 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",
@@ -53,23 +35,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -85,13 +63,35 @@ var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
+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({
   open: false,
   setOpen: () => {
   },
-  modal: true
+  modal: true,
+  narrow: false
 });
 var DrawerRoot = (props) => {
   const {
@@ -106,60 +106,40 @@ var DrawerRoot = (props) => {
   const [uncontrolled, setUncontrolled] = React3.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
+  const narrow = useIsNarrow();
   const setOpen = React3.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
   const state = React3.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [isOpen, setOpen, modal]
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [isOpen, setOpen, modal, narrow]
   );
-  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: isOpen,
-      onOpenChange: setOpen,
-      modal,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: narrow ? children : /* @__PURE__ */ jsx(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.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.useContext(DrawerPlacementContext);
     const size = React3.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React3.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
-    if (isNarrow) {
+    const { open, setOpen, modal, narrow } = React3.useContext(DrawerStateContext);
+    if (narrow) {
       return /* @__PURE__ */ jsxs(
         Sheet,
         {
@@ -177,7 +157,7 @@ var DrawerContent = React3.forwardRef(
                 transition: "lazy",
                 enterStyle: { opacity: 0 },
                 exitStyle: { opacity: 0 },
-                className: "bg-black/50"
+                backgroundColor: SCRIM
               }
             ),
             /* @__PURE__ */ jsx(Sheet.Handle, {}),
@@ -185,10 +165,11 @@ var DrawerContent = React3.forwardRef(
               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
               }
@@ -199,67 +180,61 @@ var DrawerContent = React3.forwardRef(
     }
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
       backdrop && /* @__PURE__ */ jsx(
-        RadixDialog.Overlay,
+        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__ */ jsx(
-        RadixDialog.Content,
+        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__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
+    return portalled ? /* @__PURE__ */ jsx(Dialog.Portal, { children: content }) : content;
   }
 );
 var DrawerCloseTrigger = React3.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, ...props }) }) })
+  );
 });
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
-};
-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 DrawerTrigger = ({ asChild = true, children, ...rest }) => {
+  const { setOpen, narrow } = React3.useContext(DrawerStateContext);
+  if (narrow) {
+    return React3.isValidElement(children) ? React3.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsx(Fragment, { children });
   }
-);
-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 = 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 });
-  }
-);
-var DrawerTitle = RadixDialog.Title;
-var DrawerDescription = RadixDialog.Description;
-var DrawerActionTrigger = RadixDialog.Close;
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { asChild, ...rest, children });
+};
+var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsx(YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink(children) });
+var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsx(YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink(children) });
+var DrawerFooter = ({ children, ...props }) => /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "flex-end", gap: 8, padding: 24, paddingTop: 0, ...props, children: ink(children) });
+var DrawerTitle = Dialog.Title;
+var DrawerDescription = Dialog.Description;
+var DrawerActionTrigger = Dialog.Close;
 
 export { DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/empty-state.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,14 +26,12 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/empty-state.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
+var MUTED = "var(--color-text-secondary)";
 var EmptyState = React__namespace.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
@@ -72,17 +69,20 @@ var EmptyState = React__namespace.forwardRef(
       return icon;
     })();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      gui.XStack,
       {
         ref,
-        className: cn("flex items-center justify-center py-10", className),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 40,
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-5", children: [
-          iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: iconContent }),
-          descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { alignItems: "center", gap: 20, children: [
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", justifyContent: "center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, textAlign: "center", color: MUTED, children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
           children
         ] })
       }

package/dist/empty-state.js

@@ -1,18 +1,15 @@
 "use client";
+import { XStack, YStack, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/empty-state.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
+var MUTED = "var(--color-text-secondary)";
 var EmptyState = React.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
@@ -50,17 +47,20 @@ var EmptyState = React.forwardRef(
       return icon;
     })();
     return /* @__PURE__ */ jsx(
-      "div",
+      XStack,
       {
         ref,
-        className: cn("flex items-center justify-center py-10", className),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 40,
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5", children: [
-          iconContent && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: iconContent }),
-          descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
-          ] }) : /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+        children: /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 20, children: [
+          iconContent && /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
+            /* @__PURE__ */ jsx(Text, { fontSize: 14, textAlign: "center", color: MUTED, children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
           children
         ] })
       }

package/dist/expiration-selector.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,9 +25,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function formatExpDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -39,28 +35,53 @@ var GROUP_LABELS = {
   monthly: "Monthly",
   quarterly: "Quarterly"
 };
+var SHAPE = {
+  selected: {
+    borderColor: "transparent",
+    backgroundColor: "var(--color-selected-control-bg)",
+    color: "var(--color-selected-control-text)"
+  },
+  resting: {
+    borderColor: "var(--color-border-divider)",
+    backgroundColor: "var(--card)",
+    color: "var(--color-text-secondary)",
+    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+  }
+};
 function ExpirationPill({ exp, isSelected, onClick }) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    gui.YStack,
     {
-      type: "button",
+      unstyled: true,
+      render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
       onClick,
-      className: cn(
-        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
-        "border text-xs",
-        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
-      ),
+      alignItems: "center",
+      gap: 2,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      flexShrink: 0,
+      borderWidth: 1,
+      borderStyle: "solid",
+      cursor: "pointer",
+      ...shape,
       children: [
-        /* @__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-[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"
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          gui.Text,
+          {
+            fontVariant: ["tabular-nums"],
+            style: { fontFamily: "monospace" },
+            fontSize: 10,
+            color: dteColor,
+            children: [
+              exp.dte,
+              "d"
+            ]
+          }
+        )
       ]
     }
   );
@@ -90,49 +111,23 @@ var ExpirationSelector = React__namespace.forwardRef(
         label: GROUP_LABELS[type],
         items: expirations.filter((e) => e.type === type)
       })).filter((g) => g.items.length > 0);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col gap-2", className),
-          ...rest,
-          children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date)) })
-          ] }, group.type))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex items-center gap-1", className),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+      return /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { ref, gap: 8, className, ...rest, children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.Text,
           {
-            ref: scrollRef,
-            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
-            children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date))
+            fontSize: 10,
+            fontWeight: "600",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            paddingHorizontal: 4,
+            color: "var(--color-text-secondary)",
+            children: group.label
           }
-        )
-      }
-    );
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) })
+      ] }, group.type)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { ref, alignItems: "center", gap: 4, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { ref: scrollRef, gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) }) });
   }
 );