@luxfi/ui 7.0.0 → 7.1.0

package/src/popover.tsx

@@ -1,11 +1,11 @@
-import * as RadixPopover from '@radix-ui/react-popover';
+import { Popover as GuiPopover } from '@hanzogui/popover';
 import * as React from 'react';
 
 import { cn } from './utils';
 
 import { CloseButton } from './close-button';
 
-// --- Utility: map Chakra-style placement string to Radix side + align ---
+// --- Utility: map Chakra-style placement string to @hanzogui placement ---
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'center' | 'end';
@@ -61,7 +61,7 @@ export interface PopoverRootProps {
 }
 
 // Stash positioning info in context so PopoverContent can read it.
-interface PopoverPositioning {
+interface PopoverPositioningCtx {
   readonly side: Side;
   readonly align: Align;
   readonly sideOffset: number;
@@ -71,7 +71,7 @@ interface PopoverPositioning {
   readonly closeOnInteractOutside: boolean;
 }
 
-const PositioningContext = React.createContext<PopoverPositioning>({
+const PositioningContext = React.createContext<PopoverPositioningCtx>({
   side: 'bottom',
   align: 'start',
   sideOffset: 4,
@@ -90,8 +90,7 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
     positioning,
     autoFocus = false,
     closeOnInteractOutside = true,
-    modal = false,
-    // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
+    // lazyMount and unmountOnExit are handled via keepChildrenMounted
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     lazyMount: _lazyMount,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -111,7 +110,7 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
 
   const { side, align } = parsePlacement(mergedPositioning.placement);
 
-  const positioningValue = React.useMemo<PopoverPositioning>(() => ({
+  const positioningValue = React.useMemo<PopoverPositioningCtx>(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -125,21 +124,26 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
     mergedPositioning.overflowPadding, autoFocus, closeOnInteractOutside,
   ]);
 
-  // Bridge Chakra-style onOpenChange ({ open }) to Radix (open)
+  // Bridge Chakra-style onOpenChange ({ open }) to @hanzogui (open)
   const handleOpenChange = React.useCallback((isOpen: boolean) => {
     onOpenChange?.({ open: isOpen });
   }, [ onOpenChange ]);
 
+  const placement = mergedPositioning.placement ?? 'bottom-start';
+  const offset = mergedPositioning.offset?.mainAxis ?? 4;
+
   return (
     <PositioningContext.Provider value={ positioningValue }>
-      <RadixPopover.Root
+      <GuiPopover
         open={ open }
         defaultOpen={ defaultOpen }
         onOpenChange={ handleOpenChange }
-        modal={ modal }
+        placement={ placement as any }
+        offset={ offset }
+        disableFocus={ !autoFocus }
       >
         { children }
-      </RadixPopover.Root>
+      </GuiPopover>
     </PositioningContext.Provider>
   );
 };
@@ -155,7 +159,7 @@ export const PopoverTrigger = React.forwardRef<
   PopoverTriggerProps
 >(function PopoverTrigger(props, ref) {
   const { asChild = true, ...rest } = props;
-  return <RadixPopover.Trigger asChild={ asChild } ref={ ref } { ...rest }/>;
+  return <GuiPopover.Trigger asChild={ asChild ? 'except-style' : undefined } ref={ ref } { ...rest as any }/>;
 });
 
 // --- PopoverContent ---
@@ -174,7 +178,7 @@ export const PopoverContent = React.forwardRef<
   HTMLDivElement,
   PopoverContentProps
 >(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
+  const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
   const resolvedW = typeof w === 'object' ? (w as Record<string, string>).base ?? (w as Record<string, string>).lg : w;
   const contentStyle: React.CSSProperties = {
     ...styleProp,
@@ -183,21 +187,11 @@ export const PopoverContent = React.forwardRef<
     ...(maxW ? { maxWidth: maxW } : {}),
     ...(paddingTop !== undefined ? { paddingTop: typeof paddingTop === 'number' ? `${ paddingTop * 4 }px` : paddingTop } : {}),
   };
-  const positioning = React.useContext(PositioningContext);
-
-  const preventFocus = React.useCallback((e: Event) => e.preventDefault(), []);
-  const preventInteract = React.useCallback((e: Event) => e.preventDefault(), []);
 
-  const content = (
-    <RadixPopover.Content
+  return (
+    <GuiPopover.Content
       ref={ ref }
-      side={ positioning.side }
-      align={ positioning.align }
-      sideOffset={ positioning.sideOffset }
-      alignOffset={ positioning.alignOffset }
-      collisionPadding={ positioning.collisionPadding }
-      onOpenAutoFocus={ positioning.autoFocus ? undefined : preventFocus }
-      onInteractOutside={ positioning.closeOnInteractOutside ? undefined : preventInteract }
+      unstyled
       className={ cn(
         'z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]',
         'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
@@ -210,19 +204,9 @@ export const PopoverContent = React.forwardRef<
         className,
       ) }
       style={ Object.keys(contentStyle).length > 0 ? contentStyle : undefined }
-      { ...rest }
+      { ...rest as any }
     />
   );
-
-  if (!portalled) {
-    return content;
-  }
-
-  return (
-    <RadixPopover.Portal container={ portalRef?.current ?? undefined }>
-      { content }
-    </RadixPopover.Portal>
-  );
 });
 
 // --- PopoverArrow ---
@@ -235,10 +219,11 @@ export const PopoverArrow = React.forwardRef<
 >(function PopoverArrow(props, ref) {
   const { className, ...rest } = props;
   return (
-    <RadixPopover.Arrow
+    <GuiPopover.Arrow
       ref={ ref }
+      unstyled
       className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
-      { ...rest }
+      { ...rest as any }
     />
   );
 });
@@ -253,14 +238,15 @@ export const PopoverCloseTrigger = React.forwardRef<
 >(function PopoverCloseTrigger(props, ref) {
   const { className, ...rest } = props;
   return (
-    <RadixPopover.Close
+    <GuiPopover.Close
+      unstyled
       className={ cn('absolute top-1 right-1', className) }
-      { ...rest }
+      { ...rest as any }
       asChild
       ref={ ref }
     >
       <CloseButton/>
-    </RadixPopover.Close>
+    </GuiPopover.Close>
   );
 });
 
@@ -281,9 +267,9 @@ export const PopoverCloseTriggerWrapper = React.forwardRef<
   }
 
   return (
-    <RadixPopover.Close ref={ ref } { ...rest } asChild>
+    <GuiPopover.Close ref={ ref } { ...rest as any } asChild>
       { children }
-    </RadixPopover.Close>
+    </GuiPopover.Close>
   );
 });
 

package/src/skeleton.tsx

@@ -12,7 +12,7 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
   readonly asChild?: boolean;
 
-  // Legacy Chakra style-prop shims — converted to className / inline style.
+  // Legacy Chakra style-prop shims — converted to inline style.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   readonly w?: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -59,166 +59,124 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   readonly background?: string;
 }
 
-const SPACING_SCALE = 4;
-
-function toStylePx(value: number | string | undefined): string | undefined {
-  if (value === undefined) return undefined;
-  if (typeof value === 'string') return value;
-  return `${ value * SPACING_SCALE }px`;
+// Style-prop shim names that must NOT leak into the DOM.
+const SHIM_PROPS = [
+  'w', 'h', 'minW', 'maxW', 'display', 'flexGrow', 'flexShrink', 'flexBasis',
+  'fontWeight', 'textStyle', 'borderRadius', 'alignSelf', 'alignItems',
+  'justifyContent', 'color', 'mt', 'mb', 'ml', 'mr', 'height', 'overflow',
+  'whiteSpace', 'textOverflow', 'textTransform', 'gap', 'gridTemplateColumns',
+  'minWidth', 'boxSize', 'py', 'px', 'p', 'hideBelow', 'fontSize', 'flexWrap',
+  'wordBreak', 'lineHeight', 'marginRight', 'position', 'background',
+] as const;
+
+const S = 4; // Chakra spacing scale
+
+/** Resolve a dimension value (number → px via spacing scale, responsive object → first value). */
+function dim(v: unknown): string | undefined {
+  if (v == null) return undefined;
+  if (typeof v === 'number') return `${ v * S }px`;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') {
+    const o = v as Record<string, string>;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return undefined;
 }
 
-function extractSkeletonStyleProps(props: Record<string, unknown>): {
-  style: React.CSSProperties;
-  rest: Record<string, unknown>;
-} {
-  const style: React.CSSProperties = {};
-  const rest: Record<string, unknown> = {};
-
-  function resolveDimension(value: unknown): string | undefined {
-    if (value === undefined || value === null) return undefined;
-    if (typeof value === 'number') return `${ value * SPACING_SCALE }px`;
-    if (typeof value === 'string') return value;
-    if (typeof value === 'object') {
-      const obj = value as Record<string, string>;
-      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
-    }
-    return undefined;
-  }
+/** Convert a spacing number|string via the 4px scale. */
+function sp(v: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === 'number' ? `${ v * S }px` : v;
+}
 
-  for (const [ key, value ] of Object.entries(props)) {
-    if (value === undefined) continue;
-    switch (key) {
-      case 'w': {
-        const v = resolveDimension(value); if (v) style.width = v; break;
-      }
-      case 'h': {
-        const v = resolveDimension(value); if (v) style.height = v; break;
-      }
-      case 'minW': {
-        const v = resolveDimension(value); if (v) style.minWidth = v; break;
-      }
-      case 'maxW': {
-        const v = resolveDimension(value); if (v) style.maxWidth = v; break;
-      }
-      case 'height': style.height = value as string; break;
-      case 'display': style.display = value as string; break;
-      case 'flexGrow': style.flexGrow = value as number; break;
-      case 'flexShrink': style.flexShrink = value as number; break;
-      case 'flexBasis': style.flexBasis = value as string; break;
-      case 'fontWeight': style.fontWeight = value as number | string; break;
-      case 'borderRadius': style.borderRadius = value as string; break;
-      case 'alignSelf': style.alignSelf = value as string; break;
-      case 'alignItems': style.alignItems = value as string; break;
-      case 'justifyContent': style.justifyContent = value as string; break;
-      case 'color': style.color = value as string; break;
-      case 'mt': style.marginTop = toStylePx(value as number | string); break;
-      case 'mb': style.marginBottom = toStylePx(value as number | string); break;
-      case 'ml': style.marginLeft = toStylePx(value as number | string); break;
-      case 'mr': style.marginRight = toStylePx(value as number | string); break;
-      case 'overflow': style.overflow = value as string; break;
-      case 'whiteSpace': style.whiteSpace = value as string; break;
-      case 'textOverflow': style.textOverflow = value as string; break;
-      case 'textTransform': style.textTransform = value as string; break;
-      case 'gap': style.gap = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; break;
-      case 'gridTemplateColumns': style.gridTemplateColumns = value as string; break;
-      case 'minWidth': style.minWidth = value as string; break;
-      case 'boxSize': {
-        const s = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; style.width = s; style.height = s; break;
-      }
-      case 'py': {
-        const v = toStylePx(value as number | string); style.paddingTop = v; style.paddingBottom = v; break;
-      }
-      case 'px': {
-        const v = toStylePx(value as number | string); style.paddingLeft = v; style.paddingRight = v; break;
-      }
-      case 'p': {
-        const v = toStylePx(value as number | string); style.padding = v; break;
-      }
-      case 'hideBelow': break; // handled via className
-      case 'textStyle': break; // drop textStyle, not directly applicable
-      case 'fontSize': style.fontSize = value as string; break;
-      case 'flexWrap': style.flexWrap = value as React.CSSProperties['flexWrap']; break;
-      case 'wordBreak': style.wordBreak = value as React.CSSProperties['wordBreak']; break;
-      case 'lineHeight': style.lineHeight = value as string; break;
-      case 'marginRight': style.marginRight = value as string; break;
-      case 'position': style.position = value as React.CSSProperties['position']; break;
-      case 'background': style.background = value as string; break;
-      default: rest[key] = value; break;
-    }
+/** Build a CSSProperties object from legacy Chakra style-prop shims. */
+function shimToStyle(props: SkeletonProps): React.CSSProperties {
+  const s: React.CSSProperties = {};
+  if (props.w !== undefined) s.width = dim(props.w);
+  if (props.h !== undefined) s.height = dim(props.h);
+  if (props.minW !== undefined) s.minWidth = dim(props.minW);
+  if (props.maxW !== undefined) s.maxWidth = dim(props.maxW);
+  if (props.display !== undefined) s.display = props.display;
+  if (props.flexGrow !== undefined) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== undefined) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== undefined) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== undefined) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== undefined) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== undefined) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== undefined) s.alignItems = props.alignItems;
+  if (props.justifyContent !== undefined) s.justifyContent = props.justifyContent;
+  if (props.color !== undefined) s.color = props.color;
+  if (props.mt !== undefined) s.marginTop = sp(props.mt);
+  if (props.mb !== undefined) s.marginBottom = sp(props.mb);
+  if (props.ml !== undefined) s.marginLeft = sp(props.ml);
+  if (props.mr !== undefined) s.marginRight = sp(props.mr);
+  if (props.height !== undefined) s.height = props.height;
+  if (props.overflow !== undefined) s.overflow = props.overflow;
+  if (props.whiteSpace !== undefined) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== undefined) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== undefined) s.textTransform = props.textTransform;
+  if (props.gap !== undefined) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== undefined) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== undefined) s.minWidth = props.minWidth;
+  if (props.boxSize !== undefined) {
+    const v = typeof props.boxSize === 'number' ? `${ props.boxSize * S }px` : props.boxSize;
+    s.width = v; s.height = v;
   }
+  if (props.py !== undefined) { const v = sp(props.py); s.paddingTop = v; s.paddingBottom = v; }
+  if (props.px !== undefined) { const v = sp(props.px); s.paddingLeft = v; s.paddingRight = v; }
+  if (props.p !== undefined) s.padding = sp(props.p);
+  if (props.fontSize !== undefined) s.fontSize = props.fontSize;
+  if (props.flexWrap !== undefined) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== undefined) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== undefined) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== undefined) s.marginRight = props.marginRight;
+  if (props.position !== undefined) s.position = props.position;
+  if (props.background !== undefined) s.background = props.background;
+  return s;
+}
 
-  return { style, rest };
+/** Strip shim keys from props so they don't leak into the DOM. */
+function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeof SHIM_PROPS)[number]> {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out as Omit<T, (typeof SHIM_PROPS)[number]>;
 }
 
+const SKELETON_CLASSES = [
+  'animate-skeleton-shimmer rounded-sm',
+  'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
+  'bg-[length:200%_100%]',
+].join(' ');
+
+const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
+
 export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
-    const {
-      loading = false,
-      asChild,
-      className,
-      children,
-      style: styleProp,
-      // Destructure style-prop shims so they don't leak into DOM
-      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
-      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
-      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
-      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
-      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
-      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
-      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
-      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
-      marginRight: _marginRight, position: _position, background: _background,
-      as: Component = 'div',
-      ...htmlRest
-    } = props;
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = 'div', ...allRest } = props;
 
-    // Collect legacy style props into a CSSProperties object
-    const { style: shimStyle } = extractSkeletonStyleProps({
-      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
-      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
-      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
-      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
-      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
-      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
-      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
-      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
-      marginRight: _marginRight, position: _position, background: _background,
-    });
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ?
-      { ...shimStyle, ...styleProp } :
-      undefined;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : undefined;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : undefined;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
 
-    const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
-    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : undefined;
-    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    // Strip shim props from what reaches the DOM.
+    const htmlRest = stripShims(allRest);
 
     if (!loading) {
-      // When asChild is true, render children directly without a wrapper div
-      if (asChild && React.isValidElement(children)) {
-        return children;
-      }
+      if (asChild && React.isValidElement(children)) return children;
       return (
-        <Component ref={ ref } className={ finalClassName } style={ mergedStyle } { ...htmlRest }>
+        <Component ref={ ref } className={ cls } style={ mergedStyle } { ...htmlRest }>
           { children }
         </Component>
       );
     }
 
-    // When asChild is true and loading, wrap the child in skeleton styles
     if (asChild && React.isValidElement(children)) {
       return (
         <Component
           ref={ ref }
           data-loading
-          className={ cn(
-            'animate-skeleton-shimmer rounded-sm',
-            'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
-            'bg-[length:200%_100%]',
-            'text-transparent [&_*]:invisible',
-            finalClassName,
-          ) }
+          className={ cn(SKELETON_CLASSES, 'text-transparent [&_*]:invisible', cls) }
           style={ mergedStyle }
           { ...htmlRest }
         >
@@ -231,13 +189,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       <Component
         ref={ ref }
         data-loading
-        className={ cn(
-          'animate-skeleton-shimmer rounded-sm',
-          'bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]',
-          'bg-[length:200%_100%]',
-          children ? 'text-transparent [&_*]:invisible' : 'min-h-5',
-          finalClassName,
-        ) }
+        className={ cn(SKELETON_CLASSES, children ? 'text-transparent [&_*]:invisible' : 'min-h-5', cls) }
         style={ mergedStyle }
         { ...htmlRest }
       >

package/src/tooltip.tsx

@@ -1,4 +1,7 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import {
+  Tooltip as GuiTooltip,
+  TooltipGroup as GuiTooltipGroup,
+} from '@hanzogui/tooltip';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 
@@ -24,14 +27,21 @@ function useIsMobile(): boolean {
   return isMobile;
 }
 
+/** Map placement string to @hanzogui Popper placement prop. */
+function mapPlacement(p: string | undefined): string | undefined {
+  if (!p) return undefined;
+  // @hanzogui/popper uses same placement strings as floating-ui
+  return p;
+}
+
 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>;
+  contentProps?: React.HTMLAttributes<HTMLDivElement>;
+  triggerProps?: React.HTMLAttributes<HTMLButtonElement>;
   disabled?: boolean;
   disableOnMobile?: boolean;
   children?: React.ReactNode;
@@ -63,10 +73,8 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       children,
       disabled,
       disableOnMobile,
-      portalled = true,
       content,
       contentProps,
-      portalRef,
       defaultOpen = false,
       triggerProps,
       closeDelay = 100,
@@ -127,58 +135,57 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     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';
 
+    const placement = mapPlacement(positioning?.placement) ?? 'top';
+    const offset = positioning?.offset?.mainAxis ?? 4;
+
     return (
-      <RadixTooltip.Provider delayDuration={ openDelay } skipDelayDuration={ 0 }>
-        <RadixTooltip.Root
+      <GuiTooltipGroup delay={ openDelay }>
+        <GuiTooltip
           open={ open }
           onOpenChange={ handleOpenChange }
-          delayDuration={ openDelay }
+          delay={{ open: openDelay, close: closeDelay }}
+          placement={ placement as any }
+          offset={ offset }
+          unstyled
         >
-          <RadixTooltip.Trigger
+          <GuiTooltip.Trigger
             ref={ open ? triggerRef : undefined }
             asChild
-            onClick={ isMobile ? handleTriggerClick : undefined }
-            { ...triggerProps }
+            {...(isMobile ? { onPress: handleTriggerClick } : {})}
+            { ...triggerProps as any }
           >
             { 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>
+          </GuiTooltip.Trigger>
+
+          <GuiTooltip.Content
+            ref={ ref }
+            unstyled
+            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,
+            ) }
+            onClick={ interactive ? handleContentClick : undefined }
+            { ...(selected ? { 'data-selected': true } : {}) }
+            { ...contentProps as any }
+          >
+            { showArrow && (
+              <GuiTooltip.Arrow
+                unstyled
+                className={ cn(
+                  isPopover ? 'fill-[var(--color-popover-bg)]' : 'fill-[var(--color-tooltip-bg)]',
+                ) }
+              />
+            ) }
+            { content }
+          </GuiTooltip.Content>
+        </GuiTooltip>
+      </GuiTooltipGroup>
     );
   },
 );