@12-apps/ui 6.11.0 → 6.11.1

package/dist/data-display/InteractiveTooltip.js

@@ -1,232 +1,10 @@
+import "../chunk-TAF3YYMK.js";
+import {
+  InteractiveTooltip
+} from "../chunk-KEXYN5F5.js";
+import "../chunk-KB6AGBMD.js";
+import "../chunk-SCRN2RE4.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
-import { Tooltip as MuiTooltip } from "@mui/material";
-import { styled } from "@mui/material";
-import React2 from "react";
-
-// src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-var TOOLTIP_DEFAULTS = {
-  variant: "default",
-  size: "md",
-  glow: false,
-  pulse: false,
-  maxWidth: 300,
-  clickable: true
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveTooltipProps = (props) => ({ ...TOOLTIP_DEFAULTS, ...definedProps(props) });
-var usePinnedTooltip = ({ clickable, onPin, onUnpin }) => {
-  const [isPinned, setIsPinned] = useState(false);
-  const [isControlledOpen, setIsControlledOpen] = useState(false);
-  const wrapperRef = useRef(null);
-  useEffect(() => {
-    if (!isPinned || !clickable) {
-      return;
-    }
-    const handleClickOutside = (event) => {
-      const targetElement = event.target;
-      const isClickOnTooltip = targetElement.closest('[role="tooltip"]');
-      const isClickOnTrigger = wrapperRef.current?.contains(targetElement);
-      if (isClickOnTooltip || isClickOnTrigger) {
-        return;
-      }
-      setIsPinned(false);
-      setIsControlledOpen(false);
-      onUnpin?.();
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isPinned, clickable, onUnpin]);
-  const handleClick = useCallback(
-    (e) => {
-      if (!clickable) return;
-      e.preventDefault();
-      e.stopPropagation();
-      setIsPinned((current) => {
-        const newPinned = !current;
-        setIsControlledOpen(newPinned);
-        if (newPinned) {
-          onPin?.();
-        } else {
-          onUnpin?.();
-        }
-        return newPinned;
-      });
-    },
-    [clickable, onPin, onUnpin]
-  );
-  return { isPinned, isControlledOpen, wrapperRef, handleClick };
-};
-
-// src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts
-import { alpha, keyframes } from "@mui/material";
-var pulseAnimation = keyframes`
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  70% {
-    transform: scale(1.05);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-`;
-var SIZE_MAP = {
-  sm: { fontSize: "0.75rem", padding: "4px 8px" },
-  md: { fontSize: "0.875rem", padding: "6px 12px" },
-  lg: { fontSize: "1rem", padding: "8px 16px" }
-};
-var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
-var variantStyles = (theme, variant) => {
-  switch (variant) {
-    case "default":
-      return {
-        backgroundColor: alpha(theme.palette.grey[900], 0.92),
-        color: theme.palette.common.white,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, 0.3)}`
-      };
-    case "dark":
-      return {
-        backgroundColor: "#000000",
-        color: theme.palette.common.white,
-        boxShadow: `0 6px 16px ${alpha(theme.palette.common.black, 0.5)}`,
-        border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`
-      };
-    case "light":
-      return {
-        backgroundColor: theme.palette.common.white,
-        color: theme.palette.grey[900],
-        border: `1px solid ${alpha(theme.palette.grey[400], 0.4)}`,
-        boxShadow: `0 4px 16px ${alpha(theme.palette.common.black, 0.15)}`
-      };
-    case "glass":
-      return {
-        backgroundColor: alpha(theme.palette.background.paper, 0.75),
-        backdropFilter: "blur(24px) saturate(180%)",
-        WebkitBackdropFilter: "blur(24px) saturate(180%)",
-        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,
-        color: theme.palette.text.primary,
-        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`
-      };
-    default:
-      return {};
-  }
-};
-var emphasisStyles = (theme, glow, pulse) => ({
-  ...glow && {
-    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
-    filter: "brightness(1.05)"
-  },
-  ...pulse && {
-    animation: `${pulseAnimation} 2s infinite`
-  }
-});
-var arrowColor = (theme, variant) => {
-  switch (variant) {
-    case "light":
-      return theme.palette.common.white;
-    case "glass":
-      return alpha(theme.palette.background.paper, 0.75);
-    case "dark":
-      return "#000000";
-    default:
-      return alpha(theme.palette.grey[900], 0.92);
-  }
-};
-
-// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
-import { jsx } from "react/jsx-runtime";
-var StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
-})(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
-  return {
-    "& .MuiTooltip-tooltip": {
-      borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
-      padding: sizeStyles.padding,
-      fontWeight: 500,
-      transition: "all 0.3s ease",
-      position: "relative",
-      overflow: "hidden",
-      ...variantStyles(theme, customVariant),
-      ...emphasisStyles(theme, glow, pulse)
-    },
-    "& .MuiTooltip-arrow": {
-      color: arrowColor(theme, customVariant)
-    }
-  };
-});
-var InteractiveTooltip = React2.forwardRef(
-  (rawProps, ref) => {
-    const {
-      variant,
-      size,
-      glow,
-      pulse,
-      maxWidth,
-      dataTestId,
-      hoverContent,
-      pinnedContent,
-      clickable,
-      onPin,
-      onUnpin,
-      className,
-      children,
-      ...props
-    } = resolveTooltipProps(rawProps);
-    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
-      clickable,
-      onPin,
-      onUnpin
-    });
-    const tooltipContent = isPinned ? pinnedContent : hoverContent;
-    const childElement = children;
-    const childWithProps = React2.cloneElement(childElement, {
-      onClick: (e) => {
-        handleClick(e);
-        childElement.props.onClick?.(e);
-      },
-      "data-testid": dataTestId ? `${dataTestId}-trigger` : void 0
-    });
-    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children: /* @__PURE__ */ jsx(
-      StyledTooltip,
-      {
-        ref,
-        customVariant: variant,
-        customSize: size,
-        glow,
-        pulse,
-        title: tooltipContent,
-        open: isPinned ? isControlledOpen : void 0,
-        enterDelay: isPinned ? 0 : 100,
-        leaveDelay: 0,
-        disableHoverListener: isPinned,
-        disableFocusListener: isPinned,
-        disableTouchListener: isPinned,
-        slotProps: {
-          tooltip: {
-            sx: { maxWidth },
-            role: "tooltip",
-            ...dataTestId && { "data-testid": `${dataTestId}-content` }
-          }
-        },
-        ...props,
-        children: childWithProps
-      }
-    ) });
-  }
-);
-InteractiveTooltip.displayName = "InteractiveTooltip";
 export {
   InteractiveTooltip
 };

package/dist/data-display/InteractiveTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx","../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts","../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts"],"sourcesContent":["import { Tooltip as MuiTooltip } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport { resolveTooltipProps, usePinnedTooltip } from './InteractiveTooltip.hooks';\nimport {\n  arrowColor,\n  emphasisStyles,\n  getSizeStyles,\n  variantStyles,\n} from './InteractiveTooltip.styles';\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize,\n      padding: sizeStyles.padding,\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      glow,\n      pulse,\n      maxWidth,\n      dataTestId,\n      hoverContent,\n      pinnedContent,\n      clickable,\n      onPin,\n      onUnpin,\n      className,\n      children,\n      ...props\n    } = resolveTooltipProps(rawProps);\n\n    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({\n      clickable,\n      onPin,\n      onUnpin,\n    });\n\n    // Determine which content to show\n    const tooltipContent = isPinned ? pinnedContent : hoverContent;\n\n    // Child with click handler and ref\n    const childElement = children as React.ReactElement<{\n      onClick?: (e: React.MouseEvent) => void;\n      'data-testid'?: string;\n    }>;\n\n    const childWithProps = React.cloneElement(childElement, {\n      onClick: (e: React.MouseEvent) => {\n        handleClick(e);\n        // Call original onClick if it exists\n        childElement.props.onClick?.(e);\n      },\n      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,\n    });\n\n    return (\n      <div ref={wrapperRef} className={className}>\n        <StyledTooltip\n          ref={ref}\n          customVariant={variant}\n          customSize={size}\n          glow={glow}\n          pulse={pulse}\n          title={tooltipContent}\n          open={isPinned ? isControlledOpen : undefined}\n          enterDelay={isPinned ? 0 : 100}\n          leaveDelay={0}\n          disableHoverListener={isPinned}\n          disableFocusListener={isPinned}\n          disableTouchListener={isPinned}\n          slotProps={{\n            tooltip: {\n              sx: { maxWidth },\n              role: 'tooltip',\n              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n            },\n          }}\n          {...props}\n        >\n          {childWithProps}\n        </StyledTooltip>\n      </div>\n    );\n  },\n);\n\nInteractiveTooltip.displayName = 'InteractiveTooltip';\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\ntype TooltipDefaultedKeys = 'variant' | 'size' | 'glow' | 'pulse' | 'maxWidth' | 'clickable';\n\ntype ResolvedTooltipProps = InteractiveTooltipProps &\n  Required<Pick<InteractiveTooltipProps, TooltipDefaultedKeys>>;\n\nconst TOOLTIP_DEFAULTS: Pick<InteractiveTooltipProps, TooltipDefaultedKeys> = {\n  variant: 'default',\n  size: 'md',\n  glow: false,\n  pulse: false,\n  maxWidth: 300,\n  clickable: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: InteractiveTooltipProps): Partial<InteractiveTooltipProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<InteractiveTooltipProps>;\n\nexport const resolveTooltipProps = (\n  props: InteractiveTooltipProps,\n): ResolvedTooltipProps =>\n  ({ ...TOOLTIP_DEFAULTS, ...definedProps(props) }) as ResolvedTooltipProps;\n\ninterface PinOptions {\n  clickable: boolean;\n  onPin?: () => void;\n  onUnpin?: () => void;\n}\n\n/**\n * Clicking the trigger pins the tooltip open; clicking anywhere that is neither\n * the tooltip nor the trigger unpins it. The listener only exists while pinned,\n * so an unpinned tooltip costs nothing on every document click.\n */\nexport const usePinnedTooltip = ({ clickable, onPin, onUnpin }: PinOptions) => {\n  const [isPinned, setIsPinned] = useState(false);\n  const [isControlledOpen, setIsControlledOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isPinned || !clickable) {\n      return;\n    }\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const targetElement = event.target as Element;\n\n      // Check if click was on tooltip or trigger\n      const isClickOnTooltip = targetElement.closest('[role=\"tooltip\"]');\n      const isClickOnTrigger = wrapperRef.current?.contains(targetElement);\n\n      if (isClickOnTooltip || isClickOnTrigger) {\n        return;\n      }\n\n      // Click was outside - unpin\n      setIsPinned(false);\n      setIsControlledOpen(false);\n      onUnpin?.();\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [isPinned, clickable, onUnpin]);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (!clickable) return;\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      setIsPinned((current) => {\n        const newPinned = !current;\n        setIsControlledOpen(newPinned);\n\n        if (newPinned) {\n          onPin?.();\n        } else {\n          onUnpin?.();\n        }\n\n        return newPinned;\n      });\n    },\n    [clickable, onPin, onUnpin],\n  );\n\n  return { isPinned, isControlledOpen, wrapperRef, handleClick };\n};\n","import { alpha, keyframes } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: '0.75rem', padding: '4px 8px' },\n  md: { fontSize: '0.875rem', padding: '6px 12px' },\n  lg: { fontSize: '1rem', padding: '8px 16px' },\n} as const;\n\nexport const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nexport const variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(theme.palette.grey[900], 0.92),\n        color: theme.palette.common.white,\n        boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, 0.3)}`,\n      };\n    case 'dark':\n      return {\n        backgroundColor: '#000000',\n        color: theme.palette.common.white,\n        boxShadow: `0 6px 16px ${alpha(theme.palette.common.black, 0.5)}`,\n        border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`,\n      };\n    case 'light':\n      return {\n        backgroundColor: theme.palette.common.white,\n        color: theme.palette.grey[900],\n        border: `1px solid ${alpha(theme.palette.grey[400], 0.4)}`,\n        boxShadow: `0 4px 16px ${alpha(theme.palette.common.black, 0.15)}`,\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.75),\n        backdropFilter: 'blur(24px) saturate(180%)',\n        WebkitBackdropFilter: 'blur(24px) saturate(180%)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\n        color: theme.palette.text.primary,\n        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nexport const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nexport const arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return theme.palette.common.white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.75);\n    case 'dark':\n      return '#000000';\n    default:\n      return alpha(theme.palette.grey[900], 0.92);\n  }\n};\n"],"mappings":"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","names":["React","React"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/data-display/LazyImage.js

@@ -1,355 +1,13 @@
-import "../chunk-724ZONOL.js";
+import "../chunk-5ZFO7ROE.js";
 import {
-  Skeleton
-} from "../chunk-7XUYRPRQ.js";
+  LazyImage
+} from "../chunk-WTUV5BM5.js";
+import "../chunk-WR7ELCIL.js";
+import "../chunk-724ZONOL.js";
+import "../chunk-6Z6SNY3X.js";
+import "../chunk-J3IGWNGH.js";
+import "../chunk-HXYXDQ7U.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/data-display/LazyImage/LazyImage.tsx
-import { Box, CircularProgress, styled, useTheme } from "@mui/material";
-import React2 from "react";
-
-// src/components/data-display/LazyImage/LazyImage.hooks.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-var LAZY_IMAGE_DEFAULTS = {
-  height: "auto",
-  loadingState: "skeleton",
-  objectFit: "cover",
-  objectPosition: "center",
-  lazy: true,
-  rootMargin: "100px",
-  threshold: 0,
-  fadeIn: true,
-  fadeInDuration: 300,
-  retryOnError: false,
-  maxRetries: 3,
-  retryDelay: 1e3,
-  decoding: "async",
-  skeletonProps: {},
-  spinnerProps: {},
-  sx: {},
-  role: "img"
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveLazyImageProps = (props) => ({ ...LAZY_IMAGE_DEFAULTS, ...definedProps(props) });
-var OWN_PROPS = /* @__PURE__ */ new Set([
-  "src",
-  "alt",
-  "width",
-  "height",
-  "placeholder",
-  "fallback",
-  "loadingState",
-  "showSpinner",
-  "objectFit",
-  "objectPosition",
-  "borderRadius",
-  "lazy",
-  "rootMargin",
-  "threshold",
-  "fadeIn",
-  "fadeInDuration",
-  "onLoad",
-  "onError",
-  "onLoadStart",
-  "retryOnError",
-  "maxRetries",
-  "retryDelay",
-  "decoding",
-  "loading",
-  "fetchPriority",
-  "skeletonProps",
-  "spinnerProps",
-  "sx",
-  "className",
-  "data-testid",
-  "aria-label",
-  "aria-describedby",
-  "role"
-]);
-var imgPassThrough = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));
-var useVisibility = (props, containerRef, isVisible, onVisible) => {
-  const { lazy, src, rootMargin, threshold, onLoadStart } = props;
-  useEffect(() => {
-    if (!lazy || isVisible) {
-      return;
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            onVisible();
-            onLoadStart?.();
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { rootMargin, threshold }
-    );
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
-    }
-    return () => {
-      if (containerRef.current) {
-        observer.unobserve(containerRef.current);
-      }
-    };
-  }, [lazy, src, rootMargin, threshold, isVisible, onLoadStart, onVisible, containerRef]);
-};
-var useRetryTimeout = () => {
-  const ref = useRef(void 0);
-  useEffect(
-    () => () => {
-      if (ref.current) {
-        clearTimeout(ref.current);
-      }
-    },
-    []
-  );
-  return ref;
-};
-var useLazyImage = (props) => {
-  const { src, placeholder, lazy, loadingState, showSpinner } = props;
-  const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;
-  const containerRef = useRef(null);
-  const retryTimeoutRef = useRetryTimeout();
-  const effectiveLoadingState = showSpinner ? "spinner" : loadingState;
-  const [state, setState] = useState({
-    isLoading: true,
-    hasError: false,
-    isVisible: !lazy,
-    // If not lazy, load immediately
-    retryCount: 0,
-    currentSrc: lazy ? placeholder || null : src
-  });
-  const markVisible = useCallback(
-    () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),
-    [src]
-  );
-  useVisibility(props, containerRef, state.isVisible, markVisible);
-  useEffect(() => {
-    if (!state.isVisible || !src || state.currentSrc === src) {
-      return;
-    }
-    setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));
-  }, [state.isVisible, src, state.currentSrc]);
-  const handleImageLoad = useCallback(
-    (event) => {
-      setState((prev) => ({ ...prev, isLoading: false, hasError: false, retryCount: 0 }));
-      onLoad?.(event);
-    },
-    [onLoad]
-  );
-  const handleImageError = useCallback(
-    (event) => {
-      if (!retryOnError || state.retryCount >= maxRetries) {
-        setState((prev) => ({ ...prev, isLoading: false, hasError: true }));
-        onError?.(event);
-        return;
-      }
-      retryTimeoutRef.current = setTimeout(() => {
-        setState((prev) => ({
-          ...prev,
-          retryCount: prev.retryCount + 1,
-          currentSrc: `${src}?retry=${prev.retryCount + 1}`
-          // Force reload with cache buster
-        }));
-      }, retryDelay);
-    },
-    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src]
-  );
-  return {
-    state,
-    containerRef,
-    effectiveLoadingState,
-    handleImageLoad,
-    handleImageError,
-    showImage: Boolean(state.currentSrc) && !state.hasError,
-    showLoading: state.isLoading && (!state.currentSrc || effectiveLoadingState !== "placeholder")
-  };
-};
-
-// src/components/data-display/LazyImage/LazyImage.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ImageContainer = styled(Box)(() => ({
-  position: "relative",
-  display: "inline-block",
-  overflow: "hidden"
-}));
-var StyledImage = styled("img")(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({
-  display: "block",
-  maxWidth: "100%",
-  height: "auto",
-  opacity: fadeIn ? isLoaded ? 1 : 0 : 1,
-  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : "none"
-}));
-var SpinnerOverlay = styled(Box)(({ theme }) => ({
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "rgba(255, 255, 255, 0.8)",
-  borderRadius: "50%",
-  padding: theme.spacing(1)
-}));
-var FallbackContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: theme.palette.action.disabledBackground,
-  color: theme.palette.text.secondary,
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  top: 0,
-  left: 0
-}));
-var SkeletonIndicator = ({ props, metrics }) => /* @__PURE__ */ jsx(
-  Skeleton,
-  {
-    variant: "rectangular",
-    width: metrics.width || "100%",
-    height: metrics.height || 200,
-    animation: props.skeletonProps.animation || "pulse",
-    intensity: props.skeletonProps.intensity,
-    borderRadius: props.borderRadius,
-    "data-testid": `${props["data-testid"]}-skeleton`
-  }
-);
-var SpinnerIndicator = ({ props }) => {
-  const theme = useTheme();
-  const { spinnerProps } = props;
-  return /* @__PURE__ */ jsx(SpinnerOverlay, { children: /* @__PURE__ */ jsx(
-    CircularProgress,
-    {
-      size: spinnerProps.size || 40,
-      thickness: spinnerProps.thickness || 4,
-      sx: { color: spinnerProps.color || theme.palette.primary.main },
-      "data-testid": `${props["data-testid"]}-spinner`
-    }
-  ) });
-};
-var PlaceholderIndicator = ({
-  props,
-  metrics,
-  hasSrc
-}) => {
-  if (!props.placeholder || hasSrc) return null;
-  return /* @__PURE__ */ jsx(
-    StyledImage,
-    {
-      src: props.placeholder,
-      alt: `${props.alt} (loading)`,
-      style: metrics,
-      "data-testid": `${props["data-testid"]}-placeholder`
-    }
-  );
-};
-var LoadingIndicator = ({ kind, hasSrc, ...rest }) => {
-  switch (kind) {
-    case "skeleton":
-      return /* @__PURE__ */ jsx(SkeletonIndicator, { ...rest });
-    case "spinner":
-      return /* @__PURE__ */ jsx(SpinnerIndicator, { ...rest });
-    case "placeholder":
-      return /* @__PURE__ */ jsx(PlaceholderIndicator, { ...rest, hasSrc });
-    default:
-      return null;
-  }
-};
-var ErrorFallback = ({ props, metrics }) => {
-  const { alt, fallback, borderRadius } = props;
-  const testId = props["data-testid"];
-  if (!fallback) return null;
-  if (typeof fallback === "string") {
-    return /* @__PURE__ */ jsx(
-      StyledImage,
-      {
-        src: fallback,
-        alt: `${alt} (fallback)`,
-        style: metrics,
-        fadeIn: false,
-        isLoaded: true,
-        "data-testid": `${testId}-fallback`
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    FallbackContainer,
-    {
-      sx: { width: metrics.width, height: metrics.height, borderRadius },
-      "data-testid": `${testId}-fallback`,
-      children: fallback
-    }
-  );
-};
-var LazyImage = React2.memo(function LazyImage2(rawProps) {
-  const props = resolveLazyImageProps(rawProps);
-  const {
-    state,
-    containerRef,
-    effectiveLoadingState,
-    handleImageLoad,
-    handleImageError,
-    showImage,
-    showLoading
-  } = useLazyImage(props);
-  const { width, height, borderRadius, alt } = props;
-  const testId = props["data-testid"];
-  const metrics = {
-    width,
-    height,
-    objectFit: props.objectFit,
-    objectPosition: props.objectPosition,
-    borderRadius
-  };
-  return /* @__PURE__ */ jsxs(
-    ImageContainer,
-    {
-      ref: containerRef,
-      className: props.className,
-      sx: { width: width || "auto", height: height || "auto", borderRadius },
-      "data-testid": testId,
-      children: [
-        showLoading && /* @__PURE__ */ jsx(
-          LoadingIndicator,
-          {
-            kind: effectiveLoadingState,
-            props,
-            metrics,
-            hasSrc: Boolean(state.currentSrc)
-          }
-        ),
-        showImage && /* @__PURE__ */ jsx(
-          StyledImage,
-          {
-            src: state.currentSrc || void 0,
-            alt,
-            onLoad: handleImageLoad,
-            onError: handleImageError,
-            fadeIn: props.fadeIn,
-            fadeInDuration: props.fadeInDuration,
-            isLoaded: !state.isLoading,
-            decoding: props.decoding,
-            loading: props.lazy ? "lazy" : props.loading,
-            style: { ...metrics, ...props.sx },
-            "aria-label": props["aria-label"] || alt,
-            "aria-describedby": props["aria-describedby"],
-            role: props.role,
-            "data-testid": `${testId}-img`,
-            ...imgPassThrough(props)
-          }
-        ),
-        state.hasError && /* @__PURE__ */ jsx(ErrorFallback, { props, metrics })
-      ]
-    }
-  );
-});
-LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };

package/dist/data-display/LazyImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-display/LazyImage/LazyImage.tsx","../../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"sourcesContent":["import { Box, CircularProgress, styled, useTheme } from '@mui/material';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'rgba(255, 255, 255, 0.8)',\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\n/** The box the image occupies, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: number | string;\n  height?: number | string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: number | string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props, metrics }) => (\n  <Skeleton\n    variant=\"rectangular\"\n    width={metrics.width || '100%'}\n    height={metrics.height || 200}\n    animation={props.skeletonProps.animation || 'pulse'}\n    intensity={props.skeletonProps.intensity}\n    borderRadius={props.borderRadius}\n    data-testid={`${props['data-testid']}-skeleton`}\n  />\n);\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        size={spinnerProps.size || 40}\n        thickness={spinnerProps.thickness || 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\nconst PlaceholderIndicator: React.FC<IndicatorProps & { hasSrc: boolean }> = ({\n  props,\n  metrics,\n  hasSrc,\n}) => {\n  // Once a src has been chosen the real <img> is on screen, so the placeholder\n  // would only stack behind it.\n  if (!props.placeholder || hasSrc) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; hasSrc: boolean }\n> = ({ kind, hasSrc, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} hasSrc={hasSrc} />;\n    default:\n      return null;\n  }\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const { alt, fallback, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{ width: metrics.width, height: metrics.height, borderRadius }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    showImage,\n    showLoading,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    width,\n    height,\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius,\n  };\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{ width: width || 'auto', height: height || 'auto', borderRadius }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          hasSrc={Boolean(state.currentSrc)}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { LazyImageProps, LazyImageState } from './LazyImage.types';\n\ntype LazyImageDefaultedKeys =\n  | 'height'\n  | 'loadingState'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'lazy'\n  | 'rootMargin'\n  | 'threshold'\n  | 'fadeIn'\n  | 'fadeInDuration'\n  | 'retryOnError'\n  | 'maxRetries'\n  | 'retryDelay'\n  | 'decoding'\n  | 'skeletonProps'\n  | 'spinnerProps'\n  | 'sx'\n  | 'role';\n\nexport type ResolvedLazyImageProps = LazyImageProps &\n  Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;\n\nconst LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {\n  height: 'auto',\n  loadingState: 'skeleton',\n  objectFit: 'cover',\n  objectPosition: 'center',\n  lazy: true,\n  rootMargin: '100px',\n  threshold: 0,\n  fadeIn: true,\n  fadeInDuration: 300,\n  retryOnError: false,\n  maxRetries: 3,\n  retryDelay: 1000,\n  decoding: 'async',\n  skeletonProps: {},\n  spinnerProps: {},\n  sx: {},\n  role: 'img',\n};\n\n// Strips explicitly-undefined props before the merge, so `lazy={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LazyImageProps): Partial<LazyImageProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LazyImageProps>;\n\nexport const resolveLazyImageProps = (props: LazyImageProps): ResolvedLazyImageProps =>\n  ({ ...LAZY_IMAGE_DEFAULTS, ...definedProps(props) }) as ResolvedLazyImageProps;\n\n// Props this component consumes itself. Anything else the caller passed is an\n// ordinary <img> attribute and is forwarded untouched.\nconst OWN_PROPS = new Set([\n  'src', 'alt', 'width', 'height', 'placeholder', 'fallback', 'loadingState',\n  'showSpinner', 'objectFit', 'objectPosition', 'borderRadius', 'lazy', 'rootMargin',\n  'threshold', 'fadeIn', 'fadeInDuration', 'onLoad', 'onError', 'onLoadStart',\n  'retryOnError', 'maxRetries', 'retryDelay', 'decoding', 'loading', 'fetchPriority',\n  'skeletonProps', 'spinnerProps', 'sx', 'className', 'data-testid', 'aria-label',\n  'aria-describedby', 'role',\n]);\n\nexport const imgPassThrough = (props: ResolvedLazyImageProps): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n/**\n * Flips `isVisible` the first time the container nears the viewport, then stops\n * observing. Does nothing when `lazy` is off — the caller wants the request now.\n */\nconst useVisibility = (\n  props: ResolvedLazyImageProps,\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  isVisible: boolean,\n  onVisible: () => void,\n) => {\n  const { lazy, src, rootMargin, threshold, onLoadStart } = props;\n\n  useEffect(() => {\n    if (!lazy || isVisible) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            onVisible();\n            onLoadStart?.();\n            observer.unobserve(entry.target);\n          }\n        });\n      },\n      { rootMargin, threshold },\n    );\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  }, [lazy, src, rootMargin, threshold, isVisible, onLoadStart, onVisible, containerRef]);\n};\n\n/** A pending retry has to be cancelled on unmount, or it sets state on a dead component. */\nconst useRetryTimeout = () => {\n  const ref = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(\n    () => () => {\n      if (ref.current) {\n        clearTimeout(ref.current);\n      }\n    },\n    [],\n  );\n\n  return ref;\n};\n\n/**\n * Owns whether the real image has been requested yet and how it went: the\n * observer above, the load/error handlers, and the retry timer.\n */\nexport const useLazyImage = (props: ResolvedLazyImageProps) => {\n  const { src, placeholder, lazy, loadingState, showSpinner } = props;\n  const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const retryTimeoutRef = useRetryTimeout();\n\n  // Handle deprecated showSpinner prop\n  const effectiveLoadingState = showSpinner ? 'spinner' : loadingState;\n\n  const [state, setState] = useState<LazyImageState>({\n    isLoading: true,\n    hasError: false,\n    isVisible: !lazy, // If not lazy, load immediately\n    retryCount: 0,\n    currentSrc: lazy ? placeholder || null : src,\n  });\n\n  const markVisible = useCallback(\n    () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),\n    [src],\n  );\n  useVisibility(props, containerRef, state.isVisible, markVisible);\n\n  // Load image when it becomes visible\n  useEffect(() => {\n    if (!state.isVisible || !src || state.currentSrc === src) {\n      return;\n    }\n\n    setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));\n  }, [state.isVisible, src, state.currentSrc]);\n\n  const handleImageLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setState((prev) => ({ ...prev, isLoading: false, hasError: false, retryCount: 0 }));\n      onLoad?.(event);\n    },\n    [onLoad],\n  );\n\n  const handleImageError = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      if (!retryOnError || state.retryCount >= maxRetries) {\n        setState((prev) => ({ ...prev, isLoading: false, hasError: true }));\n        onError?.(event);\n        return;\n      }\n\n      retryTimeoutRef.current = setTimeout(() => {\n        setState((prev) => ({\n          ...prev,\n          retryCount: prev.retryCount + 1,\n          currentSrc: `${src}?retry=${prev.retryCount + 1}`, // Force reload with cache buster\n        }));\n      }, retryDelay);\n    },\n    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src],\n  );\n\n  return {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    showImage: Boolean(state.currentSrc) && !state.hasError,\n    showLoading:\n      state.isLoading && (!state.currentSrc || effectiveLoadingState !== 'placeholder'),\n  };\n};\n"],"mappings":"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","names":["React","React","LazyImage"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}