4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2d34,import { useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent } from "react" import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "./button" import { dateKey, daysSinceWeekStart, firstDayOfWeek, isDateSelectable, sameDay, } from "./calendar-utils" type CalendarProps = Omit, "onSelect"> & { defaultMonth?: Date disabled?: boolean isDateUnavailable?: (date: Date) => boolean locale?: string max?: Date min?: Date onSelect: (date: Date) => void range?: { start: Date | null; end: Date | null } selected?: Date | null } function startOfMonth(date: Date) { return new Date(date.getFullYear(), date.getMonth(), 1, 12) } function addDays(date: Date, amount: number) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount, 12) } function addMonths(date: Date, amount: number) { return new Date(date.getFullYear(), date.getMonth() + amount, 1, 12) } function addMonthsPreservingDay(date: Date, amount: number) { const target = new Date(date.getFullYear(), date.getMonth() + amount, 1, 12) const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate() target.setDate(Math.min(date.getDate(), lastDay)) return target } function Calendar({ className, defaultMonth, disabled = false, isDateUnavailable, locale = "en-US", max, min, onSelect, range, ref, selected, ...props }: CalendarProps) { const [month, setMonth] = useState(() => startOfMonth(defaultMonth ?? selected ?? new Date())) const rootRef = useRef(null) const pendingFocus = useRef(null) const today = useMemo(() => new Date(), []) const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month) const fullDate = new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric", }) const weekday = new Intl.DateTimeFormat(locale, { weekday: "narrow" }) // Where the grid starts, and therefore what the header row is labelled with: // both derive from the same value, so the columns cannot rotate out from // under their labels. const weekStart = useMemo(() => firstDayOfWeek(locale), [locale]) const firstVisible = addDays(month, -daysSinceWeekStart(month, weekStart)) const days = Array.from({ length: 42 }, (_, index) => addDays(firstVisible, index)) const years = Array.from({ length: 21 }, (_, index) => month.getFullYear() - 10 + index) useLayoutEffect(() => { if (!pendingFocus.current) return const key = pendingFocus.current pendingFocus.current = null rootRef.current?.querySelector(`[data-date="${key}"]`)?.focus() }, [month]) const unavailable = (date: Date) => !isDateSelectable(date, { disabled, isDateUnavailable, max, min }) const focusDate = [selected, range?.end, range?.start, today].find( (candidate) => candidate && days.some((date) => sameDay(date, candidate)) && !unavailable(candidate), ) ?? days.find((date) => date.getMonth() === month.getMonth() && !unavailable(date)) ?? days.find((date) => !unavailable(date)) const moveFocus = ( date: Date, direction: -1 | 1, event: KeyboardEvent, ) => { event.preventDefault() let target = date let attempts = 0 while (unavailable(target) && attempts < 3660) { target = addDays(target, direction) attempts += 1 } if (unavailable(target)) return pendingFocus.current = dateKey(target) if (target.getMonth() !== month.getMonth() || target.getFullYear() !== month.getFullYear()) { setMonth(startOfMonth(target)) } else { requestAnimationFrame(() => { rootRef.current?.querySelector(`[data-date="${dateKey(target)}"]`)?.focus() }) pendingFocus.current = null } } return (

{ rootRef.current = node if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} data-slot="calendar" // Kit docked picker: 360dp, 16dp corners, Surface Container High, 12dp grid inset. className={cn("w-[360px] max-w-full rounded-m3-lg bg-m3-surface-container-high p-3 text-foreground shadow-m3-2", className)} >

{/* Kit grid: 48dp rows with a 40dp visual circle centred in each 48dp cell. */}

{Array.from({ length: 7 }, (_, index) => (

{weekday.format(addDays(firstVisible, index))}

))}

{Array.from({ length: 6 }, (_, rowIndex) => (

{days.slice(rowIndex * 7, rowIndex * 7 + 7).map((date) => { const outside = date.getMonth() !== month.getMonth() const isSelected = sameDay(date, selected) const isRangeStart = sameDay(date, range?.start) const isRangeEnd = sameDay(date, range?.end) const isInRange = Boolean( range?.start && range.end && date > range.start && date < range.end, ) const isToday = sameDay(date, today) const isUnavailable = unavailable(date) return ( ) })}

))}

) } export { Calendar, type CalendarProps } 4b:["$","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","lucide-react@^1.33.0",{"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@^1.33.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/calendar-utils.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/calendar.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]