51: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"] 52: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"] 53:T2252,'use client'; import { useRef, useEffect, useState, useCallback } from 'react'; import { gsap } from 'gsap'; const DEFAULT_ITEMS = [ { image: 'https://picsum.photos/id/1015/900/1200', label: 'Canyon', link: '#' }, { image: 'https://picsum.photos/id/1018/900/1200', label: 'Ridgeline', link: '#' }, { image: 'https://picsum.photos/id/1039/900/1200', label: 'Falls', link: '#' }, { image: 'https://picsum.photos/id/1043/900/1200', label: 'Harbour', link: '#' }, { image: 'https://picsum.photos/id/1044/900/1200', label: 'Skyline', link: '#' } ]; const AccordionGallery = ({ items = DEFAULT_ITEMS, defaultIndex = 2, accentColor = '#ffffff', overlayColor = '#060010', textColor = '#ffffff', height = 460, gap = 10, radius = 16, expandRatio = 0.52, orientation = 'horizontal', duration = 0.6, ease = 'power3.out', parallax = 0.5, tilt = 8, stagger = 0.06, trigger = 'hover', showLabels = true, grayscale = true, className = '' }) => { const rootRef = useRef(null); const panelRefs = useRef([]); const mediaRefs = useRef([]); const barRefs = useRef([]); const textRefs = useRef([]); const tlRef = useRef(null); const firstRunRef = useRef(true); const mediaSizeRef = useRef(320); const vertical = orientation === 'vertical'; const count = items.length; const [active, setActive] = useState(Math.min(Math.max(defaultIndex, 0), count - 1)); const prefersReduced = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false; const overlayBg = `linear-gradient(180deg, transparent 45%, color-mix(in srgb, ${overlayColor} 78%, transparent) 100%), color-mix(in srgb, ${overlayColor} calc(var(--ag-dim, 0.35) * 100%), transparent)`; const applyLayout = useCallback( animate => { const panels = panelRefs.current; if (!panels.length) return; const r = Math.min(Math.max(expandRatio, 0.2), 0.9); const grow = count > 1 ? (r * (count - 1)) / (1 - r) : 1; const mediaSize = mediaSizeRef.current; tlRef.current?.kill(); const dur = animate && !prefersReduced ? duration : 0; const tl = gsap.timeline(); panels.forEach((panel, i) => { if (!panel) return; const isActive = i === active; const media = mediaRefs.current[i]; const bar = barRefs.current[i]; const text = textRefs.current[i]; const rot = isActive ? 0 : i < active ? tilt : -tilt; const rotProp = vertical ? { rotateX: -rot } : { rotateY: rot }; tl.to(panel, { flexGrow: isActive ? grow : 1, ...rotProp, duration: dur, ease }, 0); if (media) { const drift = Math.max(-1.5, Math.min(1.5, active - i)); const shift = drift * parallax * mediaSize * 0.06; const gray = grayscale ? (isActive ? 0 : 1) : 0; tl.to( media, { xPercent: -50, yPercent: -50, x: vertical ? 0 : isActive ? 0 : shift, y: vertical ? (isActive ? 0 : shift) : 0, '--ag-gray': gray, '--ag-dim': isActive ? 0 : 0.35, duration: dur, ease }, 0 ); } if (showLabels && bar && text) { if (isActive) { tl.to([bar, text], { opacity: 1, x: 0, duration: dur, ease, stagger: prefersReduced ? 0 : stagger }, 0); } else { tl.to([bar, text], { opacity: 0, x: -14, duration: dur * 0.6, ease }, 0); } } }); tlRef.current = tl; }, [ active, count, expandRatio, duration, ease, vertical, tilt, parallax, grayscale, showLabels, stagger, prefersReduced ] ); useEffect(() => { const el = rootRef.current; if (!el) return; const measure = () => { const rect = el.getBoundingClientRect(); const total = vertical ? rect.height : rect.width; const usable = Math.max(total - gap * (count - 1), 120); const size = Math.max(140, usable * Math.min(Math.max(expandRatio, 0.2), 0.9) * 1.22); mediaSizeRef.current = size; el.style.setProperty('--ag-media-size', `${size}px`); applyLayout(!firstRunRef.current); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, [applyLayout, gap, count, expandRatio, vertical]); useEffect(() => { applyLayout(!firstRunRef.current); firstRunRef.current = false; }, [applyLayout]); useEffect( () => () => { tlRef.current?.kill(); }, [] ); const handleEnter = i => { if (trigger === 'hover') setActive(i); }; const handleClick = (i, e) => { if (i !== active) { e.preventDefault(); setActive(i); } }; const handleKeyDown = (i, e) => { if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); setActive((i + 1) % count); } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); setActive((i - 1 + count) % count); } }; return (

{items.map((item, i) => { const isActive = i === active; const Tag = item.link ? 'a' : 'div'; return ( (panelRefs.current[i] = el)} className="group relative block min-w-0 min-h-0 flex-[1_1_0] cursor-pointer overflow-hidden bg-[#0a0713] no-underline outline-none [transform-style:preserve-3d] [transform-origin:center] [box-shadow:0_10px_30px_-18px_rgba(0,0,0,0.8)] focus-visible:[box-shadow:0_0_0_2px_var(--ag-accent),0_10px_30px_-18px_rgba(0,0,0,0.8)] max-[520px]:min-h-[84px] max-[520px]:!transform-none" style={{ borderRadius: `${radius}px`, '--ag-accent': accentColor, willChange: 'flex-grow, transform' }} href={item.link || undefined} onClick={e => handleClick(i, e)} onMouseEnter={() => handleEnter(i)} onFocus={() => setActive(i)} onKeyDown={e => handleKeyDown(i, e)} role="listitem" tabIndex={0} aria-current={isActive ? 'true' : undefined} aria-label={item.label} > (mediaRefs.current[i] = el)} className="absolute top-1/2 left-1/2 [filter:grayscale(var(--ag-gray,1))]" style={{ width: vertical ? '100%' : 'var(--ag-media-size, 320px)', height: vertical ? 'var(--ag-media-size, 320px)' : '100%', willChange: 'transform, filter' }} > {item.alt

{showLabels && ( (barRefs.current[i] = el)} className="h-[26px] w-[3px] flex-none rounded-[3px] opacity-0" style={{ background: accentColor, boxShadow: `0 0 12px color-mix(in srgb, ${accentColor} 60%, transparent)` }} /> (textRefs.current[i] = el)} className="overflow-hidden text-ellipsis whitespace-nowrap text-[clamp(1rem,1.4vw,1.4rem)] font-semibold tracking-[0.01em] opacity-0 [text-shadow:0_2px_14px_rgba(0,0,0,0.55)]" style={{ color: textColor }} > {item.label} )} ); })}

); }; export default AccordionGallery; 50:["$","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","gsap@^3.13.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap@^3.13.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"AccordionGallery/AccordionGallery.jsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]