{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pagination-dog-ear", "title": "Pagination Dog Ear", "description": "A pagination control rendered as book folios: paper cards for each page number, a raised current page, and a CSS corner dog-ear that curls further as you hover prev/next to peek the destination number, leaving a small permanent crease on every page you've visited.", "dependencies": [], "files": [ { "path": "registry/core/pagination-dog-ear/component.tsx", "content": "\"use client\";\n\nimport { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\n\n// ---------------------------------------------------------------------------\n// FolioTurn — pagination rendered as a row of book folios instead of bare\n// numbers. Every button is a paper \"card\"; the current one sits 1px raised\n// with a soft shadow. Each card carries a corner dog-ear built from the\n// classic CSS border-triangle technique (an element with all size in\n// border-width and only two adjacent border colors opaque) so it costs no\n// extra markup layer — just a --curl custom property driving border-width.\n//\n// Three distinct curl behaviors, all on that same triangle:\n// - hovering ANY page number: its own corner dog-ear grows a few px and\n// its ink darkens (a light \"this is interactive\" tell).\n// - hovering prev/next: the CURRENT page's corner grows further and a\n// small preview of the destination number fades in beside it — you're\n// peeking at what prev/next would turn to, not what you're hovering.\n// - completing a turn (the `page` prop actually changes, from any\n// trigger): the outgoing page's corner grows the rest of the way while\n// the card itself gets a brief eased tilt+fade, then the new current\n// page settles into its raised resting state. A once-visited page\n// keeps a small permanent crease (a second, smaller, static triangle)\n// forever after.\n//\n// Keyboard is a roving-tabindex toolbar (prev, every page number, next, all\n// one tab stop): ArrowLeft/ArrowRight move focus by one among the ENABLED\n// controls, Home/End jump to the first/last, matching the roving pattern\n// used elsewhere in this registry (dropdown-drape, accordion-latch) rather than a\n// custom listbox. Enter/Space activate the focused control natively.\n// `