@luxfi/ui 5.6.0 → 6.1.0

package/src/tokens.css

@@ -1,438 +0,0 @@
-/*
- * Design tokens — CSS custom properties
- *
- * These mirror the Chakra semantic tokens defined in
- * toolkit/theme/foundations/semanticTokens.ts and
- * toolkit/theme/foundations/colors.ts (DEFAULT_THEME_COLORS).
- *
- * Light mode is the default (:root). Dark mode activates via .dark class
- * (applied by next-themes with the "class" strategy).
- *
- * Palette reference (true neutral grays):
- *   gray.50  = #FAFAFA    gray.500 = #737373
- *   gray.100 = #F5F5F5    gray.600 = #525252
- *   gray.200 = #E5E5E5    gray.700 = #404040
- *   gray.300 = #D4D4D4    gray.800 = #262626
- *   gray.400 = #A3A3A3    gray.900 = #171717
- *
- *   blackAlpha.50  = rgba(16,17,18,0.04)   whiteAlpha.50  = rgba(255,255,255,0.04)
- *   blackAlpha.100 = rgba(16,17,18,0.06)   whiteAlpha.100 = rgba(255,255,255,0.06)
- *   blackAlpha.200 = rgba(16,17,18,0.08)   whiteAlpha.200 = rgba(255,255,255,0.08)
- *   blackAlpha.300 = rgba(16,17,18,0.16)   whiteAlpha.300 = rgba(255,255,255,0.16)
- *   blackAlpha.400 = rgba(16,17,18,0.24)   whiteAlpha.400 = rgba(255,255,255,0.24)
- *   blackAlpha.500 = rgba(16,17,18,0.36)   whiteAlpha.500 = rgba(255,255,255,0.36)
- *   blackAlpha.600 = rgba(16,17,18,0.48)   whiteAlpha.600 = rgba(255,255,255,0.48)
- *   blackAlpha.700 = rgba(16,17,18,0.64)   whiteAlpha.700 = rgba(255,255,255,0.64)
- *   blackAlpha.800 = rgba(16,17,18,0.80)   whiteAlpha.800 = rgba(255,255,255,0.80)
- *   blackAlpha.900 = rgba(16,17,18,0.92)   whiteAlpha.900 = rgba(255,255,255,0.92)
- */
-
-/* ================================================================
-   LIGHT MODE (default)
-   ================================================================ */
-:root {
-  /* --- Backgrounds --- */
-  --color-bg-primary: #FFFFFF;
-  --color-bg-info: #FAFAFA;
-  --color-bg-body: #FFFFFF;
-
-  /* --- Foregrounds --- */
-  --color-fg-info: #525252;
-
-  /* --- Text --- */
-  --color-text-primary: rgba(16, 17, 18, 0.80);
-  --color-text-secondary: #737373;
-  --color-text-error: #E53E3E;
-  --color-text-success: #38A169;
-
-  /* --- Headings --- */
-  --color-heading: rgba(16, 17, 18, 0.80);
-
-  /* --- Icons --- */
-  --color-icon-primary: #737373;
-  --color-icon-secondary: #A3A3A3;
-
-  /* --- Borders --- */
-  --color-border-divider: rgba(16, 17, 18, 0.06);
-  --color-border-error: #E53E3E;
-  --color-border-info: #A3A3A3;
-
-  /* --- Links --- */
-  --color-link-primary: #404040;
-  --color-link-primary-hover: #525252;
-  --color-link-secondary: #737373;
-  --color-link-subtle: rgba(16, 17, 18, 0.80);
-  --color-link-subtle-hover: rgba(16, 17, 18, 0.80);
-  --color-link-menu: rgba(16, 17, 18, 0.80);
-  --color-link-underlaid-bg: #F5F5F5;
-  --color-link-nav-fg: rgba(16, 17, 18, 0.80);
-  --color-link-nav-fg-hover: #525252;
-  --color-link-nav-fg-selected: #171717;
-  --color-link-nav-fg-active: #525252;
-  --color-link-nav-bg-selected: #F5F5F5;
-
-  /* --- Buttons --- */
-  --color-button-solid-bg: #171717;
-  --color-button-solid-text: #FFFFFF;
-  --color-button-outline-fg: #171717;
-  --color-button-subtle-fg: rgba(16, 17, 18, 0.80);
-  --color-button-subtle-bg: rgba(16, 17, 18, 0.08);
-  --color-button-dropdown-fg: rgba(16, 17, 18, 0.80);
-  --color-button-dropdown-border: #F5F5F5;
-  --color-button-header-fg: rgba(16, 17, 18, 0.80);
-  --color-button-header-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-header-fg-highlighted: rgba(16, 17, 18, 0.80);
-  --color-button-header-border: #F5F5F5;
-  --color-button-header-bg-selected: rgba(16, 17, 18, 0.04);
-  --color-button-header-bg-highlighted: #FEEBCB;
-  --color-button-pagination-fg: rgba(16, 17, 18, 0.80);
-  --color-button-pagination-border: #F5F5F5;
-  --color-button-icon-background-bg: #FAFAFA;
-  --color-button-hero-bg: #171717;
-  --color-button-hero-fg: #FFFFFF;
-  --color-button-hero-bg-hover: #525252;
-  --color-button-hero-fg-hover: #FFFFFF;
-  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-segmented-fg: rgba(16, 17, 18, 0.80);
-  --color-button-icon-bg: rgba(16, 17, 18, 0.04);
-
-  /* --- Hover / Selected --- */
-  --color-hover: #525252;
-  --color-selected-control-bg: #F5F5F5;
-  --color-selected-control-text: #171717;
-  --color-selected-option-bg: #404040;
-
-  /* --- Navigation --- */
-  --color-nav-bg-selected: #F5F5F5;
-  --color-nav-text-selected: #171717;
-
-  /* --- Inputs --- */
-  --color-input-fg: #262626;
-  --color-input-bg: #FFFFFF;
-  --color-input-bg-readonly: #E5E5E5;
-  --color-input-border: #F5F5F5;
-  --color-input-border-hover: #E5E5E5;
-  --color-input-border-focus: #525252;
-  --color-input-placeholder: #A3A3A3;
-
-  /* --- Tags --- */
-  --color-tag-subtle-bg: rgba(16, 17, 18, 0.04);
-  --color-tag-subtle-fg: rgba(16, 17, 18, 0.80);
-  --color-tag-clickable-bg: #F5F5F5;
-  --color-tag-clickable-fg: rgba(16, 17, 18, 0.80);
-  --color-tag-filter-bg: #F5F5F5;
-  --color-tag-select-bg: #F5F5F5;
-  --color-tag-select-fg: #737373;
-  --color-tag-select-selected-bg: #404040;
-  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
-
-  /* --- Badges --- */
-  --color-badge-gray-bg: rgba(16, 17, 18, 0.04);
-  --color-badge-gray-fg: rgba(16, 17, 18, 0.80);
-  --color-badge-green-bg: #F0FFF4;
-  --color-badge-green-fg: #38A169;
-  --color-badge-red-bg: #FFF5F5;
-  --color-badge-red-fg: #E53E3E;
-  --color-badge-purple-bg: #F5F5F5;
-  --color-badge-purple-fg: #525252;
-  --color-badge-orange-bg: #FFFAF0;
-  --color-badge-orange-fg: #DD6B20;
-  --color-badge-blue-bg: #F5F5F5;
-  --color-badge-blue-fg: #525252;
-  --color-badge-yellow-bg: #FFFFF0;
-  --color-badge-yellow-fg: #D69E2E;
-  --color-badge-teal-bg: #F5F5F5;
-  --color-badge-teal-fg: #525252;
-  --color-badge-cyan-bg: #F5F5F5;
-  --color-badge-cyan-fg: #525252;
-  --color-badge-pink-bg: #FFF5F7;
-  --color-badge-pink-fg: #D53F8C;
-  --color-badge-purple-alt-bg: #F5F5F5;
-  --color-badge-purple-alt-fg: rgba(16, 17, 18, 0.80);
-  --color-badge-blue-alt-bg: #F5F5F5;
-  --color-badge-blue-alt-fg: rgba(16, 17, 18, 0.80);
-  --color-badge-bright-gray-bg: #F5F5F5;
-  --color-badge-bright-gray-fg: #525252;
-  --color-badge-bright-green-bg: #C6F6D5;
-  --color-badge-bright-green-fg: #25855A;
-  --color-badge-bright-red-bg: #FED7D7;
-  --color-badge-bright-red-fg: #C53030;
-  --color-badge-bright-blue-bg: #E5E5E5;
-  --color-badge-bright-blue-fg: #404040;
-  --color-badge-bright-yellow-bg: #FEFCBF;
-  --color-badge-bright-yellow-fg: #B7791F;
-  --color-badge-bright-teal-bg: #E5E5E5;
-  --color-badge-bright-teal-fg: #404040;
-  --color-badge-bright-cyan-bg: #E5E5E5;
-  --color-badge-bright-cyan-fg: #404040;
-  --color-badge-bright-orange-bg: #FEEBCB;
-  --color-badge-bright-orange-fg: #C05621;
-  --color-badge-bright-purple-bg: #E5E5E5;
-  --color-badge-bright-purple-fg: #404040;
-  --color-badge-bright-pink-bg: #FFF5F7;
-  --color-badge-bright-pink-fg: #B83280;
-
-  /* --- Alerts --- */
-  --color-alert-fg: rgba(16, 17, 18, 0.80);
-  --color-alert-bg-info: rgba(16, 17, 18, 0.04);
-  --color-alert-bg-warning: #FEEBCB;
-  --color-alert-bg-warning-table: #FFFAF0;
-  --color-alert-bg-success: #C6F6D5;
-  --color-alert-bg-error: #FED7D7;
-
-  /* --- Dialogs / Popovers / Drawers --- */
-  --color-dialog-bg: #FFFFFF;
-  --color-dialog-fg: rgba(16, 17, 18, 0.80);
-  --color-popover-bg: #FFFFFF;
-  --color-popover-shadow: rgba(16, 17, 18, 0.08);
-  --color-drawer-bg: #FFFFFF;
-
-  /* --- Tooltip --- */
-  --color-tooltip-bg: #171717;
-  --color-tooltip-fg: #FFFFFF;
-
-  /* --- Table --- */
-  --color-table-header-bg: rgba(16, 17, 18, 0.06);
-  --color-table-header-fg: rgba(16, 17, 18, 0.64);
-
-  /* --- Tabs --- */
-  --color-tabs-solid-fg: #171717;
-  --color-tabs-secondary-fg: rgba(16, 17, 18, 0.80);
-  --color-tabs-secondary-border: #D4D4D4;
-
-  /* --- Switch --- */
-  --color-switch-bg: #D4D4D4;
-
-  /* --- Skeleton --- */
-  --color-skeleton-start: rgba(16, 17, 18, 0.04);
-  --color-skeleton-end: rgba(16, 17, 18, 0.06);
-
-  /* --- Progress --- */
-  --color-progress-track: #F5F5F5;
-
-  /* --- Stats / Topbar --- */
-  --color-stats-bg: #FAFAFA;
-  --color-topbar-bg: #FAFAFA;
-
-  /* --- Graph --- */
-  --color-graph-line: #737373;
-  --color-graph-gradient-start: rgba(163, 163, 163, 0.3);
-  --color-graph-gradient-stop: rgba(163, 163, 163, 0);
-
-  /* --- Scrollbar --- */
-  --color-scrollbar-thumb: rgba(16, 17, 18, 0.16);
-
-  /* --- Selection --- */
-  --color-selection-bg: #E3CFE7;
-
-  /* --- Shadows --- */
-  --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
-  --shadow-popover: 0px 15px 50px -12px rgba(0, 0, 0, 0.25);
-  --shadow-drawer: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-/* ================================================================
-   DARK MODE
-   ================================================================ */
-.dark {
-  /* --- Backgrounds --- */
-  --color-bg-primary: #000000;
-  --color-bg-info: #171717;
-  --color-bg-body: #000000;
-
-  /* --- Foregrounds --- */
-  --color-fg-info: #D4D4D4;
-
-  /* --- Text --- */
-  --color-text-primary: rgba(255, 255, 255, 0.80);
-  --color-text-secondary: #A3A3A3;
-  --color-text-error: #E53E3E;
-  --color-text-success: #9AE6B4;
-
-  /* --- Headings --- */
-  --color-heading: rgba(255, 255, 255, 0.80);
-
-  /* --- Icons --- */
-  --color-icon-primary: #A3A3A3;
-  --color-icon-secondary: #737373;
-
-  /* --- Borders --- */
-  --color-border-divider: rgba(255, 255, 255, 0.06);
-  --color-border-error: #E53E3E;
-  --color-border-info: #737373;
-
-  /* --- Links --- */
-  --color-link-primary: rgba(255, 255, 255, 0.64);
-  --color-link-primary-hover: rgba(255, 255, 255, 0.64);
-  --color-link-secondary: #A3A3A3;
-  --color-link-subtle: #A3A3A3;
-  --color-link-subtle-hover: #A3A3A3;
-  --color-link-menu: rgba(255, 255, 255, 0.80);
-  --color-link-underlaid-bg: #262626;
-  --color-link-nav-fg: rgba(255, 255, 255, 0.80);
-  --color-link-nav-fg-hover: rgba(255, 255, 255, 0.64);
-  --color-link-nav-fg-selected: #FAFAFA;
-  --color-link-nav-fg-active: rgba(255, 255, 255, 0.64);
-  --color-link-nav-bg-selected: rgba(255, 255, 255, 0.06);
-
-  /* --- Buttons --- */
-  --color-button-solid-bg: rgba(255, 255, 255, 0.92);
-  --color-button-solid-text: #000000;
-  --color-button-outline-fg: rgba(255, 255, 255, 0.92);
-  --color-button-subtle-fg: rgba(255, 255, 255, 0.80);
-  --color-button-subtle-bg: rgba(255, 255, 255, 0.08);
-  --color-button-dropdown-fg: rgba(255, 255, 255, 0.80);
-  --color-button-dropdown-border: #525252;
-  --color-button-header-fg: #A3A3A3;
-  --color-button-header-fg-selected: rgba(255, 255, 255, 0.80);
-  --color-button-header-fg-highlighted: rgba(255, 255, 255, 0.80);
-  --color-button-header-border: #525252;
-  --color-button-header-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-header-bg-highlighted: #7B341E;
-  --color-button-pagination-fg: #FAFAFA;
-  --color-button-pagination-border: rgba(255, 255, 255, 0.06);
-  --color-button-icon-background-bg: rgba(255, 255, 255, 0.04);
-  --color-button-hero-bg: rgba(255, 255, 255, 0.92);
-  --color-button-hero-fg: #FFFFFF;
-  --color-button-hero-bg-hover: rgba(255, 255, 255, 0.64);
-  --color-button-hero-fg-hover: #FFFFFF;
-  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-segmented-fg: rgba(255, 255, 255, 0.80);
-  --color-button-icon-bg: rgba(255, 255, 255, 0.04);
-
-  /* --- Hover / Selected --- */
-  --color-hover: rgba(255, 255, 255, 0.64);
-  --color-selected-control-bg: rgba(255, 255, 255, 0.06);
-  --color-selected-control-text: #FAFAFA;
-  --color-selected-option-bg: rgba(255, 255, 255, 0.16);
-
-  /* --- Navigation --- */
-  --color-nav-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-nav-text-selected: #FAFAFA;
-
-  /* --- Inputs --- */
-  --color-input-fg: #FAFAFA;
-  --color-input-bg: #000000;
-  --color-input-bg-readonly: #262626;
-  --color-input-border: #525252;
-  --color-input-border-hover: #737373;
-  --color-input-border-focus: rgba(255, 255, 255, 0.64);
-  --color-input-placeholder: #737373;
-
-  /* --- Tags --- */
-  --color-tag-subtle-bg: rgba(255, 255, 255, 0.06);
-  --color-tag-subtle-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-clickable-bg: #262626;
-  --color-tag-clickable-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-filter-bg: rgba(255, 255, 255, 0.08);
-  --color-tag-select-bg: #262626;
-  --color-tag-select-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-select-selected-bg: rgba(255, 255, 255, 0.16);
-  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
-
-  /* --- Badges --- */
-  --color-badge-gray-bg: rgba(255, 255, 255, 0.06);
-  --color-badge-gray-fg: rgba(255, 255, 255, 0.80);
-  --color-badge-green-bg: #22543D;
-  --color-badge-green-fg: #9AE6B4;
-  --color-badge-red-bg: #822727;
-  --color-badge-red-fg: #FEB2B2;
-  --color-badge-purple-bg: #262626;
-  --color-badge-purple-fg: #D4D4D4;
-  --color-badge-orange-bg: #7B341E;
-  --color-badge-orange-fg: #FEEBCB;
-  --color-badge-blue-bg: #262626;
-  --color-badge-blue-fg: #D4D4D4;
-  --color-badge-yellow-bg: #744210;
-  --color-badge-yellow-fg: #FEFCBF;
-  --color-badge-teal-bg: #262626;
-  --color-badge-teal-fg: #D4D4D4;
-  --color-badge-cyan-bg: #262626;
-  --color-badge-cyan-fg: #D4D4D4;
-  --color-badge-pink-bg: #702459;
-  --color-badge-pink-fg: #FED7E2;
-  --color-badge-purple-alt-bg: #262626;
-  --color-badge-purple-alt-fg: rgba(255, 255, 255, 0.80);
-  --color-badge-blue-alt-bg: #262626;
-  --color-badge-blue-alt-fg: rgba(255, 255, 255, 0.80);
-  --color-badge-bright-gray-bg: #262626;
-  --color-badge-bright-gray-fg: #E5E5E5;
-  --color-badge-bright-green-bg: #22543D;
-  --color-badge-bright-green-fg: #9AE6B4;
-  --color-badge-bright-red-bg: #822727;
-  --color-badge-bright-red-fg: #FEB2B2;
-  --color-badge-bright-blue-bg: #404040;
-  --color-badge-bright-blue-fg: #E5E5E5;
-  --color-badge-bright-yellow-bg: #744210;
-  --color-badge-bright-yellow-fg: #FAF089;
-  --color-badge-bright-teal-bg: #404040;
-  --color-badge-bright-teal-fg: #E5E5E5;
-  --color-badge-bright-cyan-bg: #404040;
-  --color-badge-bright-cyan-fg: #E5E5E5;
-  --color-badge-bright-orange-bg: #C05621;
-  --color-badge-bright-orange-fg: #FEEBCB;
-  --color-badge-bright-purple-bg: #404040;
-  --color-badge-bright-purple-fg: #E5E5E5;
-  --color-badge-bright-pink-bg: #B83280;
-  --color-badge-bright-pink-fg: #FFF5F7;
-
-  /* --- Alerts --- */
-  --color-alert-fg: rgba(255, 255, 255, 0.80);
-  --color-alert-bg-info: rgba(255, 255, 255, 0.06);
-  --color-alert-bg-warning: rgba(124, 67, 16, 0.44);
-  --color-alert-bg-warning-table: rgba(123, 52, 30, 0.44);
-  --color-alert-bg-success: #1C4532;
-  --color-alert-bg-error: #63171B;
-
-  /* --- Dialogs / Popovers / Drawers --- */
-  --color-dialog-bg: #171717;
-  --color-dialog-fg: rgba(255, 255, 255, 0.80);
-  --color-popover-bg: #171717;
-  --color-popover-shadow: rgba(255, 255, 255, 0.16);
-  --color-drawer-bg: #171717;
-
-  /* --- Tooltip --- */
-  --color-tooltip-bg: #171717;
-  --color-tooltip-fg: #FFFFFF;
-
-  /* --- Table --- */
-  --color-table-header-bg: rgba(255, 255, 255, 0.08);
-  --color-table-header-fg: rgba(255, 255, 255, 0.64);
-
-  /* --- Tabs --- */
-  --color-tabs-solid-fg: rgba(255, 255, 255, 0.80);
-  --color-tabs-secondary-fg: rgba(255, 255, 255, 0.80);
-  --color-tabs-secondary-border: #525252;
-
-  /* --- Switch --- */
-  --color-switch-bg: rgba(255, 255, 255, 0.24);
-
-  /* --- Skeleton --- */
-  --color-skeleton-start: rgba(255, 255, 255, 0.04);
-  --color-skeleton-end: rgba(255, 255, 255, 0.06);
-
-  /* --- Progress --- */
-  --color-progress-track: rgba(255, 255, 255, 0.06);
-
-  /* --- Stats / Topbar --- */
-  --color-stats-bg: rgba(255, 255, 255, 0.04);
-  --color-topbar-bg: rgba(255, 255, 255, 0.04);
-
-  /* --- Graph --- */
-  --color-graph-line: rgba(255, 255, 255, 0.48);
-  --color-graph-gradient-start: rgba(255, 255, 255, 0.15);
-  --color-graph-gradient-stop: rgba(255, 255, 255, 0);
-
-  /* --- Scrollbar --- */
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.16);
-
-  /* --- Selection --- */
-  --color-selection-bg: #754B7D;
-
-  /* --- Shadows --- */
-  --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
-  --shadow-popover: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  --shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-}

package/src/tooltip.tsx

@@ -1,184 +0,0 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { useClickAway } from '@uidotdev/usehooks';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-// Inline useIsMobile hook (matches lg breakpoint = 1024px)
-const LG_BREAKPOINT = 1024;
-
-function useIsMobile(): boolean {
-  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: MediaQueryListEvent) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener('change', handler);
-    return () => mql.removeEventListener('change', handler);
-  }, []);
-
-  return isMobile;
-}
-
-export interface TooltipProps {
-  selected?: boolean;
-  showArrow?: boolean;
-  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>;
-  content: React.ReactNode;
-  contentProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>;
-  triggerProps?: React.ComponentPropsWithoutRef<typeof RadixTooltip.Trigger>;
-  disabled?: boolean;
-  disableOnMobile?: boolean;
-  children?: React.ReactNode;
-  variant?: string;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (details: { open: boolean }) => void;
-  closeDelay?: number;
-  openDelay?: number;
-  interactive?: boolean;
-  lazyMount?: boolean;
-  unmountOnExit?: boolean;
-  positioning?: {
-    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
-    overflowPadding?: number;
-    offset?: { mainAxis?: number; crossAxis?: number };
-  };
-  closeOnClick?: boolean;
-  closeOnPointerDown?: boolean;
-}
-
-export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip(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<boolean>(defaultOpen);
-    const timeoutRef = React.useRef<number | null>(null);
-
-    const isMobile = useIsMobile();
-
-    const handleOpenChange = React.useCallback((nextOpen: boolean) => {
-      setOpen(nextOpen);
-      onOpenChange?.({ open: nextOpen });
-    }, [ onOpenChange ]);
-
-    const handleOpenChangeManual = React.useCallback((nextOpen: boolean) => {
-      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<HTMLButtonElement>(handleClickAway);
-
-    const handleTriggerClick = React.useCallback(() => {
-      handleOpenChangeManual(!open);
-    }, [ handleOpenChangeManual, open ]);
-
-    const handleContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-
-      if (interactive) {
-        const closestLink = (event.target as HTMLElement)?.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 !== undefined ? showArrowProp : defaultShowArrow;
-
-    const placement = positioning?.placement ?? 'top';
-    const side = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';
-    const align = placement.includes('-') ? (placement.split('-')[1] as 'start' | 'end') : undefined;
-    const sideOffset = positioning?.offset?.mainAxis ?? 4;
-
-    const isPopover = variant === 'popover';
-
-    return (
-      <RadixTooltip.Provider delayDuration={ openDelay } skipDelayDuration={ 0 }>
-        <RadixTooltip.Root
-          open={ open }
-          onOpenChange={ handleOpenChange }
-          delayDuration={ openDelay }
-        >
-          <RadixTooltip.Trigger
-            ref={ open ? triggerRef : undefined }
-            asChild
-            onClick={ isMobile ? handleTriggerClick : undefined }
-            { ...triggerProps }
-          >
-            { children }
-          </RadixTooltip.Trigger>
-          <RadixTooltip.Portal container={ portalled ? (portalRef?.current ?? undefined) : undefined }>
-            <RadixTooltip.Content
-              ref={ ref }
-              side={ side }
-              align={ align }
-              sideOffset={ sideOffset }
-              onClick={ interactive ? handleContentClick : undefined }
-              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 }
-            >
-              { showArrow && (
-                <RadixTooltip.Arrow
-                  className={ cn(
-                    isPopover ? 'fill-[var(--color-popover-bg)]' : 'fill-[var(--color-tooltip-bg)]',
-                  ) }
-                />
-              ) }
-              { content }
-            </RadixTooltip.Content>
-          </RadixTooltip.Portal>
-        </RadixTooltip.Root>
-      </RadixTooltip.Provider>
-    );
-  },
-);

package/src/utils/cn.ts

@@ -1,7 +0,0 @@
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: Array<ClassValue>): string {
-  return twMerge(clsx(inputs));
-}

package/src/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}