@luxfi/ui 7.0.0 → 7.2.0

package/dist/textarea.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -15,46 +14,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var textareaVariants = classVarianceAuthority.cva(
-  [
-    "w-full appearance-none outline-none transition-colors resize-y",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "px-2 py-1 text-xs rounded",
-        sm: "px-3 py-2 text-sm rounded-md",
-        md: "px-4 py-2 text-base rounded-md",
-        lg: "px-4 py-3 text-lg rounded-lg",
-        "2xl": "px-4 py-3 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var TEXTAREA_BASE = [
+  "w-full appearance-none outline-none transition-colors resize-y",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var TEXTAREA_SIZE_CLASSES = {
+  xs: "px-2 py-1 text-xs rounded",
+  sm: "px-3 py-2 text-sm rounded-md",
+  md: "px-4 py-2 text-base rounded-md",
+  lg: "px-4 py-3 text-lg rounded-lg",
+  "2xl": "px-4 py-3 text-xl rounded-lg"
+};
+var TEXTAREA_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0"
+};
 var Textarea = React__default.default.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         ref,
-        className: cn(textareaVariants({ size, variant }), className),
+        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );

package/dist/textarea.js

@@ -1,5 +1,4 @@
 "use client";
-import { cva } from 'class-variance-authority';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -9,46 +8,36 @@ import { jsx } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var textareaVariants = cva(
-  [
-    "w-full appearance-none outline-none transition-colors resize-y",
-    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-    "disabled:opacity-40 disabled:cursor-not-allowed",
-    "read-only:opacity-70",
-    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        xs: "px-2 py-1 text-xs rounded",
-        sm: "px-3 py-2 text-sm rounded-md",
-        md: "px-4 py-2 text-base rounded-md",
-        lg: "px-4 py-3 text-lg rounded-lg",
-        "2xl": "px-4 py-3 text-xl rounded-lg"
-      },
-      variant: {
-        outline: "border border-solid",
-        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-        unstyled: "border-0 bg-transparent p-0"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "outline"
-    }
-  }
-);
+var TEXTAREA_BASE = [
+  "w-full appearance-none outline-none transition-colors resize-y",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "read-only:opacity-70",
+  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+].join(" ");
+var TEXTAREA_SIZE_CLASSES = {
+  xs: "px-2 py-1 text-xs rounded",
+  sm: "px-3 py-2 text-sm rounded-md",
+  md: "px-4 py-2 text-base rounded-md",
+  lg: "px-4 py-3 text-lg rounded-lg",
+  "2xl": "px-4 py-3 text-xl rounded-lg"
+};
+var TEXTAREA_VARIANT_CLASSES = {
+  outline: "border border-solid",
+  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+  unstyled: "border-0 bg-transparent p-0"
+};
 var Textarea = React.forwardRef(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
-        className: cn(textareaVariants({ size, variant }), className),
+        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest
       }
     );

package/dist/tooltip.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixTooltip = require('@radix-ui/react-tooltip');
+var tooltip = require('@hanzogui/tooltip');
 var usehooks = require('@uidotdev/usehooks');
 var React = require('react');
 var clsx = require('clsx');
@@ -26,7 +26,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/tooltip.tsx
@@ -48,6 +47,10 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
 var Tooltip = React__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
@@ -58,10 +61,8 @@ var Tooltip = React__namespace.forwardRef(
       children,
       disabled,
       disableOnMobile,
-      portalled = true,
       content,
       contentProps,
-      portalRef,
       defaultOpen = false,
       triggerProps,
       closeDelay = 100,
@@ -109,36 +110,34 @@ var Tooltip = React__namespace.forwardRef(
     if (disabled || disableOnMobile && isMobile) return children;
     const defaultShowArrow = variant === "popover" ? false : true;
     const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
-    const placement = positioning?.placement ?? "top";
-    const side = placement.split("-")[0];
-    const align = placement.includes("-") ? placement.split("-")[1] : void 0;
-    const sideOffset = positioning?.offset?.mainAxis ?? 4;
     const isPopover = variant === "popover";
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixTooltip__namespace.Root,
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
-        delayDuration: openDelay,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixTooltip__namespace.Trigger,
+            tooltip.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
-              onClick: isMobile ? handleTriggerClick : void 0,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            RadixTooltip__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Tooltip.Content,
             {
               ref,
-              side,
-              align,
-              sideOffset,
-              onClick: interactive ? handleContentClick : void 0,
+              unstyled: true,
               className: cn(
                 "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
                 "animate-in fade-in-0 zoom-in-95",
@@ -147,12 +146,14 @@ var Tooltip = React__namespace.forwardRef(
                 !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
                 contentProps?.className
               ),
+              onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  RadixTooltip__namespace.Arrow,
+                  tooltip.Tooltip.Arrow,
                   {
+                    unstyled: true,
                     className: cn(
                       isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
                     )
@@ -161,7 +162,7 @@ var Tooltip = React__namespace.forwardRef(
                 content
               ]
             }
-          ) })
+          )
         ]
       }
     ) });

package/dist/tooltip.d.cts

@@ -1,4 +1,3 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 interface TooltipProps {
@@ -7,8 +6,8 @@ interface TooltipProps {
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
     content: React.ReactNode;
-    contentProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>;
-    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Trigger>;
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+    triggerProps?: React.HTMLAttributes<HTMLButtonElement>;
     disabled?: boolean;
     disableOnMobile?: boolean;
     children?: React.ReactNode;

package/dist/tooltip.d.ts

@@ -1,4 +1,3 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 interface TooltipProps {
@@ -7,8 +6,8 @@ interface TooltipProps {
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
     content: React.ReactNode;
-    contentProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>;
-    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Trigger>;
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+    triggerProps?: React.HTMLAttributes<HTMLButtonElement>;
     disabled?: boolean;
     disableOnMobile?: boolean;
     children?: React.ReactNode;

package/dist/tooltip.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 import { clsx } from 'clsx';
@@ -25,6 +25,10 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
 var Tooltip = React.forwardRef(
   function Tooltip2(props, ref) {
     const {
@@ -35,10 +39,8 @@ var Tooltip = React.forwardRef(
       children,
       disabled,
       disableOnMobile,
-      portalled = true,
       content,
       contentProps,
-      portalRef,
       defaultOpen = false,
       triggerProps,
       closeDelay = 100,
@@ -86,36 +88,34 @@ var Tooltip = React.forwardRef(
     if (disabled || disableOnMobile && isMobile) return children;
     const defaultShowArrow = variant === "popover" ? false : true;
     const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
-    const placement = positioning?.placement ?? "top";
-    const side = placement.split("-")[0];
-    const align = placement.includes("-") ? placement.split("-")[1] : void 0;
-    const sideOffset = positioning?.offset?.mainAxis ?? 4;
     const isPopover = variant === "popover";
-    return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(
-      RadixTooltip.Root,
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
+      Tooltip$1,
       {
         open,
         onOpenChange: handleOpenChange,
-        delayDuration: openDelay,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
         children: [
           /* @__PURE__ */ jsx(
-            RadixTooltip.Trigger,
+            Tooltip$1.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
-              onClick: isMobile ? handleTriggerClick : void 0,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
           ),
-          /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxs(
-            RadixTooltip.Content,
+          /* @__PURE__ */ jsxs(
+            Tooltip$1.Content,
             {
               ref,
-              side,
-              align,
-              sideOffset,
-              onClick: interactive ? handleContentClick : void 0,
+              unstyled: true,
               className: cn(
                 "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
                 "animate-in fade-in-0 zoom-in-95",
@@ -124,12 +124,14 @@ var Tooltip = React.forwardRef(
                 !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
                 contentProps?.className
               ),
+              onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsx(
-                  RadixTooltip.Arrow,
+                  Tooltip$1.Arrow,
                   {
+                    unstyled: true,
                     className: cn(
                       isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
                     )
@@ -138,7 +140,7 @@ var Tooltip = React.forwardRef(
                 content
               ]
             }
-          ) })
+          )
         ]
       }
     ) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
   "type": "module",
   "license": "MIT",
@@ -254,6 +254,11 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
+    "@hanzogui/core": "^3.0.6",
+    "@hanzogui/dialog": "^3.0.2",
+    "@hanzogui/popover": "^3.0.2",
+    "@hanzogui/text": "^3.0.2",
+    "@hanzogui/tooltip": "^3.0.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -261,17 +266,13 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@uidotdev/usehooks": "^2.4.1",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.31.0",
     "react-icons": "^5.4.0",
@@ -279,15 +280,15 @@
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "@hanzogui/core": "^3.0.2",
+    "@hanzogui/core": "^3.0.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@hanzogui/core": "^3.0.2",
+    "@hanzogui/core": "^3.0.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3"
   }
-}
+}

package/src/alert.tsx

@@ -1,4 +1,3 @@
-import { cva } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -20,58 +19,28 @@ import { Skeleton } from './skeleton';
 type AlertStatus = 'info' | 'warning' | 'warning_table' | 'success' | 'error';
 
 /* ------------------------------------------------------------------ */
-/*  CVA variants                                                       */
+/*  Class maps (replaced CVA)                                          */
 /* ------------------------------------------------------------------ */
 
-const alertRoot = cva(
-  // base
-  'w-full flex items-start relative rounded text-[var(--color-alert-fg)]',
-  {
-    variants: {
-      status: {
-        info: 'bg-[var(--color-alert-bg-info)]',
-        warning: 'bg-[var(--color-alert-bg-warning)]',
-        warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
-        success: 'bg-[var(--color-alert-bg-success)]',
-        error: 'bg-[var(--color-alert-bg-error)]',
-      },
-      size: {
-        sm: 'gap-2 px-2 py-2 text-xs',
-        md: 'gap-2 px-3 py-2 text-base',
-      },
-    },
-    defaultVariants: {
-      status: 'info',
-      size: 'md',
-    },
-  },
-);
+const ALERT_BASE = 'w-full flex items-start relative rounded text-[var(--color-alert-fg)]';
 
-const alertContent = cva('flex flex-1', {
-  variants: {
-    inline: {
-      'true': 'inline-flex flex-row items-center',
-      'false': 'flex flex-col',
-    },
-  },
-  defaultVariants: {
-    inline: true,
-  },
-});
+const STATUS_CLASSES: Record<AlertStatus, string> = {
+  info: 'bg-[var(--color-alert-bg-info)]',
+  warning: 'bg-[var(--color-alert-bg-warning)]',
+  warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
+  success: 'bg-[var(--color-alert-bg-success)]',
+  error: 'bg-[var(--color-alert-bg-error)]',
+};
 
-const INDICATOR_BASE = 'inline-flex items-center justify-center shrink-0 w-5 h-5 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full';
+const SIZE_CLASSES: Record<string, string> = {
+  sm: 'gap-2 px-2 py-2 text-xs',
+  md: 'gap-2 px-3 py-2 text-base',
+};
 
-const indicatorVariants = cva(INDICATOR_BASE, {
-  variants: {
-    size: {
-      sm: 'w-5 h-5 my-0',
-      md: 'w-5 h-5 my-[2px]',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+const INDICATOR_SIZE_CLASSES: Record<string, string> = {
+  sm: 'w-5 h-5 my-0',
+  md: 'w-5 h-5 my-[2px]',
+};
 
 /* ------------------------------------------------------------------ */
 /*  Props                                                              */
@@ -153,7 +122,10 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       }
 
       return (
-        <span className={ indicatorVariants({ size: resolvedSize }) }>
+        <span className={ cn(
+          'inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full',
+          INDICATOR_SIZE_CLASSES[resolvedSize],
+        ) }>
           { icon || defaultIcon }
         </span>
       );
@@ -188,13 +160,13 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <Skeleton loading={ loading }>
         <div
           ref={ ref }
-          className={ cn(alertRoot({ status, size: resolvedSize }), className) }
+          className={ cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className) }
           style={ alertStyle }
           { ...alertRest }
         >
           { iconElement }
           { children ? (
-            <div className={ alertContent({ inline }) }>
+            <div className={ cn('flex flex-1', inline ? 'inline-flex flex-row items-center' : 'flex flex-col') }>
               { title && <div className="font-semibold">{ title }</div> }
               <div
                 className={ cn('inline-flex flex-wrap', descClassName) }