@luxfi/ui 7.4.0 → 7.4.3

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 gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,9 +27,22 @@ 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));
 }
@@ -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 '@hanzo/gui';
 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"

package/dist/expiration-selector.js

@@ -32,8 +32,9 @@ function ExpirationPill({ exp, isSelected, onClick }) {
         /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
         /* @__PURE__ */ 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"

package/dist/greeks-display.cjs

@@ -30,12 +30,12 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);

package/dist/greeks-display.js

@@ -8,12 +8,12 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);

package/dist/gui.cjs

@@ -0,0 +1,13 @@
+"use client";
+'use strict';
+
+var gui = require('@hanzo/gui');
+
+
+
+Object.keys(gui).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return gui[k]; }
+	});
+});

package/dist/gui.d.cts

@@ -0,0 +1,2 @@
+export * from '@hanzo/gui';
+import 'lucide-react';

package/dist/gui.d.ts

@@ -0,0 +1,2 @@
+export * from '@hanzo/gui';
+import 'lucide-react';

package/dist/gui.js

@@ -0,0 +1,2 @@
+"use client";
+export * from '@hanzo/gui';

package/dist/heading.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
+var LEVEL_TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
 var LEVEL_CLASSES = {
   "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
   "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
@@ -23,13 +24,14 @@ var LEVEL_CLASSES = {
 var BASE_CLASSES = "font-heading text-heading";
 var Heading = React__default.default.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const Tag = level ? LEVEL_TAG[level] : gui.H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
     const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag,
       {
         ref,
+        unstyled: true,
         className: cn(BASE_CLASSES, levelClasses, className),
         style: mergedStyle,
         ...rest

package/dist/heading.js

@@ -1,4 +1,5 @@
 "use client";
+import { H3, H2, H1 } from '@hanzo/gui';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -8,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
+var LEVEL_TAG = { "1": H1, "2": H2, "3": H3 };
 var LEVEL_CLASSES = {
   "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
   "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
@@ -17,13 +18,14 @@ var LEVEL_CLASSES = {
 var BASE_CLASSES = "font-heading text-heading";
 var Heading = React.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const Tag = level ? LEVEL_TAG[level] : H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
     const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsx(
       Tag,
       {
         ref,
+        unstyled: true,
         className: cn(BASE_CLASSES, levelClasses, className),
         style: mergedStyle,
         ...rest