silver-ui 0.1.0

package/dist/chunk-I7PJTLP2.cjs

@@ -0,0 +1,425 @@
+'use strict';
+
+var chunkNILB6Y4Z_cjs = require('./chunk-NILB6Y4Z.cjs');
+var chunk6SPQDYHC_cjs = require('./chunk-6SPQDYHC.cjs');
+var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  dialog: chunkAZDWQGAX_cjs.css({
+    position: "fixed",
+    inset: 0,
+    w: "100dvw",
+    h: "100dvh",
+    maxW: "none",
+    maxH: "none",
+    m: 0,
+    p: 0,
+    borderWidth: 0,
+    bg: "transparent",
+    overflow: "hidden",
+    outline: "none",
+    _backdrop: {
+      bg: "overlay.scrim.strong",
+      backdropFilter: "blur(2px)"
+    }
+  }),
+  container: chunkAZDWQGAX_cjs.css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "full",
+    h: "full",
+    p: "8"
+  }),
+  mediaGroup: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    maxW: "full",
+    maxH: "full",
+    minH: 0
+  }),
+  mediaWrap: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    minH: 0,
+    userSelect: "none"
+  }),
+  zoomable: chunkAZDWQGAX_cjs.css({ cursor: "zoom-in" }),
+  zoomed: chunkAZDWQGAX_cjs.css({ cursor: "grab" }),
+  dragging: chunkAZDWQGAX_cjs.css({ cursor: "grabbing" }),
+  image: chunkAZDWQGAX_cjs.css({
+    display: "block",
+    maxW: "100%",
+    maxH: "calc(100dvh - 7rem)",
+    objectFit: "contain",
+    pointerEvents: "none",
+    transitionProperty: "transform",
+    transitionDuration: "normal",
+    transitionTimingFunction: "default",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms"
+    }
+  }),
+  imageDragging: chunkAZDWQGAX_cjs.css({ transitionProperty: "none" }),
+  video: chunkAZDWQGAX_cjs.css({
+    maxW: "100%",
+    maxH: "calc(100dvh - 7rem)",
+    objectFit: "contain",
+    outline: "none"
+  }),
+  caption: chunkAZDWQGAX_cjs.css({
+    w: "full",
+    maxW: "min(90dvw, 48rem)",
+    px: "3",
+    pt: "2",
+    color: "fg.onPrimary",
+    fontFamily: "body",
+    fontSize: "lg",
+    lineHeight: "normal",
+    textAlign: "center"
+  }),
+  close: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    top: "3",
+    right: "3",
+    zIndex: 1
+  }),
+  nav: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    top: "50%",
+    zIndex: 1,
+    transform: "translateY(-50%)"
+  }),
+  prev: chunkAZDWQGAX_cjs.css({ left: "3" }),
+  next: chunkAZDWQGAX_cjs.css({ right: "3" }),
+  counter: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    top: "3",
+    left: "3",
+    zIndex: 1,
+    color: "fg.onPrimary",
+    fontFamily: "body",
+    fontSize: "md"
+  }),
+  controlButton: chunkAZDWQGAX_cjs.css({
+    bg: "overlay.scrim",
+    color: "fg.onPrimary",
+    _hover: {
+      bg: "overlay.scrim.strong"
+    },
+    _active: {
+      bg: "overlay.scrim.strong"
+    }
+  })
+};
+function useScrollLock(isLocked) {
+  react.useEffect(() => {
+    if (!isLocked) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isLocked]);
+}
+function isMediaArray(media) {
+  return Array.isArray(media);
+}
+function Lightbox({
+  className,
+  "data-testid": dataTestId,
+  defaultIndex = 0,
+  hasAutoPlay = false,
+  hasZoom = false,
+  index: indexFromProps,
+  isOpen,
+  media,
+  onIndexChange,
+  onOpenChange,
+  ref,
+  style
+}) {
+  const dialogRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const [uncontrolledIndex, setUncontrolledIndex] = react.useState(defaultIndex);
+  const [zoom, setZoom] = react.useState(1);
+  const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = react.useState(false);
+  const dragStartRef = react.useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+  const isControlled = indexFromProps !== void 0;
+  const index = isControlled ? indexFromProps : uncontrolledIndex;
+  const mediaItems = react.useMemo(
+    () => isMediaArray(media) ? media : [media],
+    [media]
+  );
+  const currentIndex = mediaItems.length === 0 ? 0 : Math.min(Math.max(index, 0), mediaItems.length - 1);
+  const currentItem = mediaItems.length === 0 ? void 0 : mediaItems[currentIndex];
+  const hasMedia = currentItem != null;
+  const isGallery = mediaItems.length > 1;
+  const isVideo = (currentItem?.type ?? "image") === "video";
+  const canPrev = isGallery && currentIndex > 0;
+  const canNext = isGallery && currentIndex < mediaItems.length - 1;
+  const imageTransform = zoom === 1 ? void 0 : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;
+  useScrollLock(isOpen);
+  const setIndex = react.useCallback(
+    (nextIndex) => {
+      if (!isControlled) {
+        setUncontrolledIndex(nextIndex);
+      }
+      onIndexChange?.(nextIndex);
+    },
+    [isControlled, onIndexChange]
+  );
+  react.useEffect(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [currentIndex, currentItem?.src, isOpen]);
+  react.useEffect(() => {
+    if (!isGallery) {
+      return;
+    }
+    for (const nextIndex of [currentIndex - 1, currentIndex + 1]) {
+      if (nextIndex < 0 || nextIndex >= mediaItems.length) {
+        continue;
+      }
+      const item = mediaItems[nextIndex];
+      if (item.type === "video") {
+        continue;
+      }
+      const image = new Image();
+      image.src = item.src;
+    }
+  }, [currentIndex, isGallery, mediaItems]);
+  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog == null) {
+      return;
+    }
+    if (isOpen && !dialog.open) {
+      triggerRef.current = document.activeElement;
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+      if (triggerRef.current instanceof HTMLElement) {
+        triggerRef.current.focus();
+      }
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    const handlePointerMove = (event) => {
+      setPan({
+        x: dragStartRef.current.panX + event.clientX - dragStartRef.current.x,
+        y: dragStartRef.current.panY + event.clientY - dragStartRef.current.y
+      });
+    };
+    const handlePointerUp = () => setIsDragging(false);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isDragging]);
+  const close = react.useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const goPrev = react.useCallback(() => {
+    if (canPrev) {
+      setIndex(currentIndex - 1);
+    }
+  }, [canPrev, currentIndex, setIndex]);
+  const goNext = react.useCallback(() => {
+    if (canNext) {
+      setIndex(currentIndex + 1);
+    }
+  }, [canNext, currentIndex, setIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      "aria-label": "Media lightbox",
+      className: chunkSPDVNY2Z_cjs.cx(styles.dialog, className),
+      "data-testid": dataTestId,
+      onCancel: (event) => {
+        event.preventDefault();
+        close();
+      },
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          close();
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          goPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          goNext();
+        }
+      },
+      ref: chunk6SHL7FYO_cjs.mergeRefs(ref, dialogRef),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.close, children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkNILB6Y4Z_cjs.Button,
+          {
+            className: styles.controlButton,
+            icon: lucideReact.X,
+            isIconOnly: true,
+            label: "Close",
+            onClick: close
+          }
+        ) }),
+        canPrev ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSPDVNY2Z_cjs.cx(styles.nav, styles.prev), children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkNILB6Y4Z_cjs.Button,
+          {
+            className: styles.controlButton,
+            icon: lucideReact.ChevronLeft,
+            isIconOnly: true,
+            label: "Previous",
+            onClick: goPrev
+          }
+        ) }) : null,
+        hasMedia ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mediaGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkSPDVNY2Z_cjs.cx(
+                styles.mediaWrap,
+                !isVideo && hasZoom && zoom === 1 ? styles.zoomable : void 0,
+                !isVideo && zoom > 1 ? styles.zoomed : void 0,
+                isDragging ? styles.dragging : void 0
+              ),
+              onDoubleClick: () => {
+                if (!hasZoom || isVideo) {
+                  return;
+                }
+                setZoom(zoom === 1 ? 2 : 1);
+                setPan({ x: 0, y: 0 });
+              },
+              onPointerDown: (event) => {
+                if (!hasZoom || isVideo || zoom <= 1) {
+                  return;
+                }
+                setIsDragging(true);
+                dragStartRef.current = {
+                  x: event.clientX,
+                  y: event.clientY,
+                  panX: pan.x,
+                  panY: pan.y
+                };
+              },
+              children: isVideo ? (
+                // eslint-disable-next-line jsx-a11y-x/media-has-caption -- captions are rendered only when callers provide a real WebVTT source
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "video",
+                  {
+                    "aria-label": currentItem.alt,
+                    autoPlay: hasAutoPlay,
+                    className: styles.video,
+                    controls: true,
+                    src: currentItem.src,
+                    children: currentItem.captionsSrc != null ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "track",
+                      {
+                        kind: "captions",
+                        label: "Captions",
+                        src: currentItem.captionsSrc
+                      }
+                    ) : null
+                  }
+                )
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  alt: currentItem.alt,
+                  className: chunkSPDVNY2Z_cjs.cx(
+                    styles.image,
+                    isDragging ? styles.imageDragging : void 0
+                  ),
+                  draggable: false,
+                  src: currentItem.src,
+                  style: { transform: imageTransform }
+                }
+              )
+            }
+          ),
+          currentItem.caption != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, children: currentItem.caption }) : null
+        ] }) : null,
+        canNext ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSPDVNY2Z_cjs.cx(styles.nav, styles.next), children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkNILB6Y4Z_cjs.Button,
+          {
+            className: styles.controlButton,
+            icon: lucideReact.ChevronRight,
+            isIconOnly: true,
+            label: "Next",
+            onClick: goNext
+          }
+        ) }) : null,
+        isGallery ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.counter, children: [
+          currentIndex + 1,
+          " / ",
+          mediaItems.length
+        ] }) : null
+      ] })
+    }
+  );
+}
+Lightbox.displayName = "Lightbox";
+function useLightbox(options) {
+  const { media, ...lightboxProps } = options;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [index, setIndex] = react.useState(0);
+  const open = react.useCallback((nextIndex = 0) => {
+    setIndex(nextIndex);
+    setIsOpen(true);
+  }, []);
+  const close = react.useCallback(() => setIsOpen(false), []);
+  const getTriggerProps = react.useCallback(
+    (nextIndex) => ({
+      "aria-haspopup": "dialog",
+      onClick: () => open(nextIndex),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open(nextIndex);
+        }
+      },
+      role: "button",
+      tabIndex: 0
+    }),
+    [open]
+  );
+  const triggerProps = react.useMemo(() => getTriggerProps(0), [getTriggerProps]);
+  const element = /* @__PURE__ */ jsxRuntime.jsx(
+    Lightbox,
+    {
+      ...lightboxProps,
+      index,
+      isOpen,
+      media,
+      onIndexChange: setIndex,
+      onOpenChange: setIsOpen
+    }
+  );
+  return { close, element, getTriggerProps, index, isOpen, open, triggerProps };
+}
+
+exports.Lightbox = Lightbox;
+exports.useLightbox = useLightbox;
+//# sourceMappingURL=chunk-I7PJTLP2.cjs.map
+//# sourceMappingURL=chunk-I7PJTLP2.cjs.map

package/dist/chunk-I7PJTLP2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Lightbox/Lightbox.tsx","../src/components/Lightbox/useLightbox.tsx"],"names":["css","useEffect","useRef","useState","useMemo","useCallback","useIsomorphicLayoutEffect","jsx","cx","mergeRefs","jsxs","Button","X","ChevronLeft","ChevronRight"],"mappings":"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","file":"chunk-I7PJTLP2.cjs","sourcesContent":["/* eslint-disable jsx-a11y-x/no-noninteractive-element-interactions */\n\nimport {ChevronLeft, ChevronRight, X} from 'lucide-react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {useIsomorphicLayoutEffect} from '../../internal/useIsomorphicLayoutEffect';\nimport {Button} from '../Button';\n\nexport type LightboxMediaType = 'image' | 'video';\n\nexport interface LightboxMedia {\n  /**\n   * Accessible image alt text, or video label.\n   */\n  alt: string;\n  /**\n   * Optional caption shown below the media.\n   */\n  caption?: ReactNode;\n  /**\n   * Optional WebVTT captions source for video media.\n   */\n  captionsSrc?: string;\n  /**\n   * Media source URL.\n   */\n  src: string;\n  /**\n   * Media type.\n   * @default 'image'\n   */\n  type?: LightboxMediaType;\n}\n\nexport interface LightboxProps {\n  /**\n   * Additional CSS class names applied to the dialog.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the dialog.\n   */\n  'data-testid'?: string;\n  /**\n   * Initial gallery index for uncontrolled usage.\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**\n   * Whether videos autoplay when opened.\n   * @default false\n   */\n  hasAutoPlay?: boolean;\n  /**\n   * Whether images can be double-clicked to zoom.\n   * @default false\n   */\n  hasZoom?: boolean;\n  /**\n   * Controlled gallery index.\n   */\n  index?: number;\n  /**\n   * Whether the lightbox is open.\n   */\n  isOpen: boolean;\n  /**\n   * Media to display.\n   */\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>;\n  /**\n   * Called when gallery index changes.\n   */\n  onIndexChange?: (index: number) => void;\n  /**\n   * Called when the lightbox requests an open-state change.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the dialog element.\n   */\n  ref?: Ref<HTMLDialogElement>;\n  /**\n   * Inline styles applied to the dialog.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  dialog: css({\n    position: 'fixed',\n    inset: 0,\n    w: '100dvw',\n    h: '100dvh',\n    maxW: 'none',\n    maxH: 'none',\n    m: 0,\n    p: 0,\n    borderWidth: 0,\n    bg: 'transparent',\n    overflow: 'hidden',\n    outline: 'none',\n    _backdrop: {\n      bg: 'overlay.scrim.strong',\n      backdropFilter: 'blur(2px)',\n    },\n  }),\n  container: css({\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    w: 'full',\n    h: 'full',\n    p: '8',\n  }),\n  mediaGroup: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    maxW: 'full',\n    maxH: 'full',\n    minH: 0,\n  }),\n  mediaWrap: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    minH: 0,\n    userSelect: 'none',\n  }),\n  zoomable: css({cursor: 'zoom-in'}),\n  zoomed: css({cursor: 'grab'}),\n  dragging: css({cursor: 'grabbing'}),\n  image: css({\n    display: 'block',\n    maxW: '100%',\n    maxH: 'calc(100dvh - 7rem)',\n    objectFit: 'contain',\n    pointerEvents: 'none',\n    transitionProperty: 'transform',\n    transitionDuration: 'normal',\n    transitionTimingFunction: 'default',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0ms',\n    },\n  }),\n  imageDragging: css({transitionProperty: 'none'}),\n  video: css({\n    maxW: '100%',\n    maxH: 'calc(100dvh - 7rem)',\n    objectFit: 'contain',\n    outline: 'none',\n  }),\n  caption: css({\n    w: 'full',\n    maxW: 'min(90dvw, 48rem)',\n    px: '3',\n    pt: '2',\n    color: 'fg.onPrimary',\n    fontFamily: 'body',\n    fontSize: 'lg',\n    lineHeight: 'normal',\n    textAlign: 'center',\n  }),\n  close: css({\n    position: 'absolute',\n    top: '3',\n    right: '3',\n    zIndex: 1,\n  }),\n  nav: css({\n    position: 'absolute',\n    top: '50%',\n    zIndex: 1,\n    transform: 'translateY(-50%)',\n  }),\n  prev: css({left: '3'}),\n  next: css({right: '3'}),\n  counter: css({\n    position: 'absolute',\n    top: '3',\n    left: '3',\n    zIndex: 1,\n    color: 'fg.onPrimary',\n    fontFamily: 'body',\n    fontSize: 'md',\n  }),\n  controlButton: css({\n    bg: 'overlay.scrim',\n    color: 'fg.onPrimary',\n    _hover: {\n      bg: 'overlay.scrim.strong',\n    },\n    _active: {\n      bg: 'overlay.scrim.strong',\n    },\n  }),\n} as const;\n\nfunction useScrollLock(isLocked: boolean): void {\n  useEffect(() => {\n    if (!isLocked) {\n      return;\n    }\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = previousOverflow;\n    };\n  }, [isLocked]);\n}\n\nfunction isMediaArray(\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>,\n): media is ReadonlyArray<LightboxMedia> {\n  return Array.isArray(media);\n}\n\n/**\n * Fullscreen dialog for viewing image or video media, with optional gallery navigation.\n */\nexport function Lightbox({\n  className,\n  'data-testid': dataTestId,\n  defaultIndex = 0,\n  hasAutoPlay = false,\n  hasZoom = false,\n  index: indexFromProps,\n  isOpen,\n  media,\n  onIndexChange,\n  onOpenChange,\n  ref,\n  style,\n}: LightboxProps): React.JSX.Element {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const triggerRef = useRef<Element | null>(null);\n  const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);\n  const [zoom, setZoom] = useState(1);\n  const [pan, setPan] = useState({x: 0, y: 0});\n  const [isDragging, setIsDragging] = useState(false);\n  const dragStartRef = useRef({x: 0, y: 0, panX: 0, panY: 0});\n  const isControlled = indexFromProps !== undefined;\n  const index = isControlled ? indexFromProps : uncontrolledIndex;\n  const mediaItems: ReadonlyArray<LightboxMedia> = useMemo(\n    () => (isMediaArray(media) ? media : [media]),\n    [media],\n  );\n  const currentIndex =\n    mediaItems.length === 0\n      ? 0\n      : Math.min(Math.max(index, 0), mediaItems.length - 1);\n  const currentItem =\n    mediaItems.length === 0 ? undefined : mediaItems[currentIndex];\n  const hasMedia = currentItem != null;\n  const isGallery = mediaItems.length > 1;\n  const isVideo = (currentItem?.type ?? 'image') === 'video';\n  const canPrev = isGallery && currentIndex > 0;\n  const canNext = isGallery && currentIndex < mediaItems.length - 1;\n  const imageTransform =\n    zoom === 1\n      ? undefined\n      : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;\n\n  useScrollLock(isOpen);\n\n  const setIndex = useCallback(\n    (nextIndex: number) => {\n      if (!isControlled) {\n        setUncontrolledIndex(nextIndex);\n      }\n      onIndexChange?.(nextIndex);\n    },\n    [isControlled, onIndexChange],\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line @eslint-react/set-state-in-effect\n    setZoom(1);\n    // eslint-disable-next-line @eslint-react/set-state-in-effect\n    setPan({x: 0, y: 0});\n  }, [currentIndex, currentItem?.src, isOpen]);\n\n  useEffect(() => {\n    if (!isGallery) {\n      return;\n    }\n\n    for (const nextIndex of [currentIndex - 1, currentIndex + 1]) {\n      if (nextIndex < 0 || nextIndex >= mediaItems.length) {\n        continue;\n      }\n      const item = mediaItems[nextIndex];\n      if (item.type === 'video') {\n        continue;\n      }\n\n      const image = new Image();\n      image.src = item.src;\n    }\n  }, [currentIndex, isGallery, mediaItems]);\n\n  useIsomorphicLayoutEffect(() => {\n    const dialog = dialogRef.current;\n    if (dialog == null) {\n      return;\n    }\n    if (isOpen && !dialog.open) {\n      triggerRef.current = document.activeElement;\n      dialog.showModal();\n    } else if (!isOpen && dialog.open) {\n      dialog.close();\n      if (triggerRef.current instanceof HTMLElement) {\n        triggerRef.current.focus();\n      }\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isDragging) {\n      return;\n    }\n    const handlePointerMove = (event: PointerEvent) => {\n      setPan({\n        x: dragStartRef.current.panX + event.clientX - dragStartRef.current.x,\n        y: dragStartRef.current.panY + event.clientY - dragStartRef.current.y,\n      });\n    };\n    const handlePointerUp = () => setIsDragging(false);\n    window.addEventListener('pointermove', handlePointerMove);\n    window.addEventListener('pointerup', handlePointerUp);\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isDragging]);\n\n  const close = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n  const goPrev = useCallback(() => {\n    if (canPrev) {\n      setIndex(currentIndex - 1);\n    }\n  }, [canPrev, currentIndex, setIndex]);\n  const goNext = useCallback(() => {\n    if (canNext) {\n      setIndex(currentIndex + 1);\n    }\n  }, [canNext, currentIndex, setIndex]);\n\n  return (\n    <dialog\n      aria-label=\"Media lightbox\"\n      className={cx(styles.dialog, className)}\n      data-testid={dataTestId}\n      onCancel={event => {\n        event.preventDefault();\n        close();\n      }}\n      onClick={(event: ReactMouseEvent<HTMLDialogElement>) => {\n        if (event.target === event.currentTarget) {\n          close();\n        }\n      }}\n      onKeyDown={event => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault();\n          goPrev();\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault();\n          goNext();\n        }\n      }}\n      ref={mergeRefs(ref, dialogRef)}\n      style={style}>\n      <div className={styles.container}>\n        <div className={styles.close}>\n          <Button\n            className={styles.controlButton}\n            icon={X}\n            isIconOnly\n            label=\"Close\"\n            onClick={close}\n          />\n        </div>\n        {canPrev ? (\n          <div className={cx(styles.nav, styles.prev)}>\n            <Button\n              className={styles.controlButton}\n              icon={ChevronLeft}\n              isIconOnly\n              label=\"Previous\"\n              onClick={goPrev}\n            />\n          </div>\n        ) : null}\n        {hasMedia ? (\n          <div className={styles.mediaGroup}>\n            {/* eslint-disable-next-line jsx-a11y-x/no-static-element-interactions -- media viewport supports image zoom/pan gestures */}\n            <div\n              className={cx(\n                styles.mediaWrap,\n                !isVideo && hasZoom && zoom === 1 ? styles.zoomable : undefined,\n                !isVideo && zoom > 1 ? styles.zoomed : undefined,\n                isDragging ? styles.dragging : undefined,\n              )}\n              onDoubleClick={() => {\n                if (!hasZoom || isVideo) {\n                  return;\n                }\n                setZoom(zoom === 1 ? 2 : 1);\n                setPan({x: 0, y: 0});\n              }}\n              onPointerDown={event => {\n                if (!hasZoom || isVideo || zoom <= 1) {\n                  return;\n                }\n                setIsDragging(true);\n                dragStartRef.current = {\n                  x: event.clientX,\n                  y: event.clientY,\n                  panX: pan.x,\n                  panY: pan.y,\n                };\n              }}>\n              {isVideo ? (\n                // eslint-disable-next-line jsx-a11y-x/media-has-caption -- captions are rendered only when callers provide a real WebVTT source\n                <video\n                  aria-label={currentItem.alt}\n                  autoPlay={hasAutoPlay}\n                  className={styles.video}\n                  controls\n                  src={currentItem.src}>\n                  {currentItem.captionsSrc != null ? (\n                    <track\n                      kind=\"captions\"\n                      label=\"Captions\"\n                      src={currentItem.captionsSrc}\n                    />\n                  ) : null}\n                </video>\n              ) : (\n                <img\n                  alt={currentItem.alt}\n                  className={cx(\n                    styles.image,\n                    isDragging ? styles.imageDragging : undefined,\n                  )}\n                  draggable={false}\n                  src={currentItem.src}\n                  style={{transform: imageTransform}}\n                />\n              )}\n            </div>\n            {currentItem.caption != null ? (\n              <div className={styles.caption}>{currentItem.caption}</div>\n            ) : null}\n          </div>\n        ) : null}\n        {canNext ? (\n          <div className={cx(styles.nav, styles.next)}>\n            <Button\n              className={styles.controlButton}\n              icon={ChevronRight}\n              isIconOnly\n              label=\"Next\"\n              onClick={goNext}\n            />\n          </div>\n        ) : null}\n        {isGallery ? (\n          <div className={styles.counter}>\n            {currentIndex + 1} / {mediaItems.length}\n          </div>\n        ) : null}\n      </div>\n    </dialog>\n  );\n}\n\nLightbox.displayName = 'Lightbox';\n","import {useCallback, useMemo, useState, type ReactNode} from 'react';\nimport {Lightbox, type LightboxMedia, type LightboxProps} from './Lightbox';\n\ntype LightboxOptions = Omit<\n  LightboxProps,\n  | 'defaultIndex'\n  | 'index'\n  | 'isOpen'\n  | 'media'\n  | 'onIndexChange'\n  | 'onOpenChange'\n>;\n\nexport interface UseLightboxOptions extends LightboxOptions {\n  /**\n   * Media to display in the lightbox.\n   */\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>;\n}\n\nexport interface UseLightboxReturn {\n  /**\n   * Close the lightbox.\n   */\n  close: () => void;\n  /**\n   * Render this element in your tree.\n   */\n  element: ReactNode;\n  /**\n   * Returns trigger props that open at the given gallery index.\n   */\n  getTriggerProps: (index: number) => {\n    'aria-haspopup': 'dialog';\n    onClick: () => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    role: 'button';\n    tabIndex: 0;\n  };\n  /**\n   * Current gallery index.\n   */\n  index: number;\n  /**\n   * Whether the lightbox is open.\n   */\n  isOpen: boolean;\n  /**\n   * Open the lightbox, optionally at a specific gallery index.\n   */\n  open: (index?: number) => void;\n  /**\n   * Trigger props that open the first item.\n   */\n  triggerProps: {\n    'aria-haspopup': 'dialog';\n    onClick: () => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    role: 'button';\n    tabIndex: 0;\n  };\n}\n\n/**\n * State helper for Lightbox triggers and rendering.\n */\nexport function useLightbox(options: UseLightboxOptions): UseLightboxReturn {\n  const {media, ...lightboxProps} = options;\n  const [isOpen, setIsOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n\n  const open = useCallback((nextIndex = 0) => {\n    setIndex(nextIndex);\n    setIsOpen(true);\n  }, []);\n  const close = useCallback(() => setIsOpen(false), []);\n  const getTriggerProps = useCallback(\n    (nextIndex: number) => ({\n      'aria-haspopup': 'dialog' as const,\n      onClick: () => open(nextIndex),\n      onKeyDown: (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          open(nextIndex);\n        }\n      },\n      role: 'button' as const,\n      tabIndex: 0 as const,\n    }),\n    [open],\n  );\n  const triggerProps = useMemo(() => getTriggerProps(0), [getTriggerProps]);\n  const element = (\n    <Lightbox\n      {...lightboxProps}\n      index={index}\n      isOpen={isOpen}\n      media={media}\n      onIndexChange={setIndex}\n      onOpenChange={setIsOpen}\n    />\n  );\n\n  return {close, element, getTriggerProps, index, isOpen, open, triggerProps};\n}\n"]}