DateRangePicker

1"use client";
2 
3import type { ComponentProps } from "react";
4import { useState } from "react";
5 
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover";
11import { cn } from "@/lib/utils";
12 
13export interface DateRange {
14  from: Date;
15  to: Date;
16}
17 
18export interface DateRangePreset {
19  label: string;
20  /** Days back from today, inclusive. */
21  days: number;
22}
23 
24export type DateRangePickerProps = Omit<
25  ComponentProps<"button">,
26  "value" | "onChange"
27> & {
28  value: DateRange;
29  onValueChange: (range: DateRange) => void;
30  /** Quick ranges in the popup rail. */
31  presets?: DateRangePreset[];
32  /** Days after today stay unselectable. */
33  disableFuture?: boolean;
34};
35 
36/* ─────────────────────────────────────────────────────────
37 * PICKER STORYBOARD
38 *
39 *  trigger   a mono pill reading the range ("Jul 1 – Jul
40 *            18"); hover warms the hairline
41 *  open      the panel rises 4px: preset rail on the
42 *            left, one month grid on the right
43 *  pick      first click plants the start (square primary
44 *            marker); the tentative range washes
45 *            primary/10 under the pointer as it moves;
46 *            the second click lands the end and closes
47 *  presets   one click, done — the rail is the fast path
48 *  today     wears a hairline ring, never color
49 *  motion    the month swaps with a 150ms crossfade;
50 *            everything static under reduced motion
51 * ───────────────────────────────────────────────────────── */
52const WEEKDAYS = ["mo", "tu", "we", "th", "fr", "sa", "su"] as const;
53 
54const MONTH_LABEL = new Intl.DateTimeFormat("en-US", {
55  month: "long",
56  year: "numeric",
57});
58 
59const RANGE_LABEL = new Intl.DateTimeFormat("en-US", {
60  day: "numeric",
61  month: "short",
62});
63 
64const DEFAULT_PRESETS: DateRangePreset[] = [
65  { days: 7, label: "last 7 days" },
66  { days: 14, label: "last 14 days" },
67  { days: 30, label: "last 30 days" },
68];
69 
70const startOfDay = (date: Date) =>
71  new Date(date.getFullYear(), date.getMonth(), date.getDate());
72 
73const sameDay = (a: Date, b: Date) =>
74  a.getFullYear() === b.getFullYear() &&
75  a.getMonth() === b.getMonth() &&
76  a.getDate() === b.getDate();
77 
78const formatRange = (range: DateRange) =>
79// … truncated