{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "image-lightbox", "type": "registry:ui", "title": "Gallery lightbox", "description": "Expands a thumbnail into an immersive gallery while managing focus and keyboard browsing.", "dependencies": [ "motion" ], "categories": [ "cards-media" ], "docs": "https://motion-lexicon.pages.dev/en/components/image-lightbox/", "meta": { "engines": [ "motion" ], "runtimeCost": "medium", "signature": "Shared-element transition from thumbnail to gallery", "sceneFamily": "editorial-warm", "motionRole": "gentle", "primaryState": "Immersive gallery with thumbnail context", "assetProvenance": "self-contained" }, "files": [ { "path": "src/registry/components/image-lightbox.tsx", "type": "registry:ui", "target": "components/motion-lexicon/image-lightbox.tsx", "content": "\"use client\";\n\nimport {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, LayoutGroup, motion, useReducedMotion } from \"motion/react\";\n\nexport type ImageLightboxItem = {\n id: string;\n title: string;\n caption?: string;\n meta?: string;\n art: ReactNode;\n};\n\nexport type ImageLightboxProps = {\n items: readonly ImageLightboxItem[];\n label?: string;\n copy?: Partial;\n className?: string;\n onChange?: (item: ImageLightboxItem, index: number) => void;\n};\n\nexport type ImageLightboxCopy = {\n gallery: string;\n works: (count: number) => string;\n empty: string;\n open: (title: string) => string;\n close: string;\n previous: string;\n next: string;\n};\n\nconst DEFAULT_COPY: ImageLightboxCopy = {\n gallery: \"Gallery\",\n works: (count) => `${String(count).padStart(2, \"0\")} works`,\n empty: \"No works in this gallery\",\n open: (title) => `Open ${title}`,\n close: \"Close gallery\",\n previous: \"Previous image\",\n next: \"Next image\",\n};\n\ntype NavigationSource = \"keyboard\" | \"pointer\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst EASE_MOVE = [0.77, 0, 0.175, 1] as const;\n\nconst FOCUSABLE = [\n \"a[href]\",\n \"button:not([disabled])\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nconst CLOSE_ICON = (\n \n \n \n);\n\nconst ARROW_ICON = (\n \n \n \n);\n\nfunction focusableWithin(root: HTMLElement) {\n return Array.from(root.querySelectorAll(FOCUSABLE)).filter(\n (element) => element.getClientRects().length > 0,\n );\n}\n\nexport function ImageLightbox({\n items,\n label = \"Image collection\",\n copy: copyOverrides,\n className = \"\",\n onChange,\n}: ImageLightboxProps) {\n const copy = { ...DEFAULT_COPY, ...copyOverrides };\n const reduced = useReducedMotion() === true;\n const layoutGroupId = useId();\n const titleId = useId();\n const dialogRef = useRef(null);\n const closeRef = useRef(null);\n const returnFocusRef = useRef(null);\n const triggerRefs = useRef(new Map());\n const focusFrameRef = useRef(null);\n const backdropDownRef = useRef(false);\n const navigationSourceRef = useRef(\"pointer\");\n const [portalNode, setPortalNode] = useState(null);\n const [activeId, setActiveId] = useState(null);\n const activeIndex = activeId === null\n ? -1\n : items.findIndex((item) => item.id === activeId);\n const activeItem = activeIndex < 0 ? null : items[activeIndex];\n const open = activeItem !== null;\n\n useEffect(() => {\n if (activeId !== null && activeIndex < 0) setActiveId(null);\n }, [activeId, activeIndex]);\n\n useEffect(() => {\n const node = document.createElement(\"div\");\n node.dataset.imageLightboxPortal = \"\";\n document.body.appendChild(node);\n setPortalNode(node);\n return () => {\n node.remove();\n };\n }, []);\n\n useEffect(() => {\n if (!open || !portalNode) return;\n const triggers = triggerRefs.current;\n const body = document.body;\n const previousOverflow = body.style.overflow;\n const siblings = Array.from(body.children).filter((child) => child !== portalNode);\n const inertState = siblings.map((element) => [element, element.getAttribute(\"inert\")] as const);\n siblings.forEach((element) => element.setAttribute(\"inert\", \"\"));\n body.style.overflow = \"hidden\";\n\n focusFrameRef.current = requestAnimationFrame(() => {\n focusFrameRef.current = null;\n closeRef.current?.focus({ preventScroll: true });\n });\n\n return () => {\n if (focusFrameRef.current !== null) {\n cancelAnimationFrame(focusFrameRef.current);\n focusFrameRef.current = null;\n }\n body.style.overflow = previousOverflow;\n inertState.forEach(([element, previous]) => {\n if (previous === null) element.removeAttribute(\"inert\");\n else element.setAttribute(\"inert\", previous);\n });\n const previousTarget = returnFocusRef.current;\n const returnTarget = previousTarget?.isConnected\n ? previousTarget\n : Array.from(triggers.values()).find((trigger) => trigger.isConnected);\n if (returnTarget?.isConnected) returnTarget.focus({ preventScroll: true });\n };\n }, [open, portalNode]);\n\n const openImage = (\n index: number,\n trigger: HTMLElement,\n source: NavigationSource,\n ) => {\n const item = items[index];\n if (!item) return;\n navigationSourceRef.current = source;\n returnFocusRef.current = trigger;\n setActiveId(item.id);\n onChange?.(item, index);\n };\n\n const close = useCallback((source: NavigationSource = \"pointer\") => {\n navigationSourceRef.current = source;\n setActiveId(null);\n }, []);\n\n const move = useCallback(\n (delta: -1 | 1, source: NavigationSource) => {\n if (items.length < 2 || activeIndex < 0) return;\n navigationSourceRef.current = source;\n const next = (activeIndex + delta + items.length) % items.length;\n setActiveId(items[next].id);\n onChange?.(items[next], next);\n },\n [activeIndex, items, onChange],\n );\n\n useEffect(() => {\n if (!open) return;\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n close(\"keyboard\");\n return;\n }\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n move(event.key === \"ArrowLeft\" ? -1 : 1, \"keyboard\");\n return;\n }\n if (event.key !== \"Tab\") return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n const focusable = focusableWithin(dialog);\n if (focusable.length === 0) {\n event.preventDefault();\n dialog.focus({ preventScroll: true });\n return;\n }\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {\n event.preventDefault();\n last.focus({ preventScroll: true });\n } else if (!event.shiftKey && document.activeElement === last) {\n event.preventDefault();\n first.focus({ preventScroll: true });\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [close, move, open]);\n\n const instant = reduced || navigationSourceRef.current === \"keyboard\";\n const sharedTransition = instant\n ? { duration: 0 }\n : { duration: 0.26, ease: EASE_MOVE };\n const controlPressClass = reduced\n ? \"\"\n : \"transition-[background-color,transform] duration-150 active:scale-[0.96]\";\n\n return (\n \n
\n
\n
\n \n {copy.gallery}\n \n

\n {label}\n

\n
\n \n {copy.works(items.length)}\n \n
\n {items.length === 0 ? (\n
\n {copy.empty}\n
\n ) :
\n {items.map((item, index) => (\n {\n if (node) triggerRefs.current.set(item.id, node);\n else triggerRefs.current.delete(item.id);\n }}\n type=\"button\"\n aria-label={copy.open(item.title)}\n onClick={(event) =>\n openImage(\n index,\n event.currentTarget,\n event.detail === 0 ? \"keyboard\" : \"pointer\",\n )\n }\n className=\"group overflow-hidden rounded-xl border border-[#3a3025]/15 bg-[#fff6e8] text-left outline-none transition-[border-color,box-shadow,transform] duration-200 focus-visible:ring-2 focus-visible:ring-[#4568FF] focus-visible:ring-offset-2 focus-visible:ring-offset-[#eee1cb] [@media(hover:hover)_and_(pointer:fine)]:hover:-translate-y-0.5 [@media(hover:hover)_and_(pointer:fine)]:hover:shadow-[0_16px_24px_-20px_rgba(53,36,17,.75)] dark:border-white/[0.12] dark:bg-[#181818]\"\n >\n \n {item.art}\n \n \n \n {item.title}\n \n \n {item.meta ?? String(index + 1).padStart(2, \"0\")}\n \n \n \n ))}\n
}\n
\n\n {portalNode\n ? createPortal(\n \n {activeItem && activeIndex >= 0 ? (\n {\n backdropDownRef.current = event.target === event.currentTarget;\n }}\n onClick={(event) => {\n if (event.target === event.currentTarget && backdropDownRef.current) {\n close(\"pointer\");\n }\n backdropDownRef.current = false;\n }}\n className=\"fixed inset-0 z-50 grid place-items-center bg-black/80 p-3 sm:p-6\"\n >\n \n
\n
\n \n {String(activeIndex + 1).padStart(2, \"0\")} / {String(items.length).padStart(2, \"0\")}\n \n \n {activeItem.title}\n \n
\n close(\"pointer\")}\n className={`grid size-11 shrink-0 place-items-center rounded-full border border-white/15 bg-[#fff0db] text-[#292016] outline-none focus-visible:ring-2 focus-visible:ring-[#8eb9ff] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17130f] ${controlPressClass}`}\n >\n {CLOSE_ICON}\n \n
\n\n
\n \n \n {activeItem.art}\n \n \n
\n\n \n \n \n ) : null}\n ,\n portalNode,\n )\n : null}\n \n );\n}\n" } ] }