51: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"] 52: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"] 53:Tb0c,"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { Calendar } from "./calendar"; function usePaperContainer() { const anchor = React.useRef(null); const [container, setContainer] = React.useState(); React.useEffect(() => { const el = anchor.current?.closest("[data-paper]"); setContainer(el && el !== document.documentElement ? el : undefined); }, []); return [anchor, container] as const; } export interface DatePickerProps { value?: Date; defaultValue?: Date; onChange?: (date: Date) => void; placeholder?: string; locale?: string; disabled?: (date: Date) => boolean; id?: string; className?: string; } /** A ruled-line field that opens a desk calendar. */ export function DatePicker({ value, defaultValue, onChange, placeholder = "Pick a date", locale = "en-US", disabled, id, className = "", }: DatePickerProps) { const [inner, setInner] = React.useState(defaultValue); const [open, setOpen] = React.useState(false); const [anchor, container] = usePaperContainer(); const date = value ?? inner; return ( ); } 54: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 (

); })}

))}

); } 50:["$","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",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@ephemera","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/date-picker.tsx","content":"$53","type":"registry:ui"},{"path":"ui/calendar.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]