Calendar
A date picker component.
Installation
npx @rahimstack@latest add calendar
API Reference
const CalendarAnatomy = defineStyleAnatomy({
root: cva([
"UI-Calendar__root",
"p-3",
]),
months: cva([
"UI-Calendar__months",
"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
]),
month: cva([
"UI-Calendar__month",
"space-y-4",
]),
caption: cva([
"UI-Calendar__caption",
"flex justify-center pt-1 relative items-center",
]),
captionLabel: cva([
"UI-Calendar__captionLabel",
"text-sm font-medium",
]),
nav: cva([
"UI-Calendar__nav",
"space-x-1 flex items-center",
]),
navButton: cva([
"UI-Calendar__navButton",
]),
navButtonPrevious: cva([
"UI-Calendar__navButtonPrevious",
"absolute left-1",
]),
navButtonNext: cva([
"UI-Calendar__navButtonNext",
"absolute right-1",
]),
table: cva([
"UI-Calendar__table",
"w-full border-collapse space-y-1",
]),
headRow: cva([
"UI-Calendar__headRow",
"flex",
]),
headCell: cva([
"UI-Calendar__headCell",
"text-[--muted] rounded-[--radius] w-9 font-normal text-[0.8rem]",
]),
row: cva([
"UI-Calendar__row",
"flex w-full mt-2",
]),
cell: cva([
"UI-Calendar__cell",
"h-9 w-9 text-center text-sm p-0 relative",
"[&:has([aria-selected].day-range-end)]:rounded-r-[--radius]",
"[&:has([aria-selected].day-outside)]:bg-[--subtle]/50",
"[&:has([aria-selected])]:bg-[--subtle]",
"first:[&:has([aria-selected])]:rounded-l-[--radius]",
"last:[&:has([aria-selected])]:rounded-r-[--radius]",
"focus-within:relative focus-within:z-20",
]),
day: cva([
"UI-Calendar__day",
"h-9 w-9 p-0 font-normal aria-selected:opacity-100",
]),
dayRangeEnd: cva([
"UI-Calendar__dayRangeEnd",
"day-range-end",
]),
daySelected: cva([
"UI-Calendar__daySelected",
"bg-brand text-white hover:bg-brand hover:text-white",
"focus:bg-brand focus:text-white rounded-[--radius] font-semibold",
]),
dayToday: cva([
"UI-Calendar__dayToday",
"bg-[--subtle] text-[--foreground] rounded-[--radius]",
]),
dayOutside: cva([
"UI-Calendar__dayOutside",
"day-outside !text-[--muted] opacity-20",
"aria-selected:bg-transparent",
"aria-selected:opacity-30",
]),
dayDisabled: cva([
"UI-Calendar__dayDisabled",
"text-[--muted] opacity-30",
]),
dayRangeMiddle: cva([
"UI-Calendar__dayRangeMiddle",
"aria-selected:bg-[--subtle]",
"aria-selected:text-[--foreground]",
]),
dayHidden: cva([
"UI-Calendar__dayHidden",
"invisible",
]),
})