@luxfi/ui 7.0.0 → 7.2.0

package/dist/dialog.d.ts

@@ -1,4 +1,3 @@
-import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React from 'react';
 
 type DialogSize = 'sm' | 'md' | 'full' | 'cover';
@@ -21,7 +20,7 @@ interface DialogRootProps {
         open: boolean;
     }) => void;
     size?: ResponsiveSize;
-    /** Accepted for API compat but not implemented — animations are CSS-only. */
+    /** Accepted for API compat but not implemented -- animations are CSS-only. */
     motionPreset?: string;
     modal?: boolean;
 }
@@ -50,17 +49,17 @@ 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: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogTitle: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-interface DialogTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {
+declare const DialogBackdrop: any;
+declare const DialogTitle: any;
+declare const DialogDescription: any;
+interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
-declare const DialogTrigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogTrigger: any;
 /**
  * `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: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogActionTrigger: any;
 
 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,8 +1,9 @@
 "use client";
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { Dialog } from '@hanzogui/dialog';
 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
@@ -10,24 +11,47 @@ 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",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "button",
+    CloseButtonFrame,
     {
-      type: "button",
-      "aria-label": "Close",
       ref,
-      className: cn(
-        "inline-flex items-center justify-center",
-        "size-5 min-w-0 shrink-0 p-0",
-        "rounded-sm border-0 overflow-hidden",
-        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
-        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
-        "disabled:opacity-40",
-        "cursor-pointer",
-        className
-      ),
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
@@ -60,9 +84,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogContext = React2.createContext({ size: "md" });
-function useDialogContext() {
-  return React2.useContext(DialogContext);
+var DialogSizeContext = React2.createContext({ size: "md" });
+function useDialogSizeContext() {
+  return React2.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -92,7 +116,7 @@ var DialogRoot = ({
   onOpenChange,
   size = "md",
   modal = true
-  // motionPreset is intentionally unused — kept for API compat
+  // motionPreset is intentionally unused -- kept for API compat
 }) => {
   const handleOpenChange = React2.useCallback(
     (nextOpen) => {
@@ -101,8 +125,8 @@ var DialogRoot = ({
     [onOpenChange]
   );
   const ctx = React2.useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    RadixDialog.Root,
+  return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Dialog,
     {
       open,
       defaultOpen,
@@ -115,8 +139,8 @@ var DialogRoot = ({
 var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
-    portalled = true,
-    portalRef,
+    portalled: _portalled = true,
+    portalRef: _portalRef,
     backdrop = true,
     className,
     paddingTop: _paddingTop,
@@ -127,21 +151,12 @@ var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
     ...styleProp,
     ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
   };
-  const { size } = useDialogContext();
-  let portalProps;
-  if (!portalled) {
-    portalProps = { container: void 0 };
-  } else if (portalRef) {
-    portalProps = { container: portalRef.current };
-  } else {
-    portalProps = {};
-  }
-  const Wrapper = portalled ? RadixDialog.Portal : React2.Fragment;
-  const wrapperProps = portalled ? portalProps : {};
-  return /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
+  const { size } = useDialogSizeContext();
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsx(
-      RadixDialog.Overlay,
+      Dialog.Overlay,
       {
+        unstyled: true,
         className: "fixed inset-0 z-[1400] bg-black/80"
       }
     ),
@@ -154,9 +169,10 @@ var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
           "overflow-hidden"
         ),
         children: /* @__PURE__ */ jsx(
-          RadixDialog.Content,
+          Dialog.Content,
           {
             ref,
+            unstyled: true,
             className: cn(
               // Base content styles
               "relative flex flex-col w-full p-6 outline-none text-base",
@@ -179,7 +195,7 @@ var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
 });
 var DialogCloseTrigger = React2.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
 var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
@@ -196,8 +212,9 @@ var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
       children: [
         startElement,
         /* @__PURE__ */ jsx(
-          RadixDialog.Title,
+          Dialog.Title,
           {
+            unstyled: true,
             className: cn(
               "text-base lg:text-lg font-medium",
               "whitespace-nowrap overflow-hidden text-ellipsis"
@@ -237,10 +254,10 @@ var DialogFooter = React2.forwardRef(function DialogFooter2({ className, ...prop
     }
   );
 });
-var DialogBackdrop = RadixDialog.Overlay;
-var DialogTitle = RadixDialog.Title;
-var DialogDescription = RadixDialog.Description;
-var DialogTrigger = RadixDialog.Trigger;
-var DialogActionTrigger = RadixDialog.Close;
+var DialogBackdrop = Dialog.Overlay;
+var DialogTitle = Dialog.Title;
+var DialogDescription = Dialog.Description;
+var DialogTrigger = Dialog.Trigger;
+var DialogActionTrigger = Dialog.Close;
 
 export { DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger };

package/dist/drawer.cjs

@@ -5,6 +5,7 @@ var RadixDialog = require('@radix-ui/react-dialog');
 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,24 +34,47 @@ 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, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
 var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    CloseButtonFrame,
     {
-      type: "button",
-      "aria-label": "Close",
       ref,
-      className: cn(
-        "inline-flex items-center justify-center",
-        "size-5 min-w-0 shrink-0 p-0",
-        "rounded-sm border-0 overflow-hidden",
-        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
-        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
-        "disabled:opacity-40",
-        "cursor-pointer",
-        className
-      ),
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",

package/dist/drawer.js

@@ -3,6 +3,7 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React2 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
@@ -10,24 +11,47 @@ 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",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "button",
+    CloseButtonFrame,
     {
-      type: "button",
-      "aria-label": "Close",
       ref,
-      className: cn(
-        "inline-flex items-center justify-center",
-        "size-5 min-w-0 shrink-0 p-0",
-        "rounded-sm border-0 overflow-hidden",
-        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
-        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
-        "disabled:opacity-40",
-        "cursor-pointer",
-        className
-      ),
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",

package/dist/heading.cjs

@@ -14,11 +14,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": "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]",
@@ -29,14 +25,13 @@ 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 levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const shimStyle = { ...styleProp };
-    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag,
       {
         ref,
         className: cn(BASE_CLASSES, levelClasses, className),
-        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        style: mergedStyle,
         ...rest
       }
     );

package/dist/heading.js

@@ -8,11 +8,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]",
@@ -23,14 +19,13 @@ var Heading = React.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
     const Tag = level ? LEVEL_TAG[level] : "h2";
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const shimStyle = { ...styleProp };
-    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsx(
       Tag,
       {
         ref,
         className: cn(BASE_CLASSES, levelClasses, className),
-        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        style: mergedStyle,
         ...rest
       }
     );