Date Picker

pnpm add @tessinaui/ui react-day-picker

import { DatePicker, createRangePresets } from "@tessinaui/ui";

{/* Single date */}
<DatePicker mode="single" selected={date} onSelect={setDate} />

{/* Date + time range with Apply button */}
<DatePicker
  mode="range"
  selected={range}
  onSelect={setRange}
  showDateTime
  showTimezone
  onApply={({ start, startTime, end, endTime }) => console.log({ start, startTime, end, endTime })}
/>

{/* Date range with presets sidebar */}
<DatePicker
  mode="range"
  selected={range}
  onSelect={setRange}
  presets={createRangePresets()}
  presetsPosition="left"
  numberOfMonths={2}
/>

interface DateTimeApplyData {
  start?: Date;
  startTime?: string; // "HH:MM"
  end?: Date;
  endTime?: string;   // "HH:MM"
}

interface PresetItem {
  label: string;
  getValue: () => Date | DateRange;
}

import { createSinglePresets, createRangePresets } from "@tessinaui/ui";

// Single: Today, Yesterday, Last week
const singlePresets = createSinglePresets();

// Range: Today, Yesterday, Last 7 days, Last 30 days, Last 3 months
const rangePresets = createRangePresets();

import type { DateRange } from "@tessinaui/ui";

interface DateRange {
  from: Date | undefined;
  to?: Date | undefined;
}