react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/Tooltip/Tooltip.js

@@ -1 +1,200 @@
-"use strict";"use client";import{Fragment as b,jsx as d,jsxs as K}from"react/jsx-runtime";import{forwardRef as ye,useState as y,useRef as E,useCallback as C,useEffect as f,useMemo as M}from"react";import{createPortal as Ee}from"react-dom";import{TooltipTrigger as Ce,TooltipContent as Pe,TooltipArrow as Le,TooltipPortal as ke}from"./elements";import{calculateTooltipPosition as Q,getAlternatePosition as xe,clampToViewport as Ae,sideAlignToPosition as Re}from"./utils";export const Tooltip=ye(function(X,m){const{children:O,content:p,position:P,side:L,align:z="center",variant:N="dark",size:Y="medium",delay:I=200,hideDelay:j=0,offset:Z=8,sideOffset:ee,maxWidth:te=280,showArrow:ne=!0,disabled:B=!1,trigger:h=["hover","focus"],open:W,onOpenChange:g,avoidCollisions:q=!0,portal:oe=!0,animated:re=!0,classNames:k={},styles:x={},className:ie,zIndex:se=9999,ariaLabel:ce,...le}=X,c=E(null),l=E(null),i=E(null),s=E(null),[ue,_]=y(!1),[H,ae]=y({top:-9999,left:-9999}),[S,de]=y("top"),[fe,me]=y(!1);f(()=>{me(!0)},[]);const u=W!==void 0,t=u?W:ue,w=M(()=>P||(L?Re(L,z):"top"),[P,L,z]),A=ee??Z,o=M(()=>Array.isArray(h)?h:[h],[h]),R=C(()=>{if(!c.current||!l.current)return;const e=c.current.getBoundingClientRect(),r=l.current.getBoundingClientRect(),U=window.innerWidth,G=window.innerHeight,T={width:r.width,height:r.height};let J=w,a=Q(w,e,T,A);if(q){const $=xe(w,a,T,U,G);$&&(J=$,a=Q($,e,T,A)),a=Ae(a,T,U,G)}de(J),ae(a)},[w,A,q]),v=C(()=>{B||!p||(s.current&&(clearTimeout(s.current),s.current=null),i.current=setTimeout(()=>{u?g?.(!0):_(!0)},I))},[B,p,I,u,g]),n=C(()=>{i.current&&(clearTimeout(i.current),i.current=null),s.current=setTimeout(()=>{u?g?.(!1):_(!1)},j)},[j,u,g]),pe=C(()=>{t?n():v()},[t,v,n]);f(()=>{if(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{R()})});const e=()=>{requestAnimationFrame(R)};return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}}},[t,R]),f(()=>{if(!t)return;const e=r=>{r.key==="Escape"&&n()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[t,n]),f(()=>{if(!t||!o.includes("click"))return;const e=r=>{c.current&&!c.current.contains(r.target)&&l.current&&!l.current.contains(r.target)&&n()};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[t,o,n]),f(()=>()=>{i.current&&clearTimeout(i.current),s.current&&clearTimeout(s.current)},[]);const he=o.includes("hover")?v:void 0,ge=o.includes("hover")?n:void 0,we=o.includes("focus")?v:void 0,ve=o.includes("focus")?n:void 0,Te=o.includes("click")?pe:void 0;if(!p)return d(b,{children:O});const V=M(()=>`tooltip-${Math.random().toString(36).substr(2,9)}`,[]),D=t&&K(Pe,{ref:l,role:"tooltip",id:V,"aria-label":ce,$variant:N,$size:Y,$maxWidth:te,$animated:re,$isVisible:t,$position:S,className:k.content,style:{top:H.top,left:H.left,...x.content},children:[p,ne&&d(Le,{$variant:N,$position:S,className:k.arrow,style:x.arrow})]});return K(b,{children:[d(Ce,{ref:e=>{c.current=e,typeof m=="function"?m(e):m&&(m.current=e)},className:ie||k.trigger,style:x.trigger,onMouseEnter:he,onMouseLeave:ge,onFocus:we,onBlur:ve,onClick:Te,"aria-describedby":t?V:void 0,"data-state":t?"open":"closed",...le,children:O}),oe&&fe?Ee(d(ke,{$zIndex:se,children:D}),document.body):D]})});Tooltip.displayName="Tooltip";export const TooltipProvider=({children:F})=>d(b,{children:F});
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect, useMemo, } from 'react';
+import { createPortal } from 'react-dom';
+import { TooltipTrigger, TooltipContent, TooltipArrow, TooltipPortal } from './elements';
+import { calculateTooltipPosition, getAlternatePosition, clampToViewport, sideAlignToPosition, } from './utils';
+export const Tooltip = forwardRef(function TooltipComponent(props, ref) {
+    const { children, content, position: positionProp, side, align = 'center', variant = 'dark', size = 'medium', delay = 200, hideDelay = 0, offset = 8, sideOffset, maxWidth = 280, showArrow = true, disabled = false, trigger = ['hover', 'focus'], open: controlledOpen, onOpenChange, avoidCollisions = true, portal = true, animated = true, classNames = {}, styles = {}, className, zIndex = 9999, ariaLabel, ...rest } = props;
+    // Refs
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const showTimeoutRef = useRef(null);
+    const hideTimeoutRef = useRef(null);
+    // State
+    const [isOpen, setIsOpen] = useState(false);
+    const [coords, setCoords] = useState({ top: -9999, left: -9999 });
+    const [actualPosition, setActualPosition] = useState('top');
+    const [isMounted, setIsMounted] = useState(false);
+    // Check if mounted (for SSR)
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    // Controlled vs uncontrolled
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : isOpen;
+    // Determine position from props
+    const desiredPosition = useMemo(() => {
+        if (positionProp)
+            return positionProp;
+        if (side)
+            return sideAlignToPosition(side, align);
+        return 'top';
+    }, [positionProp, side, align]);
+    // Get final offset
+    const finalOffset = sideOffset ?? offset;
+    // Trigger modes
+    const triggers = useMemo(() => {
+        return Array.isArray(trigger) ? trigger : [trigger];
+    }, [trigger]);
+    // Calculate position
+    const updatePosition = useCallback(() => {
+        if (!triggerRef.current || !tooltipRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const dimensions = {
+            width: tooltipRect.width,
+            height: tooltipRect.height,
+        };
+        let newPosition = desiredPosition;
+        let newCoords = calculateTooltipPosition(desiredPosition, triggerRect, dimensions, finalOffset);
+        // Collision detection
+        if (avoidCollisions) {
+            const alternatePosition = getAlternatePosition(desiredPosition, newCoords, dimensions, viewportWidth, viewportHeight);
+            if (alternatePosition) {
+                newPosition = alternatePosition;
+                newCoords = calculateTooltipPosition(alternatePosition, triggerRect, dimensions, finalOffset);
+            }
+            // Clamp to viewport
+            newCoords = clampToViewport(newCoords, dimensions, viewportWidth, viewportHeight);
+        }
+        setActualPosition(newPosition);
+        setCoords(newCoords);
+    }, [desiredPosition, finalOffset, avoidCollisions]);
+    // Show tooltip
+    const show = useCallback(() => {
+        if (disabled || !content)
+            return;
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+        }
+        showTimeoutRef.current = setTimeout(() => {
+            if (isControlled) {
+                onOpenChange?.(true);
+            }
+            else {
+                setIsOpen(true);
+            }
+        }, delay);
+    }, [disabled, content, delay, isControlled, onOpenChange]);
+    // Hide tooltip
+    const hide = useCallback(() => {
+        if (showTimeoutRef.current) {
+            clearTimeout(showTimeoutRef.current);
+            showTimeoutRef.current = null;
+        }
+        hideTimeoutRef.current = setTimeout(() => {
+            if (isControlled) {
+                onOpenChange?.(false);
+            }
+            else {
+                setIsOpen(false);
+            }
+        }, hideDelay);
+    }, [hideDelay, isControlled, onOpenChange]);
+    // Toggle for click trigger
+    const toggle = useCallback(() => {
+        if (open) {
+            hide();
+        }
+        else {
+            show();
+        }
+    }, [open, show, hide]);
+    // Update position when open changes
+    useEffect(() => {
+        if (open) {
+            // Use multiple RAF to ensure DOM is ready
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    updatePosition();
+                });
+            });
+            // Update on scroll/resize
+            const handleUpdate = () => {
+                requestAnimationFrame(updatePosition);
+            };
+            window.addEventListener('scroll', handleUpdate, true);
+            window.addEventListener('resize', handleUpdate);
+            return () => {
+                window.removeEventListener('scroll', handleUpdate, true);
+                window.removeEventListener('resize', handleUpdate);
+            };
+        }
+    }, [open, updatePosition]);
+    // Escape key handler
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [open, hide]);
+    // Click outside handler for click trigger
+    useEffect(() => {
+        if (!open || !triggers.includes('click'))
+            return;
+        const handleClickOutside = (e) => {
+            if (triggerRef.current &&
+                !triggerRef.current.contains(e.target) &&
+                tooltipRef.current &&
+                !tooltipRef.current.contains(e.target)) {
+                hide();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [open, triggers, hide]);
+    // Cleanup timeouts
+    useEffect(() => {
+        return () => {
+            if (showTimeoutRef.current)
+                clearTimeout(showTimeoutRef.current);
+            if (hideTimeoutRef.current)
+                clearTimeout(hideTimeoutRef.current);
+        };
+    }, []);
+    // Event handlers
+    const handleMouseEnter = triggers.includes('hover') ? show : undefined;
+    const handleMouseLeave = triggers.includes('hover') ? hide : undefined;
+    const handleFocus = triggers.includes('focus') ? show : undefined;
+    const handleBlur = triggers.includes('focus') ? hide : undefined;
+    const handleClick = triggers.includes('click') ? toggle : undefined;
+    // Don't render if no content
+    if (!content) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Generate unique ID for accessibility
+    const tooltipId = useMemo(() => `tooltip-${Math.random().toString(36).substr(2, 9)}`, []);
+    // Tooltip element
+    const tooltipElement = open && (_jsxs(TooltipContent, { ref: tooltipRef, role: "tooltip", id: tooltipId, "aria-label": ariaLabel, "$variant": variant, "$size": size, "$maxWidth": maxWidth, "$animated": animated, "$isVisible": open, "$position": actualPosition, className: classNames.content, style: {
+            top: coords.top,
+            left: coords.left,
+            ...styles.content,
+        }, children: [content, showArrow && (_jsx(TooltipArrow, { "$variant": variant, "$position": actualPosition, className: classNames.arrow, style: styles.arrow }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TooltipTrigger, { ref: (node) => {
+                    // Handle both refs
+                    triggerRef.current = node;
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current = node;
+                    }
+                }, className: className || classNames.trigger, style: styles.trigger, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, "aria-describedby": open ? tooltipId : undefined, "data-state": open ? 'open' : 'closed', ...rest, children: children }), portal && isMounted
+                ? createPortal(_jsx(TooltipPortal, { "$zIndex": zIndex, children: tooltipElement }), document.body)
+                : tooltipElement] }));
+});
+Tooltip.displayName = 'Tooltip';
+// Simple provider for compatibility (no longer needed but kept for migration)
+export const TooltipProvider = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};

package/lib/src/core-components/src/components/Tooltip/elements.js

@@ -1,4 +1,6 @@
-"use strict";import{styled as d,css as o,keyframes as l}from"styled-components";const s=l`
+import { styled, css, keyframes } from 'styled-components';
+// Animations
+const fadeIn = keyframes `
   from {
     opacity: 0;
     transform: scale(0.96);
@@ -7,34 +9,70 @@
     opacity: 1;
     transform: scale(1);
   }
-`,e={dark:{bg:"#1f2937",text:"#f9fafb",border:"#374151"},light:{bg:"#ffffff",text:"#1f2937",border:"#e5e7eb"}},a={small:{padding:"4px 8px",fontSize:"12px",borderRadius:"4px"},medium:{padding:"8px 12px",fontSize:"13px",borderRadius:"6px"},large:{padding:"12px 16px",fontSize:"14px",borderRadius:"8px"}},r=6;export const TooltipTrigger=d.span`
+`;
+// Variant colors
+const variantStyles = {
+    dark: {
+        bg: '#1f2937',
+        text: '#f9fafb',
+        border: '#374151',
+    },
+    light: {
+        bg: '#ffffff',
+        text: '#1f2937',
+        border: '#e5e7eb',
+    },
+};
+// Size styles
+const sizeStyles = {
+    small: {
+        padding: '4px 8px',
+        fontSize: '12px',
+        borderRadius: '4px',
+    },
+    medium: {
+        padding: '8px 12px',
+        fontSize: '13px',
+        borderRadius: '6px',
+    },
+    large: {
+        padding: '12px 16px',
+        fontSize: '14px',
+        borderRadius: '8px',
+    },
+};
+// Arrow size
+const ARROW_SIZE = 6;
+export const TooltipTrigger = styled.span `
   display: inline-flex;
   cursor: default;
-`,TooltipPortal=d.div`
+`;
+export const TooltipPortal = styled.div `
   position: fixed;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
-  z-index: ${({$zIndex:t})=>t};
-`,TooltipContent=d.div`
+  z-index: ${({ $zIndex }) => $zIndex};
+`;
+export const TooltipContent = styled.div `
   position: fixed;
   pointer-events: none;
   box-sizing: border-box;
   
   /* Variant */
-  background: ${({$variant:t})=>e[t].bg};
-  color: ${({$variant:t})=>e[t].text};
-  border: 1px solid ${({$variant:t})=>e[t].border};
+  background: ${({ $variant }) => variantStyles[$variant].bg};
+  color: ${({ $variant }) => variantStyles[$variant].text};
+  border: 1px solid ${({ $variant }) => variantStyles[$variant].border};
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   
   /* Size */
-  padding: ${({$size:t})=>a[t].padding};
-  font-size: ${({$size:t})=>a[t].fontSize};
-  border-radius: ${({$size:t})=>a[t].borderRadius};
+  padding: ${({ $size }) => sizeStyles[$size].padding};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  border-radius: ${({ $size }) => sizeStyles[$size].borderRadius};
   
   /* Layout */
-  max-width: ${({$maxWidth:t})=>t?`${t}px`:"280px"};
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : '280px')};
   width: max-content;
   text-align: left;
   line-height: 1.5;
@@ -43,91 +81,115 @@
   
   /* Animation */
   opacity: 0;
-  ${({$animated:t,$isVisible:i})=>i&&(t?o`
-          animation: ${s} 0.15s ease-out forwards;
-        `:o`
+  ${({ $animated, $isVisible }) => $isVisible &&
+    ($animated
+        ? css `
+          animation: ${fadeIn} 0.15s ease-out forwards;
+        `
+        : css `
           opacity: 1;
         `)}
   
   /* Accessibility */
   @media (prefers-reduced-motion: reduce) {
     animation: none;
-    opacity: ${({$isVisible:t})=>t?1:0};
+    opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
   }
-`,TooltipArrow=d.div`
+`;
+export const TooltipArrow = styled.div `
   position: absolute;
   width: 0;
   height: 0;
-  border: ${r}px solid transparent;
+  border: ${ARROW_SIZE}px solid transparent;
   
   /* Position and color based on tooltip position */
-  ${({$position:t,$variant:i})=>{const p=e[i].bg,n=e[i].border;return t.startsWith("top")?o`
+  ${({ $position, $variant }) => {
+    const color = variantStyles[$variant].bg;
+    const borderColor = variantStyles[$variant].border;
+    // Top positions - arrow at bottom
+    if ($position.startsWith('top')) {
+        return css `
         top: 100%;
-        border-top-color: ${p};
+        border-top-color: ${color};
         
         &::before {
           content: '';
           position: absolute;
-          top: -${r+1}px;
-          left: -${r}px;
-          border: ${r}px solid transparent;
-          border-top-color: ${n};
+          top: -${ARROW_SIZE + 1}px;
+          left: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-top-color: ${borderColor};
           z-index: -1;
         }
         
-        ${t==="top"&&o`left: 50%; margin-left: -${r}px;`}
-        ${t==="top-start"&&o`left: 12px;`}
-        ${t==="top-end"&&o`right: 12px;`}
-      `:t.startsWith("bottom")?o`
+        ${$position === 'top' && css `left: 50%; margin-left: -${ARROW_SIZE}px;`}
+        ${$position === 'top-start' && css `left: 12px;`}
+        ${$position === 'top-end' && css `right: 12px;`}
+      `;
+    }
+    // Bottom positions - arrow at top
+    if ($position.startsWith('bottom')) {
+        return css `
         bottom: 100%;
-        border-bottom-color: ${p};
+        border-bottom-color: ${color};
         
         &::before {
           content: '';
           position: absolute;
-          bottom: -${r+1}px;
-          left: -${r}px;
-          border: ${r}px solid transparent;
-          border-bottom-color: ${n};
+          bottom: -${ARROW_SIZE + 1}px;
+          left: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-bottom-color: ${borderColor};
           z-index: -1;
         }
         
-        ${t==="bottom"&&o`left: 50%; margin-left: -${r}px;`}
-        ${t==="bottom-start"&&o`left: 12px;`}
-        ${t==="bottom-end"&&o`right: 12px;`}
-      `:t.startsWith("left")?o`
+        ${$position === 'bottom' && css `left: 50%; margin-left: -${ARROW_SIZE}px;`}
+        ${$position === 'bottom-start' && css `left: 12px;`}
+        ${$position === 'bottom-end' && css `right: 12px;`}
+      `;
+    }
+    // Left positions - arrow at right
+    if ($position.startsWith('left')) {
+        return css `
         left: 100%;
-        border-left-color: ${p};
+        border-left-color: ${color};
         
         &::before {
           content: '';
           position: absolute;
-          left: -${r-1}px;
-          top: -${r}px;
-          border: ${r}px solid transparent;
-          border-left-color: ${n};
+          left: -${ARROW_SIZE - 1}px;
+          top: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-left-color: ${borderColor};
           z-index: -1;
         }
         
-        ${t==="left"&&o`top: 50%; margin-top: -${r}px;`}
-        ${t==="left-start"&&o`top: 12px;`}
-        ${t==="left-end"&&o`bottom: 12px;`}
-      `:t.startsWith("right")?o`
+        ${$position === 'left' && css `top: 50%; margin-top: -${ARROW_SIZE}px;`}
+        ${$position === 'left-start' && css `top: 12px;`}
+        ${$position === 'left-end' && css `bottom: 12px;`}
+      `;
+    }
+    // Right positions - arrow at left
+    if ($position.startsWith('right')) {
+        return css `
         right: 100%;
-        border-right-color: ${p};
+        border-right-color: ${color};
         
         &::before {
           content: '';
           position: absolute;
-          right: -${r-1}px;
-          top: -${r}px;
-          border: ${r}px solid transparent;
-          border-right-color: ${n};
+          right: -${ARROW_SIZE - 1}px;
+          top: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-right-color: ${borderColor};
           z-index: -1;
         }
         
-        ${t==="right"&&o`top: 50%; margin-top: -${r}px;`}
-        ${t==="right-start"&&o`top: 12px;`}
-        ${t==="right-end"&&o`bottom: 12px;`}
-      `:""}}
+        ${$position === 'right' && css `top: 50%; margin-top: -${ARROW_SIZE}px;`}
+        ${$position === 'right-start' && css `top: 12px;`}
+        ${$position === 'right-end' && css `bottom: 12px;`}
+      `;
+    }
+    return '';
+}}
 `;

package/lib/src/core-components/src/components/Tooltip/index.js

@@ -1 +1,2 @@
-"use strict";export{Tooltip,TooltipProvider}from"./Tooltip";export*from"./types";
+export { Tooltip, TooltipProvider } from './Tooltip';
+export * from './types';

package/lib/src/core-components/src/components/Tooltip/types.js

@@ -1 +1,17 @@
-"use strict";export const TOOLTIP_POSITIONS=["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],TOOLTIP_VARIANTS=["dark","light"],TOOLTIP_SIZES=["small","medium","large"],TOOLTIP_TRIGGERS=["hover","click","focus","manual"];
+export const TOOLTIP_POSITIONS = [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end',
+];
+export const TOOLTIP_VARIANTS = ['dark', 'light'];
+export const TOOLTIP_SIZES = ['small', 'medium', 'large'];
+export const TOOLTIP_TRIGGERS = ['hover', 'click', 'focus', 'manual'];

package/lib/src/core-components/src/components/Tooltip/utils.js

@@ -1 +1,140 @@
-"use strict";const d=6;export const calculateTooltipPosition=(o,s,p,h=8)=>{const{top:r,left:t,width:a,height:f}=s,{width:n,height:c}=p;let e={top:0,left:0};const l=h+6;switch(o){case"top":e={top:r-c-l,left:t+a/2-n/2};break;case"top-start":e={top:r-c-l,left:t};break;case"top-end":e={top:r-c-l,left:t+a-n};break;case"bottom":e={top:r+f+l,left:t+a/2-n/2};break;case"bottom-start":e={top:r+f+l,left:t};break;case"bottom-end":e={top:r+f+l,left:t+a-n};break;case"left":e={top:r+f/2-c/2,left:t-n-l};break;case"left-start":e={top:r,left:t-n-l};break;case"left-end":e={top:r+f-c,left:t-n-l};break;case"right":e={top:r+f/2-c/2,left:t+a+l};break;case"right-start":e={top:r,left:t+a+l};break;case"right-end":e={top:r+f-c,left:t+a+l};break;default:e=calculateTooltipPosition("top",s,p,h)}return e},getAlternatePosition=(o,s,p,h,r)=>{const{top:t,left:a}=s,{width:f,height:n}=p,c=8,e=a<c,l=a+f>h-c,i=t<c,b=t+n>r-c;return!e&&!l&&!i&&!b?null:o.startsWith("top")&&i?o.replace("top","bottom"):o.startsWith("bottom")&&b?o.replace("bottom","top"):o.startsWith("left")&&e?o.replace("left","right"):o.startsWith("right")&&l?o.replace("right","left"):null},clampToViewport=(o,s,p,h)=>{const{width:r,height:t}=s,a=8;return{top:Math.max(a,Math.min(o.top,h-t-a)),left:Math.max(a,Math.min(o.left,p-r-a))}},sideAlignToPosition=(o,s)=>s==="center"?o:`${o}-${s}`;
+const ARROW_SIZE = 6;
+/**
+ * Calculate tooltip position relative to viewport (for fixed positioning)
+ */
+export const calculateTooltipPosition = (position, targetRect, tooltipDimensions, offset = 8) => {
+    const { top, left, width, height } = targetRect;
+    const { width: tooltipWidth, height: tooltipHeight } = tooltipDimensions;
+    let coords = { top: 0, left: 0 };
+    const totalOffset = offset + ARROW_SIZE;
+    switch (position) {
+        // Top positions
+        case 'top':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left + width / 2 - tooltipWidth / 2,
+            };
+            break;
+        case 'top-start':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left,
+            };
+            break;
+        case 'top-end':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left + width - tooltipWidth,
+            };
+            break;
+        // Bottom positions
+        case 'bottom':
+            coords = {
+                top: top + height + totalOffset,
+                left: left + width / 2 - tooltipWidth / 2,
+            };
+            break;
+        case 'bottom-start':
+            coords = {
+                top: top + height + totalOffset,
+                left: left,
+            };
+            break;
+        case 'bottom-end':
+            coords = {
+                top: top + height + totalOffset,
+                left: left + width - tooltipWidth,
+            };
+            break;
+        // Left positions
+        case 'left':
+            coords = {
+                top: top + height / 2 - tooltipHeight / 2,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        case 'left-start':
+            coords = {
+                top: top,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        case 'left-end':
+            coords = {
+                top: top + height - tooltipHeight,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        // Right positions
+        case 'right':
+            coords = {
+                top: top + height / 2 - tooltipHeight / 2,
+                left: left + width + totalOffset,
+            };
+            break;
+        case 'right-start':
+            coords = {
+                top: top,
+                left: left + width + totalOffset,
+            };
+            break;
+        case 'right-end':
+            coords = {
+                top: top + height - tooltipHeight,
+                left: left + width + totalOffset,
+            };
+            break;
+        default:
+            coords = calculateTooltipPosition('top', targetRect, tooltipDimensions, offset);
+    }
+    return coords;
+};
+/**
+ * Get alternate position when collision detected
+ */
+export const getAlternatePosition = (position, coords, tooltipDimensions, viewportWidth, viewportHeight) => {
+    const { top, left } = coords;
+    const { width, height } = tooltipDimensions;
+    const padding = 8;
+    // Check if current position has collision
+    const leftOverflow = left < padding;
+    const rightOverflow = left + width > viewportWidth - padding;
+    const topOverflow = top < padding;
+    const bottomOverflow = top + height > viewportHeight - padding;
+    if (!leftOverflow && !rightOverflow && !topOverflow && !bottomOverflow) {
+        return null;
+    }
+    // Determine alternate position
+    if (position.startsWith('top') && topOverflow) {
+        return position.replace('top', 'bottom');
+    }
+    if (position.startsWith('bottom') && bottomOverflow) {
+        return position.replace('bottom', 'top');
+    }
+    if (position.startsWith('left') && leftOverflow) {
+        return position.replace('left', 'right');
+    }
+    if (position.startsWith('right') && rightOverflow) {
+        return position.replace('right', 'left');
+    }
+    return null;
+};
+/**
+ * Clamp coords within viewport
+ */
+export const clampToViewport = (coords, tooltipDimensions, viewportWidth, viewportHeight) => {
+    const { width, height } = tooltipDimensions;
+    const padding = 8;
+    return {
+        top: Math.max(padding, Math.min(coords.top, viewportHeight - height - padding)),
+        left: Math.max(padding, Math.min(coords.left, viewportWidth - width - padding)),
+    };
+};
+/**
+ * Convert side + align to position
+ */
+export const sideAlignToPosition = (side, align) => {
+    if (align === 'center')
+        return side;
+    return `${side}-${align}`;
+};