@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/phone-input.js

@@ -1,362 +1,244 @@
 "use client";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "./chunk-JVLUBAPB.js";
-import {
-  Separator
-} from "./chunk-CHII2QHH.js";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput
-} from "./chunk-6ZSGQHH2.js";
-import "./chunk-KSMDANKI.js";
-import "./chunk-MEKCCOP5.js";
-import "./chunk-3ACQVT7A.js";
-import "./chunk-B4H6RNDH.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/phone-input.tsx
-import {
-  AsYouType,
-  getCountries,
-  getCountryCallingCode,
-  parsePhoneNumber
-} from "libphonenumber-js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { Separator } from "./separator.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumber } from "libphonenumber-js";
 import flags from "react-phone-number-input/flags";
-import { jsx, jsxs } from "react/jsx-runtime";
-var regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
-var COUNTRIES = getCountries().map((code) => ({
-  code,
-  name: regionNames?.of(code) ?? code,
-  calling: getCountryCallingCode(code)
+//#region src/phone-input.tsx
+const regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
+const COUNTRIES = getCountries().map((code) => ({
+	code,
+	name: regionNames?.of(code) ?? code,
+	calling: getCountryCallingCode(code)
 })).sort((a, b) => a.name.localeCompare(b.name));
 function getNationalDigits(value) {
-  return value.replace(/\D/g, "");
+	return value.replace(/\D/g, "");
 }
 function formatNational(digits, country) {
-  if (!digits) return "";
-  return new AsYouType(country).input(digits);
+	if (!digits) return "";
+	return new AsYouType(country).input(digits);
 }
 function toE164(digits, country) {
-  if (!digits) return void 0;
-  return `+${getCountryCallingCode(country)}${digits}`;
+	if (!digits) return void 0;
+	return `+${getCountryCallingCode(country)}${digits}`;
 }
 function parseValue(value) {
-  if (!value) return { digits: "" };
-  try {
-    const parsed = parsePhoneNumber(value);
-    if (parsed?.nationalNumber) {
-      return { country: parsed.country, digits: parsed.nationalNumber };
-    }
-  } catch {
-  }
-  return { digits: "" };
+	if (!value) return { digits: "" };
+	try {
+		const parsed = parsePhoneNumber(value);
+		if (parsed?.nationalNumber) return {
+			country: parsed.country,
+			digits: parsed.nationalNumber
+		};
+	} catch {}
+	return { digits: "" };
 }
-var flagSizeVariants = {
-  sm: "h-3 w-[18px]",
-  md: "h-3.5 w-5",
-  lg: "h-4 w-6"
+const flagSizeVariants = {
+	sm: "h-3 w-[18px]",
+	md: "h-3.5 w-5",
+	lg: "h-4 w-6"
 };
-function CountryFlag({
-  country,
-  size,
-  className
-}) {
-  const Flag = flags[country];
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[3px] bg-surface-raised [&>svg]:h-full [&>svg]:w-full [&>svg]:object-cover",
-        flagSizeVariants[size],
-        className
-      ),
-      children: Flag ? /* @__PURE__ */ jsx(Flag, { title: country }) : /* @__PURE__ */ jsx("span", { className: "text-gdt-xs text-fg-secondary", children: country })
-    }
-  );
+function CountryFlag({ country, size, className }) {
+	const Flag = flags[country];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[3px] bg-surface-raised [&>svg]:h-full [&>svg]:w-full [&>svg]:object-cover", flagSizeVariants[size], className),
+		children: Flag ? /* @__PURE__ */ jsx(Flag, { title: country }) : /* @__PURE__ */ jsx("span", {
+			className: "text-gdt-xs text-fg-secondary",
+			children: country
+		})
+	});
 }
-var ROW_HEIGHT = 40;
-var LIST_PADDING = 6;
-var OVERSCAN = 6;
-function CountryList({
-  items,
-  country,
-  onSelect
-}) {
-  const scrollRef = React.useRef(null);
-  const [viewport, setViewport] = React.useState(256);
-  const [scrollTop, setScrollTop] = React.useState(() => {
-    const index = items.findIndex((entry) => entry.code === country);
-    return index > 0 ? index * ROW_HEIGHT : 0;
-  });
-  React.useLayoutEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setViewport(el.clientHeight);
-    el.scrollTop = scrollTop;
-  }, []);
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx("p", { className: "px-3.5 py-6 text-center text-gdt-sm text-fg-secondary", children: "No country found" });
-  }
-  const total = items.length;
-  const first = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
-  const last = Math.min(
-    total,
-    Math.ceil((scrollTop + viewport) / ROW_HEIGHT) + OVERSCAN
-  );
-  const visible = items.slice(first, last);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
-      className: "no-scrollbar max-h-64 overflow-y-auto",
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "relative w-full",
-          style: { height: total * ROW_HEIGHT + LIST_PADDING * 2 },
-          children: visible.map((entry, i) => {
-            const index = first + i;
-            const selected = entry.code === country;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                style: {
-                  position: "absolute",
-                  top: index * ROW_HEIGHT + LIST_PADDING,
-                  height: ROW_HEIGHT
-                },
-                onClick: () => onSelect(entry.code),
-                className: cn(
-                  "flex w-full items-center gap-2.5 px-3.5 text-left text-gdt-sm outline-none transition-colors hover:bg-surface focus-visible:bg-surface",
-                  selected ? "font-medium text-fg-brand" : "text-fg-primary"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(CountryFlag, { country: entry.code, size: "md" }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
-                  /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-fg-secondary", children: [
-                    "+",
-                    entry.calling
-                  ] }),
-                  selected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-fg-brand" })
-                ]
-              },
-              entry.code
-            );
-          })
-        }
-      )
-    }
-  );
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 6;
+const OVERSCAN = 6;
+function CountryList({ items, country, onSelect }) {
+	const scrollRef = React.useRef(null);
+	const [viewport, setViewport] = React.useState(256);
+	const [scrollTop, setScrollTop] = React.useState(() => {
+		const index = items.findIndex((entry) => entry.code === country);
+		return index > 0 ? index * ROW_HEIGHT : 0;
+	});
+	React.useLayoutEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setViewport(el.clientHeight);
+		el.scrollTop = scrollTop;
+	}, []);
+	if (items.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "px-3.5 py-6 text-center text-gdt-sm text-fg-secondary",
+		children: "No country found"
+	});
+	const total = items.length;
+	const first = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+	const last = Math.min(total, Math.ceil((scrollTop + viewport) / ROW_HEIGHT) + OVERSCAN);
+	const visible = items.slice(first, last);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scrollRef,
+		onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+		className: "no-scrollbar max-h-64 overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative w-full",
+			style: { height: total * ROW_HEIGHT + LIST_PADDING * 2 },
+			children: visible.map((entry, i) => {
+				const index = first + i;
+				const selected = entry.code === country;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					style: {
+						position: "absolute",
+						top: index * ROW_HEIGHT + LIST_PADDING,
+						height: ROW_HEIGHT
+					},
+					onClick: () => onSelect(entry.code),
+					className: cn("flex w-full items-center gap-2.5 px-3.5 text-left text-gdt-sm outline-none transition-colors hover:bg-surface focus-visible:bg-surface", selected ? "font-medium text-fg-brand" : "text-fg-primary"),
+					children: [
+						/* @__PURE__ */ jsx(CountryFlag, {
+							country: entry.code,
+							size: "md"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: entry.name
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-fg-secondary",
+							children: ["+", entry.calling]
+						}),
+						selected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-fg-brand" })
+					]
+				}, entry.code);
+			})
+		})
+	});
 }
-function CountrySelect({
-  country,
-  size,
-  disabled,
-  onSelect,
-  finalFocusRef
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const searchRef = React.useRef(null);
-  const filtered = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return COUNTRIES;
-    const normalized = q.replace(/^\+/, "");
-    return COUNTRIES.filter(
-      (entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q)
-    );
-  }, [query]);
-  function handleOpenChange(next) {
-    setOpen(next);
-    if (!next) setQuery("");
-  }
-  function handleSelect(next) {
-    onSelect(next);
-    handleOpenChange(false);
-  }
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxs(
-      PopoverTrigger,
-      {
-        disabled,
-        "data-slot": "phone-country-trigger",
-        className: cn(
-          "flex shrink-0 items-center gap-1.5 rounded-full font-normal text-fg-primary outline-none transition-colors select-none",
-          "focus-visible:text-fg-brand disabled:cursor-not-allowed disabled:text-fg-caption-placeholder",
-          size === "sm" && "text-gdt-xs",
-          size === "md" && "text-gdt-sm",
-          size === "lg" && "text-gdt-md"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CountryFlag, { country, size }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "+",
-            getCountryCallingCode(country)
-          ] }),
-          /* @__PURE__ */ jsx(
-            ChevronDownIcon,
-            {
-              className: cn(
-                "text-fg-secondary transition-transform",
-                open && "rotate-180",
-                size === "lg" ? "size-4" : "size-3.5"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
-      {
-        showArrow: false,
-        align: "start",
-        alignOffset: 0,
-        sideOffset: 10,
-        finalFocus: finalFocusRef,
-        className: "w-72 gap-0 overflow-hidden p-0",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-line-subtle px-3.5 py-2.5", children: [
-            /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-fg-secondary" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: searchRef,
-                value: query,
-                onChange: (event) => setQuery(event.target.value),
-                placeholder: "Search country",
-                className: "w-full bg-transparent text-gdt-sm text-fg-primary outline-none placeholder:text-fg-caption-placeholder"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            CountryList,
-            {
-              items: filtered,
-              country,
-              onSelect: handleSelect
-            },
-            query
-          )
-        ]
-      }
-    )
-  ] });
+function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const searchRef = React.useRef(null);
+	const filtered = React.useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return COUNTRIES;
+		const normalized = q.replace(/^\+/, "");
+		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q));
+	}, [query]);
+	function handleOpenChange(next) {
+		setOpen(next);
+		if (!next) setQuery("");
+	}
+	function handleSelect(next) {
+		onSelect(next);
+		handleOpenChange(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"data-slot": "phone-country-trigger",
+			className: cn("flex shrink-0 items-center gap-1.5 rounded-full font-normal text-fg-primary outline-none transition-colors select-none", "focus-visible:text-fg-brand disabled:cursor-not-allowed disabled:text-fg-caption-placeholder", size === "sm" && "text-gdt-xs", size === "md" && "text-gdt-sm", size === "lg" && "text-gdt-md"),
+			children: [
+				/* @__PURE__ */ jsx(CountryFlag, {
+					country,
+					size
+				}),
+				/* @__PURE__ */ jsxs("span", { children: ["+", getCountryCallingCode(country)] }),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("text-fg-secondary transition-transform", open && "rotate-180", size === "lg" ? "size-4" : "size-3.5") })
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			alignOffset: 0,
+			sideOffset: 10,
+			finalFocus: finalFocusRef,
+			className: "w-72 gap-0 overflow-hidden p-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-b border-line-subtle px-3.5 py-2.5",
+				children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-fg-secondary" }), /* @__PURE__ */ jsx("input", {
+					ref: searchRef,
+					value: query,
+					onChange: (event) => setQuery(event.target.value),
+					placeholder: "Search country",
+					className: "w-full bg-transparent text-gdt-sm text-fg-primary outline-none placeholder:text-fg-caption-placeholder"
+				})]
+			}), /* @__PURE__ */ jsx(CountryList, {
+				items: filtered,
+				country,
+				onSelect: handleSelect
+			}, query)]
+		})]
+	});
 }
-function PhoneInput({
-  value,
-  onChange,
-  defaultCountry = "NG",
-  size,
-  disabled = false,
-  readOnly = false,
-  placeholder = "(0000) 000-0000",
-  className,
-  id,
-  name,
-  ref,
-  "aria-invalid": ariaInvalid
-}) {
-  const resolvedSize = useComponentSize(size);
-  const inputRef = React.useRef(null);
-  const setInputRef = React.useCallback(
-    (node) => {
-      inputRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
-    [ref]
-  );
-  const initial = React.useMemo(() => parseValue(value), []);
-  const [country, setCountry] = React.useState(
-    initial.country ?? defaultCountry
-  );
-  const [national, setNational] = React.useState(
-    () => formatNational(initial.digits, initial.country ?? defaultCountry)
-  );
-  React.useEffect(() => {
-    const currentDigits = getNationalDigits(national);
-    if (toE164(currentDigits, country) === value) return;
-    const next = parseValue(value);
-    const nextCountry = next.country ?? country;
-    setCountry(nextCountry);
-    setNational(formatNational(next.digits, nextCountry));
-  }, [value]);
-  function emit(digits, nextCountry) {
-    onChange?.(toE164(digits, nextCountry));
-  }
-  function handleInputChange(event) {
-    const digits = getNationalDigits(event.target.value);
-    setNational(formatNational(digits, country));
-    emit(digits, country);
-  }
-  function handleCountrySelect(nextCountry) {
-    const digits = getNationalDigits(national);
-    setCountry(nextCountry);
-    setNational(formatNational(digits, nextCountry));
-    emit(digits, nextCountry);
-  }
-  const dividerStateClasses = cn(
-    "group-hover/input-group:bg-line-strong",
-    "group-focus-within/input-group:bg-line-focus",
-    "group-has-[[aria-invalid=true]]/input-group:bg-line-danger",
-    "group-has-disabled/input-group:bg-line-subtle"
-  );
-  return /* @__PURE__ */ jsxs(InputGroup, { size: resolvedSize, className, children: [
-    /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-start", className: "gap-2 self-stretch py-0", children: [
-      /* @__PURE__ */ jsx(
-        CountrySelect,
-        {
-          country,
-          size: resolvedSize,
-          disabled,
-          onSelect: handleCountrySelect,
-          finalFocusRef: inputRef
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Separator,
-        {
-          orientation: "vertical",
-          shade: "deep",
-          className: cn("self-stretch transition-colors", dividerStateClasses)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      InputGroupInput,
-      {
-        ref: setInputRef,
-        id,
-        name,
-        type: "tel",
-        inputMode: "tel",
-        autoComplete: "tel",
-        value: national,
-        onChange: handleInputChange,
-        placeholder,
-        disabled,
-        readOnly,
-        "aria-invalid": ariaInvalid || void 0,
-        className: "pl-0"
-      }
-    )
-  ] });
+function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = false, readOnly = false, placeholder = "(0000) 000-0000", className, id, name, ref, "aria-invalid": ariaInvalid }) {
+	const resolvedSize = useComponentSize(size);
+	const inputRef = React.useRef(null);
+	const setInputRef = React.useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const initial = React.useMemo(() => parseValue(value), []);
+	const [country, setCountry] = React.useState(initial.country ?? defaultCountry);
+	const [national, setNational] = React.useState(() => formatNational(initial.digits, initial.country ?? defaultCountry));
+	React.useEffect(() => {
+		if (toE164(getNationalDigits(national), country) === value) return;
+		const next = parseValue(value);
+		const nextCountry = next.country ?? country;
+		setCountry(nextCountry);
+		setNational(formatNational(next.digits, nextCountry));
+	}, [value]);
+	function emit(digits, nextCountry) {
+		onChange?.(toE164(digits, nextCountry));
+	}
+	function handleInputChange(event) {
+		const digits = getNationalDigits(event.target.value);
+		setNational(formatNational(digits, country));
+		emit(digits, country);
+	}
+	function handleCountrySelect(nextCountry) {
+		const digits = getNationalDigits(national);
+		setCountry(nextCountry);
+		setNational(formatNational(digits, nextCountry));
+		emit(digits, nextCountry);
+	}
+	const dividerStateClasses = cn("group-hover/input-group:bg-line-strong", "group-focus-within/input-group:bg-line-focus", "group-has-[[aria-invalid=true]]/input-group:bg-line-danger", "group-has-disabled/input-group:bg-line-subtle");
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		size: resolvedSize,
+		className,
+		children: [/* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-start",
+			className: "gap-2 self-stretch py-0",
+			children: [/* @__PURE__ */ jsx(CountrySelect, {
+				country,
+				size: resolvedSize,
+				disabled,
+				onSelect: handleCountrySelect,
+				finalFocusRef: inputRef
+			}), /* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				shade: "deep",
+				className: cn("self-stretch transition-colors", dividerStateClasses)
+			})]
+		}), /* @__PURE__ */ jsx(InputGroupInput, {
+			ref: setInputRef,
+			id,
+			name,
+			type: "tel",
+			inputMode: "tel",
+			autoComplete: "tel",
+			value: national,
+			onChange: handleInputChange,
+			placeholder,
+			disabled,
+			readOnly,
+			"aria-invalid": ariaInvalid || void 0,
+			className: "pl-0"
+		})]
+	});
 }
-export {
-  PhoneInput
-};
-//# sourceMappingURL=phone-input.js.map
+//#endregion
+export { PhoneInput };

package/dist/photo-gallery.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-
+import * as React from "react";
+//#region src/photo-gallery.d.ts
 /**
  * A single property photo. `src` is optional so the gallery can render a
  * "Property Image" placeholder in previews / while imagery is still loading.
  */
 type PhotoGalleryImage = {
-    src?: string;
-    alt?: string;
+  src?: string;
+  alt?: string;
 };
 type PhotoGalleryProps = Omit<React.ComponentProps<"div">, "onClick"> & {
-    images: PhotoGalleryImage[];
-    /** Controlled active index. Omit to let the gallery manage it internally. */
-    index?: number;
-    onIndexChange?: (index: number) => void;
-    /** Called when the hero image is activated — wire this to open fullscreen. */
-    onImageClick?: (index: number) => void;
+  images: PhotoGalleryImage[];
+  /** Controlled active index. Omit to let the gallery manage it internally. */
+  index?: number;
+  onIndexChange?: (index: number) => void;
+  /** Called when the hero image is activated — wire this to open fullscreen. */
+  onImageClick?: (index: number) => void;
 };
 /**
  * Inline property gallery: a swipeable hero image (drag / touch / ← →) with a
@@ -24,12 +24,12 @@ type PhotoGalleryProps = Omit<React.ComponentProps<"div">, "onClick"> & {
  */
 declare function PhotoGallery({ images, index, onIndexChange, onImageClick, className, ...props }: PhotoGalleryProps): React.JSX.Element;
 type PhotoGalleryFullscreenProps = {
-    images: PhotoGalleryImage[];
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    /** Controlled active index. Omit to let the viewer manage it internally. */
-    index?: number;
-    onIndexChange?: (index: number) => void;
+  images: PhotoGalleryImage[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Controlled active index. Omit to let the viewer manage it internally. */
+  index?: number;
+  onIndexChange?: (index: number) => void;
 };
 /**
  * Fullscreen lightbox: takes over the viewport over a dimmed backdrop for
@@ -37,6 +37,6 @@ type PhotoGalleryFullscreenProps = {
  * and ESC to close. Built on {@link Carousel}; controlled via `open` /
  * `onOpenChange` and usable without the inline gallery.
  */
-declare function PhotoGalleryFullscreen({ images, open, onOpenChange, index, onIndexChange, }: PhotoGalleryFullscreenProps): React.JSX.Element;
-
-export { PhotoGallery, PhotoGalleryFullscreen, type PhotoGalleryFullscreenProps, type PhotoGalleryImage, type PhotoGalleryProps };
+declare function PhotoGalleryFullscreen({ images, open, onOpenChange, index, onIndexChange }: PhotoGalleryFullscreenProps): React.JSX.Element;
+//#endregion
+export { PhotoGallery, PhotoGalleryFullscreen, type PhotoGalleryFullscreenProps, type PhotoGalleryImage, type PhotoGalleryProps };