{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"focus-stack","type":"registry:component","title":"Focus Stack","description":"Overlapping items where the selection comes forward — context stays behind.","dependencies":[],"categories":["media","stack","queue","keyboard","cards"],"files":[{"path":"components/lab/focus-stack/focus-stack.tsx","target":"components/lab/focus-stack/focus-stack.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n useId,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport \"./focus-stack.css\";\n\nexport type StackItem = {\n id: string;\n title: string;\n meta?: string;\n content: ReactNode;\n};\n\nexport type FocusStackProps = {\n items: StackItem[];\n /** Controlled selection; omit to let the stack select itself. */\n index?: number;\n onIndexChange?: (index: number) => void;\n /** Initial selection in uncontrolled use. */\n defaultIndex?: number;\n /** Depth offset in pixels between stacked items. */\n spread?: number;\n /** A slight fan rotation for physical stacks. */\n rotate?: boolean;\n className?: string;\n};\n\nconst SCALE_STEP = 0.045;\nconst MAX_ROTATION = 1.2;\nconst MIN_OPACITY = 0.55;\n\n/**\n * FOCUS STACK — a queue that keeps its context visible.\n *\n * The active card owns the flow, so the container height is the card the\n * reader is looking at. The other cards sit behind it, fanned by\n * distance: items before the active one lift upward, items after it drop\n * downward, both scaling and fading with depth. Only the active panel is\n * rendered visibly — the rest are `hidden`, so assistive technology sees\n * exactly one tabpanel. Arrow keys, Home and End move selection; the tab\n * row is a single tab stop.\n */\nexport function FocusStack({\n items,\n index,\n onIndexChange,\n defaultIndex = 0,\n spread = 34,\n rotate = false,\n className,\n}: FocusStackProps) {\n const isControlled = index !== undefined;\n const [internal, setInternal] = useState(defaultIndex);\n const count = items.length;\n const raw = isControlled ? index : internal;\n const active = count === 0 ? 0 : Math.max(0, Math.min(raw, count - 1));\n\n const uid = useId();\n const tabRefs = useRef>([]);\n\n /* Uncontrolled selection follows the items when the host slices them. */\n if (!isControlled && count > 0 && internal > count - 1) {\n setInternal(count - 1);\n }\n\n const select = (next: number) => {\n if (count === 0) return;\n const clamped = Math.max(0, Math.min(next, count - 1));\n if (clamped === active) return;\n if (!isControlled) setInternal(clamped);\n onIndexChange?.(clamped);\n };\n\n const focusAndSelect = (next: number) => {\n if (count === 0) return;\n const wrapped = ((next % count) + count) % count;\n select(wrapped);\n tabRefs.current[wrapped]?.focus();\n };\n\n const onTablistKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n event.preventDefault();\n focusAndSelect(active - 1);\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n event.preventDefault();\n focusAndSelect(active + 1);\n break;\n case \"Home\":\n event.preventDefault();\n focusAndSelect(0);\n break;\n case \"End\":\n event.preventDefault();\n focusAndSelect(count - 1);\n break;\n default:\n break;\n }\n };\n\n if (count === 0) return null;\n\n return (\n 1 ? \"true\" : \"false\"}\n style={{ \"--fs-spread\": `${spread}px` } as CSSProperties}\n >\n \n {items.map((item, i) => (\n {\n tabRefs.current[i] = node;\n }}\n type=\"button\"\n role=\"tab\"\n id={`${uid}-tab-${i}`}\n className=\"fs-tab\"\n aria-selected={i === active}\n aria-controls={`${uid}-panel-${i}`}\n tabIndex={i === active ? 0 : -1}\n onClick={() => select(i)}\n >\n {item.title}\n {item.meta ? {item.meta} : null}\n \n ))}\n \n\n
\n {items.map((item, i) => {\n const depth = i - active;\n const isActive = depth === 0;\n const distance = Math.abs(depth);\n const scale = 1 - SCALE_STEP * distance;\n const backStyle: CSSProperties = {\n transform: `translateY(${spread * depth}px) scale(${scale}) rotate(${\n rotate ? (depth < 0 ? -MAX_ROTATION : MAX_ROTATION) : 0\n }deg)`,\n opacity: Math.max(MIN_OPACITY, 1 - 0.1 * distance),\n zIndex: count + 1 - distance,\n };\n return (\n \n {!isActive ? (\n 0 ? \"fs-peek--bottom\" : \"fs-peek--top\"\n }`}\n >\n {item.title}\n {item.meta ? (\n {item.meta}\n ) : null}\n
\n ) : null}\n