4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3d84,// Lightbox from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from 'lucide-react'; import { cn } from '@/lib/utils'; export interface LightboxItem { src: string; alt?: string; caption?: string; thumbnail?: string; } interface LightboxContextValue { items: LightboxItem[]; index: number; zoomed: boolean; setZoomed: (zoomed: boolean) => void; goTo: (index: number) => void; next: () => void; prev: () => void; canPrev: boolean; canNext: boolean; } const LightboxContext = React.createContext(null); const wrap = (i: number, count: number) => ((i % count) + count) % count; const useLightbox = () => { const ctx = React.useContext(LightboxContext); if (!ctx) { throw new Error('Lightbox compound components must be used inside '); } return ctx; }; export interface LightboxProps { items: LightboxItem[]; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; index?: number; defaultIndex?: number; onIndexChange?: (index: number) => void; loop?: boolean; children?: React.ReactNode; } const Lightbox = ({ items, open: openProp, defaultOpen = false, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, loop = true, children, }: LightboxProps) => { const [internalOpen, setInternalOpen] = React.useState(defaultOpen); const open = openProp ?? internalOpen; const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const count = items.length; const [internalIndex, setInternalIndex] = React.useState(defaultIndex); const index = Math.min(Math.max(indexProp ?? internalIndex, 0), Math.max(count - 1, 0)); const setIndex = React.useCallback( (next: number) => { if (indexProp === undefined) setInternalIndex(next); onIndexChange?.(next); }, [indexProp, onIndexChange], ); const [zoomed, setZoomed] = React.useState(false); const goTo = React.useCallback( (i: number) => { if (count === 0) return; setIndex(loop ? wrap(i, count) : Math.min(Math.max(i, 0), count - 1)); setZoomed(false); }, [count, loop, setIndex], ); const next = React.useCallback(() => goTo(index + 1), [goTo, index]); const prev = React.useCallback(() => goTo(index - 1), [goTo, index]); const canPrev = loop ? count > 1 : index > 0; const canNext = loop ? count > 1 : index < count - 1; React.useEffect(() => { if (!open || count === 0) return; for (const i of [index - 1, index + 1]) { const item = items[loop ? wrap(i, count) : i]; if (item) { const img = new window.Image(); img.src = item.src; } } }, [open, index, items, count, loop]); const value = React.useMemo( () => ({ items, index, zoomed, setZoomed, goTo, next, prev, canPrev, canNext }), [items, index, zoomed, goTo, next, prev, canPrev, canNext], ); return ( {children} ); }; interface LightboxTriggerProps extends React.ComponentProps { index?: number; } const LightboxTrigger = ({ index = 0, onClick, ...props }: LightboxTriggerProps) => { const { goTo } = useLightbox(); return ( { goTo(index); onClick?.(event); }} {...props} /> ); }; const LightboxClose = (props: React.ComponentProps) => { return ; }; const LightboxPortalContext = React.createContext(false); /** Wrap `LightboxContent` in this to compose your own overlay; the content then skips its built-in portal and overlay. */ const LightboxPortal = (props: React.ComponentProps) => { return ( ); }; const LightboxOverlay = ({ className, ...props }: React.ComponentProps) => { return ( ); }; const chromeButtonClass = 'inline-flex items-center justify-center rounded-md bg-background/60 p-2 text-foreground backdrop-blur-sm transition-colors hover:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none'; export interface LightboxLabels { zoomIn: string; zoomOut: string; close: string; previous: string; next: string; /** Dialog title for an item without `alt`. */ image: (index: number, count: number) => string; } const defaultLabels: LightboxLabels = { zoomIn: 'Zoom in', zoomOut: 'Zoom out', close: 'Close', previous: 'Previous image', next: 'Next image', image: (index, count) => `Image ${index + 1} of ${count}`, }; const ZOOM_SCALE = 2; const isEditableTarget = (target: EventTarget) => { if (!(target instanceof HTMLElement)) return false; return target.isContentEditable || target.closest('input, textarea, select') !== null; }; export interface LightboxContentProps extends React.ComponentProps { /** Accessible names for the built-in controls. */ labels?: Partial; } const LightboxContent = ({ labels, className, children, onKeyDown, ...props }: LightboxContentProps) => { const { items, index, zoomed, setZoomed, goTo, next, prev, canPrev, canNext } = useLightbox(); const inPortal = React.useContext(LightboxPortalContext); const item = items[index]; const text = React.useMemo(() => ({ ...defaultLabels, ...labels }), [labels]); const viewportRef = React.useRef(null); const imageRef = React.useRef(null); const [pan, setPan] = React.useState({ x: 0, y: 0 }); const [dragging, setDragging] = React.useState(false); const dragRef = React.useRef<{ pointerId: number; startX: number; startY: number; panX: number; panY: number; moved: boolean; } | null>(null); const panKey = `${index}:${zoomed}`; const [lastPanKey, setLastPanKey] = React.useState(panKey); if (lastPanKey !== panKey) { setLastPanKey(panKey); setPan({ x: 0, y: 0 }); } function isRtl(el: HTMLElement) { return getComputedStyle(el).direction === 'rtl'; } function clampPan(x: number, y: number) { const viewport = viewportRef.current; const image = imageRef.current; if (!viewport || !image) return { x, y }; const maxX = Math.max(0, (image.offsetWidth * ZOOM_SCALE - viewport.clientWidth) / 2); const maxY = Math.max(0, (image.offsetHeight * ZOOM_SCALE - viewport.clientHeight) / 2); return { x: Math.min(maxX, Math.max(-maxX, x)), y: Math.min(maxY, Math.max(-maxY, y)) }; } function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); if (event.defaultPrevented || isEditableTarget(event.target)) return; const rtl = isRtl(event.currentTarget); const toggleZoom = () => setZoomed(!zoomed); const action = ( { ArrowRight: rtl ? prev : next, ArrowLeft: rtl ? next : prev, Home: () => goTo(0), End: () => goTo(items.length - 1), z: toggleZoom, Z: toggleZoom, } as Record void> )[event.key]; if (!action) return; event.preventDefault(); action(); } function handlePointerDown(event: React.PointerEvent) { if (event.pointerType === 'mouse' && event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); dragRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, panX: pan.x, panY: pan.y, moved: false, }; setDragging(true); } function handlePointerMove(event: React.PointerEvent) { const drag = dragRef.current; if (!drag || drag.pointerId !== event.pointerId) return; const dx = event.clientX - drag.startX; const dy = event.clientY - drag.startY; if (Math.abs(dx) > 4 || Math.abs(dy) > 4) drag.moved = true; if (zoomed) setPan(clampPan(drag.panX + dx, drag.panY + dy)); } function handlePointerUp(event: React.PointerEvent) { const drag = dragRef.current; if (!drag || drag.pointerId !== event.pointerId) return; dragRef.current = null; setDragging(false); const dx = event.clientX - drag.startX; if (!zoomed && Math.abs(dx) > 64) { if (dx < 0 !== isRtl(event.currentTarget)) next(); else prev(); return; } const target = event.target as HTMLElement; if (!drag.moved && target.closest('[data-slot=lightbox-image]')) { setZoomed(!zoomed); } } function handlePointerCancel(event: React.PointerEvent) { const drag = dragRef.current; if (!drag || drag.pointerId !== event.pointerId) return; dragRef.current = null; setDragging(false); if (zoomed) setPan({ x: drag.panX, y: drag.panY }); } const content = ( {item?.alt || text.image(index, items.length)}

{item && ( // eslint-disable-next-line @next/next/no-img-element {item.alt

)}

{item?.caption && (

{item.caption}

)} {children} {index + 1} / {items.length}

{canPrev && ( )} {canNext && ( )} ); if (inPortal) return content; return ( {content} ); }; export interface LightboxThumbnailsProps extends React.ComponentProps<'div'> { /** Accessible name for a thumbnail whose item has no `alt`. */ getLabel?: (index: number) => string; } const defaultThumbnailLabel = (index: number) => `Go to image ${index + 1}`; const LightboxThumbnails = ({ getLabel = defaultThumbnailLabel, className, ...props }: LightboxThumbnailsProps) => { const { items, index, goTo } = useLightbox(); const refs = React.useRef<(HTMLButtonElement | null)[]>([]); React.useEffect(() => { const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; refs.current[index]?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: reduce ? 'auto' : 'smooth' }); }, [index]); return (

{items.map((item, i) => ( ))}

); }; export { Lightbox, LightboxTrigger, LightboxClose, LightboxPortal, LightboxOverlay, LightboxContent, LightboxThumbnails, }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-dialog",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dialog","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dialog"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/lightbox.tsx","content":"$50","type":"registry:component","target":"components/lightbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]