@giddaa-housing/ui 0.1.0

package/dist/photo-gallery.js

@@ -0,0 +1,756 @@
+// src/components/ui/photo-gallery.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import {
+  ChevronLeftIcon as ChevronLeftIcon2,
+  ChevronRightIcon as ChevronRightIcon2,
+  Fullscreen,
+  XIcon
+} from "lucide-react";
+import * as React2 from "react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Loader } from "lucide-react";
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
+        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
+        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
+        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
+        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
+        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
+        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
+        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
+        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
+        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
+        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
+      },
+      size: {
+        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
+        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
+        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
+        icon: "size-10",
+        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "primary",
+  size,
+  isLoading = false,
+  children,
+  disabled = false,
+  ...props
+}) {
+  const inheritedSize = useComponentSize();
+  const resolvedSize = size ?? inheritedSize;
+  const _disabled = disabled || isLoading;
+  return /* @__PURE__ */ jsxs(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
+      disabled: _disabled,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+
+// src/components/ui/carousel.tsx
+import { cva as cva2 } from "class-variance-authority";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
+var carouselVariants = cva2(
+  "relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
+  {
+    variants: {
+      imageSize: {
+        sm: "w-[320px] max-w-full aspect-[320/220]",
+        md: "w-[520px] max-w-full aspect-[520/340]",
+        lg: "w-[800px] max-w-full aspect-[800/500]",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      imageSize: "md"
+    }
+  }
+);
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  size,
+  imageSize,
+  className,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React.useState([]);
+  const onSelect = React.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+    setSelectedIndex(api2.selectedScrollSnap());
+  }, []);
+  const onReInit = React.useCallback(
+    (api2) => {
+      if (!api2) return;
+      setScrollSnaps(api2.scrollSnapList());
+      onSelect(api2);
+    },
+    [onSelect]
+  );
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const scrollTo = React.useCallback(
+    (index) => {
+      api?.scrollTo(index);
+    },
+    [api]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onReInit(api);
+    api.on("reInit", onReInit);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("reInit", onReInit);
+      api?.off("select", onSelect);
+    };
+  }, [api, onReInit, onSelect]);
+  return /* @__PURE__ */ jsx3(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        orientation,
+        size: resolvedSize,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps
+      },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn(carouselVariants({ imageSize }), className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: carouselRef,
+      className: "h-full overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: cn(
+            "flex h-full",
+            orientation === "horizontal" ? "" : "flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "group",
+        "aria-roledescription": "slide",
+        "data-slot": "carousel-item",
+        className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+        ...props
+      }
+    )
+  );
+}
+var arrowVariants = cva2(
+  cn(
+    "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
+    glassChrome,
+    "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "size-8 [&_svg]:size-4",
+        md: "size-10 [&_svg]:size-[18px]",
+        lg: "size-12 [&_svg]:size-5"
+      },
+      side: {
+        prev: "",
+        next: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", side: "prev", className: "left-3" },
+      { size: "sm", side: "next", className: "right-3" },
+      { size: "md", side: "prev", className: "left-4" },
+      { size: "md", side: "next", className: "right-4" },
+      { size: "lg", side: "prev", className: "left-5" },
+      { size: "lg", side: "next", className: "right-5" }
+    ],
+    defaultVariants: {
+      size: "md",
+      side: "prev"
+    }
+  }
+);
+
+// src/components/ui/photo-gallery.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function useGalleryCarousel(index, onIndexChange) {
+  const [api, setApi] = React2.useState();
+  const [selectedIndex, setSelectedIndex] = React2.useState(index ?? 0);
+  const initialIndexRef = React2.useRef(index ?? 0);
+  const onIndexChangeRef = React2.useRef(onIndexChange);
+  React2.useEffect(() => {
+    onIndexChangeRef.current = onIndexChange;
+  });
+  React2.useEffect(() => {
+    if (!api) return;
+    const onSelect = () => {
+      const next = api.selectedScrollSnap();
+      setSelectedIndex(next);
+      onIndexChangeRef.current?.(next);
+    };
+    onSelect();
+    api.on("select", onSelect).on("reInit", onSelect);
+    return () => {
+      api.off("select", onSelect).off("reInit", onSelect);
+    };
+  }, [api]);
+  React2.useEffect(() => {
+    if (api && index !== void 0 && index !== api.selectedScrollSnap()) {
+      api.scrollTo(index, false);
+    }
+  }, [api, index]);
+  const scrollTo = React2.useCallback(
+    (i) => api?.scrollTo(i, false),
+    [api]
+  );
+  const scrollPrev = React2.useCallback(() => api?.scrollPrev(false), [api]);
+  const scrollNext = React2.useCallback(() => api?.scrollNext(false), [api]);
+  return {
+    setApi,
+    selectedIndex,
+    initialIndex: initialIndexRef.current,
+    scrollTo,
+    scrollPrev,
+    scrollNext
+  };
+}
+function GalleryFrame({
+  image,
+  fit = "cover",
+  className
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "photo-gallery-frame",
+      className: cn(
+        "relative flex size-full items-center justify-center overflow-hidden",
+        className
+      ),
+      children: image?.src ? /* @__PURE__ */ jsx4(
+        "img",
+        {
+          src: image.src,
+          alt: image.alt ?? "Property image",
+          className: cn(
+            "size-full",
+            fit === "contain" ? "object-contain" : "object-cover"
+          ),
+          draggable: false
+        }
+      ) : /* @__PURE__ */ jsx4("span", { className: "text-gdt-sm font-medium text-fg-caption-placeholder", children: "Property Image" })
+    }
+  );
+}
+var Images = (props) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 16,
+    viewBox: "0 0 15 16",
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M6.72 14.332c-.705 0-1.38-.3-1.878-.83a2.935 2.935 0 0 1-.779-2.003V2.012l-3.02.738c-.36.102-.667.353-.853.697a1.587 1.587 0 0 0-.143 1.136l2.589 10.309c.083.318.261.598.507.798.246.2.546.309.856.31.115 0 .233-.015.349-.048l6.3-1.62H6.72ZM8.125 6c.69 0 1.25-.597 1.25-1.333 0-.735-.56-1.333-1.25-1.333s-1.25.598-1.25 1.333c0 .736.56 1.333 1.25 1.333Z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M15 2a2.07 2.07 0 0 0-.55-1.414A1.818 1.818 0 0 0 13.126 0h-6.25C6.376 0 5.9.21 5.547.586A2.07 2.07 0 0 0 4.998 2v9.332c0 .53.198 1.04.55 1.414.352.375.829.586 1.326.586h6.25c.498 0 .975-.21 1.327-.586.351-.375.549-.883.549-1.414V2Zm-8.126-.667h6.25c.166 0 .325.07.443.195A.69.69 0 0 1 13.75 2v4.292l-.475-.507a1.094 1.094 0 0 0-.356-.253 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.253L8.749 8.96l-.787-.84a1.094 1.094 0 0 0-.356-.254 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.254l-.163.173V2a.69.69 0 0 1 .183-.472.606.606 0 0 1 .442-.195Z"
+        }
+      )
+    ]
+  }
+);
+function GalleryCounter({
+  current,
+  total,
+  className
+}) {
+  if (total <= 1) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "photo-gallery-counter",
+      className: cn(
+        "pointer-events-none absolute z-10 inline-flex items-center gap-1.5 rounded-full border border-line bg-surface-overlay px-2.5 py-1 text-gdt-xs font-bold text-fg-primary shadow-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(Images, { "aria-hidden": "true", className: "size-3.5" }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          current,
+          " / ",
+          total
+        ] })
+      ]
+    }
+  );
+}
+function GalleryButton({
+  className,
+  variant = "ghost",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx4(
+    Button,
+    {
+      size: "icon",
+      className: cn(
+        "border border-line bg-surface-overlay text-fg-primary shadow-2 transition-[background-color] outline-none hover:bg-surface-raised focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] size-9 sm:size-11",
+        className
+      ),
+      variant,
+      ...rest
+    }
+  );
+}
+function GalleryArrow({
+  side,
+  onClick,
+  className
+}) {
+  const Icon = side === "prev" ? ChevronLeftIcon2 : ChevronRightIcon2;
+  return /* @__PURE__ */ jsx4(
+    GalleryButton,
+    {
+      type: "button",
+      "data-slot": `photo-gallery-${side}`,
+      "aria-label": side === "prev" ? "Previous photo" : "Next photo",
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      className: cn(
+        "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center active:not-aria-[haspopup]:-translate-y-1/2",
+        side === "prev" ? "left-2 sm:left-4" : "right-2 sm:right-4",
+        className
+      ),
+      children: /* @__PURE__ */ jsx4(Icon, { className: "cn-rtl-flip size-4 sm:size-5" })
+    }
+  );
+}
+function GalleryThumbnails({
+  images,
+  selectedIndex,
+  onSelect,
+  colsClassName,
+  className,
+  activeVariant = "focus"
+}) {
+  const containerRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const active = containerRef.current?.children[selectedIndex];
+    active?.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "nearest"
+    });
+  }, [selectedIndex]);
+  if (images.length <= 1) return null;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "photo-gallery-thumbnails",
+      className: cn(
+        "flex gap-2 overflow-x-auto [--gallery-gap:0.5rem] scrollbar-none [&::-webkit-scrollbar]:hidden",
+        colsClassName,
+        className
+      ),
+      children: images.map((image, index) => {
+        const isActive = index === selectedIndex;
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": `View photo ${index + 1}`,
+            "aria-current": isActive,
+            onClick: () => onSelect(index),
+            style: {
+              width: "calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols))"
+            },
+            className: cn(
+              "relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+              activeVariant === "subtle" && "focus-visible:border-line-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-subtle)]",
+              isActive ? activeVariant === "subtle" ? "border-line-subtle" : "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"
+            ),
+            children: image.src ? /* @__PURE__ */ jsx4(
+              "img",
+              {
+                src: image.src,
+                alt: image.alt ?? `Property image ${index + 1}`,
+                className: "size-full object-cover",
+                draggable: false
+              }
+            ) : null
+          },
+          index
+        );
+      })
+    }
+  );
+}
+function PhotoGallery({
+  images,
+  index,
+  onIndexChange,
+  onImageClick,
+  className,
+  ...props
+}) {
+  const {
+    setApi,
+    selectedIndex,
+    initialIndex,
+    scrollTo,
+    scrollPrev,
+    scrollNext
+  } = useGalleryCarousel(index, onIndexChange);
+  const hasMany = images.length > 1;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "photo-gallery",
+      className: cn(
+        "flex w-full flex-col gap-3 rounded-2xl border border-line bg-surface p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          Carousel,
+          {
+            imageSize: "full",
+            setApi,
+            opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
+            className: "aspect-video rounded-xl bg-surface-raised",
+            children: [
+              /* @__PURE__ */ jsx4(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx4(
+                CarouselItem,
+                {
+                  children: /* @__PURE__ */ jsx4(GalleryFrame, { image })
+                },
+                i
+              )) }),
+              onImageClick && /* @__PURE__ */ jsx4(
+                GalleryButton,
+                {
+                  className: "absolute bottom-2 right-2 sm:bottom-4 sm:right-4",
+                  onClick: () => onImageClick(selectedIndex),
+                  children: /* @__PURE__ */ jsx4(Fullscreen, { className: "size-4 md:size-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                GalleryCounter,
+                {
+                  current: selectedIndex + 1,
+                  total: images.length,
+                  className: "top-2 right-2 sm:top-4 md:right-4"
+                }
+              ),
+              hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx4(GalleryArrow, { side: "prev", onClick: scrollPrev }),
+                /* @__PURE__ */ jsx4(GalleryArrow, { side: "next", onClick: scrollNext })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          GalleryThumbnails,
+          {
+            images,
+            selectedIndex,
+            onSelect: scrollTo,
+            colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:8]"
+          }
+        )
+      ]
+    }
+  );
+}
+function PhotoGalleryFullscreen({
+  images,
+  open,
+  onOpenChange,
+  index,
+  onIndexChange
+}) {
+  const {
+    setApi,
+    selectedIndex,
+    initialIndex,
+    scrollTo,
+    scrollPrev,
+    scrollNext
+  } = useGalleryCarousel(index, onIndexChange);
+  const hasMany = images.length > 1;
+  const handleKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+  };
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx4(
+      DialogPrimitive.Backdrop,
+      {
+        "data-slot": "photo-gallery-fullscreen-backdrop",
+        className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      DialogPrimitive.Popup,
+      {
+        "data-slot": "photo-gallery-fullscreen",
+        onKeyDown: handleKeyDown,
+        className: "fixed inset-0 z-50 flex flex-col gap-4 p-4 sm:p-6 xl:p-8 outline-none transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx4(DialogPrimitive.Title, { className: "sr-only", children: "Photo Gallery" }),
+          /* @__PURE__ */ jsxs3("div", { className: "w-full flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx4(
+              GalleryCounter,
+              {
+                current: selectedIndex + 1,
+                total: images.length,
+                className: "static"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              DialogPrimitive.Close,
+              {
+                "data-slot": "photo-gallery-fullscreen-close",
+                "aria-label": "Close gallery",
+                render: /* @__PURE__ */ jsx4(GalleryButton, {}),
+                children: /* @__PURE__ */ jsx4(XIcon, { className: "size-4 sm:size-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3(
+            Carousel,
+            {
+              imageSize: "full",
+              setApi,
+              opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
+              className: "flex-1 w-full rounded-xl bg-transparent",
+              children: [
+                /* @__PURE__ */ jsx4(CarouselContent, { className: "items-center", children: images.map((image, i) => /* @__PURE__ */ jsx4(
+                  CarouselItem,
+                  {
+                    className: "h-full",
+                    children: /* @__PURE__ */ jsx4(GalleryFrame, { image, fit: "contain" })
+                  },
+                  i
+                )) }),
+                hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                  /* @__PURE__ */ jsx4(
+                    GalleryArrow,
+                    {
+                      side: "prev",
+                      onClick: scrollPrev,
+                      className: "left-0!"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    GalleryArrow,
+                    {
+                      side: "next",
+                      onClick: scrollNext,
+                      className: "right-0!"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          hasMany && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx4("p", { className: "hidden text-center text-gdt-xs text-fg-secondary sm:block", children: "\u2190 \u2192 to navigate \xB7 ESC to close" }),
+            /* @__PURE__ */ jsx4(
+              GalleryThumbnails,
+              {
+                images,
+                selectedIndex,
+                onSelect: scrollTo,
+                colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:10]",
+                className: "mx-auto w-full max-w-3xl",
+                activeVariant: "subtle"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  PhotoGallery,
+  PhotoGalleryFullscreen
+};
+//# sourceMappingURL=photo-gallery.js.map