Period Tabs
A tabs row stacked over a date stepper, for "day / week / month / year" period pickers.
Today
Usage
import {
PeriodStepper,
PeriodStepperButtonNext,
PeriodStepperButtonPrev,
PeriodStepperLabel,
PeriodTabs,
} from '@epilot/spark-ui/period-tabs'PeriodTabs is layout-only: bring your own <Tabs> for the period pills. The stepper parts wrap the <Button> component with sensible defaults (icon variant, matching disabled styles). Pass an explicit aria-label on each stepper button — there is no English default.
<PeriodTabs>
<Tabs value={period} onValueChange={setPeriod}>
<TabsList>
<TabsTrigger value="day">Day</TabsTrigger>
<TabsTrigger value="week">Week</TabsTrigger>
<TabsTrigger value="month">Month</TabsTrigger>
<TabsTrigger value="year">Year</TabsTrigger>
</TabsList>
</Tabs>
<PeriodStepper>
<PeriodStepperButtonPrev aria-label="Previous period" onClick={prev} />
<PeriodStepperLabel>{label}</PeriodStepperLabel>
<PeriodStepperButtonNext
aria-label="Next period"
onClick={next}
disabled={atEnd}
/>
</PeriodStepper>
</PeriodTabs>API Reference
PeriodStepperLabel reserves a min-w-40 so the stepper width doesn't jump when the label text changes (e.g. "May 2026" → "Q3 2026"). The stepper buttons require aria-label and accept any Button props except styleVariant, color, size, and children.