Pagination & Progress
Two ways of saying where you are. Pagination pages through explorer history — first and last always reachable, ellipses collapsing the middle, the active pill gliding between numbers. Progress reports work with an end: block scans, backups, sync.
Pagination — range states
First page disables prev; last page disables next; deep middles grow gaps on both sides; short sets show every number. All real props — the disabled chevrons are genuine.
The :hover tint pinned onto page 2 via a scoped selector.
The global focus outline pinned onto page 2.
import { Pagination } from "@coldharbor/ui";
<Pagination
page={page}
pageCount={24}
onPageChange={setPage}
siblingCount={1}
/>--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-fg-faint
Pagination — live
Click numbers: the active pill glides between them through a shared-layout spring (instant under reduced motion).
Showing transactions 76–100 of 600
<Pagination page={page} pageCount={24} onPageChange={setPage} />--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-fg-faint
Progress — values & sizes
A number renders a determinate fill; omitting the value renders the indeterminate sweep (a calm opacity pulse under reduced motion). Sizes: sm 4px hairline, md 8px default.
No value — unknown remaining work.
import { Progress } from "@coldharbor/ui";
<Progress value={scanned} max={84_120} label="Scanning blocks" />
<Progress label="Connecting to node" /> {/* indeterminate */}--ch-primary--ch-bg-raised
Progress — live
A determinate scan advancing in steps; the fill glides to each new value on the house spring.
18,450 / 84,120 blocks scanned
<Progress value={scannedBlocks} max={totalBlocks} label="Scanning blocks" />--ch-primary--ch-bg-raised
Themes
Mid-range pagination and a 67% bar under all three layers.
--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-fg-faint--ch-primary--ch-bg-raised