@donotdev/components 0.0.5 → 0.0.7

package/dist/atomic/Button/index.js

@@ -106,13 +106,13 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
     // Render prop pattern - no cloneElement needed (React 19 compatible)
     const buttonElement = render ? (render(elementProps)) : (_jsx("button", { type: props.type || 'button', role: "button", tabIndex: 0, ...elementProps, children: buttonContent }));
     // Tooltip: COMPACT/AUTO (may be icon-only when collapsed), others only if explicit
-    // Default to bottom for buttons (overridden by CSS --tooltip-side in sidebars)
+    // Don't specify side - let CSS --tooltip-side take priority (RTL-aware in sidebars)
     if (effectiveDisplay === DISPLAY.COMPACT ||
         effectiveDisplay === DISPLAY.AUTO) {
-        return (_jsx(Tooltip, { content: tooltip || getAriaLabel() || 'Button', side: "bottom", children: buttonElement }));
+        return (_jsx(Tooltip, { content: tooltip || getAriaLabel() || 'Button', children: buttonElement }));
     }
     if (tooltip) {
-        return (_jsx(Tooltip, { content: tooltip, side: "bottom", children: buttonElement }));
+        return (_jsx(Tooltip, { content: tooltip, children: buttonElement }));
     }
     return buttonElement;
 };

package/dist/atomic/Tooltip/index.d.ts

@@ -1,8 +1,11 @@
 /**
  * @fileoverview Tooltip component
- * @description Accessible tooltip component built on Radix UI primitives.
+ * @description Accessible tooltip built on Radix UI primitives.
  *
- * @version 0.0.3
+ * Positioning: prop > CSS --tooltip-side > 'bottom'
+ * Smart hiding: Tooltip auto-hides when trigger has visible label
+ *
+ * @version 0.0.6
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -13,36 +16,25 @@ type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipProps {
     content: string | ReactNode;
     children: ReactNode;
-    /**
-     * Tooltip position. If not set, reads from CSS `--tooltip-side` property,
-     * then falls back to Radix auto-positioning.
-     */
+    /** Tooltip position. Priority: prop > CSS --tooltip-side > 'bottom' */
     side?: TooltipSide;
     align?: 'start' | 'center' | 'end';
     delayDuration?: number;
     variant?: FloatingVariant;
 }
 /**
- * Accessible tooltip component built on Radix UI primitives.
- *
- * Positioning priority:
- * 1. Explicit `side` prop
- * 2. CSS `--tooltip-side` property (set by container like Sidebar)
- * 3. Radix auto-positioning (default)
+ * Accessible tooltip component.
  *
- * SSR Safety:
- * During SSR/static generation (Next.js prerendering), TooltipProvider may not
- * be available. This component gracefully degrades by rendering just children
- * during SSR, then hydrating with full tooltip functionality on client.
+ * Auto-hides when trigger has visible label (e.g., button not in compact mode).
+ * Only shows tooltip when label is hidden, avoiding redundant information.
  *
  * @example
- * ```css
- * .sidebar { --tooltip-side: right; }
- * [dir='rtl'] .sidebar { --tooltip-side: left; }
- * ```
+ * // Explicit side
+ * <Tooltip content="Help" side="right">...</Tooltip>
  *
- * @param {TooltipProps} props - Tooltip props
- * @returns {JSX.Element} The rendered tooltip
+ * @example
+ * // Container-aware (sidebar sets --tooltip-side: right)
+ * <Tooltip content="Help">...</Tooltip>
  */
 declare const Tooltip: ({ content, children, side, align, delayDuration, variant, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/atomic/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,OAAO,GAAI,6DAOd,YAAY,4CA+Dd,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Tooltip/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAyB,EAGvB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAYD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,OAAO,GAAI,6DAOd,YAAY,4CAoDd,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/atomic/Tooltip/index.js

@@ -1,83 +1,78 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/components/src/atomic/Tooltip/index.tsx
 /**
  * @fileoverview Tooltip component
- * @description Accessible tooltip component built on Radix UI primitives.
+ * @description Accessible tooltip built on Radix UI primitives.
  *
- * @version 0.0.3
+ * Positioning: prop > CSS --tooltip-side > 'bottom'
+ * Smart hiding: Tooltip auto-hides when trigger has visible label
+ *
+ * @version 0.0.6
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import TooltipPrimitive, { TooltipTrigger, TooltipContent, TooltipProvider, } from './TooltipPrimitive';
 import { FLOATING_VARIANT } from '../../utils/constants';
 import { getVariantDataAttrs } from '../../utils/helpers';
-import { useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useState } from 'react';
 /**
- * Accessible tooltip component built on Radix UI primitives.
- *
- * Positioning priority:
- * 1. Explicit `side` prop
- * 2. CSS `--tooltip-side` property (set by container like Sidebar)
- * 3. Radix auto-positioning (default)
+ * Check if trigger element has a visible label.
+ * Returns true if label exists and has width (not hidden).
+ */
+function hasVisibleLabel(element) {
+    if (!element)
+        return false;
+    const label = element.querySelector('.dndev-interactive-label');
+    return label instanceof HTMLElement && label.offsetWidth > 0;
+}
+/**
+ * Accessible tooltip component.
  *
- * SSR Safety:
- * During SSR/static generation (Next.js prerendering), TooltipProvider may not
- * be available. This component gracefully degrades by rendering just children
- * during SSR, then hydrating with full tooltip functionality on client.
+ * Auto-hides when trigger has visible label (e.g., button not in compact mode).
+ * Only shows tooltip when label is hidden, avoiding redundant information.
  *
  * @example
- * ```css
- * .sidebar { --tooltip-side: right; }
- * [dir='rtl'] .sidebar { --tooltip-side: left; }
- * ```
+ * // Explicit side
+ * <Tooltip content="Help" side="right">...</Tooltip>
  *
- * @param {TooltipProps} props - Tooltip props
- * @returns {JSX.Element} The rendered tooltip
+ * @example
+ * // Container-aware (sidebar sets --tooltip-side: right)
+ * <Tooltip content="Help">...</Tooltip>
  */
 const Tooltip = ({ content, children, side, align = 'center', delayDuration = 300, variant, }) => {
-    const triggerRef = useRef(null);
-    const [computedSide, setComputedSide] = useState(side);
-    // SSR safety: Track if component has mounted on client
-    // During SSR/static generation, render just children to avoid TooltipProvider dependency
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    // Read CSS custom property after mount (CSR only, SSR-safe)
-    // Priority: CSS --tooltip-side > explicit side prop > Radix auto
-    useEffect(() => {
-        // SSR guard + read CSS property first (highest priority)
-        if (typeof window !== 'undefined' && triggerRef.current) {
-            const cssValue = getComputedStyle(triggerRef.current)
+    const [mounted, setMounted] = useState(false);
+    const [cssSide, setCssSide] = useState(null);
+    const [open, setOpen] = useState(false);
+    const triggerElement = useRef(null);
+    // Callback ref - fires when element mounts, reads CSS var immediately
+    const triggerRef = useCallback((node) => {
+        triggerElement.current = node;
+        if (node) {
+            setMounted(true);
+            const val = getComputedStyle(node)
                 .getPropertyValue('--tooltip-side')
                 .trim();
-            if (cssValue) {
-                setComputedSide(cssValue);
-                return;
-            }
+            if (val)
+                setCssSide(val);
         }
-        // Fall back to explicit side prop if no CSS property
-        if (side !== undefined) {
-            setComputedSide(side);
-            return;
+    }, []);
+    // Handle open change - skip if label is visible
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (!mounted)
+            return; // SSR: no-op
+        if (nextOpen && hasVisibleLabel(triggerElement.current)) {
+            return; // Label visible, don't show tooltip
         }
-        // No side specified - Radix will auto-position
-        setComputedSide(undefined);
-    }, [side]);
-    // During SSR/static generation, render just children
-    // This prevents TooltipProvider requirement during prerendering
-    // After hydration, full tooltip functionality is available
-    if (!isMounted) {
-        return _jsx(_Fragment, { children: children });
-    }
+        setOpen(nextOpen);
+    }, [mounted]);
+    // Priority: prop > CSS > 'bottom'
+    const finalSide = side ?? cssSide ?? 'bottom';
     const variantAttrs = getVariantDataAttrs({
         variant: variant !== FLOATING_VARIANT.DEFAULT ? variant : undefined,
     });
-    // Callback ref to capture trigger element (React 19 compatible)
-    const setTriggerRef = (node) => {
-        triggerRef.current = node;
-    };
-    return (_jsxs(TooltipPrimitive, { delayDuration: delayDuration, children: [_jsx(TooltipTrigger, { asChild: true, ref: setTriggerRef, children: children }), _jsx(TooltipContent, { side: computedSide, align: align, ...variantAttrs, children: content })] }));
+    // Always pass open/onOpenChange to avoid controlled/uncontrolled switch
+    // During SSR (!mounted), open=false keeps it controlled but closed
+    return (_jsxs(TooltipPrimitive, { delayDuration: delayDuration, open: mounted ? open : false, onOpenChange: handleOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, ref: triggerRef, children: children }), mounted && (_jsx(TooltipContent, { side: finalSide, align: align, ...variantAttrs, children: content }))] }));
 };
 export default Tooltip;
 export { TooltipProvider };

package/dist/atomic/VideoPlayer/index.d.ts

@@ -98,73 +98,6 @@ export interface VideoPlayerProps {
      */
     allowFullscreen?: boolean;
 }
-/**
- * Video player component with lazy-loading facade pattern for optimal Lighthouse scores.
- *
- * **Lazy-Loading Behavior:**
- * - Shows thumbnail facade initially (zero iframe resources)
- * - Lazy-loads iframe only on user click/interaction
- * - Works for both inline (`modal={false}`) and modal modes
- *
- * **Thumbnail Priority:**
- * 1. Custom `thumbnail` prop (if provided)
- * 2. Auto-generated YouTube thumbnail (if `url` is VideoConfig with `platform: 'youtube'`)
- * 3. Button fallback (if no thumbnail available)
- *
- * **URL Formats:**
- * - **String URL**: Full embed URL as-is. Requires manual `thumbnail` prop.
- * - **VideoConfig Object**: Framework constructs privacy-first URL. Auto-generates YouTube thumbnails.
- *
- * @component
- * @example
- * ```tsx
- * // Auto-thumbnail (YouTube VideoConfig) - recommended
- * <VideoPlayer
- *   url={{ platform: 'youtube', id: 'dQw4w9WgXcQ' }}
- *   title="Tutorial Video"
- *   modal={false}
- * />
- * // Thumbnail auto-generated from YouTube
- *
- * // Custom thumbnail override
- * <VideoPlayer
- *   url={{ platform: 'youtube', id: 'dQw4w9WgXcQ' }}
- *   thumbnail="/custom-screenshot.jpg"
- *   title="Tutorial Video"
- *   modal={false}
- * />
- * // Uses custom thumbnail instead of auto-generated
- *
- * // String URL - manual thumbnail required
- * <VideoPlayer
- *   url="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
- *   thumbnail="/custom-thumb.jpg" // Required
- *   title="Product Demo"
- *   modal={false}
- * />
- *
- * // Modal mode (lazy-loads iframe when modal opens)
- * <VideoPlayer
- *   url={{ platform: 'youtube', id: 'dQw4w9WgXcQ' }}
- *   title="Tutorial Video"
- *   modal={true} // default
- * />
- *
- * // Above-the-fold (eager load thumbnail for LCP)
- * <VideoPlayer
- *   url={{ platform: 'youtube', id: 'dQw4w9WgXcQ' }}
- *   eager={true}
- *   title="Hero Video"
- *   modal={false}
- * />
- * ```
- * @param {VideoPlayerProps} props - The props for the video player
- * @returns {JSX.Element} The rendered video player
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
 declare const VideoPlayer: ({ url, trigger, thumbnail, eager, title, modal, aspectRatio, className, autoplay, allowFullscreen, }: VideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
 export default VideoPlayer;
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/VideoPlayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAiED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CA+IlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/VideoPlayer/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+JD,QAAA,MAAM,WAAW,GAAI,sGAWlB,gBAAgB,4CAwJlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/atomic/VideoPlayer/index.js

@@ -9,8 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { Play } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from '@donotdev/core';
+import { useIntersectionObserver } from '@donotdev/components';
 import { cn } from '../../utils/helpers';
 import Button, { BUTTON_VARIANT } from '../Button';
 import Dialog from '../Dialog';
@@ -62,7 +63,7 @@ const getThumbnailUrl = (urlOrConfig) => {
         return null;
     }
     if (urlOrConfig.platform === 'youtube') {
-        return `https://img.youtube.com/vi/${urlOrConfig.id}/maxresdefault.jpg`;
+        return `https://img.youtube.com/vi/${urlOrConfig.id}/hqdefault.jpg`;
     }
     return null;
 };
@@ -133,13 +134,28 @@ const getThumbnailUrl = (urlOrConfig) => {
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
+/**
+ * SVG placeholder for video player - zero bytes, instant render
+ * Lazy-loads actual thumbnail on intersection
+ */
+const VideoPlaceholder = ({ aspectRatio, className, }) => (_jsxs("svg", { className: cn('dndev-video-placeholder', className), viewBox: "0 0 16 9", style: { aspectRatio, width: '100%', display: 'block' }, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", children: [_jsx("rect", { width: "16", height: "9", fill: "var(--muted)" }), _jsx("circle", { cx: "8", cy: "4.5", r: "1.5", fill: "var(--foreground)", opacity: "0.8" }), _jsx("path", { d: "M7 3.5L7 5.5L9 4.5Z", fill: "var(--background)" })] }));
 const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger, thumbnail, eager = false, title = 'Video', modal = true, aspectRatio = '16/9', className, autoplay = false, allowFullscreen = true, }) => {
     const { t } = useTranslation(['dndev']);
     const [isOpen, setIsOpen] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
     const [iframeReady, setIframeReady] = useState(false);
+    const [thumbnailLoaded, setThumbnailLoaded] = useState(eager);
     const embedUrl = getEmbedUrl(url, autoplay);
     const thumbnailUrl = thumbnail || getThumbnailUrl(url);
+    // Lazy-load thumbnail on intersection (unless eager)
+    const { ref: thumbnailRef, isIntersecting } = useIntersectionObserver({
+        threshold: 0.1,
+    });
+    useEffect(() => {
+        if (isIntersecting && thumbnailUrl && !eager && !thumbnailLoaded) {
+            setThumbnailLoaded(true);
+        }
+    }, [isIntersecting, thumbnailUrl, eager, thumbnailLoaded]);
     // Lazy-load iframe when modal opens
     useEffect(() => {
         if (isOpen && !isLoaded) {
@@ -153,18 +169,14 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
     const videoFrame = (_jsx("iframe", { src: isLoaded ? embedUrl : '', title: title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: allowFullscreen, className: cn('dndev-video-frame', className), style: { aspectRatio }, onLoad: () => setIframeReady(true) }));
     // Inline video (no modal) - lazy-load on click
     if (!modal) {
-        // Not clicked yet - show thumbnail only
+        // Not clicked yet - show thumbnail or placeholder
         if (!isLoaded) {
-            if (thumbnailUrl) {
-                return (_jsxs("button", { type: "button", onClick: () => setIsLoaded(true), onKeyDown: (e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            setIsLoaded(true);
-                        }
-                    }, className: cn('dndev-video-thumbnail', className), style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: eager ? 'eager' : 'lazy', fetchPriority: eager ? 'high' : 'low', decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
-            }
-            // No thumbnail - show button
-            return (_jsx(Button, { icon: Play, onClick: () => setIsLoaded(true), className: className, children: t('video.watchVideo', 'Watch Video') }));
+            return (_jsxs("button", { ref: thumbnailRef, type: "button", onClick: () => setIsLoaded(true), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setIsLoaded(true);
+                    }
+                }, className: cn('dndev-video-thumbnail', className), style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
         }
         // Clicked - show iframe with thumbnail overlay until iframe loads
         return (_jsxs("div", { className: cn('dndev-video-container', className), style: { aspectRatio, position: 'relative' }, children: [videoFrame, !iframeReady && thumbnailUrl && (_jsxs("div", { className: "dndev-video-thumbnail dndev-video-loading-overlay", style: {
@@ -174,7 +186,7 @@ const VideoPlayer = ({ url = { platform: 'youtube', id: 'dQw4w9WgXcQ' }, trigger
                     }, children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay dndev-video-loading", children: _jsx(Spinner, { "aria-label": t('video.loading', 'Loading video') }) })] }))] }));
     }
     // Modal mode - lazy-load iframe when modal opens
-    const defaultTrigger = thumbnailUrl ? (_jsxs("button", { type: "button", className: "dndev-video-thumbnail", style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [_jsx("img", { src: thumbnailUrl, alt: title, loading: eager ? 'eager' : 'lazy', fetchPriority: eager ? 'high' : 'low', decoding: "async" }), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] })) : (_jsx(Button, { icon: Play, children: t('video.watchVideo', 'Watch Video') }));
+    const defaultTrigger = (_jsxs("button", { ref: thumbnailRef, type: "button", className: "dndev-video-thumbnail", style: { aspectRatio }, "aria-label": t('video.clickToWatch', 'Click to watch video'), children: [thumbnailLoaded && thumbnailUrl ? (_jsx("img", { src: thumbnailUrl, alt: title, loading: "eager", fetchPriority: "high", decoding: "async" })) : (_jsx(VideoPlaceholder, { aspectRatio: aspectRatio })), _jsx("div", { className: "dndev-video-play-overlay", children: _jsx(Play, { className: "dndev-video-play-icon" }) })] }));
     return (_jsx(Dialog, { trigger: trigger || defaultTrigger, title: title, open: isOpen, onOpenChange: setIsOpen, showClose: true, className: "dndev-video-dialog", children: videoFrame }));
 };
 export default VideoPlayer;

package/dist/hooks/useIntersectionObserver.d.ts

@@ -6,21 +6,11 @@
  * @author AMBROISE PARK Consulting
  */
 export interface UseIntersectionObserverOptions {
-    /**
-     * Threshold for intersection (0-1)
-     * @default 0.1
-     */
-    threshold?: number;
-    /**
-     * Root margin for intersection observer
-     * @default '0px'
-     */
+    threshold?: number | number[];
+    root?: Element | null;
     rootMargin?: string;
-    /**
-     * Whether to only trigger once
-     * @default false
-     */
     once?: boolean;
+    fallbackIntersecting?: boolean;
 }
 /**
  * Return type for useIntersectionObserver hook
@@ -29,54 +19,82 @@ export interface UseIntersectionObserverOptions {
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export interface UseIntersectionObserverReturn {
-    /**
-     * Ref to attach to the element
-     */
-    ref: React.RefObject<HTMLElement | null>;
-    /**
-     * Whether the element is intersecting
-     */
+export interface UseIntersectionObserverReturn<T extends Element = Element> {
+    ref: React.RefObject<T | null>;
     isIntersecting: boolean;
-    /**
-     * Whether the element has been triggered at least once
-     */
     hasTriggered: boolean;
-    /**
-     * The intersection observer entry
-     */
     entry: IntersectionObserverEntry | null;
 }
 /**
- * Hook for intersection observer functionality
+ * useIntersectionObserver - Basic Intersection Observation Hook (React 19 Optimized)
  *
- * Provides a simple way to detect when an element enters/exits the viewport.
- * Replaces Framer Motion's useInView with our own implementation.
+ * Lightweight hook for basic intersection observation with optimal performance.
+ * Uses React 19's useSyncExternalStore pattern for automatic cleanup, proper
+ * SSR handling, and tearing prevention in concurrent rendering.
  *
- * @example Basic usage
+ * @param options - Configuration options for intersection observation
+ * @returns Object containing ref, isIntersecting state, and entry
+ *
+ * @example Basic intersection detection
+ * ```tsx
+ * function IntersectionComponent() {
+ *   const { ref, isIntersecting } = useIntersectionObserver();
+ *
+ *   return (
+ *     <div ref={ref} className={isIntersecting ? 'visible' : 'hidden'}>
+ *       Content that appears when intersecting
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom threshold
  * ```tsx
- * const { ref, isIntersecting } = useIntersectionObserver({
- *   threshold: 0.3
- * });
+ * function ThresholdComponent() {
+ *   const { ref, isIntersecting } = useIntersectionObserver({
+ *     threshold: 0.5,
+ *     rootMargin: '50px'
+ *   });
  *
- * return (
- *   <div>
- *     {isIntersecting ? 'Visible!' : 'Not visible'}
- *   </div>
- * );
+ *   return (
+ *     <div ref={ref}>
+ *       {isIntersecting ? '50% visible' : 'Not visible enough'}
+ *     </div>
+ *   );
+ * }
  * ```
  *
- * @example With root margin (equivalent to Framer Motion's margin)
+ * @example Once-only triggering (React 19 optimized)
  * ```tsx
- * const { ref, isIntersecting } = useIntersectionObserver({
- *   threshold: 0.3,
- *   rootMargin: '-70% 0px -30% 0px' // Trigger when 30% visible
- * });
+ * function OnceComponent() {
+ *   const { ref, isIntersecting } = useIntersectionObserver({ once: true });
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       {isIntersecting && <ExpensiveComponent />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example SSR-safe implementation
+ * ```tsx
+ * function SSRComponent() {
+ *   const { ref, isIntersecting } = useIntersectionObserver({
+ *     fallbackIntersecting: true // Shows content during SSR
+ *   });
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       {isIntersecting ? 'Client-side' : 'SSR fallback'}
+ *     </div>
+ *   );
+ * }
  * ```
  *
  * @version 0.0.1
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;
+export declare function useIntersectionObserver<T extends Element = Element>(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn<T>;
 //# sourceMappingURL=useIntersectionObserver.d.ts.map

package/dist/hooks/useIntersectionObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAeA;;;;;;GAMG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEzC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,GAAE,8BAAmC,GAC3C,6BAA6B,CA4C/B"}
+{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AA2BA;;;;;;GAMG;AACH,MAAM,WAAW,8BAA8B;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,6BAA6B,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IACxE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EACjE,OAAO,GAAE,8BAAmC,GAC3C,6BAA6B,CAAC,CAAC,CAAC,CA4ClC"}