62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T55da,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Range = { start: string; end: string }; type Compare = "none" | "previous" | "year"; export interface DateRangeValue extends Range { compare: Compare; } export interface DateRangePickerPresetsProps { today?: string; defaultValue?: DateRangeValue; defaultOpen?: boolean; onApply?: (value: DateRangeValue & { compareRange: Range | null }) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.32)", panel: "#141414", side: "#101010", border: "rgba(255,255,255,0.09)", band: "rgba(96,165,250,0.16)", edge: "#60A5FA", edgeText: "#0A0A0A", cmp: "rgba(251,191,36,0.55)", hover: "rgba(255,255,255,0.06)", on: "#F5F4F1", onText: "#0A0A0A", red: "#F87171", green: "#4ADE80", ring: "rgba(245,244,241,0.6)", input: "#0D0D0D" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.32)", panel: "#FFFFFF", side: "#FAFAF8", border: "rgba(10,10,10,0.09)", band: "rgba(37,99,235,0.1)", edge: "#2563EB", edgeText: "#FFFFFF", cmp: "rgba(180,83,9,0.55)", hover: "rgba(10,10,10,0.05)", on: "#0A0A0A", onText: "#FAFAF8", red: "#DC2626", green: "#15803D", ring: "rgba(10,10,10,0.5)", input: "#FAFAF8" }, }; const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const DOW = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]; const toD = (s: string) => { const [y, m, d] = s.split("-").map(Number); return new Date(Date.UTC(y, m - 1, d)); }; const fmt = (d: Date) => d.toISOString().slice(0, 10); const add = (s: string, n: number) => fmt(new Date(toD(s).getTime() + n * 864e5)); const diff = (a: string, b: string) => Math.round((toD(b).getTime() - toD(a).getTime()) / 864e5); const firstOf = (s: string, offset = 0) => { const d = toD(s); return fmt(new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + offset, 1))); }; const lastOf = (s: string) => add(firstOf(s, 1), -1); const short = (s: string, year = false) => { const d = toD(s); return `${MONTHS[d.getUTCMonth()].slice(0, 3)} ${d.getUTCDate()}${year ? `, ${d.getUTCFullYear()}` : ""}`; }; const label = (r: Range) => (r.start === r.end ? short(r.start, true) : `${short(r.start, toD(r.start).getUTCFullYear() !== toD(r.end).getUTCFullYear())} – ${short(r.end, true)}`); const shiftYear = (s: string, n: number) => { const d = toD(s); return fmt(new Date(Date.UTC(d.getUTCFullYear() + n, d.getUTCMonth(), d.getUTCDate()))); }; const ISO = /^\d{4}-\d{2}-\d{2}$/; const parse = (text: string) => { const t = text.trim(); if (ISO.test(t) && !Number.isNaN(toD(t).getTime()) && fmt(toD(t)) === t) return t; const m = t.match(/^([A-Za-z]{3})[a-z]*\s+(\d{1,2}),?\s*(\d{4})$/); if (!m) return null; const mi = MONTHS.findIndex((x) => x.slice(0, 3).toLowerCase() === m[1].toLowerCase()); if (mi < 0) return null; const d = new Date(Date.UTC(Number(m[3]), mi, Number(m[2]))); return d.getUTCMonth() === mi ? fmt(d) : null; }; export function DateRangePickerPresets({ today = "2026-11-12", defaultValue, defaultOpen = true, onApply, theme = "dark", className }: DateRangePickerPresetsProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const presets = React.useMemo( () => [ { id: "today", label: "Today", range: { start: today, end: today } }, { id: "7d", label: "Last 7 days", range: { start: add(today, -6), end: today } }, { id: "30d", label: "Last 30 days", range: { start: add(today, -29), end: today } }, { id: "month", label: "This month", range: { start: firstOf(today), end: today } }, { id: "lastmonth", label: "Last month", range: { start: firstOf(today, -1), end: lastOf(firstOf(today, -1)) } }, { id: "90d", label: "Last 90 days", range: { start: add(today, -89), end: today } }, { id: "ytd", label: "Year to date", range: { start: `${today.slice(0, 4)}-01-01`, end: today } }, ], [today], ); const initial: DateRangeValue = defaultValue ?? { ...presets[2].range, compare: "previous" }; const [applied, setApplied] = React.useState(initial); const [draft, setDraft] = React.useState(initial); const [anchor, setAnchor] = React.useState(null); // first click of a new range const [hover, setHover] = React.useState(null); const [focusDay, setFocusDay] = React.useState(initial.end); const [month, setMonth] = React.useState(firstOf(initial.end, -1)); // left month const [open, setOpen] = React.useState(defaultOpen); const [texts, setTexts] = React.useState({ start: short(initial.start, true), end: short(initial.end, true) }); const gridRef = React.useRef(null); const rootRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false); const onDown = (e: PointerEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false); document.addEventListener("keydown", onKey); document.addEventListener("pointerdown", onDown); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("pointerdown", onDown); }; }, [open]); // While picking, the band previews from the anchor to the hovered day. const view: Range = anchor ? (hover ? (hover < anchor ? { start: hover, end: anchor } : { start: anchor, end: hover }) : { start: anchor, end: anchor }) : draft; const len = diff(view.start, view.end) + 1; const cmpOf = (r: Range, c: Compare): Range | null => (c === "previous" ? { start: add(r.start, -(diff(r.start, r.end) + 1)), end: add(r.start, -1) } : c === "year" ? { start: shiftYear(r.start, -1), end: shiftYear(r.end, -1) } : null); const cmp = cmpOf(view, draft.compare); const activePreset = presets.find((x) => x.range.start === draft.start && x.range.end === draft.end)?.id; const setRange = (r: Range) => { setDraft((d) => ({ ...d, ...r })); setTexts({ start: short(r.start, true), end: short(r.end, true) }); }; const pickDay = (d: string) => { if (d > today) return; setFocusDay(d); if (!anchor) { setAnchor(d); setHover(d); } else { setRange(d < anchor ? { start: d, end: anchor } : { start: anchor, end: d }); setAnchor(null); setHover(null); } }; const choosePreset = (r: Range) => { setAnchor(null); setHover(null); setRange(r); setMonth(firstOf(r.end, -1)); setFocusDay(r.end); }; const commitText = (k: "start" | "end") => { const v = parse(texts[k]); if (!v || v > today) return; const r = { ...draft, [k]: v }; if (r.start > r.end) return; setRange(r); setMonth(firstOf(r[k], k === "end" ? -1 : 0)); }; const onGridKey = (e: React.KeyboardEvent) => { const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key]; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); pickDay(focusDay); return; } if (!step) return; e.preventDefault(); const nd = add(focusDay, step); setFocusDay(nd); if (anchor) setHover(nd); if (nd < month) setMonth(firstOf(nd)); else if (nd > lastOf(firstOf(month, 1))) setMonth(firstOf(nd, -1)); requestAnimationFrame(() => gridRef.current?.querySelector(`[data-day="${nd}"]`)?.focus()); }; const apply = () => { if (anchor) return; setApplied(draft); setOpen(false); onApply?.({ ...draft, compareRange: cmpOf(draft, draft.compare) }); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const btn = cn("flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus); const monthGrid = (m: string, idx: number) => { const start = add(m, -((toD(m).getUTCDay() + 6) % 7)); const days = Array.from({ length: 42 }, (_, i) => add(start, i)); return (

{MONTHS[toD(m).getUTCMonth()]} {toD(m).getUTCFullYear()}

{DOW.map((d) => ( {d} ))}

{days.map((d) => { const inMonth = d.slice(0, 7) === m.slice(0, 7); if (!inMonth) return ; const inBand = d >= view.start && d <= view.end; const isEdge = d === view.start || d === view.end; const inCmp = cmp && d >= cmp.start && d <= cmp.end; const future = d > today; const col = (toD(d).getUTCDay() + 6) % 7; return (

{inBand && } {inCmp && }

); })}

); }; // Demo numbers that follow the applied range const seed = diff("2026-01-01", applied.end) + diff(applied.start, applied.end) * 7; const value = Math.round((diff(applied.start, applied.end) + 1) * (2480 + (seed % 37) * 9)); const cmpValue = Math.round(value * (0.82 + (seed % 11) / 100)); const change = ((value - cmpValue) / cmpValue) * 100; const appliedCmp = cmpOf(applied, applied.compare); return (

Revenue

${value.toLocaleString("en-US")} {appliedCmp && ( = 0 ? p.green : p.red }}> {change >= 0 ? "+" : ""} {change.toFixed(1)}% vs {applied.compare === "year" ? "last year" : "previous period"} )}

{open && ( )}

{/* A simple chart that follows the applied range */}

); } export default DateRangePickerPresets; 61:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/date-range-picker-presets/date-range-picker-presets.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]