@carbonid1/design-system 5.7.5 → 5.7.6

package/dist/Tooltip/Tooltip.d.ts

@@ -11,5 +11,6 @@ type TooltipProps = {
         'aria-label'?: string;
     }>;
 };
+export declare const VIEWPORT_MARGIN = 8;
 export declare const Tooltip: ({ label, shortcut, position, delay, maxWidth, disabled, className, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tooltip/Tooltip.js

@@ -1,12 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computeTooltipPlacement, } from '../helpers/tooltipPlacement/tooltipPlacement';
 import { Kbd } from '../Kbd/Kbd';
-import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 const DEFAULT_DELAY = 200;
+export const VIEWPORT_MARGIN = 8;
+// Must stay in sync with the mb-2 / mt-2 (0.5rem = 8px) classes below — the flip
+// math subtracts this gap, so a mismatch would mis-predict whether a side fits.
+const TRIGGER_GAP = 8;
+// Position before paint so an edge tooltip never flashes centered-then-shifted.
+// useLayoutEffect warns and no-ops during SSR, so fall back to useEffect there.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DELAY, maxWidth, disabled, className, children, }) => {
     const [visible, setVisible] = useState(false);
+    const [placement, setPlacement] = useState({ side: position, offsetX: 0 });
     const timeoutRef = useRef(null);
     const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
     const show = useCallback(() => {
         if (disabled)
             return;
@@ -52,8 +62,37 @@ export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DEL
         document.addEventListener('pointermove', handlePointerMove, { passive: true });
         return () => document.removeEventListener('pointermove', handlePointerMove);
     }, [visible, hide]);
-    const positionClasses = position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
+    useIsomorphicLayoutEffect(() => {
+        if (!visible)
+            return;
+        const measure = () => {
+            const wrapper = wrapperRef.current;
+            const tooltip = tooltipRef.current;
+            if (!wrapper || !tooltip)
+                return;
+            const trigger = wrapper.getBoundingClientRect();
+            const box = tooltip.getBoundingClientRect();
+            const next = computeTooltipPlacement({
+                trigger,
+                tooltip: { width: box.width, height: box.height },
+                viewport: { width: window.innerWidth, height: window.innerHeight },
+                preferredSide: position,
+                margin: VIEWPORT_MARGIN,
+                gap: TRIGGER_GAP,
+            });
+            // Keep the same object when nothing moved so a show or a no-op resize
+            // doesn't trigger a redundant re-render (the common centered case is a no-op).
+            setPlacement(prev => (prev.side === next.side && prev.offsetX === next.offsetX ? prev : next));
+        };
+        measure();
+        window.addEventListener('resize', measure, { passive: true });
+        return () => window.removeEventListener('resize', measure);
+    }, [visible, position]);
+    const positionClasses = placement.side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
     return (_jsxs("div", { ref: wrapperRef, className: `relative inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
                 'aria-label': children.props['aria-label'] ?? label,
-            }), visible && !disabled && (_jsxs("div", { role: "tooltip", style: maxWidth ? { maxWidth } : undefined, className: `absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
+            }), visible && !disabled && (_jsxs("div", { ref: tooltipRef, role: "tooltip", style: {
+                    transform: `translateX(calc(-50% + ${placement.offsetX}px))`,
+                    ...(maxWidth ? { maxWidth } : {}),
+                }, className: `absolute left-1/2 z-50 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
 };

package/dist/helpers/tooltipPlacement/tooltipPlacement.d.ts

@@ -0,0 +1,38 @@
+type Side = 'top' | 'bottom';
+type Rect = {
+    left: number;
+    top: number;
+    bottom: number;
+    width: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+type TooltipPlacementInput = {
+    /** Trigger (wrapper) rect, viewport-relative — the tooltip is centered on its horizontal midpoint. */
+    trigger: Rect;
+    /** Measured tooltip box, taken at its un-shifted centered position. */
+    tooltip: Size;
+    viewport: Size;
+    /** Side the caller asked for; kept unless that side lacks room. */
+    preferredSide: Side;
+    /** Minimum gap to keep between the tooltip and each viewport edge. */
+    margin: number;
+    /** Gap between the trigger and the tooltip on the chosen side. */
+    gap: number;
+};
+export type TooltipPlacement = {
+    side: Side;
+    /** Pixels to shift the centered tooltip horizontally; 0 leaves it centered. */
+    offsetX: number;
+};
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export declare const computeTooltipPlacement: ({ trigger, tooltip, viewport, preferredSide, margin, gap, }: TooltipPlacementInput) => TooltipPlacement;
+export {};

package/dist/helpers/tooltipPlacement/tooltipPlacement.js

@@ -0,0 +1,26 @@
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export const computeTooltipPlacement = ({ trigger, tooltip, viewport, preferredSide, margin, gap, }) => {
+    const triggerCenterX = trigger.left + trigger.width / 2;
+    const centeredLeft = triggerCenterX - tooltip.width / 2;
+    const centeredRight = centeredLeft + tooltip.width;
+    let offsetX = 0;
+    if (centeredRight > viewport.width - margin)
+        offsetX = viewport.width - margin - centeredRight;
+    if (centeredLeft + offsetX < margin)
+        offsetX = margin - centeredLeft;
+    const spaceAbove = trigger.top;
+    const spaceBelow = viewport.height - trigger.bottom;
+    const needed = tooltip.height + gap + margin;
+    let side = preferredSide;
+    if (preferredSide === 'top' && spaceAbove < needed && spaceBelow > spaceAbove)
+        side = 'bottom';
+    if (preferredSide === 'bottom' && spaceBelow < needed && spaceAbove > spaceBelow)
+        side = 'top';
+    return { side, offsetX };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.7.5",
+  "version": "5.7.6",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",