@etus/ui 0.4.0-beta.1 → 0.4.0-beta.10

package/dist/chunk-2FJJOHHH.js

@@ -0,0 +1,408 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Download, X, ChevronLeft, ChevronRight, ZoomOut, ZoomIn } from 'lucide-react';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var controlButtonBase = cn(
+  "flex items-center justify-center rounded-[var(--lightbox-button-radius)]",
+  "bg-white/10 text-white transition-colors hover:bg-white/20",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+);
+var controlButtonSmall = cn(
+  controlButtonBase,
+  "size-[var(--lightbox-button-size-sm)]"
+);
+var controlButtonLarge = cn(
+  controlButtonBase,
+  "size-[var(--lightbox-button-size-lg)]"
+);
+var controlButtonDisabled = "disabled:cursor-not-allowed disabled:opacity-30";
+function Lightbox({
+  className,
+  enableDownload = false,
+  enableZoom = true,
+  images,
+  initialIndex = 0,
+  loop = true,
+  onClose,
+  onIndexChange,
+  onOpenChange,
+  open,
+  showCaption = true,
+  showCounter = true,
+  showThumbnails = false
+}) {
+  const [stateKey, setStateKey] = React.useState(0);
+  const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
+  const [zoom, setZoom] = React.useState(1);
+  const [imageLoading, setImageLoading] = React.useState(true);
+  const [imageError, setImageError] = React.useState(false);
+  const prevOpenRef = React.useRef(open);
+  React.useEffect(() => {
+    if (open && !prevOpenRef.current) {
+      setCurrentIndex(initialIndex);
+      setZoom(1);
+      setImageLoading(true);
+      setImageError(false);
+      setStateKey((k) => k + 1);
+    }
+    prevOpenRef.current = open;
+  }, [open, initialIndex]);
+  React.useEffect(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [currentIndex]);
+  const currentImage = images[currentIndex];
+  const hasMultipleImages = images.length > 1;
+  const canGoNext = loop || currentIndex < images.length - 1;
+  const canGoPrev = loop || currentIndex > 0;
+  const goNext = React.useCallback(() => {
+    if (!canGoNext) return;
+    setZoom(1);
+    const nextIndex = currentIndex < images.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex;
+    setCurrentIndex(nextIndex);
+    onIndexChange?.(nextIndex);
+  }, [currentIndex, images.length, loop, canGoNext, onIndexChange]);
+  const goPrev = React.useCallback(() => {
+    if (!canGoPrev) return;
+    setZoom(1);
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 : loop ? images.length - 1 : currentIndex;
+    setCurrentIndex(prevIndex);
+    onIndexChange?.(prevIndex);
+  }, [currentIndex, images.length, loop, canGoPrev, onIndexChange]);
+  const goToIndex = React.useCallback(
+    (index) => {
+      if (index >= 0 && index < images.length) {
+        setZoom(1);
+        setCurrentIndex(index);
+        onIndexChange?.(index);
+      }
+    },
+    [images.length, onIndexChange]
+  );
+  const handleClose = React.useCallback(() => {
+    onOpenChange?.(false);
+    onClose?.();
+  }, [onOpenChange, onClose]);
+  const handleZoomIn = React.useCallback(() => {
+    setZoom((prev) => Math.min(3, prev + 0.25));
+  }, []);
+  const handleZoomOut = React.useCallback(() => {
+    setZoom((prev) => Math.max(0.5, prev - 0.25));
+  }, []);
+  const handleDownload = React.useCallback(() => {
+    if (!currentImage) return;
+    const link = document.createElement("a");
+    link.href = currentImage.src;
+    link.download = currentImage.alt || `image-${currentImage.id}`;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [currentImage]);
+  const handleImageLoad = React.useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+  }, []);
+  const handleImageError = React.useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          goPrev();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          goNext();
+          break;
+        case "Escape":
+          event.preventDefault();
+          handleClose();
+          break;
+        case "+":
+        case "=":
+          if (enableZoom) {
+            event.preventDefault();
+            handleZoomIn();
+          }
+          break;
+        case "-":
+          if (enableZoom) {
+            event.preventDefault();
+            handleZoomOut();
+          }
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, goNext, goPrev, handleClose, enableZoom, handleZoomIn, handleZoomOut]);
+  if (!currentImage) return null;
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-50 bg-black/90",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        ),
+        "data-slot": "lightbox-overlay"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        className: cn(
+          "fixed inset-0 z-50 flex flex-col",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "duration-200",
+          className
+        ),
+        "aria-describedby": currentImage.caption ? "lightbox-caption" : void 0,
+        "aria-label": `Lightbox: ${currentImage.alt}`,
+        "data-slot": "lightbox",
+        children: [
+          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Image Viewer" }),
+          /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "sr-only", children: `Viewing image ${String(currentIndex + 1)} of ${String(images.length)}` }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between p-[var(--lightbox-header-padding)]",
+              "data-slot": "lightbox-header",
+              children: [
+                showCounter && hasMultipleImages ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "aria-live": "polite",
+                    className: "text-sm text-white/70",
+                    "data-slot": "lightbox-counter",
+                    children: [
+                      currentIndex + 1,
+                      " / ",
+                      images.length
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("div", {}),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  enableDownload && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": "Download image",
+                      className: controlButtonSmall,
+                      "data-slot": "lightbox-download",
+                      type: "button",
+                      onClick: handleDownload,
+                      children: /* @__PURE__ */ jsx(Download, { className: "size-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": "Close lightbox",
+                      className: controlButtonSmall,
+                      "data-slot": "lightbox-close",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(X, { className: "size-6" })
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          hasMultipleImages && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  "absolute left-4 top-1/2 z-10 -translate-y-1/2",
+                  controlButtonLarge,
+                  controlButtonDisabled
+                ),
+                "aria-label": "Previous image",
+                "data-slot": "lightbox-prev",
+                disabled: !canGoPrev,
+                type: "button",
+                onClick: goPrev,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-8" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  "absolute right-4 top-1/2 z-10 -translate-y-1/2",
+                  controlButtonLarge,
+                  controlButtonDisabled
+                ),
+                "aria-label": "Next image",
+                "data-slot": "lightbox-next",
+                disabled: !canGoNext,
+                type: "button",
+                onClick: goNext,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-8" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 items-center justify-center",
+                showThumbnails ? "pb-24" : "pb-20",
+                "pt-16 px-16"
+              ),
+              "data-slot": "lightbox-image-container",
+              children: [
+                imageLoading && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 flex items-center justify-center",
+                    "data-loading": "true",
+                    children: /* @__PURE__ */ jsx("div", { className: "size-12 animate-spin rounded-full border-4 border-white/20 border-t-white" })
+                  }
+                ),
+                imageError ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex flex-col items-center justify-center gap-4 text-white/70",
+                    "data-error": "true",
+                    children: [
+                      /* @__PURE__ */ jsx(X, { className: "size-16 text-white/40" }),
+                      /* @__PURE__ */ jsx("span", { children: "Failed to load image" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    className: cn(
+                      "max-h-full max-w-full object-contain transition-all duration-200",
+                      imageLoading ? "opacity-0" : "opacity-100"
+                    ),
+                    alt: currentImage.alt,
+                    "data-slot": "lightbox-image",
+                    src: currentImage.src,
+                    style: { transform: `scale(${String(zoom)})` },
+                    onError: handleImageError,
+                    onLoad: handleImageLoad
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute bottom-0 left-0 right-0 z-10 flex flex-col items-center gap-[var(--lightbox-footer-gap)] p-[var(--lightbox-footer-padding)]",
+                showThumbnails ? "pb-4" : "pb-6"
+              ),
+              "data-slot": "lightbox-footer",
+              children: [
+                enableZoom && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2",
+                    "data-slot": "lightbox-zoom-controls",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": "Zoom out",
+                          className: cn(controlButtonSmall, controlButtonDisabled),
+                          "data-slot": "lightbox-zoom-out",
+                          disabled: zoom <= 0.5,
+                          type: "button",
+                          onClick: handleZoomOut,
+                          children: /* @__PURE__ */ jsx(ZoomOut, { className: "size-5" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "min-w-[4ch] text-center text-sm text-white/70", children: [
+                        Math.round(zoom * 100),
+                        "%"
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": "Zoom in",
+                          className: cn(controlButtonSmall, controlButtonDisabled),
+                          "data-slot": "lightbox-zoom-in",
+                          disabled: zoom >= 3,
+                          type: "button",
+                          onClick: handleZoomIn,
+                          children: /* @__PURE__ */ jsx(ZoomIn, { className: "size-5" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showCaption && currentImage.caption && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-center text-sm text-white/90",
+                    "data-slot": "lightbox-caption",
+                    id: "lightbox-caption",
+                    children: currentImage.caption
+                  }
+                ),
+                showThumbnails && hasMultipleImages && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-label": "Image thumbnails",
+                    className: "flex max-w-full gap-[var(--lightbox-thumbnail-gap)] overflow-x-auto px-4 py-2",
+                    "data-slot": "lightbox-thumbnails",
+                    role: "tablist",
+                    children: images.map((image, index) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: cn(
+                          "relative size-[var(--lightbox-thumbnail-size)] shrink-0 overflow-hidden rounded-md transition-all",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+                          index === currentIndex ? "ring-2 ring-white ring-offset-2 ring-offset-black/90" : "opacity-[var(--lightbox-thumbnail-opacity-inactive)] hover:opacity-100"
+                        ),
+                        "aria-label": `View ${image.alt}`,
+                        "aria-selected": index === currentIndex,
+                        "data-slot": "lightbox-thumbnail",
+                        role: "tab",
+                        type: "button",
+                        onClick: () => {
+                          goToIndex(index);
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: image.alt,
+                            className: "size-full object-cover",
+                            loading: "lazy",
+                            src: image.thumbnail ?? image.src
+                          }
+                        )
+                      },
+                      image.id
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      stateKey
+    )
+  ] }) });
+}
+
+export { Lightbox };
+//# sourceMappingURL=chunk-2FJJOHHH.js.map
+//# sourceMappingURL=chunk-2FJJOHHH.js.map

package/dist/chunk-2FJJOHHH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"names":[],"mappings":";;;;;;AAkBA,IAAM,iBAAA,GAAoB,EAAA;AAAA,EACxB,0EAAA;AAAA,EACA,4DAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,kBAAA,GAAqB,EAAA;AAAA,EACzB,iBAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,kBAAA,GAAqB,EAAA;AAAA,EACzB,iBAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,qBAAA,GAAwB,iDAAA;AAsB9B,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,UAAA,GAAa,IAAA;AAAA,EACb,MAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,cAAA,GAAiB;AACnB,CAAA,EAAkB;AAEhB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAU,eAAS,CAAC,CAAA;AAChD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,YAAY,CAAA;AACnE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAS,CAAC,CAAA;AACxC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAU,eAAS,KAAK,CAAA;AAGxD,EAAA,MAAM,WAAA,GAAoB,aAAO,IAAI,CAAA;AAIrC,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,IAAA,IAAQ,CAAC,WAAA,CAAY,OAAA,EAAS;AAEhC,MAAA,eAAA,CAAgB,YAAY,CAAA;AAC5B,MAAA,OAAA,CAAQ,CAAC,CAAA;AACT,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,WAAA,CAAY,CAAC,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA;AAAA,IAC1B;AACA,IAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,EACxB,CAAA,EAAG,CAAC,IAAA,EAAM,YAAY,CAAC,CAAA;AAKvB,EAAM,gBAAU,MAAM;AACpB,IAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAGjB,EAAA,MAAM,YAAA,GAA0C,OAAO,YAAY,CAAA;AACnE,EAAA,MAAM,iBAAA,GAAoB,OAAO,MAAA,GAAS,CAAA;AAE1C,EAAA,MAAM,SAAA,GAAY,IAAA,IAAQ,YAAA,GAAe,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,MAAM,SAAA,GAAY,QAAQ,YAAA,GAAe,CAAA;AAEzC,EAAA,MAAM,MAAA,GAAe,kBAAY,MAAM;AACrC,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,MAAM,SAAA,GACJ,eAAe,MAAA,CAAO,MAAA,GAAS,IAC3B,YAAA,GAAe,CAAA,GACf,OACE,CAAA,GACA,YAAA;AACR,IAAA,eAAA,CAAgB,SAAS,CAAA;AACzB,IAAA,aAAA,GAAgB,SAAS,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,YAAA,EAAc,MAAA,CAAO,QAAQ,IAAA,EAAM,SAAA,EAAW,aAAa,CAAC,CAAA;AAEhE,EAAA,MAAM,MAAA,GAAe,kBAAY,MAAM;AACrC,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,MAAM,SAAA,GACJ,eAAe,CAAA,GACX,YAAA,GAAe,IACf,IAAA,GACE,MAAA,CAAO,SAAS,CAAA,GAChB,YAAA;AACR,IAAA,eAAA,CAAgB,SAAS,CAAA;AACzB,IAAA,aAAA,GAAgB,SAAS,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,YAAA,EAAc,MAAA,CAAO,QAAQ,IAAA,EAAM,SAAA,EAAW,aAAa,CAAC,CAAA;AAEhE,EAAA,MAAM,SAAA,GAAkB,KAAA,CAAA,WAAA;AAAA,IACtB,CAAC,KAAA,KAAkB;AACjB,MAAA,IAAI,KAAA,IAAS,CAAA,IAAK,KAAA,GAAQ,MAAA,CAAO,MAAA,EAAQ;AACvC,QAAA,OAAA,CAAQ,CAAC,CAAA;AACT,QAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,QAAA,aAAA,GAAgB,KAAK,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,MAAA,CAAO,MAAA,EAAQ,aAAa;AAAA,GAC/B;AAEA,EAAA,MAAM,WAAA,GAAoB,kBAAY,MAAM;AAC1C,IAAA,YAAA,GAAe,KAAK,CAAA;AACpB,IAAA,OAAA,IAAU;AAAA,EACZ,CAAA,EAAG,CAAC,YAAA,EAAc,OAAO,CAAC,CAAA;AAE1B,EAAA,MAAM,YAAA,GAAqB,kBAAY,MAAM;AAC3C,IAAA,OAAA,CAAQ,CAAC,IAAA,KAAS,IAAA,CAAK,IAAI,CAAA,EAAG,IAAA,GAAO,IAAI,CAAC,CAAA;AAAA,EAC5C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAsB,kBAAY,MAAM;AAC5C,IAAA,OAAA,CAAQ,CAAC,IAAA,KAAS,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,GAAO,IAAI,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAuB,kBAAY,MAAM;AAC7C,IAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,IAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,GAAG,CAAA;AACvC,IAAA,IAAA,CAAK,OAAO,YAAA,CAAa,GAAA;AACzB,IAAA,IAAA,CAAK,QAAA,GAAW,YAAA,CAAa,GAAA,IAAO,CAAA,MAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAC5D,IAAA,IAAA,CAAK,MAAA,GAAS,QAAA;AACd,IAAA,IAAA,CAAK,GAAA,GAAM,qBAAA;AACX,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,IAAI,CAAA;AAC9B,IAAA,IAAA,CAAK,KAAA,EAAM;AACX,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,IAAI,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,eAAA,GAAwB,kBAAY,MAAM;AAC9C,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAA,GAAyB,kBAAY,MAAM;AAC/C,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAA,aAAA,CAAc,IAAI,CAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAGL,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyB;AAC9C,MAAA,QAAQ,MAAM,GAAA;AAAK,QACjB,KAAK,WAAA;AACH,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,MAAA,EAAO;AACP,UAAA;AAAA,QACF,KAAK,YAAA;AACH,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,MAAA,EAAO;AACP,UAAA;AAAA,QACF,KAAK,QAAA;AACH,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,WAAA,EAAY;AACZ,UAAA;AAAA,QACF,KAAK,GAAA;AAAA,QACL,KAAK,GAAA;AACH,UAAA,IAAI,UAAA,EAAY;AACd,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,YAAA,EAAa;AAAA,UACf;AACA,UAAA;AAAA,QACF,KAAK,GAAA;AACH,UAAA,IAAI,UAAA,EAAY;AACd,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,aAAA,EAAc;AAAA,UAChB;AACA,UAAA;AAAA;AACJ,IACF,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAChD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,MAAA,EAAQ,QAAQ,WAAA,EAAa,UAAA,EAAY,YAAA,EAAc,aAAa,CAAC,CAAA;AAE/E,EAAA,IAAI,CAAC,cAAc,OAAO,IAAA;AAE1B,EAAA,2BACmB,eAAA,CAAA,IAAA,EAAhB,EAAqB,MAAY,YAAA,EAChC,QAAA,kBAAA,IAAA,CAAiB,wBAAhB,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAiB,eAAA,CAAA,OAAA;AAAA,MAAhB;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,gCAAA;AAAA,UACA,8DAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,WAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACA,IAAA;AAAA,MAAiB,eAAA,CAAA,OAAA;AAAA,MAAhB;AAAA,QAEC,SAAA,EAAW,EAAA;AAAA,UACT,kCAAA;AAAA,UACA,8DAAA;AAAA,UACA,4DAAA;AAAA,UACA,8DAAA;AAAA,UACA,cAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,YAAA,CAAa,OAAA,GAAU,kBAAA,GAAqB,MAAA;AAAA,QAC9D,YAAA,EAAY,CAAA,UAAA,EAAa,YAAA,CAAa,GAAG,CAAA,CAAA;AAAA,QACzC,WAAA,EAAU,UAAA;AAAA,QAGV,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAiB,eAAA,CAAA,KAAA,EAAhB,EAAsB,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,cAAA,EAE3C,CAAA;AAAA,0BACA,GAAA,CAAiB,eAAA,CAAA,WAAA,EAAhB,EAA4B,SAAA,EAAU,WACpC,QAAA,EAAA,CAAA,cAAA,EAAiB,MAAA,CAAO,YAAA,GAAe,CAAC,CAAC,CAAA,IAAA,EAAO,MAAA,CAAO,MAAA,CAAO,MAAM,CAAC,CAAA,CAAA,EACxE,CAAA;AAAA,0BAGA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yGAAA;AAAA,cACV,WAAA,EAAU,iBAAA;AAAA,cAGT,QAAA,EAAA;AAAA,gBAAA,WAAA,IAAe,iBAAA,mBACd,IAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAA,EAAU,QAAA;AAAA,oBACV,SAAA,EAAU,uBAAA;AAAA,oBACV,WAAA,EAAU,kBAAA;AAAA,oBAET,QAAA,EAAA;AAAA,sBAAA,YAAA,GAAe,CAAA;AAAA,sBAAE,KAAA;AAAA,sBAAI,MAAA,CAAO;AAAA;AAAA;AAAA,iBAC/B,uBAEC,KAAA,EAAA,EAAI,CAAA;AAAA,gCAIP,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,kBAAA,cAAA,oBACC,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,YAAA,EAAW,gBAAA;AAAA,sBACX,SAAA,EAAW,kBAAA;AAAA,sBACX,WAAA,EAAU,mBAAA;AAAA,sBACV,IAAA,EAAK,QAAA;AAAA,sBACL,OAAA,EAAS,cAAA;AAAA,sBAET,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,mBAC/B;AAAA,kCAEF,GAAA,CAAiB,eAAA,CAAA,KAAA,EAAhB,EAAsB,OAAA,EAAO,IAAA,EAC5B,QAAA,kBAAA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,YAAA,EAAW,gBAAA;AAAA,sBACX,SAAA,EAAW,kBAAA;AAAA,sBACX,WAAA,EAAU,gBAAA;AAAA,sBACV,IAAA,EAAK,QAAA;AAAA,sBAEL,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,mBACxB,EACF;AAAA,iBAAA,EACF;AAAA;AAAA;AAAA,WACF;AAAA,UAGC,qCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,+CAAA;AAAA,kBACA,kBAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBACA,YAAA,EAAW,gBAAA;AAAA,gBACX,WAAA,EAAU,eAAA;AAAA,gBACV,UAAU,CAAC,SAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAA;AAAA,gBAET,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,aAClC;AAAA,4BACA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,gDAAA;AAAA,kBACA,kBAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBACA,YAAA,EAAW,YAAA;AAAA,gBACX,WAAA,EAAU,eAAA;AAAA,gBACV,UAAU,CAAC,SAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAA;AAAA,gBAET,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AACnC,WAAA,EACF,CAAA;AAAA,0BAIF,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,yCAAA;AAAA,gBACA,iBAAiB,OAAA,GAAU,OAAA;AAAA,gBAC3B;AAAA,eACF;AAAA,cACA,WAAA,EAAU,0BAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,YAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,mDAAA;AAAA,oBACV,cAAA,EAAa,MAAA;AAAA,oBAEb,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAA4E;AAAA;AAAA,iBAC7F;AAAA,gBAED,UAAA,mBACC,IAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,+DAAA;AAAA,oBACV,YAAA,EAAW,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA,sCAAA,GAAA,CAAC,CAAA,EAAA,EAAE,WAAU,uBAAA,EAAwB,CAAA;AAAA,sCACrC,GAAA,CAAC,UAAK,QAAA,EAAA,sBAAA,EAAoB;AAAA;AAAA;AAAA,iBAC5B,mBAEA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA;AAAA,sBACT,kEAAA;AAAA,sBACA,eAAe,WAAA,GAAc;AAAA,qBAC/B;AAAA,oBACA,KAAK,YAAA,CAAa,GAAA;AAAA,oBAClB,WAAA,EAAU,gBAAA;AAAA,oBACV,KAAK,YAAA,CAAa,GAAA;AAAA,oBAClB,OAAO,EAAE,SAAA,EAAW,SAAS,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,oBAC7C,OAAA,EAAS,gBAAA;AAAA,oBACT,MAAA,EAAQ;AAAA;AAAA;AACV;AAAA;AAAA,WAEJ;AAAA,0BAGA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,sIAAA;AAAA,gBACA,iBAAiB,MAAA,GAAS;AAAA,eAC5B;AAAA,cACA,WAAA,EAAU,iBAAA;AAAA,cAGT,QAAA,EAAA;AAAA,gBAAA,UAAA,oBACC,IAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,yBAAA;AAAA,oBACV,WAAA,EAAU,wBAAA;AAAA,oBAEV,QAAA,EAAA;AAAA,sCAAA,GAAA;AAAA,wBAAC,QAAA;AAAA,wBAAA;AAAA,0BACC,YAAA,EAAW,UAAA;AAAA,0BACX,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,qBAAqB,CAAA;AAAA,0BACvD,WAAA,EAAU,mBAAA;AAAA,0BACV,UAAU,IAAA,IAAQ,GAAA;AAAA,0BAClB,IAAA,EAAK,QAAA;AAAA,0BACL,OAAA,EAAS,aAAA;AAAA,0BAET,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,uBAC9B;AAAA,sCACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAK,KAAA,CAAM,OAAO,GAAG,CAAA;AAAA,wBAAE;AAAA,uBAAA,EAC1B,CAAA;AAAA,sCACA,GAAA;AAAA,wBAAC,QAAA;AAAA,wBAAA;AAAA,0BACC,YAAA,EAAW,SAAA;AAAA,0BACX,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,qBAAqB,CAAA;AAAA,0BACvD,WAAA,EAAU,kBAAA;AAAA,0BACV,UAAU,IAAA,IAAQ,CAAA;AAAA,0BAClB,IAAA,EAAK,QAAA;AAAA,0BACL,OAAA,EAAS,YAAA;AAAA,0BAET,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAC7B;AAAA;AAAA,iBACF;AAAA,gBAID,WAAA,IAAe,aAAa,OAAA,oBAC3B,GAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,mCAAA;AAAA,oBACV,WAAA,EAAU,kBAAA;AAAA,oBACV,EAAA,EAAG,kBAAA;AAAA,oBAEF,QAAA,EAAA,YAAA,CAAa;AAAA;AAAA,iBAChB;AAAA,gBAID,kBAAkB,iBAAA,oBACjB,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,YAAA,EAAW,kBAAA;AAAA,oBACX,SAAA,EAAU,+EAAA;AAAA,oBACV,WAAA,EAAU,qBAAA;AAAA,oBACV,IAAA,EAAK,SAAA;AAAA,oBAEJ,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBAClB,GAAA;AAAA,sBAAC,QAAA;AAAA,sBAAA;AAAA,wBAEC,SAAA,EAAW,EAAA;AAAA,0BACT,mGAAA;AAAA,0BACA,6EAAA;AAAA,0BACA,KAAA,KAAU,eACN,sDAAA,GACA;AAAA,yBACN;AAAA,wBACA,YAAA,EAAY,CAAA,KAAA,EAAQ,KAAA,CAAM,GAAG,CAAA,CAAA;AAAA,wBAC7B,iBAAe,KAAA,KAAU,YAAA;AAAA,wBACzB,WAAA,EAAU,oBAAA;AAAA,wBACV,IAAA,EAAK,KAAA;AAAA,wBACL,IAAA,EAAK,QAAA;AAAA,wBACL,SAAS,MAAM;AACb,0BAAA,SAAA,CAAU,KAAK,CAAA;AAAA,wBACjB,CAAA;AAAA,wBAEA,QAAA,kBAAA,GAAA;AAAA,0BAAC,KAAA;AAAA,0BAAA;AAAA,4BACC,KAAK,KAAA,CAAM,GAAA;AAAA,4BACX,SAAA,EAAU,wBAAA;AAAA,4BACV,OAAA,EAAQ,MAAA;AAAA,4BACR,GAAA,EAAK,KAAA,CAAM,SAAA,IAAa,KAAA,CAAM;AAAA;AAAA;AAChC,uBAAA;AAAA,sBAtBK,KAAA,CAAM;AAAA,qBAwBd;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA,OAAA;AAAA,MApOK;AAAA;AAqOP,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"chunk-2FJJOHHH.js","sourcesContent":["\"use client\"\n\nimport type { LightboxImage, LightboxProps } from \"./Lightbox.types\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Download,\n  X,\n  ZoomIn,\n  ZoomOut,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n// Shared button styles\nconst controlButtonBase = cn(\n  \"flex items-center justify-center rounded-[var(--lightbox-button-radius)]\",\n  \"bg-white/10 text-white transition-colors hover:bg-white/20\",\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n)\n\nconst controlButtonSmall = cn(\n  controlButtonBase,\n  \"size-[var(--lightbox-button-size-sm)]\"\n)\nconst controlButtonLarge = cn(\n  controlButtonBase,\n  \"size-[var(--lightbox-button-size-lg)]\"\n)\nconst controlButtonDisabled = \"disabled:cursor-not-allowed disabled:opacity-30\"\n\n/**\n * Lightbox - A full-screen media viewer with navigation, zoom, and captions\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false)\n * const images = [\n *   { id: '1', src: '/img1.jpg', alt: 'Image 1', caption: 'First image' },\n *   { id: '2', src: '/img2.jpg', alt: 'Image 2', caption: 'Second image' },\n * ]\n *\n * <Lightbox\n *   images={images}\n *   open={open}\n *   onOpenChange={setOpen}\n *   showCaption\n *   enableZoom\n * />\n * ```\n */\nfunction Lightbox({\n  className,\n  enableDownload = false,\n  enableZoom = true,\n  images,\n  initialIndex = 0,\n  loop = true,\n  onClose,\n  onIndexChange,\n  onOpenChange,\n  open,\n  showCaption = true,\n  showCounter = true,\n  showThumbnails = false,\n}: LightboxProps) {\n  // Use a key to reset state when dialog opens at a specific index\n  const [stateKey, setStateKey] = React.useState(0)\n  const [currentIndex, setCurrentIndex] = React.useState(initialIndex)\n  const [zoom, setZoom] = React.useState(1)\n  const [imageLoading, setImageLoading] = React.useState(true)\n  const [imageError, setImageError] = React.useState(false)\n\n  // Track previous open state to detect when dialog opens\n  const prevOpenRef = React.useRef(open)\n\n  // Reset state when dialog opens (not on every render)\n  /* eslint-disable react-you-might-not-need-an-effect/no-derived-state, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- Intentional state reset on open */\n  React.useEffect(() => {\n    if (open && !prevOpenRef.current) {\n      // Dialog just opened - reset to initialIndex\n      setCurrentIndex(initialIndex)\n      setZoom(1)\n      setImageLoading(true)\n      setImageError(false)\n      setStateKey((k) => k + 1)\n    }\n    prevOpenRef.current = open\n  }, [open, initialIndex])\n  /* eslint-enable react-you-might-not-need-an-effect/no-derived-state, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  // Reset loading state when the image changes\n  /* eslint-disable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, react-you-might-not-need-an-effect/no-chain-state-updates, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- Image loading state sync */\n  React.useEffect(() => {\n    setImageLoading(true)\n    setImageError(false)\n  }, [currentIndex])\n  /* eslint-enable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, react-you-might-not-need-an-effect/no-chain-state-updates, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  const currentImage: LightboxImage | undefined = images[currentIndex]\n  const hasMultipleImages = images.length > 1\n\n  const canGoNext = loop || currentIndex < images.length - 1\n  const canGoPrev = loop || currentIndex > 0\n\n  const goNext = React.useCallback(() => {\n    if (!canGoNext) return\n    setZoom(1)\n    const nextIndex =\n      currentIndex < images.length - 1\n        ? currentIndex + 1\n        : loop\n          ? 0\n          : currentIndex\n    setCurrentIndex(nextIndex)\n    onIndexChange?.(nextIndex)\n  }, [currentIndex, images.length, loop, canGoNext, onIndexChange])\n\n  const goPrev = React.useCallback(() => {\n    if (!canGoPrev) return\n    setZoom(1)\n    const prevIndex =\n      currentIndex > 0\n        ? currentIndex - 1\n        : loop\n          ? images.length - 1\n          : currentIndex\n    setCurrentIndex(prevIndex)\n    onIndexChange?.(prevIndex)\n  }, [currentIndex, images.length, loop, canGoPrev, onIndexChange])\n\n  const goToIndex = React.useCallback(\n    (index: number) => {\n      if (index >= 0 && index < images.length) {\n        setZoom(1)\n        setCurrentIndex(index)\n        onIndexChange?.(index)\n      }\n    },\n    [images.length, onIndexChange]\n  )\n\n  const handleClose = React.useCallback(() => {\n    onOpenChange?.(false)\n    onClose?.()\n  }, [onOpenChange, onClose])\n\n  const handleZoomIn = React.useCallback(() => {\n    setZoom((prev) => Math.min(3, prev + 0.25))\n  }, [])\n\n  const handleZoomOut = React.useCallback(() => {\n    setZoom((prev) => Math.max(0.5, prev - 0.25))\n  }, [])\n\n  const handleDownload = React.useCallback(() => {\n    if (!currentImage) return\n\n    const link = document.createElement(\"a\")\n    link.href = currentImage.src\n    link.download = currentImage.alt || `image-${currentImage.id}`\n    link.target = \"_blank\"\n    link.rel = \"noopener noreferrer\"\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n  }, [currentImage])\n\n  const handleImageLoad = React.useCallback(() => {\n    setImageLoading(false)\n    setImageError(false)\n  }, [])\n\n  const handleImageError = React.useCallback(() => {\n    setImageLoading(false)\n    setImageError(true)\n  }, [])\n\n  // Keyboard navigation\n  React.useEffect(() => {\n    if (!open) return\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"ArrowLeft\":\n          event.preventDefault()\n          goPrev()\n          break\n        case \"ArrowRight\":\n          event.preventDefault()\n          goNext()\n          break\n        case \"Escape\":\n          event.preventDefault()\n          handleClose()\n          break\n        case \"+\":\n        case \"=\":\n          if (enableZoom) {\n            event.preventDefault()\n            handleZoomIn()\n          }\n          break\n        case \"-\":\n          if (enableZoom) {\n            event.preventDefault()\n            handleZoomOut()\n          }\n          break\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [open, goNext, goPrev, handleClose, enableZoom, handleZoomIn, handleZoomOut])\n\n  if (!currentImage) return null\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/90\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n          )}\n          data-slot=\"lightbox-overlay\"\n        />\n        <DialogPrimitive.Content\n          key={stateKey}\n          className={cn(\n            \"fixed inset-0 z-50 flex flex-col\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"duration-200\",\n            className\n          )}\n          aria-describedby={currentImage.caption ? \"lightbox-caption\" : undefined}\n          aria-label={`Lightbox: ${currentImage.alt}`}\n          data-slot=\"lightbox\"\n        >\n          {/* Hide dialog title for screen readers but provide accessible label */}\n          <DialogPrimitive.Title className=\"sr-only\">\n            Image Viewer\n          </DialogPrimitive.Title>\n          <DialogPrimitive.Description className=\"sr-only\">\n            {`Viewing image ${String(currentIndex + 1)} of ${String(images.length)}`}\n          </DialogPrimitive.Description>\n\n          {/* Top controls bar */}\n          <div\n            className=\"absolute top-0 left-0 right-0 z-10 flex items-center justify-between p-[var(--lightbox-header-padding)]\"\n            data-slot=\"lightbox-header\"\n          >\n            {/* Counter */}\n            {showCounter && hasMultipleImages ? (\n              <div\n                aria-live=\"polite\"\n                className=\"text-sm text-white/70\"\n                data-slot=\"lightbox-counter\"\n              >\n                {currentIndex + 1} / {images.length}\n              </div>\n            ) : (\n              <div />\n            )}\n\n            {/* Action buttons */}\n            <div className=\"flex items-center gap-2\">\n              {enableDownload && (\n                <button\n                  aria-label=\"Download image\"\n                  className={controlButtonSmall}\n                  data-slot=\"lightbox-download\"\n                  type=\"button\"\n                  onClick={handleDownload}\n                >\n                  <Download className=\"size-5\" />\n                </button>\n              )}\n              <DialogPrimitive.Close asChild>\n                <button\n                  aria-label=\"Close lightbox\"\n                  className={controlButtonSmall}\n                  data-slot=\"lightbox-close\"\n                  type=\"button\"\n                >\n                  <X className=\"size-6\" />\n                </button>\n              </DialogPrimitive.Close>\n            </div>\n          </div>\n\n          {/* Navigation arrows */}\n          {hasMultipleImages && (\n            <>\n              <button\n                className={cn(\n                  \"absolute left-4 top-1/2 z-10 -translate-y-1/2\",\n                  controlButtonLarge,\n                  controlButtonDisabled\n                )}\n                aria-label=\"Previous image\"\n                data-slot=\"lightbox-prev\"\n                disabled={!canGoPrev}\n                type=\"button\"\n                onClick={goPrev}\n              >\n                <ChevronLeft className=\"size-8\" />\n              </button>\n              <button\n                className={cn(\n                  \"absolute right-4 top-1/2 z-10 -translate-y-1/2\",\n                  controlButtonLarge,\n                  controlButtonDisabled\n                )}\n                aria-label=\"Next image\"\n                data-slot=\"lightbox-next\"\n                disabled={!canGoNext}\n                type=\"button\"\n                onClick={goNext}\n              >\n                <ChevronRight className=\"size-8\" />\n              </button>\n            </>\n          )}\n\n          {/* Main image area */}\n          <div\n            className={cn(\n              \"flex flex-1 items-center justify-center\",\n              showThumbnails ? \"pb-24\" : \"pb-20\",\n              \"pt-16 px-16\"\n            )}\n            data-slot=\"lightbox-image-container\"\n          >\n            {imageLoading && (\n              <div\n                className=\"absolute inset-0 flex items-center justify-center\"\n                data-loading=\"true\"\n              >\n                <div className=\"size-12 animate-spin rounded-full border-4 border-white/20 border-t-white\" />\n              </div>\n            )}\n            {imageError ? (\n              <div\n                className=\"flex flex-col items-center justify-center gap-4 text-white/70\"\n                data-error=\"true\"\n              >\n                <X className=\"size-16 text-white/40\" />\n                <span>Failed to load image</span>\n              </div>\n            ) : (\n              <img\n                className={cn(\n                  \"max-h-full max-w-full object-contain transition-all duration-200\",\n                  imageLoading ? \"opacity-0\" : \"opacity-100\"\n                )}\n                alt={currentImage.alt}\n                data-slot=\"lightbox-image\"\n                src={currentImage.src}\n                style={{ transform: `scale(${String(zoom)})` }}\n                onError={handleImageError}\n                onLoad={handleImageLoad}\n              />\n            )}\n          </div>\n\n          {/* Bottom controls bar */}\n          <div\n            className={cn(\n              \"absolute bottom-0 left-0 right-0 z-10 flex flex-col items-center gap-[var(--lightbox-footer-gap)] p-[var(--lightbox-footer-padding)]\",\n              showThumbnails ? \"pb-4\" : \"pb-6\"\n            )}\n            data-slot=\"lightbox-footer\"\n          >\n            {/* Zoom controls */}\n            {enableZoom && (\n              <div\n                className=\"flex items-center gap-2\"\n                data-slot=\"lightbox-zoom-controls\"\n              >\n                <button\n                  aria-label=\"Zoom out\"\n                  className={cn(controlButtonSmall, controlButtonDisabled)}\n                  data-slot=\"lightbox-zoom-out\"\n                  disabled={zoom <= 0.5}\n                  type=\"button\"\n                  onClick={handleZoomOut}\n                >\n                  <ZoomOut className=\"size-5\" />\n                </button>\n                <span className=\"min-w-[4ch] text-center text-sm text-white/70\">\n                  {Math.round(zoom * 100)}%\n                </span>\n                <button\n                  aria-label=\"Zoom in\"\n                  className={cn(controlButtonSmall, controlButtonDisabled)}\n                  data-slot=\"lightbox-zoom-in\"\n                  disabled={zoom >= 3}\n                  type=\"button\"\n                  onClick={handleZoomIn}\n                >\n                  <ZoomIn className=\"size-5\" />\n                </button>\n              </div>\n            )}\n\n            {/* Caption */}\n            {showCaption && currentImage.caption && (\n              <p\n                className=\"text-center text-sm text-white/90\"\n                data-slot=\"lightbox-caption\"\n                id=\"lightbox-caption\"\n              >\n                {currentImage.caption}\n              </p>\n            )}\n\n            {/* Thumbnails strip */}\n            {showThumbnails && hasMultipleImages && (\n              <div\n                aria-label=\"Image thumbnails\"\n                className=\"flex max-w-full gap-[var(--lightbox-thumbnail-gap)] overflow-x-auto px-4 py-2\"\n                data-slot=\"lightbox-thumbnails\"\n                role=\"tablist\"\n              >\n                {images.map((image, index) => (\n                  <button\n                    key={image.id}\n                    className={cn(\n                      \"relative size-[var(--lightbox-thumbnail-size)] shrink-0 overflow-hidden rounded-md transition-all\",\n                      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\",\n                      index === currentIndex\n                        ? \"ring-2 ring-white ring-offset-2 ring-offset-black/90\"\n                        : \"opacity-[var(--lightbox-thumbnail-opacity-inactive)] hover:opacity-100\"\n                    )}\n                    aria-label={`View ${image.alt}`}\n                    aria-selected={index === currentIndex}\n                    data-slot=\"lightbox-thumbnail\"\n                    role=\"tab\"\n                    type=\"button\"\n                    onClick={() => {\n                      goToIndex(index)\n                    }}\n                  >\n                    <img\n                      alt={image.alt}\n                      className=\"size-full object-cover\"\n                      loading=\"lazy\"\n                      src={image.thumbnail ?? image.src}\n                    />\n                  </button>\n                ))}\n              </div>\n            )}\n          </div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n\nexport { Lightbox }\nexport type { LightboxImage, LightboxProps }\n"]}

package/dist/chunk-2IFYXJ3H.js

@@ -0,0 +1,107 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var stackVariants = cva("flex", {
+  variants: {
+    /**
+     * Direction of the stack
+     * - column: Elements stacked vertically (default)
+     * - row: Elements in a horizontal line
+     * - wrap: Elements in a row that wraps to new lines
+     */
+    direction: {
+      column: "flex-col",
+      row: "flex-row",
+      wrap: "flex-row flex-wrap"
+    },
+    /**
+     * Spacing between elements (gap)
+     */
+    spacing: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8"
+    },
+    /**
+     * Cross axis alignment (align-items)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - stretch: Items stretched to fill
+     */
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    /**
+     * Main axis alignment (justify-content)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - between: Space between items
+     * - around: Space around items
+     */
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    },
+    /**
+     * Whether children should grow to fill available space
+     */
+    grow: {
+      true: "[&>*]:flex-1",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    direction: "column",
+    spacing: 4,
+    align: "start",
+    justify: "start",
+    grow: false
+  }
+});
+function Stack({
+  as: Component = "div",
+  direction,
+  spacing,
+  align,
+  justify,
+  grow,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        stackVariants({
+          direction,
+          spacing,
+          align,
+          justify,
+          grow
+        }),
+        className
+      ),
+      "data-direction": direction,
+      "data-slot": "stack",
+      "data-spacing": spacing,
+      ...props
+    }
+  );
+}
+
+export { Stack, stackVariants };
+//# sourceMappingURL=chunk-2IFYXJ3H.js.map
+//# sourceMappingURL=chunk-2IFYXJ3H.js.map

package/dist/chunk-2IFYXJ3H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Stack/Stack.variants.ts","../src/components/layout/Stack/Stack.tsx"],"names":[],"mappings":";;;;AAMO,IAAM,aAAA,GAAgB,IAAI,MAAA,EAAQ;AAAA,EACvC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,GAAA,EAAK,UAAA;AAAA,MACL,IAAA,EAAM;AAAA,KACR;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAS;AAAA,MACP,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG;AAAA,KACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAK,WAAA;AAAA,MACL,OAAA,EAAS;AAAA,KACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,eAAA;AAAA,MACP,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAK,aAAA;AAAA,MACL,OAAA,EAAS,iBAAA;AAAA,MACT,MAAA,EAAQ;AAAA,KACV;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,cAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,SAAA,EAAW,QAAA;AAAA,IACX,OAAA,EAAS,CAAA;AAAA,IACT,KAAA,EAAO,OAAA;AAAA,IACP,OAAA,EAAS,OAAA;AAAA,IACT,IAAA,EAAM;AAAA;AAEV,CAAC;AC/CD,SAAS,KAAA,CAAM;AAAA,EACb,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,aAAA,CAAc;AAAA,UACZ,SAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,gBAAA,EAAgB,SAAA;AAAA,MAChB,WAAA,EAAU,OAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACb,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-2IFYXJ3H.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Stack variant styles\n * Utility component for organizing elements in rows or columns with consistent spacing\n */\nexport const stackVariants = cva(\"flex\", {\n  variants: {\n    /**\n     * Direction of the stack\n     * - column: Elements stacked vertically (default)\n     * - row: Elements in a horizontal line\n     * - wrap: Elements in a row that wraps to new lines\n     */\n    direction: {\n      column: \"flex-col\",\n      row: \"flex-row\",\n      wrap: \"flex-row flex-wrap\",\n    },\n    /**\n     * Spacing between elements (gap)\n     */\n    spacing: {\n      0: \"gap-0\",\n      1: \"gap-1\",\n      2: \"gap-2\",\n      3: \"gap-3\",\n      4: \"gap-4\",\n      6: \"gap-6\",\n      8: \"gap-8\",\n    },\n    /**\n     * Cross axis alignment (align-items)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - stretch: Items stretched to fill\n     */\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      stretch: \"items-stretch\",\n    },\n    /**\n     * Main axis alignment (justify-content)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - between: Space between items\n     * - around: Space around items\n     */\n    justify: {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n    },\n    /**\n     * Whether children should grow to fill available space\n     */\n    grow: {\n      true: \"[&>*]:flex-1\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    direction: \"column\",\n    spacing: 4,\n    align: \"start\",\n    justify: \"start\",\n    grow: false,\n  },\n})\n\nexport type StackVariantProps = VariantProps<typeof stackVariants>\n","import type { StackProps } from \"./Stack.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { stackVariants } from \"./Stack.variants\"\n\n/**\n * Stack component for organizing elements in rows or columns\n *\n * A utility component that organizes child elements in a flexible box layout\n * with consistent spacing. Simplifies creating layouts without complex Tailwind classes.\n *\n * @example\n * ```tsx\n * <Stack spacing={4}>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </Stack>\n * ```\n *\n * @example\n * ```tsx\n * <Stack direction=\"row\" spacing={2} align=\"center\">\n *   <Button>Save</Button>\n *   <Button>Cancel</Button>\n * </Stack>\n * ```\n */\nfunction Stack({\n  as: Component = \"div\",\n  direction,\n  spacing,\n  align,\n  justify,\n  grow,\n  className,\n  ...props\n}: StackProps) {\n  return (\n    <Component\n      className={cn(\n        stackVariants({\n          direction,\n          spacing,\n          align,\n          justify,\n          grow,\n        }),\n        className\n      )}\n      data-direction={direction}\n      data-slot=\"stack\"\n      data-spacing={spacing}\n      {...props}\n    />\n  )\n}\n\nexport { Stack }\n"]}