@luxfi/ui 6.1.2 → 7.0.0

package/dist/tooltip.js

@@ -0,0 +1,148 @@
+"use client";
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { useClickAway } from '@uidotdev/usehooks';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/tooltip.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LG_BREAKPOINT = 1024;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < LG_BREAKPOINT;
+  });
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+var Tooltip = React.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React.useState(defaultOpen);
+    const timeoutRef = React.useRef(null);
+    const isMobile = useIsMobile();
+    const handleOpenChange = React.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React.useCallback((nextOpen) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [closeDelay, openDelay, onOpenChange]);
+    const handleClickAway = React.useCallback(() => {
+      handleOpenChangeManual(false);
+    }, [handleOpenChangeManual]);
+    const triggerRef = useClickAway(handleClickAway);
+    const handleTriggerClick = React.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    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,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delayDuration: openDelay,
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixTooltip.Trigger,
+            {
+              ref: open ? triggerRef : void 0,
+              asChild: true,
+              onClick: isMobile ? handleTriggerClick : void 0,
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxs(
+            RadixTooltip.Content,
+            {
+              ref,
+              side,
+              align,
+              sideOffset,
+              onClick: interactive ? handleContentClick : void 0,
+              className: cn(
+                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
+                "animate-in fade-in-0 zoom-in-95",
+                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
+                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
+                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
+                contentProps?.className
+              ),
+              ...selected ? { "data-selected": true } : {},
+              ...contentProps,
+              children: [
+                showArrow && /* @__PURE__ */ jsx(
+                  RadixTooltip.Arrow,
+                  {
+                    className: cn(
+                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
+                    )
+                  }
+                ),
+                content
+              ]
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+
+export { Tooltip };

package/dist/utils.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;

package/dist/utils.d.cts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

package/package.json

@@ -1,94 +1,293 @@
 {
   "name": "@luxfi/ui",
-  "version": "6.1.2",
-  "dependencies": {
-    "@gorhom/bottom-sheet": "4.6.4",
-    "@react-native-masked-view/masked-view": "0.3.2",
-    "@shopify/flash-list": "1.7.6",
-    "@shopify/react-native-skia": "2.2.20",
-    "@storybook/react": "8.5.2",
-    "@hanzogui/adapt": "2.0.3",
-    "@hanzogui/animations-css": "2.0.3",
-    "@hanzogui/animations-react-native": "2.0.3",
-    "@hanzogui/font-geist-sans": "2.0.3",
-    "@hanzogui/helpers-icon": "2.0.3",
-    "@hanzogui/portal": "2.0.3",
-    "@hanzogui/react-native-media-driver": "2.0.3",
-    "@hanzogui/remove-scroll": "2.0.3",
-    "@hanzogui/theme-base": "2.0.3",
-    "@tanstack/react-query": "5.90.20",
-    "@testing-library/react": "16.3.0",
-    "ethers": "5.7.2",
-    "expo-blur": "14.1.5",
-    "expo-image": "2.4.1",
-    "expo-linear-gradient": "14.1.5",
-    "i18next": "23.10.0",
-    "qrcode": "1.5.1",
-    "react": "19.0.3",
-    "react-i18next": "14.1.0",
-    "react-native": "0.79.5",
-    "react-native-gesture-handler": "2.24.0",
-    "react-native-image-colors": "1.5.2",
-    "react-native-keyboard-controller": "1.17.5",
-    "react-native-reanimated": "3.19.3",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-svg": "15.13.0",
-    "react-native-webview": "13.13.5",
-    "react-remove-scroll": "2.7.2",
-    "tamagui": "1.136.1",
-    "uuid": "9.0.0",
-    "wcag-contrast": "3.0.0",
-    "@luxfi/utilities": "workspace:^"
+  "version": "7.0.0",
+  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
+  "type": "module",
+  "license": "MIT",
+  "author": {
+    "name": "Lux Partners",
+    "url": "https://lux.network"
   },
-  "devDependencies": {
-    "@storybook/test": "8.5.2",
-    "@hanzogui/animations-moti": "2.0.3",
-    "@hanzogui/core": "2.0.3",
-    "@types/chrome": "0.0.304",
-    "@types/fs-extra": "11.0.2",
-    "@types/node": "22.13.1",
-    "@types/qrcode": "1.5.5",
-    "@typescript/native-preview": "7.0.0-dev.20260311.1",
-    "@luxfi/eslint-config": "workspace:^",
-    "@vitejs/plugin-react": "4.7.0",
-    "camelcase": "6.3.0",
-    "cheerio": "1.0.0-rc.12",
-    "esbuild-register": "3.6.0",
-    "eslint": "8.57.1",
-    "fs-extra": "11.2.0",
-    "jsdom": "20.0.3",
-    "typescript": "5.8.3",
-    "uppercamelcase": "3.0.0",
-    "vitest": "3.2.1",
-    "vitest-presets": "workspace:^"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxfi/ui.git",
+    "directory": "packages/ui"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "types",
-    "dist"
+    "dist",
+    "src",
+    "tokens.css"
   ],
-  "main": "./src/index.ts",
-  "module:jsx": "src",
-  "private": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./tokens.css",
+    "./accordion": {
+      "types": "./dist/accordion.d.ts",
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.cjs"
+    },
+    "./alert": {
+      "types": "./dist/alert.d.ts",
+      "import": "./dist/alert.js",
+      "require": "./dist/alert.cjs"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js",
+      "require": "./dist/avatar.cjs"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js",
+      "require": "./dist/badge.cjs"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js",
+      "require": "./dist/checkbox.cjs"
+    },
+    "./close-button": {
+      "types": "./dist/close-button.d.ts",
+      "import": "./dist/close-button.js",
+      "require": "./dist/close-button.cjs"
+    },
+    "./collapsible": {
+      "types": "./dist/collapsible.d.ts",
+      "import": "./dist/collapsible.js",
+      "require": "./dist/collapsible.cjs"
+    },
+    "./color-mode": {
+      "types": "./dist/color-mode.d.ts",
+      "import": "./dist/color-mode.js",
+      "require": "./dist/color-mode.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js",
+      "require": "./dist/drawer.cjs"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "import": "./dist/empty-state.js",
+      "require": "./dist/empty-state.cjs"
+    },
+    "./field": {
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js",
+      "require": "./dist/field.cjs"
+    },
+    "./heading": {
+      "types": "./dist/heading.d.ts",
+      "import": "./dist/heading.js",
+      "require": "./dist/heading.cjs"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button.d.ts",
+      "import": "./dist/icon-button.js",
+      "require": "./dist/icon-button.cjs"
+    },
+    "./image": {
+      "types": "./dist/image.d.ts",
+      "import": "./dist/image.js",
+      "require": "./dist/image.cjs"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js",
+      "require": "./dist/input.cjs"
+    },
+    "./input-group": {
+      "types": "./dist/input-group.d.ts",
+      "import": "./dist/input-group.js",
+      "require": "./dist/input-group.cjs"
+    },
+    "./link": {
+      "types": "./dist/link.d.ts",
+      "import": "./dist/link.js",
+      "require": "./dist/link.cjs"
+    },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js",
+      "require": "./dist/menu.cjs"
+    },
+    "./pin-input": {
+      "types": "./dist/pin-input.d.ts",
+      "import": "./dist/pin-input.js",
+      "require": "./dist/pin-input.cjs"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js",
+      "require": "./dist/popover.cjs"
+    },
+    "./progress": {
+      "types": "./dist/progress.d.ts",
+      "import": "./dist/progress.js",
+      "require": "./dist/progress.cjs"
+    },
+    "./progress-circle": {
+      "types": "./dist/progress-circle.d.ts",
+      "import": "./dist/progress-circle.js",
+      "require": "./dist/progress-circle.cjs"
+    },
+    "./radio": {
+      "types": "./dist/radio.d.ts",
+      "import": "./dist/radio.js",
+      "require": "./dist/radio.cjs"
+    },
+    "./rating": {
+      "types": "./dist/rating.d.ts",
+      "import": "./dist/rating.js",
+      "require": "./dist/rating.cjs"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs"
+    },
+    "./separator": {
+      "types": "./dist/separator.d.ts",
+      "import": "./dist/separator.js",
+      "require": "./dist/separator.cjs"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton.d.ts",
+      "import": "./dist/skeleton.js",
+      "require": "./dist/skeleton.cjs"
+    },
+    "./slider": {
+      "types": "./dist/slider.d.ts",
+      "import": "./dist/slider.js",
+      "require": "./dist/slider.cjs"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js",
+      "require": "./dist/switch.cjs"
+    },
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js",
+      "require": "./dist/table.cjs"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js",
+      "require": "./dist/tabs.cjs"
+    },
+    "./tag": {
+      "types": "./dist/tag.d.ts",
+      "import": "./dist/tag.js",
+      "require": "./dist/tag.cjs"
+    },
+    "./textarea": {
+      "types": "./dist/textarea.d.ts",
+      "import": "./dist/textarea.js",
+      "require": "./dist/textarea.cjs"
+    },
+    "./toaster": {
+      "types": "./dist/toaster.d.ts",
+      "import": "./dist/toaster.js",
+      "require": "./dist/toaster.cjs"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js",
+      "require": "./dist/tooltip.cjs"
+    },
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "import": "./dist/provider.js",
+      "require": "./dist/provider.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
+    "./bank": {
+      "types": "./dist/bank.d.ts",
+      "import": "./dist/bank.js",
+      "require": "./dist/bank.cjs"
+    },
+    "./explore": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./explore/*": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs",
+      "types": "./dist/*.d.ts"
+    }
+  },
   "scripts": {
-    "build:icons": "nx build:icons ui",
-    "build:icons:missing": "nx build:icons:missing ui",
-    "check:deps:usage": "nx check:deps:usage ui",
-    "lint": "nx lint ui",
-    "lint:fix": "nx lint:fix ui",
-    "lint:biome": "nx lint:biome ui",
-    "lint:biome:fix": "nx lint:biome:fix ui",
-    "lint:eslint": "nx lint:eslint ui",
-    "lint:eslint:fix": "nx lint:eslint:fix ui",
-    "test": "nx test ui",
-    "typecheck": "nx typecheck ui",
-    "typecheck:tsgo": "nx typecheck:tsgo ui",
-    "watch": "nx watch ui"
+    "build": "tsup",
+    "build:check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch"
   },
-  "nx": {
-    "includedScripts": []
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.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",
+    "es-toolkit": "^1.31.0",
+    "react-icons": "^5.4.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.0.0"
   },
-  "sideEffects": [
-    "*.css"
-  ],
-  "types": "./types/index"
-}
+  "peerDependencies": {
+    "@hanzogui/core": "^3.0.2",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@hanzogui/core": "^3.0.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}