50: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"] 51:T1f55,"use client"; import * as React from "react"; export interface CalendarProps extends Omit, "onSelect" | "defaultValue"> { selected?: Date; onSelect?: (date: Date) => void; /** Month shown first. Defaults to the selected date or today. */ defaultMonth?: Date; /** 0 = Sunday, 1 = Monday */ weekStartsOn?: 0 | 1; disabled?: (date: Date) => boolean; /** BCP 47 locale for month and weekday names. Fixed by default so server and client render the same. */ locale?: string; } const type = { fontFamily: "var(--font-type, 'Courier New', ui-monospace, monospace)" }; const sameDay = (a?: Date, b?: Date) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1); /** A desk calendar page. The chosen day gets circled in pen. */ export function Calendar({ selected, onSelect, defaultMonth, weekStartsOn = 1, disabled, locale = "en-US", className = "", ...props }: CalendarProps) { // No `new Date()` during render: it breaks prerendering and server/client markup can disagree. // Without a selected/default date, the current month fills in once mounted. const initial = defaultMonth ?? selected; const [month, setMonth] = React.useState(initial && startOfMonth(initial)); const [focus, setFocus] = React.useState(selected ?? defaultMonth); const [today, setToday] = React.useState(); const grid = React.useRef(null); const moved = React.useRef(false); React.useEffect(() => { const now = new Date(); setToday(now); setMonth((m) => m ?? startOfMonth(now)); setFocus((f) => f ?? now); }, []); React.useEffect(() => { if (!moved.current) return; moved.current = false; grid.current?.querySelector('[tabindex="0"]')?.focus(); }, [focus]); const first = month && startOfMonth(month); const offset = first ? (first.getDay() - weekStartsOn + 7) % 7 : 0; const days = first ? Array.from({ length: 42 }, (_, i) => addDays(first, i - offset)) : []; const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)); const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, { weekday: "narrow" }).format(new Date(2024, 0, 7 + weekStartsOn + i)), ); const focusInMonth = !!focus && !!month && focus.getMonth() === month.getMonth() && focus.getFullYear() === month.getFullYear(); const tabbable = focusInMonth ? focus : first; const go = (d: Date) => { moved.current = true; setFocus(d); if (!month || d.getMonth() !== month.getMonth() || d.getFullYear() !== month.getFullYear()) setMonth(startOfMonth(d)); }; const onKeyDown = (e: React.KeyboardEvent, d: Date) => { const map: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }; if (e.key in map) { e.preventDefault(); go(addDays(d, map[e.key])); } else if (e.key === "PageUp" || e.key === "PageDown") { e.preventDefault(); go(new Date(d.getFullYear(), d.getMonth() + (e.key === "PageUp" ? -1 : 1), d.getDate())); } }; const nav = (delta: number) => month && setMonth(new Date(month.getFullYear(), month.getMonth() + delta, 1)); const navBtn = "flex size-8 cursor-pointer items-center justify-center rounded-[3px] text-[18px] text-(--ink-muted) outline-none hover:bg-(--paper-sunk) hover:text-(--ink) focus-visible:ring-2 focus-visible:ring-(--pen)"; return (

{/* binding with two rings */}

{[28, 72].map((x) => ( ))}

{month ? new Intl.DateTimeFormat(locale, { month: "long" }).format(month) : "\u00a0"}

{month?.getFullYear() ?? "\u00a0"}

{weekdays.map((w, i) => ( {w} ))}

{weeks.map((week, w) => (

{week.map((d) => { const outside = d.getMonth() !== month?.getMonth(); const isSel = sameDay(d, selected); const isToday = sameDay(d, today); const isDisabled = disabled?.(d) ?? false; const sunday = d.getDay() === 0; return (

); })}

))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"ui/calendar.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]