@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-KR3IVNQH.js

@@ -0,0 +1,402 @@
+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-full",
+  "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-10");
+var controlButtonLarge = cn(controlButtonBase, "size-12");
+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-4",
+              "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-3 p-4",
+                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-2 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-16 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-60 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-KR3IVNQH.js.map
+//# sourceMappingURL=chunk-KR3IVNQH.js.map

package/dist/chunk-KR3IVNQH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","file":"chunk-KR3IVNQH.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-full\",\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(controlButtonBase, \"size-10\")\nconst controlButtonLarge = cn(controlButtonBase, \"size-12\")\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-4\"\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-3 p-4\",\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-2 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-16 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-60 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-KRHL3YH2.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-KRHL3YH2.js.map
+//# sourceMappingURL=chunk-KRHL3YH2.js.map

package/dist/chunk-KRHL3YH2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-KRHL3YH2.js"}

package/dist/chunk-L2XR5IFJ.js

@@ -0,0 +1,103 @@
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+// src/components/advanced/Portal/Portal.tsx
+var emptySubscribe = () => () => {
+};
+var getClientSnapshot = () => true;
+var getServerSnapshot = () => false;
+function Portal({ children, container, disabled = false }) {
+  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+  if (disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (!mounted) {
+    return null;
+  }
+  const portalContainer = container ?? globalThis.document.body;
+  return createPortal(children, portalContainer);
+}
+var portalContainerVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        fixed: "fixed",
+        absolute: "absolute",
+        relative: "relative"
+      },
+      zIndex: {
+        base: "z-[var(--z-base)]",
+        dropdown: "z-[var(--z-dropdown)]",
+        sticky: "z-[var(--z-sticky)]",
+        modal: "z-[var(--z-modal)]",
+        popover: "z-[var(--z-popover)]",
+        tooltip: "z-[var(--z-tooltip)]",
+        toast: "z-[var(--z-toast)]",
+        overlay: "z-[var(--z-overlay)]",
+        // `max` is intended for "highest possible" use-cases. The token system
+        // tops out at --z-toast (700); use this when nothing semantic fits.
+        max: "z-[var(--z-toast)]"
+      }
+    },
+    defaultVariants: {
+      position: "fixed",
+      zIndex: "modal"
+    }
+  }
+);
+var portalOverlayVariants = cva(
+  "fixed inset-0 transition-opacity",
+  {
+    variants: {
+      variant: {
+        transparent: "bg-transparent",
+        light: "bg-background/80 backdrop-blur-sm",
+        dark: "bg-black/50 backdrop-blur-sm",
+        solid: "bg-background"
+      },
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      variant: "dark",
+      visible: true
+    }
+  }
+);
+var portalContentVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        center: "fixed inset-0 flex items-center justify-center",
+        top: "fixed top-0 left-0 right-0",
+        bottom: "fixed bottom-0 left-0 right-0",
+        left: "fixed top-0 left-0 bottom-0",
+        right: "fixed top-0 right-0 bottom-0",
+        "top-right": "fixed top-4 right-4",
+        "top-left": "fixed top-4 left-4",
+        "bottom-right": "fixed bottom-4 right-4",
+        "bottom-left": "fixed bottom-4 left-4"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-4",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      position: "center",
+      padding: "md"
+    }
+  }
+);
+
+export { Portal, portalContainerVariants, portalContentVariants, portalOverlayVariants };
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map

package/dist/chunk-L2XR5IFJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/Portal/Portal.tsx","../src/components/advanced/Portal/Portal.variants.ts"],"names":[],"mappings":";;;;;;AASA,IAAM,cAAA,GAAiB,MAAM,MAAM;AAAC,CAAA;AACpC,IAAM,oBAAoB,MAAM,IAAA;AAChC,IAAM,oBAAoB,MAAM,KAAA;AA4ChC,SAAS,OAAO,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,GAAW,OAAM,EAAgB;AAEtE,EAAA,MAAM,OAAA,GAAU,oBAAA,CAAqB,cAAA,EAAgB,iBAAA,EAAmB,iBAAiB,CAAA;AAGzF,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAGA,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAIA,EAAA,MAAM,eAAA,GAAkB,SAAA,IAAa,UAAA,CAAW,QAAA,CAAS,IAAA;AAEzD,EAAA,OAAO,YAAA,CAAa,UAAU,eAAe,CAAA;AAC/C;ACjEO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU,UAAA;AAAA,QACV,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,mBAAA;AAAA,QACN,QAAA,EAAU,uBAAA;AAAA,QACV,MAAA,EAAQ,qBAAA;AAAA,QACR,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA,QACT,OAAA,EAAS,sBAAA;AAAA,QACT,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA;AAAA;AAAA,QAGT,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA;AACV;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,kCAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,WAAA,EAAa,gBAAA;AAAA,QACb,KAAA,EAAO,mCAAA;AAAA,QACP,IAAA,EAAM,8BAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,MAAA,EAAQ,gDAAA;AAAA,QACR,GAAA,EAAK,4BAAA;AAAA,QACL,MAAA,EAAQ,+BAAA;AAAA,QACR,IAAA,EAAM,6BAAA;AAAA,QACN,KAAA,EAAO,8BAAA;AAAA,QACP,WAAA,EAAa,qBAAA;AAAA,QACb,UAAA,EAAY,oBAAA;AAAA,QACZ,cAAA,EAAgB,wBAAA;AAAA,QAChB,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,KAAA;AAAA,QACN,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,QAAA;AAAA,MACV,OAAA,EAAS;AAAA;AACX;AAEJ","file":"chunk-L2XR5IFJ.js","sourcesContent":["\"use client\"\n\nimport type { PortalProps } from \"./Portal.types\"\n\nimport { useSyncExternalStore } from \"react\"\nimport { createPortal } from \"react-dom\"\n\n// SSR-safe subscription for mounted state\n// eslint-disable-next-line @typescript-eslint/no-empty-function -- required by useSyncExternalStore API\nconst emptySubscribe = () => () => {}\nconst getClientSnapshot = () => true\nconst getServerSnapshot = () => false\n\n/**\n * Portal renders children into a DOM node outside of the parent component hierarchy.\n * Essential for modals, tooltips, dropdowns, and other elements that need to escape\n * the context of overflow or z-index.\n *\n * By default, content is rendered in document.body. A custom container can be specified\n * using the container prop.\n *\n * The Portal preserves React context (Context, events) and handles cleanup automatically.\n *\n * @example Basic usage\n * ```tsx\n * <Portal>\n *   <div className=\"fixed inset-0 bg-black/50 z-50\">\n *     <div className=\"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n *       Modal Content\n *     </div>\n *   </div>\n * </Portal>\n * ```\n *\n * @example With custom container\n * ```tsx\n * const [container, setContainer] = useState<HTMLElement | null>(null)\n *\n * return (\n *   <>\n *     <div ref={setContainer} id=\"custom-portal-container\" />\n *     <Portal container={container}>\n *       <div>Content in custom container</div>\n *     </Portal>\n *   </>\n * )\n * ```\n *\n * @example Disabled (inline rendering)\n * ```tsx\n * <Portal disabled>\n *   <div>This renders inline, not in a portal</div>\n * </Portal>\n * ```\n */\nfunction Portal({ children, container, disabled = false }: PortalProps) {\n  // Use useSyncExternalStore for SSR-safe mounted detection\n  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot)\n\n  // When disabled, render children inline (no portal)\n  if (disabled) {\n    return <>{children}</>\n  }\n\n  // SSR: render nothing until mounted on client\n  if (!mounted) {\n    return null\n  }\n\n  // Determine the container element\n  // Priority: container prop > document.body\n  const portalContainer = container ?? globalThis.document.body\n\n  return createPortal(children, portalContainer)\n}\n\nexport { Portal }\n","import { cva } from \"class-variance-authority\"\n\n/**\n * Portal container variants\n *\n * Note: Portal is primarily a utility component that renders children\n * outside the DOM hierarchy. These variants are for optional wrapper\n * styling when needed.\n */\nexport const portalContainerVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        fixed: \"fixed\",\n        absolute: \"absolute\",\n        relative: \"relative\",\n      },\n      zIndex: {\n        base: \"z-[var(--z-base)]\",\n        dropdown: \"z-[var(--z-dropdown)]\",\n        sticky: \"z-[var(--z-sticky)]\",\n        modal: \"z-[var(--z-modal)]\",\n        popover: \"z-[var(--z-popover)]\",\n        tooltip: \"z-[var(--z-tooltip)]\",\n        toast: \"z-[var(--z-toast)]\",\n        overlay: \"z-[var(--z-overlay)]\",\n        // `max` is intended for \"highest possible\" use-cases. The token system\n        // tops out at --z-toast (700); use this when nothing semantic fits.\n        max: \"z-[var(--z-toast)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n      zIndex: \"modal\",\n    },\n  }\n)\n\n/**\n * Portal overlay variants\n * Used for backdrop/overlay styling when portaling modal content\n */\nexport const portalOverlayVariants = cva(\n  \"fixed inset-0 transition-opacity\",\n  {\n    variants: {\n      variant: {\n        transparent: \"bg-transparent\",\n        light: \"bg-background/80 backdrop-blur-sm\",\n        dark: \"bg-black/50 backdrop-blur-sm\",\n        solid: \"bg-background\",\n      },\n      visible: {\n        true: \"opacity-100\",\n        false: \"opacity-0 pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"dark\",\n      visible: true,\n    },\n  }\n)\n\n/**\n * Portal content wrapper variants\n * Used for centering or positioning portaled content\n */\nexport const portalContentVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        center: \"fixed inset-0 flex items-center justify-center\",\n        top: \"fixed top-0 left-0 right-0\",\n        bottom: \"fixed bottom-0 left-0 right-0\",\n        left: \"fixed top-0 left-0 bottom-0\",\n        right: \"fixed top-0 right-0 bottom-0\",\n        \"top-right\": \"fixed top-4 right-4\",\n        \"top-left\": \"fixed top-4 left-4\",\n        \"bottom-right\": \"fixed bottom-4 right-4\",\n        \"bottom-left\": \"fixed bottom-4 left-4\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2\",\n        md: \"p-4\",\n        lg: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      position: \"center\",\n      padding: \"md\",\n    },\n  }\n)\n"]}