@luxfi/ui 7.0.0 → 7.1.0

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.1.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,15 +266,12 @@
     "@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",
@@ -279,15 +281,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/badge.tsx

@@ -1,5 +1,3 @@
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
 import React from 'react';
 
 import { cn } from './utils';
@@ -23,26 +21,13 @@ type ColorPalette =
   'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' |
   'bright_purple' | 'bright_pink';
 
-const badgeVariants = cva(
-  'inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text',
-  {
-    variants: {
-      variant: {
-        subtle: '',
-        solid: '',
-      },
-      size: {
-        sm: 'text-xs p-1 h-[18px] min-h-[18px]',
-        md: 'text-sm px-1 py-0.5 min-h-6',
-        lg: 'text-sm px-2 py-1 min-h-7 font-semibold',
-      },
-    },
-    defaultVariants: {
-      variant: 'subtle',
-      size: 'md',
-    },
-  },
-);
+const BASE_CLASSES = 'inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text';
+
+const SIZE_CLASSES = {
+  sm: 'text-xs p-1 h-[18px] min-h-[18px]',
+  md: 'text-sm px-1 py-0.5 min-h-6',
+  lg: 'text-sm px-2 py-1 min-h-7 font-semibold',
+} as const;
 
 const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
   gray: 'bg-badge-gray-bg text-badge-gray-fg',
@@ -70,13 +55,14 @@ const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
 };
 
 export interface BadgeProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
-  VariantProps<typeof badgeVariants> {
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
   readonly loading?: boolean;
   readonly startElement?: React.ReactNode;
   readonly endElement?: React.ReactNode;
   readonly truncated?: boolean;
   readonly colorPalette?: ColorPalette;
+  readonly variant?: 'subtle' | 'solid';
+  readonly size?: 'sm' | 'md' | 'lg';
   // Legacy Chakra style-prop shims
   readonly flexShrink?: number;
   readonly gap?: number | string;
@@ -84,6 +70,8 @@ export interface BadgeProps
   readonly mr?: number | string;
 }
 
+const S = 4; // Chakra spacing scale
+
 export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   function Badge(props, ref) {
     const {
@@ -92,8 +80,8 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       children,
       truncated = false,
       endElement,
-      variant,
-      size,
+      variant: _variant,
+      size = 'md',
       colorPalette = 'gray',
       className,
       flexShrink: _flexShrink,
@@ -106,16 +94,16 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
 
     const shimStyle: React.CSSProperties = { ...styleProp };
     if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * 4 }px` : _gap;
+    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * S }px` : _gap;
     if (_ml !== undefined) {
       if (typeof _ml === 'object') {
         const obj = _ml as Record<string, number>;
-        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * 4 }px`;
+        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * S }px`;
       } else {
-        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * 4 }px` : _ml;
+        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * S }px` : _ml;
       }
     }
-    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * 4 }px` : _mr;
+    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * S }px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
 
     const child = children ? (
@@ -132,7 +120,8 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       <span
         ref={ ref as React.Ref<HTMLSpanElement> }
         className={ cn(
-          badgeVariants({ variant, size }),
+          BASE_CLASSES,
+          SIZE_CLASSES[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className,
         ) }