Accordion gallery
A row of material panels where one expands and the rest compress, driven by hover, click, or arrow keys.
Study accordion
Point at a panel, click it, or use the arrow keys. One panel holds the space and carries the note; the rest keep their titles.
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type KeyboardEvent as ReactKeyboardEvent,11} from "react";12 13export type AccordionGalleryTone = "paper" | "ink" | "accent" | "wash";14export type AccordionGalleryShape = "circle" | "bar" | "arch" | "tile";15 16export type AccordionGalleryItem = {17 id: string;18 title: string;19 meta: string;20 description: string;21 tone?: AccordionGalleryTone;22 shape?: AccordionGalleryShape;23};24 25export type AccordionGalleryProps = Omit<26 HTMLAttributes<HTMLUListElement>,27 "children" | "onChange"28> & {