50: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"] 51: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"] 52:T2175,"use client"; import { useRef, useState, type KeyboardEvent } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // An accordion of photos. One strip is wide open, the rest are slim; hover, focus or tap another // and the room moves over to it. Each strip is a real button, so the keyboard works too. // GSAP tweens flex-grow (not width), so the browser shares the space for us and every strip // stays exactly as tall as the box. On narrow boxes the strips stack and open downwards. export type ExpandablePanelItem = { /** The photo's address. */ image: string; /** Describes the photo for screen readers. */ alt: string; /** The label shown on the open strip, and the accessible name of the button. */ title: string; /** A small line under the title, optional. */ caption?: string; }; export type ExpandablePanelProps = { /** The strips, in order. Four to eight look best. */ panels: ExpandablePanelItem[]; /** What opens a strip: "hover" (mouse), or "click". Tap and keyboard focus always open one. */ trigger?: "hover" | "click"; /** Which strip starts open. -1 starts with all of them closed. */ defaultActive?: number; /** Go back to the first choice when the pointer leaves the whole row. */ resetOnLeave?: boolean; /** How much wider the open strip is than a closed one (1 is the same width). */ expandedRatio?: number; /** Space between the strips, in pixels. */ gap?: number; /** Corner radius of each strip, in pixels. */ radius?: number; /** How long the strips take to change size, in seconds. */ duration?: number; /** The GSAP ease of the change, e.g. "power3.inOut" or "expo.out". */ ease?: string; /** "auto" stacks the strips when the box is narrower than 672px. */ orientation?: "auto" | "horizontal" | "vertical"; /** Called with the new strip's index whenever the open one changes. */ onChange?: (index: number) => void; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Extra classes for each strip. */ panelClassName?: string; }; export function ExpandablePanel({ panels, trigger = "hover", defaultActive = 0, resetOnLeave = false, expandedRatio = 6, gap = 12, radius = 24, duration = 0.9, ease = "expo.out", orientation = "auto", onChange, className = "", panelClassName = "", }: ExpandablePanelProps) { const listRef = useRef(null); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); const [active, setActive] = useState(defaultActive); // The strips are drawn at their starting size by React; after that only GSAP changes them const startActive = useRef(defaultActive); const started = useRef(false); // When the defaultActive prop changes on a live strip (the playground does this), follow it const [seenDefault, setSeenDefault] = useState(defaultActive); if (seenDefault !== defaultActive) { setSeenDefault(defaultActive); setActive(defaultActive); } const open = (index: number) => { if (index === active) return; setActive(index); onChange?.(index); }; useGSAP( () => { const buttons = buttonRefs.current.slice(0, panels.length).filter((button): button is HTMLButtonElement => button !== null); if (buttons.length === 0) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // The first run only places things, so the page doesn't open with an animation nobody asked for const time = started.current && !reduced ? duration : 0; started.current = true; const isOpen = (i: number) => i === active; gsap.to(buttons, { flexGrow: (i: number) => (isOpen(i) ? expandedRatio : 1), duration: time, ease, overwrite: "auto" }); // The photo eases from a slight zoom to rest, and closed strips are dimmed gsap.to(buttons.map((b) => b.querySelector("[data-photo]")), { scale: (i: number) => (isOpen(i) ? 1 : 1.12), duration: time * 1.1, ease, overwrite: "auto" }); gsap.to(buttons.map((b) => b.querySelector("[data-shade]")), { opacity: (i: number) => (isOpen(i) ? 0 : 0.45), duration: time, ease: "power2.out", overwrite: "auto" }); // The title slides up into view only on the open strip; on the others it fades out quickly const titles = buttons.map((b) => b.querySelector("[data-title]")); gsap.to(titles, { opacity: (i: number) => (isOpen(i) ? 1 : 0), y: (i: number) => (isOpen(i) || reduced ? 0 : 18), duration: time * 0.6, delay: (i: number) => (isOpen(i) && time > 0 ? 0.12 : 0), ease: "power3.out", overwrite: "auto", }); }, { scope: listRef, dependencies: [active, panels.length, expandedRatio, duration, ease] }, ); // Arrow keys walk along the strips, and landing on one opens it (focus opens) const onKeyDown = (event: KeyboardEvent) => { const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"]; if (!keys.includes(event.key)) return; const current = buttonRefs.current.findIndex((button) => button === document.activeElement); if (current === -1) return; event.preventDefault(); const last = panels.length - 1; const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowRight" || event.key === "ArrowDown" ? Math.min(last, current + 1) : Math.max(0, current - 1); buttonRefs.current[next]?.focus(); }; const direction = orientation === "vertical" ? "flex-col" : orientation === "horizontal" ? "flex-row" : "flex-row @max-2xl:flex-col"; return (

resetOnLeave && open(defaultActive)} className={`flex h-full w-full ${direction}`} style={{ gap }} > {panels.map((panel, index) => ( ))}

); } 4f:["$","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",{"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"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","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/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/expandable-panel/expandable-panel.tsx","content":"$52","type":"registry:component","target":"components/dimaac/expandable-panel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]