@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/lib/composables/useAtomixGlass.ts

@@ -113,14 +113,14 @@ const getCachedBackgroundDetection = (
   if (!parentElement) {
     return null;
   }
-  
+
   const cached = backgroundDetectionCache.get(parentElement);
   if (cached && compareOverLightConfig(cached.config, overLightConfig)) {
     // Update timestamp for LRU-like behavior (though WeakMap doesn't support LRU)
     cached.timestamp = Date.now();
     return cached.result;
   }
-  
+
   return null;
 };
 
@@ -136,7 +136,7 @@ const setCachedBackgroundDetection = (
   if (!parentElement) {
     return;
   }
-  
+
   backgroundDetectionCache.set(parentElement, {
     result,
     timestamp: Date.now(),
@@ -228,23 +228,23 @@ export function useAtomixGlass({
   const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
   const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
   const [detectedOverLight, setDetectedOverLight] = useState(false);
-  
+
   // Use shared module-level cache (no per-instance cache needed)
 
   // Memoized derived values
   const effectiveCornerRadius = useMemo(() => {
     if (cornerRadius !== undefined) {
       const result = Math.max(0, cornerRadius);
-      if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-        console.log('[AtomixGlass] Using manual cornerRadius prop:', result);
-      }
+      // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+      //   console.log('[AtomixGlass] Using manual cornerRadius prop:', result);
+      // }
       return result;
     }
 
     const result = Math.max(0, dynamicCornerRadius);
-    if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-      console.log('[AtomixGlass] Using dynamic cornerRadius:', result);
-    }
+    // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+    //   console.log('[AtomixGlass] Using dynamic cornerRadius:', result);
+    // }
     return result;
   }, [cornerRadius, dynamicCornerRadius, debugCornerRadius]);
 
@@ -302,18 +302,18 @@ export function useAtomixGlass({
         if (extractedRadius !== null && extractedRadius > 0) {
           setDynamicCornerRadius(extractedRadius);
 
-          if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-            console.log('[AtomixGlass] Corner radius extracted:', {
-              value: extractedRadius,
-              source: extractionSource,
-              timestamp: new Date().toISOString(),
-            });
-          }
+          // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+          //   console.log('[AtomixGlass] Corner radius extracted:', {
+          //     value: extractedRadius,
+          //     source: extractionSource,
+          //     timestamp: new Date().toISOString(),
+          //   });
+          // }
         } else if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-          console.log(
-            '[AtomixGlass] No corner radius found, using default:',
-            CONSTANTS.DEFAULT_CORNER_RADIUS
-          );
+          //   console.log(
+          //     '[AtomixGlass] No corner radius found, using default:',
+          //     CONSTANTS.DEFAULT_CORNER_RADIUS
+          //   );
         }
       } catch (error) {
         if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
@@ -335,7 +335,7 @@ export function useAtomixGlass({
     if (shouldDetect && glassRef.current) {
       const element = glassRef.current;
       const parentElement = element.parentElement;
-      
+
       // Check shared cache: skip detection if parent unchanged and config unchanged
       const cachedResult = getCachedBackgroundDetection(parentElement, overLight);
       if (cachedResult !== null) {
@@ -446,24 +446,24 @@ export function useAtomixGlass({
               }
 
               const isOverLightDetected = avgLuminance > threshold;
-              
+
               // Cache the result in shared cache
               setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold);
-              
+
               setDetectedOverLight(isOverLightDetected);
 
               // Debug logging
-              if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-                console.log('[AtomixGlass] OverLight Detection:', {
-                  avgLuminance: avgLuminance.toFixed(3),
-                  threshold: threshold.toFixed(3),
-                  detected: isOverLightDetected,
-                  validSamples,
-                  totalLuminance: totalLuminance.toFixed(3),
-                  configType: typeof overLight === 'object' ? 'object' : typeof overLight,
-                  timestamp: new Date().toISOString(),
-                });
-              }
+              // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+              //   console.log('[AtomixGlass] OverLight Detection:', {
+              //     avgLuminance: avgLuminance.toFixed(3),
+              //     threshold: threshold.toFixed(3),
+              //     detected: isOverLightDetected,
+              //     validSamples,
+              //     totalLuminance: totalLuminance.toFixed(3),
+              //     configType: typeof overLight === 'object' ? 'object' : typeof overLight,
+              //     timestamp: new Date().toISOString(),
+              //   });
+              // }
             } else {
               // Invalid luminance calculation, default to false
               const result = false;
@@ -505,13 +505,13 @@ export function useAtomixGlass({
       setDetectedOverLight(false);
 
       // Debug logging for boolean mode
-      if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-        console.log('[AtomixGlass] OverLight Mode: boolean', {
-          value: overLight,
-          autoDetection: false,
-          timestamp: new Date().toISOString(),
-        });
-      }
+      // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+      //   console.log('[AtomixGlass] OverLight Mode: boolean', {
+      //     value: overLight,
+      //     autoDetection: false,
+      //     timestamp: new Date().toISOString(),
+      //   });
+      // }
     }
 
     if (typeof window.matchMedia !== 'function') {
@@ -610,9 +610,9 @@ export function useAtomixGlass({
       if (process.env.NODE_ENV !== 'production' && enablePerformanceMonitoring) {
         const endTime = performance.now();
         const duration = endTime - startTime;
-        if (duration > 5) {
-          console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
-        }
+        // if (duration > 5) {
+        //   console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
+        // }
       }
     },
     [
@@ -657,7 +657,7 @@ export function useAtomixGlass({
     // Use ResizeObserver to update cached rect when container size changes
     const container = mouseContainer?.current || glassRef.current;
     let resizeObserver: ResizeObserver | null = null;
-    
+
     if (container && typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(updateRect);
       resizeObserver.observe(container);

package/src/lib/composables/useTooltip.ts

@@ -0,0 +1,285 @@
+import { useState, useRef, useEffect, RefObject, useCallback } from 'react';
+
+export type TooltipPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export type TooltipTrigger = 'click' | 'hover';
+
+interface UseTooltipProps {
+  position?: TooltipPosition;
+  trigger?: TooltipTrigger;
+  offset?: number;
+  delay?: number;
+}
+
+interface TooltipStyles {
+  tooltip: React.CSSProperties;
+  arrow: React.CSSProperties;
+}
+
+interface UseTooltipResult {
+  isVisible: boolean;
+  isPositioned: boolean;
+  tooltipId: string;
+  triggerRef: RefObject<HTMLDivElement>;
+  tooltipRef: RefObject<HTMLDivElement>;
+  tooltipStyle: React.CSSProperties;
+  arrowStyle: React.CSSProperties;
+  showTooltip: () => void;
+  hideTooltip: () => void;
+  toggleTooltip: () => void;
+  triggerProps: React.HTMLAttributes<HTMLDivElement>;
+  wrapperProps: React.HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Calculate tooltip and arrow positions based on trigger and tooltip dimensions
+ */
+const calculateTooltipPosition = (
+  position: TooltipPosition,
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  wrapperRect: DOMRect,
+  offset: number,
+  arrowSize: number
+): TooltipStyles => {
+  const tooltipWidth = tooltipRect.width || 0;
+  const tooltipHeight = tooltipRect.height || 0;
+  const triggerWidth = triggerRect.width;
+  const triggerHeight = triggerRect.height;
+
+  const tooltipStyle: React.CSSProperties = {
+    '--atomix-tooltip-offset': `${offset}px`,
+  } as React.CSSProperties;
+
+  const arrowStyle: React.CSSProperties = {};
+
+  switch (position) {
+    case 'top':
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top - tooltipHeight - offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left + triggerWidth / 2 - tooltipWidth / 2}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.left = `${tooltipWidth / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'bottom':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left + triggerWidth / 2 - tooltipWidth / 2}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.left = `${tooltipWidth / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'left':
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.left + offset}px`;
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top + triggerHeight / 2 - tooltipHeight / 2}px`;
+      arrowStyle.right = `${arrowSize / -2}px`;
+      arrowStyle.top = `${tooltipHeight / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'right':
+      tooltipStyle.left = `${triggerRect.right - wrapperRect.left + offset}px`;
+      tooltipStyle.top = `${triggerRect.top - wrapperRect.top + triggerHeight / 2 - tooltipHeight / 2}px`;
+      arrowStyle.left = `${arrowSize / -2}px`;
+      arrowStyle.top = `${tooltipHeight / 2 - arrowSize / 2}px`;
+      break;
+
+    case 'top-left':
+      tooltipStyle.bottom = `${wrapperRect.bottom - triggerRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.left = `${arrowSize}px`;
+      break;
+
+    case 'top-right':
+      tooltipStyle.bottom = `${wrapperRect.bottom - triggerRect.top + offset}px`;
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.right}px`;
+      arrowStyle.bottom = `${arrowSize / -2}px`;
+      arrowStyle.right = `${arrowSize}px`;
+      break;
+
+    case 'bottom-left':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.left = `${triggerRect.left - wrapperRect.left}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.left = `${arrowSize}px`;
+      break;
+
+    case 'bottom-right':
+      tooltipStyle.top = `${triggerRect.bottom - wrapperRect.top + offset}px`;
+      tooltipStyle.right = `${wrapperRect.right - triggerRect.right}px`;
+      arrowStyle.top = `${arrowSize / -2}px`;
+      arrowStyle.right = `${arrowSize}px`;
+      break;
+  }
+
+  return { tooltip: tooltipStyle, arrow: arrowStyle };
+};
+
+/**
+ * Get arrow size from CSS custom property
+ */
+const getArrowSize = (element: HTMLElement): number => {
+  const arrowSizeValue = getComputedStyle(element)
+    .getPropertyValue('--atomix-tooltip-arrow-size')
+    .trim();
+
+  if (!arrowSizeValue) return 8; // Default fallback
+
+  // Try to parse as rem (e.g., "0.5rem")
+  const remMatch = arrowSizeValue.match(/([\d.]+)rem/);
+  if (remMatch?.[1]) {
+    return parseFloat(remMatch[1]) * 16; // Convert rem to px
+  }
+
+  // Try to parse as px (e.g., "8px")
+  const pxMatch = arrowSizeValue.match(/([\d.]+)px/);
+  if (pxMatch?.[1]) {
+    return parseFloat(pxMatch[1]);
+  }
+
+  return 8; // Default fallback
+};
+
+/**
+ * Hook for managing tooltip state and positioning logic
+ */
+export const useTooltip = ({
+  position = 'top',
+  trigger = 'hover',
+  offset = 10,
+  delay = 200,
+}: UseTooltipProps): UseTooltipResult => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isPositioned, setIsPositioned] = useState(false);
+  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
+  const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});
+  
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
+
+  const showTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  }, [delay]);
+
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+    setIsPositioned(false);
+  }, []);
+
+  const toggleTooltip = useCallback(() => {
+    if (isVisible) {
+      hideTooltip();
+    } else {
+      showTooltip();
+    }
+  }, [isVisible, showTooltip, hideTooltip]);
+
+  // Calculate and update tooltip position
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const wrapperElement = triggerRef.current.parentElement;
+
+    if (!wrapperElement) return;
+
+    const wrapperRect = wrapperElement.getBoundingClientRect();
+    const arrowSize = getArrowSize(tooltipRef.current);
+
+    const styles = calculateTooltipPosition(
+      position,
+      triggerRect,
+      tooltipRect,
+      wrapperRect,
+      offset,
+      arrowSize
+    );
+
+    setTooltipStyle(styles.tooltip);
+    setArrowStyle(styles.arrow);
+    setIsPositioned(true);
+  }, [position, offset]);
+
+  // Position tooltip when visible
+  useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+
+    // Use single RAF to ensure tooltip is rendered before calculating
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
+
+    // Recalculate on window resize and scroll
+    const handleUpdate = () => {
+      updatePosition();
+    };
+
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [isVisible, updatePosition]);
+
+  // Setup trigger props
+  const triggerProps: React.HTMLAttributes<HTMLDivElement> = {
+    'aria-describedby': isVisible ? tooltipId : undefined,
+  };
+
+  const wrapperProps: React.HTMLAttributes<HTMLDivElement> = {};
+
+  if (trigger === 'hover') {
+    wrapperProps.onMouseEnter = showTooltip;
+    wrapperProps.onMouseLeave = hideTooltip;
+    triggerProps.onFocus = showTooltip;
+    triggerProps.onBlur = hideTooltip;
+  } else if (trigger === 'click') {
+    triggerProps.onClick = toggleTooltip;
+  }
+
+  return {
+    isVisible,
+    isPositioned,
+    tooltipId,
+    triggerRef,
+    tooltipRef,
+    tooltipStyle,
+    arrowStyle,
+    showTooltip,
+    hideTooltip,
+    toggleTooltip,
+    triggerProps,
+    wrapperProps,
+  };
+};
+
+export default useTooltip;
+