@etus/ui 0.1.0

package/src/components/data-display/Lightbox/Lightbox.tsx

@@ -0,0 +1,466 @@
+"use client"
+
+import type { LightboxImage, LightboxProps } from "./Lightbox.types"
+
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+// Shared button styles
+const 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"
+)
+
+const controlButtonSmall = cn(controlButtonBase, "size-10")
+const controlButtonLarge = cn(controlButtonBase, "size-12")
+const controlButtonDisabled = "disabled:cursor-not-allowed disabled:opacity-30"
+
+/**
+ * Lightbox - A full-screen media viewer with navigation, zoom, and captions
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * const images = [
+ *   { id: '1', src: '/img1.jpg', alt: 'Image 1', caption: 'First image' },
+ *   { id: '2', src: '/img2.jpg', alt: 'Image 2', caption: 'Second image' },
+ * ]
+ *
+ * <Lightbox
+ *   images={images}
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   showCaption
+ *   enableZoom
+ * />
+ * ```
+ */
+function Lightbox({
+  className,
+  enableDownload = false,
+  enableZoom = true,
+  images,
+  initialIndex = 0,
+  loop = true,
+  onClose,
+  onIndexChange,
+  onOpenChange,
+  open,
+  showCaption = true,
+  showCounter = true,
+  showThumbnails = false,
+}: LightboxProps) {
+  // Use a key to reset state when dialog opens at a specific index
+  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)
+
+  // Track previous open state to detect when dialog opens
+  const prevOpenRef = React.useRef(open)
+
+  // Reset state when dialog opens (not on every render)
+  /* 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 */
+  React.useEffect(() => {
+    if (open && !prevOpenRef.current) {
+      // Dialog just opened - reset to initialIndex
+      setCurrentIndex(initialIndex)
+      setZoom(1)
+      setImageLoading(true)
+      setImageError(false)
+      setStateKey((k) => k + 1)
+    }
+    prevOpenRef.current = open
+  }, [open, initialIndex])
+  /* 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 */
+
+  // Reset loading state when the image changes
+  /* 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 */
+  React.useEffect(() => {
+    setImageLoading(true)
+    setImageError(false)
+  }, [currentIndex])
+  /* 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 */
+
+  const currentImage: LightboxImage | undefined = 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: number) => {
+      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)
+  }, [])
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    if (!open) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      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 (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <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"
+        />
+        <DialogPrimitive.Content
+          key={stateKey}
+          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" : undefined}
+          aria-label={`Lightbox: ${currentImage.alt}`}
+          data-slot="lightbox"
+        >
+          {/* Hide dialog title for screen readers but provide accessible label */}
+          <DialogPrimitive.Title className="sr-only">
+            Image Viewer
+          </DialogPrimitive.Title>
+          <DialogPrimitive.Description className="sr-only">
+            {`Viewing image ${String(currentIndex + 1)} of ${String(images.length)}`}
+          </DialogPrimitive.Description>
+
+          {/* Top controls bar */}
+          <div
+            className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between p-4"
+            data-slot="lightbox-header"
+          >
+            {/* Counter */}
+            {showCounter && hasMultipleImages ? (
+              <div
+                aria-live="polite"
+                className="text-sm text-white/70"
+                data-slot="lightbox-counter"
+              >
+                {currentIndex + 1} / {images.length}
+              </div>
+            ) : (
+              <div />
+            )}
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2">
+              {enableDownload && (
+                <button
+                  aria-label="Download image"
+                  className={controlButtonSmall}
+                  data-slot="lightbox-download"
+                  type="button"
+                  onClick={handleDownload}
+                >
+                  <Download className="size-5" />
+                </button>
+              )}
+              <DialogPrimitive.Close asChild>
+                <button
+                  aria-label="Close lightbox"
+                  className={controlButtonSmall}
+                  data-slot="lightbox-close"
+                  type="button"
+                >
+                  <X className="size-6" />
+                </button>
+              </DialogPrimitive.Close>
+            </div>
+          </div>
+
+          {/* Navigation arrows */}
+          {hasMultipleImages && (
+            <>
+              <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}
+              >
+                <ChevronLeft className="size-8" />
+              </button>
+              <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}
+              >
+                <ChevronRight className="size-8" />
+              </button>
+            </>
+          )}
+
+          {/* Main image area */}
+          <div
+            className={cn(
+              "flex flex-1 items-center justify-center",
+              showThumbnails ? "pb-24" : "pb-20",
+              "pt-16 px-16"
+            )}
+            data-slot="lightbox-image-container"
+          >
+            {imageLoading && (
+              <div
+                className="absolute inset-0 flex items-center justify-center"
+                data-loading="true"
+              >
+                <div className="size-12 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+              </div>
+            )}
+            {imageError ? (
+              <div
+                className="flex flex-col items-center justify-center gap-4 text-white/70"
+                data-error="true"
+              >
+                <X className="size-16 text-white/40" />
+                <span>Failed to load image</span>
+              </div>
+            ) : (
+              <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}
+              />
+            )}
+          </div>
+
+          {/* Bottom controls bar */}
+          <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"
+          >
+            {/* Zoom controls */}
+            {enableZoom && (
+              <div
+                className="flex items-center gap-2"
+                data-slot="lightbox-zoom-controls"
+              >
+                <button
+                  aria-label="Zoom out"
+                  className={cn(controlButtonSmall, controlButtonDisabled)}
+                  data-slot="lightbox-zoom-out"
+                  disabled={zoom <= 0.5}
+                  type="button"
+                  onClick={handleZoomOut}
+                >
+                  <ZoomOut className="size-5" />
+                </button>
+                <span className="min-w-[4ch] text-center text-sm text-white/70">
+                  {Math.round(zoom * 100)}%
+                </span>
+                <button
+                  aria-label="Zoom in"
+                  className={cn(controlButtonSmall, controlButtonDisabled)}
+                  data-slot="lightbox-zoom-in"
+                  disabled={zoom >= 3}
+                  type="button"
+                  onClick={handleZoomIn}
+                >
+                  <ZoomIn className="size-5" />
+                </button>
+              </div>
+            )}
+
+            {/* Caption */}
+            {showCaption && currentImage.caption && (
+              <p
+                className="text-center text-sm text-white/90"
+                data-slot="lightbox-caption"
+                id="lightbox-caption"
+              >
+                {currentImage.caption}
+              </p>
+            )}
+
+            {/* Thumbnails strip */}
+            {showThumbnails && hasMultipleImages && (
+              <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"
+              >
+                {images.map((image, index) => (
+                  <button
+                    key={image.id}
+                    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)
+                    }}
+                  >
+                    <img
+                      alt={image.alt}
+                      className="size-full object-cover"
+                      loading="lazy"
+                      src={image.thumbnail ?? image.src}
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+export { Lightbox }
+export type { LightboxImage, LightboxProps }

package/src/components/data-display/Lightbox/Lightbox.types.ts

@@ -0,0 +1,53 @@
+"use client"
+
+/**
+ * Represents an individual image in the lightbox
+ */
+export interface LightboxImage {
+  /** Alt text for accessibility */
+  alt: string
+  /** Optional caption text displayed below the image */
+  caption?: string
+  /** Optional image height for aspect ratio calculations */
+  height?: number
+  /** Unique identifier for the image */
+  id: string
+  /** Source URL of the full-size image */
+  src: string
+  /** Optional thumbnail URL for the thumbnails strip */
+  thumbnail?: string
+  /** Optional image width for aspect ratio calculations */
+  width?: number
+}
+
+/**
+ * Props for the Lightbox component
+ */
+export interface LightboxProps {
+  /** Additional CSS classes */
+  className?: string
+  /** Enable download button */
+  enableDownload?: boolean
+  /** Enable zoom controls */
+  enableZoom?: boolean
+  /** Array of images to display */
+  images: LightboxImage[]
+  /** Initial image index to display when opened */
+  initialIndex?: number
+  /** Loop navigation at ends */
+  loop?: boolean
+  /** Callback when lightbox is closed (deprecated, use onOpenChange) */
+  onClose?: () => void
+  /** Callback when image index changes */
+  onIndexChange?: (index: number) => void
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Controlled open state */
+  open?: boolean
+  /** Show image caption */
+  showCaption?: boolean
+  /** Show image counter (e.g., "1 / 5") */
+  showCounter?: boolean
+  /** Show thumbnail strip for navigation */
+  showThumbnails?: boolean
+}

package/src/components/data-display/Lightbox/Lightbox.variants.ts

@@ -0,0 +1,99 @@
+// Lightbox/Lightbox.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * Lightbox overlay style variants using CVA
+ *
+ * @see https://cva.style/docs
+ */
+export const lightboxOverlayVariants = cva(
+  // Base styles (always applied)
+  [
+    "fixed inset-0 z-50",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  ].join(" "),
+  {
+    variants: {
+      backdrop: {
+        default: "bg-black/90",
+        darker: "bg-black/95",
+        blur: "bg-black/80 backdrop-blur-sm",
+      },
+    },
+    defaultVariants: {
+      backdrop: "default",
+    },
+  }
+)
+
+/**
+ * Lightbox content style variants
+ */
+export const lightboxContentVariants = cva(
+  // Base styles (always applied)
+  [
+    "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",
+  ].join(" "),
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+)
+
+/**
+ * Lightbox control button base styles
+ */
+export const lightboxButtonVariants = cva(
+  // Base styles (always applied)
+  [
+    "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",
+    "disabled:cursor-not-allowed disabled:opacity-30",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-12",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Lightbox thumbnail style variants
+ */
+export const lightboxThumbnailVariants = cva(
+  // Base styles (always applied)
+  [
+    "relative size-16 shrink-0 overflow-hidden rounded-md transition-all",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+  ].join(" "),
+  {
+    variants: {
+      active: {
+        true: "ring-2 ring-white ring-offset-2 ring-offset-black/90",
+        false: "opacity-60 hover:opacity-100",
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  }
+)
+
+// Export variant prop types
+export type LightboxOverlayVariantProps = VariantProps<typeof lightboxOverlayVariants>
+export type LightboxContentVariantProps = VariantProps<typeof lightboxContentVariants>
+export type LightboxButtonVariantProps = VariantProps<typeof lightboxButtonVariants>
+export type LightboxThumbnailVariantProps = VariantProps<typeof lightboxThumbnailVariants>