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

package/dist/chunk-3RJEA2MM.js

@@ -0,0 +1,560 @@
+import { AspectRatio } from './chunk-2UGDLAYC.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Check } from 'lucide-react';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var gapClasses = {
+  lg: "gap-6",
+  md: "gap-4",
+  sm: "gap-2"
+};
+var columnClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6"
+};
+var smColumnClasses = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
+};
+var mdColumnClasses = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6"
+};
+var lgColumnClasses = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6"
+};
+var xlColumnClasses = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6"
+};
+function getColumnClasses(columns) {
+  if (columns === void 0) {
+    return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  }
+  if (typeof columns === "number") {
+    return columnClasses[columns] ?? "grid-cols-4";
+  }
+  const classes = [];
+  if (columns.sm) classes.push(smColumnClasses[columns.sm] ?? "sm:grid-cols-2");
+  if (columns.md) classes.push(mdColumnClasses[columns.md] ?? "md:grid-cols-3");
+  if (columns.lg) classes.push(lgColumnClasses[columns.lg] ?? "lg:grid-cols-4");
+  if (columns.xl) classes.push(xlColumnClasses[columns.xl] ?? "xl:grid-cols-4");
+  return classes.join(" ") || "grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+}
+var imageGalleryItemVariants = cva(
+  [
+    "relative overflow-hidden rounded-md",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "transition-transform duration-200",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "ring-2 ring-primary ring-offset-2",
+        false: ""
+      },
+      interactive: {
+        true: "hover:scale-[1.02]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      selected: false,
+      interactive: true
+    }
+  }
+);
+function ImageGalleryItem({
+  aspectRatio = 1,
+  className,
+  enableLightbox = true,
+  enableSelection = false,
+  image,
+  index: _index,
+  isSelected = false,
+  onClick,
+  onImageError,
+  onImageLoad,
+  ...props
+}) {
+  const [imageState, setImageState] = React.useState("loading");
+  const handleLoad = React.useCallback(() => {
+    setImageState("loaded");
+    onImageLoad?.();
+  }, [onImageLoad]);
+  const handleError = React.useCallback(() => {
+    setImageState("error");
+    onImageError?.(new Error(`Failed to load image: ${image.src}`));
+  }, [image.src, onImageError]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick]
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": enableSelection && isSelected ? `${image.alt} (selected)` : image.alt,
+      className: cn(
+        imageGalleryItemVariants({
+          selected: isSelected,
+          interactive: enableLightbox || enableSelection
+        }),
+        className
+      ),
+      "aria-pressed": enableSelection ? isSelected : void 0,
+      "data-error": imageState === "error" || void 0,
+      "data-loading": imageState === "loading" || void 0,
+      "data-selected": isSelected || void 0,
+      "data-slot": "image-gallery-item",
+      type: "button",
+      onClick,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(AspectRatio, { ratio: aspectRatio, children: [
+          imageState === "loading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-pulse bg-muted" }),
+          imageState === "error" ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Failed to load" }) }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: cn(
+                "h-full w-full object-cover transition-opacity duration-200",
+                imageState === "loading" ? "opacity-0" : "opacity-100"
+              ),
+              alt: image.alt,
+              "data-slot": "image-gallery-image",
+              loading: "lazy",
+              src: image.thumbnail ?? image.src,
+              onError: handleError,
+              onLoad: handleLoad
+            }
+          )
+        ] }),
+        enableSelection && isSelected && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+      ]
+    }
+  );
+}
+function GridLayout({
+  aspectRatio = 1,
+  columns,
+  enableLightbox = true,
+  enableSelection = false,
+  gap = "md",
+  images,
+  onImageError,
+  onImageLoad,
+  onItemClick,
+  selectedIds = []
+}) {
+  const inlineGridStyle = typeof columns === "number" ? { gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))` } : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", getColumnClasses(columns), gapClasses[gap]),
+      "data-layout": "grid",
+      style: inlineGridStyle,
+      children: images.map((image, index) => /* @__PURE__ */ jsx(
+        ImageGalleryItem,
+        {
+          aspectRatio,
+          enableLightbox,
+          enableSelection,
+          image,
+          index,
+          isSelected: selectedIds.includes(image.id),
+          onClick: () => {
+            onItemClick(image, index);
+          },
+          onImageError: (error) => {
+            onImageError?.(image, error);
+          },
+          onImageLoad: () => {
+            onImageLoad?.(image);
+          }
+        },
+        image.id
+      ))
+    }
+  );
+}
+function MasonryLayout({
+  columns,
+  enableLightbox = true,
+  enableSelection = false,
+  gap = "md",
+  images,
+  onImageError,
+  onImageLoad,
+  onItemClick,
+  selectedIds = []
+}) {
+  const columnCount = typeof columns === "number" ? columns : columns?.lg ?? columns?.md ?? 3;
+  const gapValue = gap === "sm" ? "0.5rem" : gap === "lg" ? "1.5rem" : "1rem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        columnCount,
+        columnGap: gapValue
+      },
+      className: "[column-fill:balance]",
+      "data-layout": "masonry",
+      children: images.map((image, index) => {
+        const aspectRatio = image.width && image.height ? image.width / image.height : 1;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginBottom: gapValue
+            },
+            className: "mb-2 break-inside-avoid md:mb-4 lg:mb-6",
+            children: /* @__PURE__ */ jsx(
+              ImageGalleryItem,
+              {
+                aspectRatio,
+                enableLightbox,
+                enableSelection,
+                image,
+                index,
+                isSelected: selectedIds.includes(image.id),
+                onClick: () => {
+                  onItemClick(image, index);
+                },
+                onImageError: (error) => {
+                  onImageError?.(image, error);
+                },
+                onImageLoad: () => {
+                  onImageLoad?.(image);
+                }
+              }
+            )
+          },
+          image.id
+        );
+      })
+    }
+  );
+}
+function FeaturedLayout({
+  aspectRatio = 1,
+  enableLightbox = true,
+  enableSelection = false,
+  gap = "md",
+  images,
+  onImageError,
+  onImageLoad,
+  onItemClick,
+  selectedIds = []
+}) {
+  const [featuredIndex, setFeaturedIndex] = React.useState(0);
+  const handleThumbnailClick = React.useCallback(
+    (image, originalIndex) => {
+      setFeaturedIndex(originalIndex);
+      onItemClick(image, originalIndex);
+    },
+    [onItemClick]
+  );
+  if (images.length === 0) return null;
+  const featuredImage = images[featuredIndex];
+  if (!featuredImage) return null;
+  const thumbnails = images.filter((_, i) => i !== featuredIndex);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-4 md:flex-row", gapClasses[gap]),
+      "data-layout": "featured",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          ImageGalleryItem,
+          {
+            aspectRatio,
+            className: "h-full",
+            enableLightbox,
+            enableSelection,
+            image: featuredImage,
+            index: featuredIndex,
+            isSelected: selectedIds.includes(featuredImage.id),
+            onClick: () => {
+              onItemClick(featuredImage, featuredIndex);
+            },
+            onImageError: (error) => {
+              onImageError?.(featuredImage, error);
+            },
+            onImageLoad: () => {
+              onImageLoad?.(featuredImage);
+            }
+          }
+        ) }),
+        thumbnails.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex w-full flex-row md:w-24 md:flex-col lg:w-32",
+              gapClasses[gap]
+            ),
+            children: thumbnails.map((image) => {
+              const originalIndex = images.findIndex((img) => img.id === image.id);
+              return /* @__PURE__ */ jsx(
+                ImageGalleryItem,
+                {
+                  aspectRatio: 1,
+                  className: "flex-1 md:flex-none",
+                  enableLightbox: false,
+                  enableSelection,
+                  image,
+                  index: originalIndex,
+                  isSelected: selectedIds.includes(image.id),
+                  onClick: () => {
+                    handleThumbnailClick(image, originalIndex);
+                  },
+                  onImageError: (error) => {
+                    onImageError?.(image, error);
+                  },
+                  onImageLoad: () => {
+                    onImageLoad?.(image);
+                  }
+                },
+                image.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function CarouselLayout({
+  aspectRatio = 1,
+  enableLightbox = true,
+  enableSelection = false,
+  gap = "md",
+  images,
+  onImageError,
+  onImageLoad,
+  onItemClick,
+  selectedIds = []
+}) {
+  const [emblaRef] = useEmblaCarousel({
+    align: "start",
+    loop: false,
+    slidesToScroll: 1
+  });
+  const gapValue = gap === "sm" ? "0.5rem" : gap === "lg" ? "1.5rem" : "1rem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: emblaRef,
+      "aria-roledescription": "carousel",
+      className: "overflow-hidden",
+      "data-layout": "carousel",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            gap: gapValue
+          },
+          className: "flex",
+          children: images.map((image, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-roledescription": "slide",
+              className: "min-w-0 shrink-0 basis-full sm:basis-1/2 md:basis-1/3 lg:basis-1/4",
+              role: "group",
+              children: /* @__PURE__ */ jsx(
+                ImageGalleryItem,
+                {
+                  aspectRatio,
+                  enableLightbox,
+                  enableSelection,
+                  image,
+                  index,
+                  isSelected: selectedIds.includes(image.id),
+                  onClick: () => {
+                    onItemClick(image, index);
+                  },
+                  onImageError: (error) => {
+                    onImageError?.(image, error);
+                  },
+                  onImageLoad: () => {
+                    onImageLoad?.(image);
+                  }
+                }
+              )
+            },
+            image.id
+          ))
+        }
+      )
+    }
+  );
+}
+function LoadingSkeleton({
+  aspectRatio = 1,
+  columns,
+  count = 8,
+  gap = "md"
+}) {
+  const skeletonKeys = React.useMemo(
+    () => Array.from({ length: count }, (_, i) => `skeleton-${String(i)}`),
+    [count]
+  );
+  const skeletonInlineStyle = typeof columns === "number" ? { gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))` } : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", getColumnClasses(columns), gapClasses[gap]),
+      "data-loading": "true",
+      style: skeletonInlineStyle,
+      children: skeletonKeys.map((key) => /* @__PURE__ */ jsx(AspectRatio, { ratio: aspectRatio, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-muted" }) }, key))
+    }
+  );
+}
+function ImageGallery({
+  aspectRatio = 1,
+  className,
+  columns,
+  enableLightbox = true,
+  enableSelection = false,
+  gap = "md",
+  images,
+  layout = "grid",
+  loading = false,
+  maxSelection,
+  onImageClick,
+  onImageError,
+  onImageLoad,
+  _onLoadMore,
+  onSelectionChange,
+  ref,
+  selectedIds: controlledSelectedIds,
+  ...props
+}) {
+  const [internalSelectedIds, setInternalSelectedIds] = React.useState([]);
+  const selectedIds = controlledSelectedIds ?? internalSelectedIds;
+  const handleItemClick = React.useCallback(
+    (image, index) => {
+      if (enableSelection) {
+        const newSelectedIds = selectedIds.includes(image.id) ? selectedIds.filter((id) => id !== image.id) : maxSelection && selectedIds.length >= maxSelection ? selectedIds : [...selectedIds, image.id];
+        if (controlledSelectedIds === void 0) {
+          setInternalSelectedIds(newSelectedIds);
+        }
+        onSelectionChange?.(newSelectedIds);
+      }
+      onImageClick?.(image, index);
+    },
+    [
+      enableSelection,
+      selectedIds,
+      maxSelection,
+      controlledSelectedIds,
+      onSelectionChange,
+      onImageClick
+    ]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-busy": "true",
+        "aria-label": "Image gallery loading",
+        className: cn("relative w-full", className),
+        "data-slot": "image-gallery",
+        role: "group",
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          LoadingSkeleton,
+          {
+            aspectRatio,
+            columns,
+            count: 8,
+            gap
+          }
+        )
+      }
+    );
+  }
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex min-h-52 items-center justify-center rounded-lg border-2 border-dashed border-muted",
+          className
+        ),
+        "aria-label": "Empty image gallery",
+        "data-slot": "image-gallery",
+        role: "group",
+        ...props,
+        children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No images to display" })
+      }
+    );
+  }
+  const layoutProps = {
+    aspectRatio,
+    columns,
+    enableLightbox,
+    enableSelection,
+    gap,
+    images,
+    onImageError,
+    onImageLoad,
+    onItemClick: handleItemClick,
+    selectedIds
+  };
+  const layoutComponents = {
+    carousel: /* @__PURE__ */ jsx(CarouselLayout, { ...layoutProps }),
+    featured: /* @__PURE__ */ jsx(FeaturedLayout, { ...layoutProps }),
+    grid: /* @__PURE__ */ jsx(GridLayout, { ...layoutProps }),
+    masonry: /* @__PURE__ */ jsx(MasonryLayout, { ...layoutProps })
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-label": `Image gallery with ${String(images.length)} images`,
+      "aria-roledescription": "gallery",
+      className: cn("relative w-full", className),
+      "data-layout": layout,
+      "data-slot": "image-gallery",
+      role: "group",
+      ...props,
+      children: layoutComponents[layout]
+    }
+  );
+}
+
+export { ImageGallery, ImageGalleryItem };
+//# sourceMappingURL=chunk-3RJEA2MM.js.map
+//# sourceMappingURL=chunk-3RJEA2MM.js.map

package/dist/chunk-3RJEA2MM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"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","file":"chunk-3RJEA2MM.js","sourcesContent":["\"use client\"\n\nimport type {\n  ImageGalleryGap,\n  ImageGalleryItemProps,\n  ImageGalleryLayout,\n  ImageGalleryProps,\n  ImageItem,\n  ResponsiveColumns,\n} from \"./ImageGallery.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Check } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { AspectRatio } from \"../../primitives/AspectRatio\"\n\n// Gap size mapping\nconst gapClasses: Record<ImageGalleryGap, string> = {\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n}\n\n// Static column class mappings for Tailwind v4 detection\nconst columnClasses: Record<number, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n  5: \"grid-cols-5\",\n  6: \"grid-cols-6\",\n}\n\nconst smColumnClasses: Record<number, string> = {\n  1: \"sm:grid-cols-1\",\n  2: \"sm:grid-cols-2\",\n  3: \"sm:grid-cols-3\",\n  4: \"sm:grid-cols-4\",\n  5: \"sm:grid-cols-5\",\n  6: \"sm:grid-cols-6\",\n}\n\nconst mdColumnClasses: Record<number, string> = {\n  1: \"md:grid-cols-1\",\n  2: \"md:grid-cols-2\",\n  3: \"md:grid-cols-3\",\n  4: \"md:grid-cols-4\",\n  5: \"md:grid-cols-5\",\n  6: \"md:grid-cols-6\",\n}\n\nconst lgColumnClasses: Record<number, string> = {\n  1: \"lg:grid-cols-1\",\n  2: \"lg:grid-cols-2\",\n  3: \"lg:grid-cols-3\",\n  4: \"lg:grid-cols-4\",\n  5: \"lg:grid-cols-5\",\n  6: \"lg:grid-cols-6\",\n}\n\nconst xlColumnClasses: Record<number, string> = {\n  1: \"xl:grid-cols-1\",\n  2: \"xl:grid-cols-2\",\n  3: \"xl:grid-cols-3\",\n  4: \"xl:grid-cols-4\",\n  5: \"xl:grid-cols-5\",\n  6: \"xl:grid-cols-6\",\n}\n\n\n// Generate responsive column classes using static mappings\nfunction getColumnClasses(\n  columns: number | ResponsiveColumns | undefined\n): string {\n  if (columns === undefined) {\n    return \"grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"\n  }\n\n  if (typeof columns === \"number\") {\n    return columnClasses[columns] ?? \"grid-cols-4\"\n  }\n\n  const classes: string[] = []\n  if (columns.sm) classes.push(smColumnClasses[columns.sm] ?? \"sm:grid-cols-2\")\n  if (columns.md) classes.push(mdColumnClasses[columns.md] ?? \"md:grid-cols-3\")\n  if (columns.lg) classes.push(lgColumnClasses[columns.lg] ?? \"lg:grid-cols-4\")\n  if (columns.xl) classes.push(xlColumnClasses[columns.xl] ?? \"xl:grid-cols-4\")\n\n  return classes.join(\" \") || \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"\n}\n\n// Item variants for consistent styling\nconst imageGalleryItemVariants = cva(\n  [\n    \"relative overflow-hidden rounded-md\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"transition-transform duration-200\",\n    \"cursor-pointer\",\n  ],\n  {\n    variants: {\n      selected: {\n        true: \"ring-2 ring-primary ring-offset-2\",\n        false: \"\",\n      },\n      interactive: {\n        true: \"hover:scale-[1.02]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      interactive: true,\n    },\n  }\n)\n\n/**\n * Individual gallery item component\n */\nfunction ImageGalleryItem({\n  aspectRatio = 1,\n  className,\n  enableLightbox = true,\n  enableSelection = false,\n  image,\n  index: _index,\n  isSelected = false,\n  onClick,\n  onImageError,\n  onImageLoad,\n  ...props\n}: ImageGalleryItemProps) {\n  const [imageState, setImageState] = React.useState<\n    \"error\" | \"loaded\" | \"loading\"\n  >(\"loading\")\n\n  const handleLoad = React.useCallback(() => {\n    setImageState(\"loaded\")\n    onImageLoad?.()\n  }, [onImageLoad])\n\n  const handleError = React.useCallback(() => {\n    setImageState(\"error\")\n    onImageError?.(new Error(`Failed to load image: ${image.src}`))\n  }, [image.src, onImageError])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault()\n        onClick?.()\n      }\n    },\n    [onClick]\n  )\n\n  return (\n    <button\n      aria-label={\n        enableSelection && isSelected\n          ? `${image.alt} (selected)`\n          : image.alt\n      }\n      className={cn(\n        imageGalleryItemVariants({\n          selected: isSelected,\n          interactive: enableLightbox || enableSelection,\n        }),\n        className\n      )}\n      aria-pressed={enableSelection ? isSelected : undefined}\n      data-error={imageState === \"error\" || undefined}\n      data-loading={imageState === \"loading\" || undefined}\n      data-selected={isSelected || undefined}\n      data-slot=\"image-gallery-item\"\n      type=\"button\"\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      <AspectRatio ratio={aspectRatio}>\n        {imageState === \"loading\" && (\n          <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        )}\n        {imageState === \"error\" ? (\n          <div className=\"flex h-full w-full items-center justify-center bg-muted text-muted-foreground\">\n            <span className=\"text-sm\">Failed to load</span>\n          </div>\n        ) : (\n          <img\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-200\",\n              imageState === \"loading\" ? \"opacity-0\" : \"opacity-100\"\n            )}\n            alt={image.alt}\n            data-slot=\"image-gallery-image\"\n            loading=\"lazy\"\n            src={image.thumbnail ?? image.src}\n            onError={handleError}\n            onLoad={handleLoad}\n          />\n        )}\n      </AspectRatio>\n\n      {/* Selection indicator */}\n      {enableSelection && isSelected && (\n        <div className=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n          <Check className=\"h-4 w-4\" />\n        </div>\n      )}\n    </button>\n  )\n}\n\n/**\n * Grid layout component\n */\nfunction GridLayout({\n  aspectRatio = 1,\n  columns,\n  enableLightbox = true,\n  enableSelection = false,\n  gap = \"md\",\n  images,\n  onImageError,\n  onImageLoad,\n  onItemClick,\n  selectedIds = [],\n}: {\n  aspectRatio?: number\n  columns?: number | ResponsiveColumns\n  enableLightbox?: boolean\n  enableSelection?: boolean\n  gap?: ImageGalleryGap\n  images: ImageItem[]\n  onImageError?: (image: ImageItem, error: Error) => void\n  onImageLoad?: (image: ImageItem) => void\n  onItemClick: (image: ImageItem, index: number) => void\n  selectedIds?: string[]\n}) {\n  // Only emit inline-style fallback for fixed numeric column counts.\n  // For responsive ResponsiveColumns objects, Tailwind classes handle breakpoints —\n  // inline style would override them and break responsiveness.\n  const inlineGridStyle =\n    typeof columns === \"number\"\n      ? { gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))` }\n      : undefined\n\n  return (\n    <div\n      className={cn(\"grid\", getColumnClasses(columns), gapClasses[gap])}\n      data-layout=\"grid\"\n      style={inlineGridStyle}\n    >\n      {images.map((image, index) => (\n        <ImageGalleryItem\n          key={image.id}\n          aspectRatio={aspectRatio}\n          enableLightbox={enableLightbox}\n          enableSelection={enableSelection}\n          image={image}\n          index={index}\n          isSelected={selectedIds.includes(image.id)}\n          onClick={() => {\n            onItemClick(image, index)\n          }}\n          onImageError={(error) => {\n            onImageError?.(image, error)\n          }}\n          onImageLoad={() => {\n            onImageLoad?.(image)\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n/**\n * Masonry layout component\n * Uses CSS columns for a Pinterest-style layout\n */\nfunction MasonryLayout({\n  columns,\n  enableLightbox = true,\n  enableSelection = false,\n  gap = \"md\",\n  images,\n  onImageError,\n  onImageLoad,\n  onItemClick,\n  selectedIds = [],\n}: {\n  columns?: number | ResponsiveColumns\n  enableLightbox?: boolean\n  enableSelection?: boolean\n  gap?: ImageGalleryGap\n  images: ImageItem[]\n  onImageError?: (image: ImageItem, error: Error) => void\n  onImageLoad?: (image: ImageItem) => void\n  onItemClick: (image: ImageItem, index: number) => void\n  selectedIds?: string[]\n}) {\n  const columnCount =\n    typeof columns === \"number\" ? columns : columns?.lg ?? columns?.md ?? 3\n\n  const gapValue = gap === \"sm\" ? \"0.5rem\" : gap === \"lg\" ? \"1.5rem\" : \"1rem\"\n\n  return (\n    <div\n      style={{\n        columnCount,\n        columnGap: gapValue,\n      }}\n      className=\"[column-fill:balance]\"\n      data-layout=\"masonry\"\n    >\n      {images.map((image, index) => {\n        const aspectRatio =\n          image.width && image.height ? image.width / image.height : 1\n\n        return (\n          <div\n            key={image.id}\n            style={{\n              marginBottom: gapValue,\n            }}\n            className=\"mb-2 break-inside-avoid md:mb-4 lg:mb-6\"\n          >\n            <ImageGalleryItem\n              aspectRatio={aspectRatio}\n              enableLightbox={enableLightbox}\n              enableSelection={enableSelection}\n              image={image}\n              index={index}\n              isSelected={selectedIds.includes(image.id)}\n              onClick={() => {\n                onItemClick(image, index)\n              }}\n              onImageError={(error) => {\n                onImageError?.(image, error)\n              }}\n              onImageLoad={() => {\n                onImageLoad?.(image)\n              }}\n            />\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\n/**\n * Featured layout component\n * Shows first image large with thumbnails on the side\n */\nfunction FeaturedLayout({\n  aspectRatio = 1,\n  enableLightbox = true,\n  enableSelection = false,\n  gap = \"md\",\n  images,\n  onImageError,\n  onImageLoad,\n  onItemClick,\n  selectedIds = [],\n}: {\n  aspectRatio?: number\n  enableLightbox?: boolean\n  enableSelection?: boolean\n  gap?: ImageGalleryGap\n  images: ImageItem[]\n  onImageError?: (image: ImageItem, error: Error) => void\n  onImageLoad?: (image: ImageItem) => void\n  onItemClick: (image: ImageItem, index: number) => void\n  selectedIds?: string[]\n}) {\n  const [featuredIndex, setFeaturedIndex] = React.useState(0)\n\n  const handleThumbnailClick = React.useCallback(\n    (image: ImageItem, originalIndex: number) => {\n      setFeaturedIndex(originalIndex)\n      onItemClick(image, originalIndex)\n    },\n    [onItemClick]\n  )\n\n  if (images.length === 0) return null\n\n  const featuredImage = images[featuredIndex]\n  if (!featuredImage) return null\n\n  const thumbnails = images.filter((_, i) => i !== featuredIndex)\n\n  return (\n    <div\n      className={cn(\"flex flex-col gap-4 md:flex-row\", gapClasses[gap])}\n      data-layout=\"featured\"\n    >\n      {/* Main featured image */}\n      <div className=\"flex-1\">\n        <ImageGalleryItem\n          aspectRatio={aspectRatio}\n          className=\"h-full\"\n          enableLightbox={enableLightbox}\n          enableSelection={enableSelection}\n          image={featuredImage}\n          index={featuredIndex}\n          isSelected={selectedIds.includes(featuredImage.id)}\n          onClick={() => {\n            onItemClick(featuredImage, featuredIndex)\n          }}\n          onImageError={(error) => {\n            onImageError?.(featuredImage, error)\n          }}\n          onImageLoad={() => {\n            onImageLoad?.(featuredImage)\n          }}\n        />\n      </div>\n\n      {/* Thumbnails sidebar */}\n      {thumbnails.length > 0 && (\n        <div\n          className={cn(\n            \"flex w-full flex-row md:w-24 md:flex-col lg:w-32\",\n            gapClasses[gap]\n          )}\n        >\n          {thumbnails.map((image) => {\n            const originalIndex = images.findIndex((img) => img.id === image.id)\n            return (\n              <ImageGalleryItem\n                key={image.id}\n                aspectRatio={1}\n                className=\"flex-1 md:flex-none\"\n                enableLightbox={false}\n                enableSelection={enableSelection}\n                image={image}\n                index={originalIndex}\n                isSelected={selectedIds.includes(image.id)}\n                onClick={() => {\n                  handleThumbnailClick(image, originalIndex)\n                }}\n                onImageError={(error) => {\n                  onImageError?.(image, error)\n                }}\n                onImageLoad={() => {\n                  onImageLoad?.(image)\n                }}\n              />\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/**\n * Carousel layout component\n * Horizontal slider using Embla Carousel\n */\nfunction CarouselLayout({\n  aspectRatio = 1,\n  enableLightbox = true,\n  enableSelection = false,\n  gap = \"md\",\n  images,\n  onImageError,\n  onImageLoad,\n  onItemClick,\n  selectedIds = [],\n}: {\n  aspectRatio?: number\n  enableLightbox?: boolean\n  enableSelection?: boolean\n  gap?: ImageGalleryGap\n  images: ImageItem[]\n  onImageError?: (image: ImageItem, error: Error) => void\n  onImageLoad?: (image: ImageItem) => void\n  onItemClick: (image: ImageItem, index: number) => void\n  selectedIds?: string[]\n}) {\n  const [emblaRef] = useEmblaCarousel({\n    align: \"start\",\n    loop: false,\n    slidesToScroll: 1,\n  })\n\n  const gapValue = gap === \"sm\" ? \"0.5rem\" : gap === \"lg\" ? \"1.5rem\" : \"1rem\"\n\n  return (\n    <div\n      ref={emblaRef}\n      aria-roledescription=\"carousel\"\n      className=\"overflow-hidden\"\n      data-layout=\"carousel\"\n    >\n      <div\n        style={{\n          gap: gapValue,\n        }}\n        className=\"flex\"\n      >\n        {images.map((image, index) => (\n          <div\n            key={image.id}\n            aria-roledescription=\"slide\"\n            className=\"min-w-0 shrink-0 basis-full sm:basis-1/2 md:basis-1/3 lg:basis-1/4\"\n            role=\"group\"\n          >\n            <ImageGalleryItem\n              aspectRatio={aspectRatio}\n              enableLightbox={enableLightbox}\n              enableSelection={enableSelection}\n              image={image}\n              index={index}\n              isSelected={selectedIds.includes(image.id)}\n              onClick={() => {\n                onItemClick(image, index)\n              }}\n              onImageError={(error) => {\n                onImageError?.(image, error)\n              }}\n              onImageLoad={() => {\n                onImageLoad?.(image)\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Loading skeleton for the gallery\n */\nfunction LoadingSkeleton({\n  aspectRatio = 1,\n  columns,\n  count = 8,\n  gap = \"md\",\n}: {\n  aspectRatio?: number\n  columns?: number | ResponsiveColumns\n  count?: number\n  gap?: ImageGalleryGap\n}) {\n  // Generate stable keys for skeleton items\n  const skeletonKeys = React.useMemo(\n    () => Array.from({ length: count }, (_, i) => `skeleton-${String(i)}`),\n    [count]\n  )\n\n  const skeletonInlineStyle =\n    typeof columns === \"number\"\n      ? { gridTemplateColumns: `repeat(${String(columns)}, minmax(0, 1fr))` }\n      : undefined\n\n  return (\n    <div\n      className={cn(\"grid\", getColumnClasses(columns), gapClasses[gap])}\n      data-loading=\"true\"\n      style={skeletonInlineStyle}\n    >\n      {skeletonKeys.map((key) => (\n        <AspectRatio key={key} ratio={aspectRatio}>\n          <div className=\"h-full w-full animate-pulse rounded-md bg-muted\" />\n        </AspectRatio>\n      ))}\n    </div>\n  )\n}\n\n/**\n * ImageGallery - A component for displaying collections of images in various layouts\n *\n * @example\n * ```tsx\n * <ImageGallery\n *   images={[\n *     { id: \"1\", src: \"/photo.jpg\", alt: \"Beach sunset\" },\n *     { id: \"2\", src: \"/mountain.jpg\", alt: \"Mountain view\" },\n *   ]}\n *   layout=\"grid\"\n *   columns={{ sm: 2, md: 3, lg: 4 }}\n *   gap=\"md\"\n * />\n * ```\n */\nfunction ImageGallery({\n  aspectRatio = 1,\n  className,\n  columns,\n  enableLightbox = true,\n  enableSelection = false,\n  gap = \"md\",\n  images,\n  layout = \"grid\",\n  loading = false,\n  maxSelection,\n  onImageClick,\n  onImageError,\n  onImageLoad,\n  _onLoadMore,\n  onSelectionChange,\n  ref,\n  selectedIds: controlledSelectedIds,\n  ...props\n}: ImageGalleryProps & { _onLoadMore?: () => void }) {\n  // Internal selection state when uncontrolled\n  const [internalSelectedIds, setInternalSelectedIds] = React.useState<\n    string[]\n  >([])\n  const selectedIds = controlledSelectedIds ?? internalSelectedIds\n\n  const handleItemClick = React.useCallback(\n    (image: ImageItem, index: number) => {\n      // Handle selection mode\n      if (enableSelection) {\n        const newSelectedIds = selectedIds.includes(image.id)\n          ? selectedIds.filter((id) => id !== image.id)\n          : maxSelection && selectedIds.length >= maxSelection\n            ? selectedIds // Don't add if at max\n            : [...selectedIds, image.id]\n\n        if (controlledSelectedIds === undefined) {\n          setInternalSelectedIds(newSelectedIds)\n        }\n        onSelectionChange?.(newSelectedIds)\n      }\n\n      // Always call onImageClick callback\n      onImageClick?.(image, index)\n    },\n    [\n      enableSelection,\n      selectedIds,\n      maxSelection,\n      controlledSelectedIds,\n      onSelectionChange,\n      onImageClick,\n    ]\n  )\n\n  // Render loading skeleton\n  if (loading) {\n    return (\n      <div\n        ref={ref}\n        aria-busy=\"true\"\n        aria-label=\"Image gallery loading\"\n        className={cn(\"relative w-full\", className)}\n        data-slot=\"image-gallery\"\n        role=\"group\"\n        {...props}\n      >\n        <LoadingSkeleton\n          aspectRatio={aspectRatio}\n          columns={columns}\n          count={8}\n          gap={gap}\n        />\n      </div>\n    )\n  }\n\n  // Empty state\n  if (images.length === 0) {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex min-h-52 items-center justify-center rounded-lg border-2 border-dashed border-muted\",\n          className\n        )}\n        aria-label=\"Empty image gallery\"\n        data-slot=\"image-gallery\"\n        role=\"group\"\n        {...props}\n      >\n        <p className=\"text-muted-foreground\">No images to display</p>\n      </div>\n    )\n  }\n\n  const layoutProps = {\n    aspectRatio,\n    columns,\n    enableLightbox,\n    enableSelection,\n    gap,\n    images,\n    onImageError,\n    onImageLoad,\n    onItemClick: handleItemClick,\n    selectedIds,\n  }\n\n  const layoutComponents: Record<ImageGalleryLayout, React.ReactNode> = {\n    carousel: <CarouselLayout {...layoutProps} />,\n    featured: <FeaturedLayout {...layoutProps} />,\n    grid: <GridLayout {...layoutProps} />,\n    masonry: <MasonryLayout {...layoutProps} />,\n  }\n\n  return (\n    <div\n      ref={ref}\n      aria-label={`Image gallery with ${String(images.length)} images`}\n      aria-roledescription=\"gallery\"\n      className={cn(\"relative w-full\", className)}\n      data-layout={layout}\n      data-slot=\"image-gallery\"\n      role=\"group\"\n      {...props}\n    >\n      {layoutComponents[layout]}\n    </div>\n  )\n}\n\nexport { ImageGallery, ImageGalleryItem }\n"]}