50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2426,"use client"; import type { ComponentProps } from "react"; import { useState } from "react"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; export interface DateRange { from: Date; to: Date; } export interface DateRangePreset { label: string; /** Days back from today, inclusive. */ days: number; } export type DateRangePickerProps = Omit< ComponentProps<"button">, "value" | "onChange" > & { value: DateRange; onValueChange: (range: DateRange) => void; /** Quick ranges in the popup rail. */ presets?: DateRangePreset[]; /** Days after today stay unselectable. */ disableFuture?: boolean; }; /* ───────────────────────────────────────────────────────── * PICKER STORYBOARD * * trigger a mono pill reading the range ("Jul 1 – Jul * 18"); hover warms the hairline * open the panel rises 4px: preset rail on the * left, one month grid on the right * pick first click plants the start (square primary * marker); the tentative range washes * primary/10 under the pointer as it moves; * the second click lands the end and closes * presets one click, done — the rail is the fast path * today wears a hairline ring, never color * motion the month swaps with a 150ms crossfade; * everything static under reduced motion * ───────────────────────────────────────────────────────── */ const WEEKDAYS = ["mo", "tu", "we", "th", "fr", "sa", "su"] as const; const MONTH_LABEL = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric", }); const RANGE_LABEL = new Intl.DateTimeFormat("en-US", { day: "numeric", month: "short", }); const DEFAULT_PRESETS: DateRangePreset[] = [ { days: 7, label: "last 7 days" }, { days: 14, label: "last 14 days" }, { days: 30, label: "last 30 days" }, ]; const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()); const sameDay = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const formatRange = (range: DateRange) => `${RANGE_LABEL.format(range.from)} – ${RANGE_LABEL.format(range.to)}`; /** The 42 cells of a month view, Monday-first. */ export const monthCells = (month: Date): Date[] => { const year = month.getFullYear(); const monthIndex = month.getMonth(); const first = new Date(year, monthIndex, 1); const lead = (first.getDay() + 6) % 7; return Array.from( { length: 42 }, (_, index) => new Date(year, monthIndex, 1 - lead + index) ); }; const dayState = ( day: Date, range: { from: Date; to: Date | null }, hovered: Date | null ) => { const from = startOfDay(range.from); const to = range.to ? startOfDay(range.to) : null; const isStart = sameDay(day, from); const isEnd = to ? sameDay(day, to) : false; // A landed range, or the tentative wash toward the pointer. const end = to ?? hovered; let inRange = false; if (end) { const [lo, hi] = end.getTime() < from.getTime() ? [end, from] : [from, end]; inRange = day.getTime() > lo.getTime() && day.getTime() < hi.getTime(); } return { inRange, isEnd: isEnd || (!to && hovered && sameDay(day, hovered)), isStart, }; }; export const DateRangePicker = ({ className, disableFuture = true, onValueChange, presets = DEFAULT_PRESETS, value, ...props }: DateRangePickerProps) => { const [open, setOpen] = useState(false); const [month, setMonth] = useState(() => startOfDay(value.from)); const [pending, setPending] = useState(null); const [hovered, setHovered] = useState(null); const today = startOfDay(new Date()); const range = pending ? { from: pending, to: null } : { from: value.from, to: value.to }; const landRange = (from: Date, to: Date) => { const [lo, hi] = to.getTime() < from.getTime() ? [to, from] : [from, to]; onValueChange({ from: lo, to: hi }); setPending(null); setHovered(null); setOpen(false); }; const pickDay = (day: Date) => { if (pending) { landRange(pending, day); return; } setPending(day); }; const pickPreset = (preset: DateRangePreset) => { const from = new Date( today.getFullYear(), today.getMonth(), today.getDate() - (preset.days - 1) ); landRange(from, today); }; const handleOpenChange = (next: boolean) => { if (next) { setMonth(startOfDay(value.from)); } else { setPending(null); setHovered(null); } setOpen(next); }; return ( {formatRange(value)}

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

{MONTH_LABEL.format(month).toLowerCase()}

{WEEKDAYS.map((weekday) => ( {weekday} ))} {monthCells(month).map((day) => { const outside = day.getMonth() !== month.getMonth(); const future = disableFuture && day.getTime() > today.getTime(); const { inRange, isEnd, isStart } = dayState(day, range, hovered); return ( ); })}

); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/popover.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/date-range-picker/date-range-picker.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]