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:T826,.cr-calendar { display: inline-grid; gap: var(--cr-space-2); padding: 18px; border-radius: var(--cr-radius-xl); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-calendar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--cr-space-1); } .cr-calendar__title { margin: 0; font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); } .cr-calendar__nav { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--cr-radius-full); background: transparent; color: inherit; cursor: pointer; } .cr-calendar__nav:hover { background: var(--cr-color-bg-subtle); } .cr-calendar__grid { border-collapse: collapse; } .cr-calendar__grid th { height: 32px; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); } .cr-calendar__grid td { padding: 1px 0; } .cr-calendar__day { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--cr-radius-full); background: transparent; color: inherit; font: inherit; font-size: var(--cr-font-size-md); font-variant-numeric: tabular-nums; cursor: pointer; } .cr-calendar__day:hover { background: var(--cr-color-bg-subtle); } .cr-calendar__day[data-outside] { color: var(--cr-color-text-muted); } .cr-calendar__day[aria-current='date'] { box-shadow: inset 0 0 0 1.5px var(--cr-color-ink-bg); } .cr-calendar__day[data-between] { border-radius: 0; background: var(--cr-color-ink-subtle); } .cr-calendar__day[data-selected] { background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); font-weight: var(--cr-font-weight-semibold); } .cr-calendar__day[aria-disabled] { cursor: not-allowed; opacity: 0.35; text-decoration: line-through; } .cr-calendar__day:focus-visible, .cr-calendar__nav:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } 53:T202a,'use client'; import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'; import { cx } from '@/lib/creance/cx'; import { ChevronIcon, ChevronLeftIcon } from '@/lib/creance/icons'; import { addDays, addMonths, compare, monthGrid, sameDay, toDay } from './dates'; import { useNow } from '@/lib/creance/useNow'; import './Calendar.css'; export interface DateRange { start: Date; end: Date; } interface Base { /** Which month shows first. Defaults to the selection, or today. */ defaultMonth?: Date; /** 0 Sunday, 1 Monday. Default 1. */ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; /** BCP 47 locale for month and weekday names. Defaults to the browser's. */ locale?: string; min?: Date; max?: Date; isDateDisabled?: (date: Date) => boolean; /** Override "today", for tests and screenshots. */ today?: Date; className?: string; 'aria-label'?: string; } export type CalendarProps = Base & ( | { mode?: 'single'; value?: Date | null; defaultValue?: Date | null; onValueChange?: (date: Date) => void } | { mode: 'range'; value?: DateRange | null; defaultValue?: DateRange | null; onValueChange?: (range: DateRange) => void } ); /** * A month grid. Arrow keys move by day and week, Home and End to the week's ends, Page Up and Down * by month (with Shift, by year), Enter or Space picks. A range takes two picks: start, then end. */ export function Calendar(props: CalendarProps) { const { weekStartsOn = 1, locale, min, max, isDateDisabled, className } = props; // Today is read after mount: a clock read while rendering differs between server and browser. const now = useNow(60_000, false); const today = props.today ? toDay(props.today) : now === undefined ? undefined : toDay(new Date(now)); const range = props.mode === 'range'; const [ownSingle, setOwnSingle] = useState(range ? null : ((props.defaultValue as Date | null) ?? null)); const [ownRange, setOwnRange] = useState(range ? ((props.defaultValue as DateRange | null) ?? null) : null); const single = range ? null : props.value === undefined ? ownSingle : (props.value as Date | null); const span = range ? (props.value === undefined ? ownRange : (props.value as DateRange | null)) : null; // While choosing a range, the first pick waits here for the second. const [anchor, setAnchor] = useState(null); const [hover, setHover] = useState(null); const start = props.defaultMonth ?? single ?? span?.start ?? today; const [ownFocused, setFocused] = useState(start && toDay(start)); const [ownMonth, setMonth] = useState(ownFocused); // Until the person moves, both follow the starting month, which may only be known after mount. const focused = ownFocused ?? (start && toDay(start)); const month = ownMonth ?? focused; const grid = useMemo(() => (month ? monthGrid(month, weekStartsOn) : []), [month, weekStartsOn]); const gridRef = useRef(null); const moved = useRef(false); useEffect(() => { if (moved.current) gridRef.current?.querySelector('[tabindex="0"]')?.focus(); }, [focused]); // No value, no defaultMonth and no today prop: the month is only known once mounted. if (!month || !focused) return

; const fmt = (o: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, o); const monthTitle = fmt({ month: 'long', year: 'numeric' }).format(month); const dayName = fmt({ weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); const weekdays = grid[0]!.map((d) => ({ short: fmt({ weekday: 'narrow' }).format(d), long: fmt({ weekday: 'long' }).format(d) })); const disabled = (d: Date) => (min && compare(d, min) < 0) || (max && compare(d, max) > 0) || !!isDateDisabled?.(d); const go = (d: Date) => { moved.current = true; setFocused(d); if (d.getMonth() !== month.getMonth() || d.getFullYear() !== month.getFullYear()) setMonth(d); }; const pick = (d: Date) => { if (disabled(d)) return; if (props.mode === 'range') { if (!anchor) { setAnchor(d); return; } const next = compare(d, anchor) < 0 ? { start: d, end: anchor } : { start: anchor, end: d }; setAnchor(null); if (props.value === undefined) setOwnRange(next); props.onValueChange?.(next); } else { if (props.value === undefined) setOwnSingle(d); props.onValueChange?.(d); } }; const onKeyDown = (e: KeyboardEvent) => { const offset = (focused.getDay() - weekStartsOn + 7) % 7; const next: Record Date> = { ArrowLeft: () => addDays(focused, -1), ArrowRight: () => addDays(focused, 1), ArrowUp: () => addDays(focused, -7), ArrowDown: () => addDays(focused, 7), Home: () => addDays(focused, -offset), End: () => addDays(focused, 6 - offset), PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1), PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1), }; if (next[e.key]) { e.preventDefault(); go(next[e.key]!()); } else if (e.key === 'Escape' && anchor) { setAnchor(null); } }; // The range shown: the chosen one, or the one being chosen. const shownRange = anchor ? (() => { const other = hover ?? focused; return compare(other, anchor) < 0 ? { start: other, end: anchor } : { start: anchor, end: other }; })() : span; return (

{monthTitle}

{weekdays.map((w) => ( ))} {grid.map((week, w) => ( {week.map((d) => { const outside = d.getMonth() !== month.getMonth(); const selected = range ? !!shownRange && (sameDay(d, shownRange.start) || sameDay(d, shownRange.end)) : sameDay(d, single); const between = !!shownRange && compare(d, shownRange.start) > 0 && compare(d, shownRange.end) < 0; const off = disabled(d); return ( ); })} ))}

{w.short}

); } 54:T560,// Calendar dates are local days. Times are ignored; every helper returns noon to dodge DST edges. export const day = (y: number, m: number, d: number) => new Date(y, m, d, 12); export const toDay = (d: Date) => day(d.getFullYear(), d.getMonth(), d.getDate()); export const addDays = (d: Date, n: number) => day(d.getFullYear(), d.getMonth(), d.getDate() + n); export const sameDay = (a?: Date | null, b?: Date | null) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); export const compare = (a: Date, b: Date) => toDay(a).getTime() - toDay(b).getTime(); /** Same day of month, clamped: Jan 31 + 1 month is Feb 28 or 29. */ export function addMonths(d: Date, n: number) { const first = day(d.getFullYear(), d.getMonth() + n, 1); const last = day(first.getFullYear(), first.getMonth() + 1, 0).getDate(); return day(first.getFullYear(), first.getMonth(), Math.min(d.getDate(), last)); } /** Six rows of seven days covering the month, starting on `weekStartsOn` (0 Sunday, 1 Monday). */ export function monthGrid(month: Date, weekStartsOn: number) { const first = day(month.getFullYear(), month.getMonth(), 1); const start = addDays(first, -((first.getDay() - weekStartsOn + 7) % 7)); return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(start, w * 7 + i))); } 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":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"calendar/Calendar.css","content":"$52","type":"registry:file","target":"@components/creance/calendar/Calendar.css"},{"path":"calendar/Calendar.tsx","content":"$53","type":"registry:ui","target":"@components/creance/calendar/Calendar.tsx"},{"path":"calendar/dates.ts","content":"$54","type":"registry:ui","target":"@components/creance/calendar/dates.ts"}],"className":"h-[70svh] min-h-80"}]]}]