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:T331a,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react"; import { cn } from "./lib/cn"; import { RollingValue } from "./rolling-value"; import "./shared/calendar-day.css"; import "./calendar.css"; const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; export function isoDate(year: number, month: number, day: number) { return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; } export function parseISODate(value: string) { const [year, month, day] = value.split("-").map(Number); return { year, month: month - 1, day }; } export function formatISODate(value: string) { const { year, month, day } = parseISODate(value); return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(year, month, day)); } export function shiftMonth(year: number, month: number, amount: number) { const date = new Date(year, month + amount, 1); return { year: date.getFullYear(), month: date.getMonth() }; } function monthName(year: number, month: number) { return new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(new Date(year, month, 1)); } function buildDays(year: number, month: number) { const first = new Date(year, month, 1).getDay(); const count = new Date(year, month + 1, 0).getDate(); const cells: { iso: string; day: number; outside: boolean }[] = []; for (let index = 0; index < first; index += 1) { const date = new Date(year, month, index - first + 1); cells.push({ iso: isoDate(date.getFullYear(), date.getMonth(), date.getDate()), day: date.getDate(), outside: true }); } for (let day = 1; day <= count; day += 1) cells.push({ iso: isoDate(year, month, day), day, outside: false }); while (cells.length % 7 !== 0) { const date = new Date(year, month + 1, cells.length - (first + count) + 1); cells.push({ iso: isoDate(date.getFullYear(), date.getMonth(), date.getDate()), day: date.getDate(), outside: true }); } return cells; } function addDays(iso: string, amount: number) { const { year, month, day } = parseISODate(iso); const date = new Date(year, month, day + amount); return isoDate(date.getFullYear(), date.getMonth(), date.getDate()); } function blocked(iso: string, min?: string, max?: string, disabledDates?: (iso: string) => boolean) { if (min && iso < min) return true; if (max && iso > max) return true; return disabledDates?.(iso) ?? false; } export function Calendar({ label, year, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onHover, min, max, disabledDates, disabledReason, marks, showToday = false, className, }: { label?: string; year?: number; month?: number; onMonthChange?: (year: number, month: number) => void; selected?: string | null; rangeStart?: string | null; rangeEnd?: string | null; onSelect?: (iso: string) => void; onHover?: (iso: string | null) => void; min?: string; max?: string; disabledDates?: (iso: string) => boolean; /** Read with an unavailable day, e.g. "banks closed". */ disabledReason?: (iso: string) => string | undefined; /** A quiet data mark under the day, e.g. invoices due; the label is read with the date. */ marks?: (iso: string) => string | undefined; showToday?: boolean; className?: string; }) { const initial = selected ? parseISODate(selected) : { year: 2026, month: 9 }; const [localYear, setLocalYear] = useState(initial.year); const [localMonth, setLocalMonth] = useState(initial.month); const [motion, setMotion] = useState<"next" | "prev">("next"); const [selectionMarks, setSelectionMarks] = useState>([]); const days = useRef(null); const pending = useRef(null); const viewYear = year ?? localYear; const viewMonth = month ?? localMonth; const cells = buildDays(viewYear, viewMonth); const today = isoDate(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); const prevMonth = shiftMonth(viewYear, viewMonth, -1); const following = shiftMonth(viewYear, viewMonth, 1); const prevDisabled = Boolean(min && isoDate(prevMonth.year, prevMonth.month, new Date(prevMonth.year, prevMonth.month + 1, 0).getDate()) < min); const nextDisabled = Boolean(max && isoDate(following.year, following.month, 1) > max); const start = rangeStart && rangeEnd && rangeStart > rangeEnd ? rangeEnd : rangeStart; const end = rangeStart && rangeEnd && rangeStart > rangeEnd ? rangeStart : rangeEnd; function setMonth(nextYear: number, nextMonth: number) { const forward = nextYear > viewYear || (nextYear === viewYear && nextMonth > viewMonth); setMotion(forward ? "next" : "prev"); if (onMonthChange) onMonthChange(nextYear, nextMonth); else { setLocalYear(nextYear); setLocalMonth(nextMonth); } } function focusIso(iso: string) { const parsed = parseISODate(iso); if (parsed.year !== viewYear || parsed.month !== viewMonth) { pending.current = iso; setMonth(parsed.year, parsed.month); return; } days.current?.querySelector(`[data-date="${iso}"]`)?.focus(); } function nearestOpen(iso: string, step: number) { let next = iso; for (let guard = 0; guard < 42 && blocked(next, min, max, disabledDates); guard += 1) next = addDays(next, step); return blocked(next, min, max, disabledDates) ? null : next; } function move(event: KeyboardEvent) { const current = (document.activeElement as HTMLElement | null)?.dataset.date; if (!current) return; const { year: y, month: m, day } = parseISODate(current); const weekday = new Date(y, m, day).getDay(); let step = 0; if (event.key === "ArrowRight") step = 1; else if (event.key === "ArrowLeft") step = -1; else if (event.key === "ArrowDown") step = 7; else if (event.key === "ArrowUp") step = -7; else if (event.key === "Home") step = -weekday; else if (event.key === "End") step = 6 - weekday; else if (event.key === "PageDown") step = event.shiftKey ? 365 : 30; else if (event.key === "PageUp") step = event.shiftKey ? -365 : -30; if (step === 0) return; event.preventDefault(); const next = nearestOpen(addDays(current, step), step > 0 ? 1 : -1); if (next) focusIso(next); } useEffect(() => { const iso = pending.current; if (!iso) return; const button = days.current?.querySelector(`[data-date="${iso}"]`); if (!button) return; pending.current = null; button.focus(); }, [viewYear, viewMonth, cells.length]); useLayoutEffect(() => { const root = days.current; if (!root) return; const ends = [selected, rangeStart, rangeEnd].filter((iso, index, list): iso is string => Boolean(iso) && list.indexOf(iso) === index); const next = ends.flatMap((iso) => { const node = root.querySelector(`[data-date="${iso}"]`); if (!node) return []; return [{ key: iso, x: node.offsetLeft, y: node.offsetTop, w: node.offsetWidth, h: node.offsetHeight }]; }); setSelectionMarks((current) => (current.length === next.length && current.every((mark, index) => mark.key === next[index]?.key && mark.x === next[index]?.x && mark.y === next[index]?.y) ? current : next)); }, [selected, rangeStart, rangeEnd, viewYear, viewMonth, cells.length]); return (

{monthName(viewYear, viewMonth)}

onHover?.(null)}>

{Array.from({ length: cells.length / 7 }, (_, week) => { const row = cells.slice(week * 7, week * 7 + 7); const first = row.findIndex((cell) => start && end && cell.iso >= start && cell.iso <= end); let last = -1; for (let index = row.length - 1; index >= 0; index -= 1) { const cell = row[index]; if (cell && start && end && cell.iso >= start && cell.iso <= end) { last = index; break; } } if (first < 0 || last < 0) return null; return ; })} {selectionMarks.map((mark) => ( ))} {cells.map((cell) => { const inRange = Boolean(start && end && cell.iso >= start && cell.iso <= end); const isSelected = cell.iso === selected || cell.iso === rangeStart || cell.iso === rangeEnd; const isDisabled = blocked(cell.iso, min, max, disabledDates); const mark = marks?.(cell.iso); const reason = isDisabled ? disabledReason?.(cell.iso) : undefined; const tabIso = selected && cells.some((item) => item.iso === selected) ? selected : cells.find((item) => !item.outside && !blocked(item.iso, min, max, disabledDates))?.iso; return ( ); })}

{showToday && ( )}

); } 53:T1260,"use client"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Calendar as CalendarIcon } from "lucide-react"; import { useId, useRef, useState } from "react"; import { Calendar, formatISODate, parseISODate } from "./calendar"; import { Label } from "./label"; import { RollingValue } from "./rolling-value"; import { cn } from "./lib/cn"; import "./shared/date-menu.css"; function DateParts({ value, direction }: { value: string; direction: "up" | "down" | "none" }) { const { year, month, day } = parseISODate(value); const monthLabel = new Intl.DateTimeFormat("en-US", { month: "short" }).format(new Date(year, month, day)); return ( ); } export function DatePicker({ label, value, defaultValue = null, onValueChange, min, max, showToday = true, name, disabled, className, }: { label: string; value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; min?: string; max?: string; showToday?: boolean; name?: string; disabled?: boolean; className?: string; }) { const fieldId = useId(); const root = useRef(null); const [local, setLocal] = useState(defaultValue); const [open, setOpen] = useState(false); const [direction, setDirection] = useState<"up" | "down" | "none">("none"); const current = value === undefined ? local : value; function choose(next: string) { if (current) setDirection(next > current ? "up" : "down"); if (value === undefined) setLocal(next); onValueChange?.(next); window.setTimeout(() => setOpen(false), 240); } function clear() { setDirection("none"); if (value === undefined) setLocal(null); onValueChange?.(null); setOpen(false); } return (

{label} { // Land on the chosen day (or the first day) rather than the first button. const target = (event.currentTarget as HTMLElement | null)?.querySelector(current ? `[data-date="${current}"]` : "[data-date]"); if (target) { event.preventDefault(); target.focus(); } }} > {current ? ( ) : null} {name ? : null}

); } 54:T6cf,/* Shared by calendar.tsx, returns-calendar.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Calendar: today gets an ember dot, data marks a quiet bar, unavailable days are struck through. */ [data-slot="calendar-day"][aria-current="date"] { font-weight: 600; } [data-slot="calendar-day"][aria-current="date"]::before { content: ""; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ring); } [data-slot="calendar-day"][data-mark]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: var(--border-strong); } [data-slot="calendar-day"][data-selected="true"]::after, [data-slot="calendar-day"][data-selected="true"]::before { background: var(--background); } [data-slot="calendar-day"][aria-disabled="true"] { text-decoration: line-through; } [data-slot="calendar-day"] { transition: background-color var(--duration-travel) var(--ease-showcase), color var(--duration-fast) var(--ease-out); } [data-slot="calendar-day"][data-selected="true"] { color: var(--background); } @media (prefers-reduced-motion: reduce) { [data-slot="calendar-day"] { transition: background-color 400ms var(--ease-showcase), color 120ms var(--ease-out); } [data-slot="calendar-day"][data-selected="true"] { animation: caliper-day-select 400ms var(--ease-showcase); } } [data-slot="calendar-day"] { font-size: 0.6875rem; color: var(--muted-foreground); } } 55:T558,/* calendar.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="calendar-grid"][data-motion="next"] { animation: caliper-calendar-next var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-grid"][data-motion="prev"] { animation: caliper-calendar-prev var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-range"] { position: absolute; z-index: 0; height: 2.25rem; border-radius: 999px; background: var(--muted); transition: left var(--duration-travel) var(--ease-showcase), width var(--duration-travel) var(--ease-showcase); } [data-slot="calendar-selection"] { position: absolute; z-index: 1; border-radius: var(--radius-control); background: var(--foreground); pointer-events: none; transition: transform var(--duration-travel) var(--ease-showcase), width var(--duration-travel) var(--ease-showcase), height var(--duration-travel) var(--ease-showcase); } @media (prefers-reduced-motion: reduce) { [data-slot="calendar-grid"][data-motion="next"] { animation: caliper-calendar-next 400ms var(--ease-showcase); } [data-slot="calendar-grid"][data-motion="prev"] { animation: caliper-calendar-prev 400ms var(--ease-showcase); } } } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","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":"@radix-ui/react-popover"}]]}]}],["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/calendar.tsx","content":"$52","type":"registry:ui","target":"components/ui/calendar.tsx"},{"path":"ui/date-picker.tsx","content":"$53","type":"registry:ui","target":"components/ui/date-picker.tsx"},{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/rolling-value.tsx","content":"\"use client\";\n\nimport { useState } from \"react\";\nimport \"./rolling-value.css\";\n\nexport function RollingValue({\n value,\n direction,\n}: {\n value: string;\n direction: \"up\" | \"down\" | \"none\";\n}) {\n const [frame, setFrame] = useState({ value, prior: value });\n if (frame.value !== value) setFrame({ value, prior: frame.value });\n const prior = frame.prior;\n const glyphs = [...value];\n\n return (\n \n {glyphs.map((glyph, index) => {\n const changed = prior.length !== glyphs.length || prior[index] !== glyph;\n return (\n \n \n {glyph === \" \" ? \"\\u00A0\" : glyph}\n \n \n );\n })}\n \n );\n}\n","type":"registry:ui","target":"components/ui/rolling-value.tsx"},{"path":"ui/shared/calendar-day.css","content":"$54","type":"registry:file","target":"components/ui/shared/calendar-day.css"},{"path":"ui/calendar.css","content":"$55","type":"registry:file","target":"components/ui/calendar.css"},{"path":"ui/shared/date-menu.css","content":"/* Shared by date-picker.tsx, date-range-picker.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"date-menu\"] {\n border: 1px solid var(--border);\n border-radius: var(--radius-overlay);\n transform-origin: top center;\n animation: caliper-menu-enter var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"date-menu\"] {\n animation: caliper-menu-enter 400ms var(--ease-showcase);\n }\n }\n}\n\n[data-slot=\"date-menu\"] {\n background-color: var(--elevated-glass);\n border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border));\n backdrop-filter: blur(var(--blur-overlay));\n box-shadow:\n var(--shadow-overlay),\n 0 0 40px var(--edge-glow),\n inset 0 1px 0 var(--edge-light);\n}\n","type":"registry:file","target":"components/ui/shared/date-menu.css"},{"path":"ui/rolling-value.css","content":"/* rolling-value.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down 400ms var(--ease-showcase);\n }\n }\n}\n\n@keyframes caliper-digit-down {\n from {\n transform: translateY(70%);\n }\n to {\n transform: translateY(0);\n }\n}\n","type":"registry:file","target":"components/ui/rolling-value.css"}],"className":"h-[70svh] min-h-80"}]]}]