@homecode/ui 5.3.13 → 5.4.1

package/dist/esm/index.js

@@ -49,6 +49,7 @@ export { Spinner } from './src/components/Spinner/Spinner.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';
 export { TextShimmer } from './src/components/TextShimmer/TextShimmer.js';
+export { TextWithDeferTooltip } from './src/components/TextWithDeferTooltip/TextWithDeferTooltip.js';
 export { Tooltip } from './src/components/Tooltip/Tooltip.js';
 export { H1, H2, H3, H4, H5, H6 } from './src/components/Text/Text.js';
 export { Theme } from './src/components/Theme/Theme.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -25,7 +25,7 @@ import 'justorm/react';
 import 'nanoid';
 import '../Checkbox/Checkbox.styl.js';
 import '../Chip/Chip.styl.js';
-import '../Tooltip/Tooltip.styl.js';
+import '../Tooltip/Tooltip.js';
 import '../Card/Card.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
@@ -68,6 +68,7 @@ import '../Slider/Slider.styl.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextShimmer/TextShimmer.js';
+import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';
 import '../Theme/Theme.defaults.js';
 import '../Theme/ThemeProvider.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -30,7 +30,7 @@ import '../RequiredStar/RequiredStar.styl.js';
 import '../Select/Select.styl.js';
 import '../Checkbox/Checkbox.styl.js';
 import '../Chip/Chip.styl.js';
-import '../Tooltip/Tooltip.styl.js';
+import '../Tooltip/Tooltip.js';
 import '../Card/Card.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
@@ -68,6 +68,7 @@ import '../Slider/Slider.styl.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextShimmer/TextShimmer.js';
+import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';
 import '../Theme/Theme.defaults.js';
 import '../Theme/ThemeProvider.js';

package/dist/esm/src/components/TextWithDeferTooltip/TextWithDeferTooltip.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import S from './TextWithDeferTooltip.styl.js';
+
+function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bottom', overTrigger = false, ...props }) {
+    const [withTooltip, setWithTooltip] = useState(false);
+    const [tooltipWidth, setTooltipWidth] = useState();
+    const ref = useRef(null);
+    const handleMouseLeave = () => setWithTooltip(false);
+    const handleMouseEnter = () => {
+        if (!ref.current)
+            return;
+        const isOverflowingHorizontally = ref.current.scrollWidth - ref.current.clientWidth > 3;
+        const isOverflowingVertically = ref.current.scrollHeight - ref.current.clientHeight > 3;
+        if (isOverflowingHorizontally || isOverflowingVertically) {
+            if (width != null) {
+                setTooltipWidth(width);
+            }
+            else {
+                setTooltipWidth(ref.current.getBoundingClientRect().width);
+            }
+            setWithTooltip(true);
+        }
+    };
+    const tooltipContent = maxWidth != null || tooltipWidth != null ? (jsx("div", { style: {
+            ...(maxWidth != null && { maxWidth: `${maxWidth}px` }),
+            ...(tooltipWidth != null &&
+                !overTrigger && { width: `${tooltipWidth}px` }),
+        }, children: children })) : (children);
+    return (jsx(Tooltip, { className: S.tooltipTrigger, content: tooltipContent, contentClassName: (maxWidth != null || tooltipWidth != null) && !overTrigger
+            ? S.tooltipShell
+            : undefined, disabled: !withTooltip, direction: overTrigger ? 'bottom' : side, overTrigger: overTrigger, children: jsx("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: children }) }));
+}
+
+export { TextWithDeferTooltip };

package/dist/esm/src/components/TextWithDeferTooltip/TextWithDeferTooltip.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TextWithDeferTooltip_tooltipTrigger__bmoIx{box-sizing:border-box;display:block!important;max-width:100%;width:100%}.TextWithDeferTooltip_tooltipShell__PXlL4{max-width:none!important}";
+var S = {"tooltipTrigger":"TextWithDeferTooltip_tooltipTrigger__bmoIx","tooltipShell":"TextWithDeferTooltip_tooltipShell__PXlL4"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Tooltip/Tooltip.js

@@ -1,86 +1,15 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import S from './Tooltip.styl.js';
-import cn from 'classnames';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { lazy, Suspense } from 'react';
+import { TooltipSimple } from './TooltipSimple.js';
 
-/**
- * TooltipBase component contains the core tooltip functionality including:
- * - Positioning logic that calculates optimal tooltip placement based on direction
- * - Event handlers for mouse and keyboard interactions (hover, focus)
- * - Viewport boundary detection to keep tooltips visible
- * - Delay handling for show/hide animations
- * - Popover API integration for native browser tooltip behavior
- *
- * This component should only be used when the tooltip is enabled and has content.
- * For disabled tooltips, use the main Tooltip component which returns early.
- */
-const TooltipBase = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, }) => {
-    const triggerRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const timeoutRef = useRef();
-    useEffect(() => {
-        const trigger = triggerRef.current;
-        const tooltip = tooltipRef.current;
-        if (!trigger || !tooltip)
-            return;
-        const positionTooltip = () => {
-            const rect = trigger.getBoundingClientRect();
-            const tooltipRect = tooltip.getBoundingClientRect();
-            let top = 0;
-            let left = 0;
-            switch (direction) {
-                case 'top':
-                    top = rect.top - tooltipRect.height - 8;
-                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-                    break;
-                case 'bottom':
-                    top = rect.bottom + 8;
-                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-                    break;
-                case 'left':
-                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-                    left = rect.left - tooltipRect.width - 8;
-                    break;
-                case 'right':
-                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-                    left = rect.right + 8;
-                    break;
-            }
-            // Ensure tooltip stays within viewport
-            const padding = 10;
-            left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
-            top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
-            tooltip.style.left = `${left}px`;
-            tooltip.style.top = `${top}px`;
-        };
-        const showTooltip = () => {
-            timeoutRef.current = window.setTimeout(() => {
-                tooltip.showPopover?.();
-                positionTooltip();
-            }, delay);
-        };
-        const hideTooltip = () => {
-            clearTimeout(timeoutRef.current);
-            tooltip.hidePopover?.();
-        };
-        trigger.addEventListener('mouseenter', showTooltip);
-        trigger.addEventListener('mouseleave', hideTooltip);
-        trigger.addEventListener('focus', showTooltip);
-        trigger.addEventListener('blur', hideTooltip);
-        return () => {
-            clearTimeout(timeoutRef.current);
-            trigger.removeEventListener('mouseenter', showTooltip);
-            trigger.removeEventListener('mouseleave', hideTooltip);
-            trigger.removeEventListener('focus', showTooltip);
-            trigger.removeEventListener('blur', hideTooltip);
-        };
-    }, [content, delay, direction]);
-    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, className: cn(S.trigger, className), children: children }), jsx("div", { ref: tooltipRef, popover: "manual", className: cn(S.tooltip, blur && S.blur, contentClassName), "data-direction": direction, children: content })] }));
-};
-const Tooltip = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, disabled = false, }) => {
+const LazyTooltipOverTrigger = lazy(() => import('./TooltipOverTrigger.js'));
+const Tooltip = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, disabled = false, overTrigger = false, }) => {
     if (disabled || !content)
         return jsx(Fragment, { children: children });
-    return (jsx(TooltipBase, { className: className, contentClassName: contentClassName, children: children, content: content, delay: delay, direction: direction, blur: blur }));
+    if (overTrigger) {
+        return (jsx(Suspense, { fallback: jsx(Fragment, { children: children }), children: jsx(LazyTooltipOverTrigger, { className: className, contentClassName: contentClassName, content: content, delay: delay, direction: direction, blur: blur, children: children }) }));
+    }
+    return (jsx(TooltipSimple, { className: className, contentClassName: contentClassName, content: content, delay: delay, direction: direction, blur: blur, children: children }));
 };
 
 export { Tooltip };

package/dist/esm/src/components/Tooltip/Tooltip.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
-var S = {"trigger":"Tooltip_trigger__9GSNV","tooltip":"Tooltip_tooltip__tzL8q","blur":"Tooltip_blur__SQYHW","fadeIn":"Tooltip_fadeIn__Buhx4"};
+var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT{word-wrap:break-word;box-sizing:border-box;height:-moz-fit-content;height:fit-content;max-width:none;overflow-wrap:break-word;white-space:normal}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:after{display:none}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:popover-open{animation:Tooltip_fadeIn__Buhx4 .15s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
+var S = {"trigger":"Tooltip_trigger__9GSNV","tooltip":"Tooltip_tooltip__tzL8q","blur":"Tooltip_blur__SQYHW","fadeIn":"Tooltip_fadeIn__Buhx4","tooltipOverTrigger":"Tooltip_tooltipOverTrigger__gRUoT"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Tooltip/TooltipCore.js

@@ -0,0 +1,19 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import S from './Tooltip.styl.js';
+import cn from 'classnames';
+
+const TooltipCore = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, tooltipExtraClass, dataDirection = direction, usePositionSetup, }) => {
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    usePositionSetup({
+        triggerRef,
+        tooltipRef,
+        content,
+        delay,
+        direction,
+    });
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, className: cn(S.trigger, className), children: children }), jsx("div", { ref: tooltipRef, popover: "manual", className: cn(S.tooltip, blur && S.blur, tooltipExtraClass, contentClassName), "data-direction": dataDirection, children: content })] }));
+};
+
+export { TooltipCore };

package/dist/esm/src/components/Tooltip/TooltipOverTrigger.js

@@ -0,0 +1,96 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import S from './Tooltip.styl.js';
+import { TooltipCore } from './TooltipCore.js';
+import { applyTriggerTextStyles, getTextStyleSource, clearTriggerTextStyles } from './tooltipTextStyles.js';
+
+function parsePx(value) {
+    return Number.parseFloat(value) || 0;
+}
+function applyOverTriggerStyles(contentEl, triggerEl) {
+    const rect = triggerEl.getBoundingClientRect();
+    const contentComputed = window.getComputedStyle(contentEl);
+    const paddingLeft = parsePx(contentComputed.paddingLeft);
+    const paddingRight = parsePx(contentComputed.paddingRight);
+    const paddingTop = parsePx(contentComputed.paddingTop);
+    const borderLeft = parsePx(contentComputed.borderLeftWidth);
+    const borderRight = parsePx(contentComputed.borderRightWidth);
+    const borderTop = parsePx(contentComputed.borderTopWidth);
+    contentEl.style.setProperty('left', `${rect.left - paddingLeft - borderLeft}px`);
+    contentEl.style.setProperty('top', `${rect.top - paddingTop - borderTop}px`);
+    contentEl.style.setProperty('transform', 'none');
+    contentEl.style.width = `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`;
+    contentEl.style.boxSizing = 'border-box';
+    applyTriggerTextStyles(contentEl, getTextStyleSource(triggerEl));
+    // Trigger ancestors (e.g. menu items) often use nowrap for ellipsis; allow wrap here.
+    contentEl.style.setProperty('white-space', 'normal');
+    contentEl.style.setProperty('overflow-wrap', 'break-word');
+}
+function clearOverTriggerStyles(contentEl) {
+    if (!contentEl)
+        return;
+    contentEl.style.removeProperty('left');
+    contentEl.style.removeProperty('top');
+    contentEl.style.removeProperty('transform');
+    contentEl.style.removeProperty('width');
+    contentEl.style.removeProperty('box-sizing');
+    contentEl.style.removeProperty('white-space');
+    contentEl.style.removeProperty('overflow-wrap');
+    clearTriggerTextStyles(contentEl);
+}
+const useOverTriggerPositionSetup = ({ triggerRef, tooltipRef, content, delay, }) => {
+    const timeoutRef = useRef();
+    const updateOverTriggerPosition = useCallback(() => {
+        const triggerEl = triggerRef.current;
+        const contentEl = tooltipRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        applyOverTriggerStyles(contentEl, triggerEl);
+    }, [tooltipRef, triggerRef]);
+    useLayoutEffect(() => {
+        let frameId = 0;
+        const tick = () => {
+            updateOverTriggerPosition();
+            frameId = requestAnimationFrame(tick);
+        };
+        tick();
+        window.addEventListener('scroll', updateOverTriggerPosition, true);
+        window.addEventListener('resize', updateOverTriggerPosition);
+        return () => {
+            cancelAnimationFrame(frameId);
+            window.removeEventListener('scroll', updateOverTriggerPosition, true);
+            window.removeEventListener('resize', updateOverTriggerPosition);
+            clearOverTriggerStyles(tooltipRef.current);
+        };
+    }, [tooltipRef, updateOverTriggerPosition]);
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const showTooltip = () => {
+            timeoutRef.current = window.setTimeout(() => {
+                tooltip.showPopover?.();
+                updateOverTriggerPosition();
+            }, delay);
+        };
+        const hideTooltip = () => {
+            clearTimeout(timeoutRef.current);
+            tooltip.hidePopover?.();
+        };
+        trigger.addEventListener('mouseenter', showTooltip);
+        trigger.addEventListener('mouseleave', hideTooltip);
+        trigger.addEventListener('focus', showTooltip);
+        trigger.addEventListener('blur', hideTooltip);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            trigger.removeEventListener('mouseenter', showTooltip);
+            trigger.removeEventListener('mouseleave', hideTooltip);
+            trigger.removeEventListener('focus', showTooltip);
+            trigger.removeEventListener('blur', hideTooltip);
+        };
+    }, [content, delay, tooltipRef, triggerRef, updateOverTriggerPosition]);
+};
+const TooltipOverTrigger = (props) => (jsx(TooltipCore, { usePositionSetup: useOverTriggerPositionSetup, tooltipExtraClass: S.tooltipOverTrigger, dataDirection: undefined, ...props }));
+
+export { TooltipOverTrigger as default };

package/dist/esm/src/components/Tooltip/TooltipSimple.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { TooltipCore } from './TooltipCore.js';
+import { clearTriggerTextStyles, applyTriggerTextStyles, getTextStyleSource } from './tooltipTextStyles.js';
+
+const useSimplePositionSetup = ({ triggerRef, tooltipRef, content, delay, direction, }) => {
+    const timeoutRef = useRef();
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const positionTooltip = () => {
+            const rect = trigger.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            let top = 0;
+            let left = 0;
+            switch (direction) {
+                case 'top':
+                    top = rect.top - tooltipRect.height - 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.left - tooltipRect.width - 8;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.right + 8;
+                    break;
+            }
+            const padding = 10;
+            left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+            top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
+            tooltip.style.left = `${left}px`;
+            tooltip.style.top = `${top}px`;
+        };
+        const showTooltip = () => {
+            timeoutRef.current = window.setTimeout(() => {
+                applyTriggerTextStyles(tooltip, getTextStyleSource(trigger));
+                tooltip.showPopover?.();
+                positionTooltip();
+            }, delay);
+        };
+        const hideTooltip = () => {
+            clearTimeout(timeoutRef.current);
+            tooltip.hidePopover?.();
+            clearTriggerTextStyles(tooltip);
+        };
+        trigger.addEventListener('mouseenter', showTooltip);
+        trigger.addEventListener('mouseleave', hideTooltip);
+        trigger.addEventListener('focus', showTooltip);
+        trigger.addEventListener('blur', hideTooltip);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            clearTriggerTextStyles(tooltip);
+            trigger.removeEventListener('mouseenter', showTooltip);
+            trigger.removeEventListener('mouseleave', hideTooltip);
+            trigger.removeEventListener('focus', showTooltip);
+            trigger.removeEventListener('blur', hideTooltip);
+        };
+    }, [content, delay, direction, tooltipRef, triggerRef]);
+};
+const TooltipSimple = (props) => jsx(TooltipCore, { usePositionSetup: useSimplePositionSetup, ...props });
+
+export { TooltipSimple };

package/dist/esm/src/components/Tooltip/tooltipTextStyles.js

@@ -0,0 +1,49 @@
+const TRIGGER_TEXT_STYLE_PROPS = [
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'font-variant',
+    'font-stretch',
+    'line-height',
+    'letter-spacing',
+    'word-spacing',
+    'text-transform',
+    'text-indent',
+    'text-decoration-line',
+    'text-decoration-color',
+    'text-decoration-style',
+    'text-decoration-thickness',
+    'text-underline-offset',
+    'font-feature-settings',
+    'font-variation-settings',
+    'font-kerning',
+    'font-optical-sizing',
+    'font-synthesis',
+    'font-variant-numeric',
+    'font-variant-ligatures',
+    'font-variant-caps',
+    'font-variant-east-asian',
+    'tab-size',
+    'color',
+    'word-break',
+    'overflow-wrap',
+    'hyphens',
+];
+function getTextStyleSource(triggerEl) {
+    const firstChild = triggerEl.firstElementChild;
+    return firstChild instanceof HTMLElement ? firstChild : triggerEl;
+}
+function applyTriggerTextStyles(contentEl, sourceEl) {
+    const computed = window.getComputedStyle(sourceEl);
+    for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
+        contentEl.style.setProperty(prop, computed.getPropertyValue(prop));
+    }
+}
+function clearTriggerTextStyles(contentEl) {
+    for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
+        contentEl.style.removeProperty(prop);
+    }
+}
+
+export { TRIGGER_TEXT_STYLE_PROPS, applyTriggerTextStyles, clearTriggerTextStyles, getTextStyleSource };

package/dist/esm/types/src/components/TextWithDeferTooltip/TextWithDeferTooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TextWithDeferTooltipProps } from './TextWithDeferTooltip.types';
+declare function TextWithDeferTooltip({ className, children, width, maxWidth, side, overTrigger, ...props }: TextWithDeferTooltipProps): JSX.Element;
+export { TextWithDeferTooltip };

package/dist/esm/types/src/components/TextWithDeferTooltip/TextWithDeferTooltip.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    width?: number;
+    maxWidth?: number;
+    side?: TooltipSide;
+    overTrigger?: boolean;
+};
+export type TextWithDeferTooltipProps = Props;

package/dist/esm/types/src/components/TextWithDeferTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { TextWithDeferTooltip } from './TextWithDeferTooltip';
+export type { TextWithDeferTooltipProps, TooltipSide, } from './TextWithDeferTooltip.types';

package/dist/esm/types/src/components/Tooltip/Tooltip.d.ts

@@ -8,10 +8,11 @@ export interface TooltipProps {
     direction?: 'top' | 'bottom' | 'left' | 'right';
     blur?: boolean;
     disabled?: boolean;
+    overTrigger?: boolean;
 }
 declare module 'react' {
     interface HTMLAttributes<T> {
         popover?: string;
     }
 }
-export declare const Tooltip: ({ className, contentClassName, children, content, delay, direction, blur, disabled, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ className, contentClassName, children, content, delay, direction, blur, disabled, overTrigger, }: TooltipProps) => JSX.Element;

package/dist/esm/types/src/components/Tooltip/TooltipCore.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="uilib/components/tooltip/types" />
+export interface TooltipPositionSetupOptions {
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    content?: React.ReactNode;
+    delay: number;
+    direction: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface TooltipCoreProps {
+    className?: string;
+    contentClassName?: string;
+    children: React.ReactNode;
+    content?: React.ReactNode;
+    delay?: number;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    blur?: boolean;
+    tooltipExtraClass?: string;
+    dataDirection?: 'top' | 'bottom' | 'left' | 'right';
+    usePositionSetup: (options: TooltipPositionSetupOptions) => void;
+}
+export declare const TooltipCore: ({ className, contentClassName, children, content, delay, direction, blur, tooltipExtraClass, dataDirection, usePositionSetup, }: TooltipCoreProps) => JSX.Element;

package/dist/esm/types/src/components/Tooltip/TooltipOverTrigger.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="uilib/components/tooltip/types" />
+import type { TooltipProps } from './Tooltip';
+declare const TooltipOverTrigger: (props: Omit<TooltipProps, 'disabled' | 'overTrigger'>) => JSX.Element;
+export default TooltipOverTrigger;

package/dist/esm/types/src/components/Tooltip/TooltipSimple.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="uilib/components/tooltip/types" />
+import type { TooltipProps } from './Tooltip';
+export declare const TooltipSimple: (props: Omit<TooltipProps, 'disabled' | 'overTrigger'>) => JSX.Element;

package/dist/esm/types/src/components/Tooltip/tooltipTextStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const TRIGGER_TEXT_STYLE_PROPS: readonly ["font-family", "font-size", "font-weight", "font-style", "font-variant", "font-stretch", "line-height", "letter-spacing", "word-spacing", "text-transform", "text-indent", "text-decoration-line", "text-decoration-color", "text-decoration-style", "text-decoration-thickness", "text-underline-offset", "font-feature-settings", "font-variation-settings", "font-kerning", "font-optical-sizing", "font-synthesis", "font-variant-numeric", "font-variant-ligatures", "font-variant-caps", "font-variant-east-asian", "tab-size", "color", "word-break", "overflow-wrap", "hyphens"];
+export declare function getTextStyleSource(triggerEl: HTMLElement): HTMLElement;
+export declare function applyTriggerTextStyles(contentEl: HTMLElement, sourceEl: HTMLElement): void;
+export declare function clearTriggerTextStyles(contentEl: HTMLElement): void;

package/dist/esm/types/src/components/index.d.ts

@@ -47,6 +47,7 @@ export * from './Spinner/Spinner';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './TextShimmer/TextShimmer';
+export * from './TextWithDeferTooltip';
 export * from './Tooltip/Tooltip';
 export * from './Text/Text';
 export * from './Theme/Theme';

package/graphify-out/.graphify_labels.json

@@ -171,49 +171,33 @@
   "169": "Community 169",
   "170": "Community 170",
   "171": "Community 171",
-  "172": "Community 172",
   "173": "Community 173",
-  "174": "Community 174",
   "175": "Community 175",
   "176": "Community 176",
-  "177": "Community 177",
-  "178": "Community 178",
   "179": "Community 179",
   "180": "Community 180",
-  "181": "Community 181",
   "182": "Community 182",
   "183": "Community 183",
   "184": "Community 184",
-  "185": "Community 185",
-  "186": "Community 186",
   "187": "Community 187",
   "188": "Community 188",
   "189": "Community 189",
-  "190": "Community 190",
-  "191": "Community 191",
   "192": "Community 192",
-  "193": "Community 193",
   "194": "Community 194",
   "195": "Community 195",
-  "196": "Community 196",
   "197": "Community 197",
   "198": "Community 198",
   "199": "Community 199",
   "200": "Community 200",
   "201": "Community 201",
   "202": "Community 202",
-  "203": "Community 203",
   "204": "Community 204",
   "205": "Community 205",
-  "206": "Community 206",
   "207": "Community 207",
-  "208": "Community 208",
-  "209": "Community 209",
   "210": "Community 210",
   "211": "Community 211",
   "212": "Community 212",
   "213": "Community 213",
-  "214": "Community 214",
   "215": "Community 215",
   "216": "Community 216"
 }