"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "@kineticui/icons"; export type DateRange = { from?: Date; to?: Date }; const sameDay = (a?: Date, b?: Date) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()); const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); type CalendarBase = { /** Month shown first. */ defaultMonth?: Date; /** 0 = Sunday, 1 = Monday. */ weekStartsOn?: 0 | 1; /** Return true to disable a day. */ disabled?: (date: Date) => boolean; locale?: string; className?: string; }; export type CalendarProps = | (CalendarBase & { mode?: "single"; selected?: Date; onSelect?: (date: Date) => void }) | (CalendarBase & { mode: "range"; selected?: DateRange; onSelect?: (range: DateRange) => void }); /** Month grid with single or range selection and full keyboard support. No date library needed. */ export function Calendar(props: CalendarProps) { const { weekStartsOn = 0, disabled, locale = "en-US", className } = props; const initial = props.defaultMonth ?? (props.mode === "range" ? props.selected?.from : props.selected) ?? new Date(); const [month, setMonth] = React.useState(new Date(initial.getFullYear(), initial.getMonth(), 1)); const [focus, setFocus] = React.useState(startOfDay(initial)); const [hover, setHover] = React.useState(); const gridRef = React.useRef(null); const today = startOfDay(new Date()); const days = React.useMemo(() => { const first = new Date(month.getFullYear(), month.getMonth(), 1); const offset = (first.getDay() - weekStartsOn + 7) % 7; return Array.from({ length: 42 }, (_, i) => addDays(first, i - offset)); }, [month, weekStartsOn]); const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + i + weekStartsOn)).slice(0, 2), ); const range = props.mode === "range" ? props.selected ?? {} : undefined; const choose = (d: Date) => { if (disabled?.(d)) return; if (props.mode === "range") { const r = props.selected ?? {}; if (!r.from || (r.from && r.to) || d < r.from) props.onSelect?.({ from: d, to: undefined }); else props.onSelect?.({ from: r.from, to: d }); } else props.onSelect?.(d); }; const moveFocus = (d: Date) => { setFocus(d); if (d.getMonth() !== month.getMonth()) setMonth(new Date(d.getFullYear(), d.getMonth(), 1)); requestAnimationFrame(() => gridRef.current?.querySelector('[data-focus="true"]')?.focus()); }; const inRange = (d: Date) => { if (!range?.from) return false; const end = range.to ?? hover; if (!end) return false; const [a, b] = range.from <= end ? [range.from, end] : [end, range.from]; return d > a && d < b; }; return (

{new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month)}

setHover(undefined)}> {weekdays.map((w) => ( {w} ))} {days.map((d) => { const outside = d.getMonth() !== month.getMonth(); const isDisabled = disabled?.(d) ?? false; const selectedSingle = props.mode !== "range" && sameDay(d, props.selected as Date | undefined); const edge = range && (sameDay(d, range.from) || sameDay(d, range.to)); const mid = range && inRange(d); const isFocus = sameDay(d, focus); return ( ); })}

); } const fmt = (d: Date | undefined, locale: string) => d ? new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" }).format(d) : ""; const triggerClass = "flex h-11 w-full items-center gap-2.5 rounded-xl border border-border bg-background px-3.5 text-left text-sm text-foreground outline-none transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:shadow-[0_0_0_4px_var(--kn-ring)] data-[state=open]:border-accent"; export type DatePickerProps = { value?: Date; onValueChange?: (date: Date) => void; placeholder?: string; disabled?: (date: Date) => boolean; locale?: string; className?: string; }; /** Button that opens a Calendar in a popover. */ export function DatePicker({ value, onValueChange, placeholder = "Pick a date", disabled, locale = "en-US", className }: DatePickerProps) { const [open, setOpen] = React.useState(false); const [internal, setInternal] = React.useState(value); const selected = value ?? internal; return ( {selected ? fmt(selected, locale) : placeholder} { setInternal(d); onValueChange?.(d); setOpen(false); }} /> ); } export type DateRangePickerProps = { value?: DateRange; onValueChange?: (range: DateRange) => void; placeholder?: string; /** Quick ranges shown above the calendar. Defaults to 7/30/90 days. */ presets?: { label: string; range: () => DateRange }[]; locale?: string; className?: string; }; const defaultPresets = [ { label: "Last 7 days", range: () => ({ from: addDays(startOfDay(new Date()), -6), to: startOfDay(new Date()) }) }, { label: "Last 30 days", range: () => ({ from: addDays(startOfDay(new Date()), -29), to: startOfDay(new Date()) }) }, { label: "Last 90 days", range: () => ({ from: addDays(startOfDay(new Date()), -89), to: startOfDay(new Date()) }) }, ]; /** Range picker with presets. */ export function DateRangePicker({ value, onValueChange, placeholder = "Select dates", presets = defaultPresets, locale = "en-US", className }: DateRangePickerProps) { const [open, setOpen] = React.useState(false); const [internal, setInternal] = React.useState(value ?? {}); const range = value ?? internal; const set = (r: DateRange) => { setInternal(r); onValueChange?.(r); if (r.from && r.to) setTimeout(() => setOpen(false), 150); }; return ( {range.from ? `${fmt(range.from, locale)} – ${range.to ? fmt(range.to, locale) : "…"}` : placeholder}

{presets.map((p) => ( ))}

); }

Calendar & Date Pickers

Installation

Exports