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, accessible labels, matching disabled styles).
<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 onClick={prev} />
<PeriodStepperLabel>{label}</PeriodStepperLabel>
<PeriodStepperButtonNext 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 accept any Button props except variant, size, and children.