Folder
A file folder that opens to reveal its documents, with a real disclosure tab and focusable contents.
Design files
The tab is a disclosure button. The documents inside only take focus while the folder is open.
No document has been chosen yet.
Implementation
1"use client";2 3import {4 useId,5 useState,6 type CSSProperties,7 type HTMLAttributes,8 type KeyboardEvent as ReactKeyboardEvent,9} from "react";10 11export type FolderTone = "paper" | "ink" | "accent" | "wash";12 13export type FolderItem = {14 id: string;15 title: string;16 meta?: string;17 tone?: FolderTone;18};19 20export type FolderProps = Omit<21 HTMLAttributes<HTMLDivElement>,22 "children" | "onChange" | "onSelect"23> & {24 /** The folder name, shown on the tab and in the accessible name. */25 name: string;26 /** The documents inside the folder. */27 items: readonly FolderItem[];28 /** Controlled open state. */