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:T557b,"use client" import * as React from "react" import { useDirection } from "@base-ui/react/direction-provider" import { IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, } from "@tabler/icons-react" import { cn } from "cn" import { fromDateKey, getTodayKey, subscribeToday, toDateKey, useToday, } from "@/hooks/use-today" import { easeOut, easeSpring } from "@/lib/motion" import { addToRange, DayPicker, getDefaultClassNames, useDayPicker, type ChevronProps, type DateRange, type DayButtonProps, type DayEventHandler, type DayProps, type MonthCaptionProps, type MonthProps, type MonthsProps, type RootProps, type WeekNumberProps, type WeeksProps, } from "react-day-picker" import { Button, buttonVariants } from "@/components/ui/button" type CalendarContextValue = { id: string todayKey: string | undefined animate: boolean hovered: Date | undefined } const CalendarContext = React.createContext(null) const CalendarPreviewContext = React.createContext( undefined ) function useCalendarContext(part: string) { const context = React.useContext(CalendarContext) if (!context) { throw new Error(`<${part}> must be used within .`) } return context } function omit(value: T, ...keys: K[]) { const result = { ...value } for (const key of keys) { delete result[key] } return result as Omit } function isSameDay(a: Date, b: Date) { return ( a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() ) } function subscribeNothing() { return () => {} } function readServerToday(id: string) { if (typeof document === "undefined") { return getTodayKey() } const root = document.querySelector(`[data-calendar-id="${CSS.escape(id)}"]`) return root?.getAttribute("data-today") ?? getTodayKey() } function useCalendarToday(id: string, enabled: boolean) { const getServerSnapshot = React.useCallback(() => readServerToday(id), [id]) const todayKey = React.useSyncExternalStore( enabled ? subscribeToday : subscribeNothing, getTodayKey, getServerSnapshot ) const isHydrating = React.useSyncExternalStore( subscribeNothing, () => false, () => true ) const [initialKey] = React.useState(todayKey) const [remount, setRemount] = React.useState(undefined) if (enabled && !isHydrating && remount === undefined) { setRemount(initialKey.slice(0, 7) !== todayKey.slice(0, 7)) } return { todayKey: enabled ? todayKey : undefined, remount: remount === true } } type CalendarProps = React.ComponentProps & { buttonVariant?: React.ComponentProps["variant"] } function composeDayHandler( userHandler: DayEventHandler | undefined, internal: DayEventHandler | undefined ): DayEventHandler | undefined { if (!internal) { return userHandler } return (date, modifiers, event) => { userHandler?.(date, modifiers, event) if (!event.defaultPrevented) { internal(date, modifiers, event) } } } function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", navLayout = "around", buttonVariant = "ghost", animate = true, formatters, components, dir, today, onDayMouseEnter, onDayMouseLeave, onDayFocus, onDayBlur, ...props }: CalendarProps) { const defaultClassNames = getDefaultClassNames() const id = React.useId() const direction = useDirection() const [hovered, setHovered] = React.useState() const managesToday = today === undefined && props.timeZone === undefined const { todayKey, remount } = useCalendarToday(id, managesToday) const isRange = props.mode === "range" const context = React.useMemo( () => ({ id, todayKey, animate, hovered }), [id, todayKey, animate, hovered] ) const track = React.useCallback>( (date, modifiers) => { setHovered(modifiers.disabled ? undefined : date) }, [] ) const clear = React.useCallback>( () => setHovered(undefined), [] ) return ( dateLib ? dateLib.format(month, "LLL") : toDateKey(month), ...formatters, }} classNames={{ root: cn("w-fit max-w-full", defaultClassNames.root), months: cn( "relative flex flex-col gap-4 sm:flex-row", defaultClassNames.months ), month: cn( "relative flex w-[calc(var(--cell-size)*7)] max-w-full min-w-0 flex-col gap-3 group-data-week-numbers/calendar:w-[calc(var(--cell-size)*8)]", defaultClassNames.month ), nav: cn( "pointer-events-none absolute inset-x-0 top-0 z-10 flex h-(--cell-size) items-center justify-between gap-1 *:pointer-events-auto", defaultClassNames.nav ), button_previous: cn( buttonVariants({ variant: buttonVariant, size: "icon" }), "size-(--cell-size) rounded-(--cell-radius) p-0 aria-disabled:pointer-events-none aria-disabled:opacity-50", navLayout === "around" && "absolute start-0 top-0 z-10", defaultClassNames.button_previous ), button_next: cn( buttonVariants({ variant: buttonVariant, size: "icon" }), "size-(--cell-size) rounded-(--cell-radius) p-0 aria-disabled:pointer-events-none aria-disabled:opacity-50", navLayout === "around" && "absolute end-0 top-0 z-10", defaultClassNames.button_next ), month_caption: cn( "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption ), dropdowns: cn( "flex h-(--cell-size) w-full items-center justify-center gap-1 text-sm font-medium", defaultClassNames.dropdowns ), dropdown_root: cn( "relative rounded-(--cell-radius) transition-[background-color,box-shadow] duration-150 ease-out-quint has-focus-visible:ring-3 has-focus-visible:ring-focus-ring [@media(hover:hover)]:has-[select:hover]:bg-muted", defaultClassNames.dropdown_root ), dropdown: cn( "absolute inset-0 cursor-pointer bg-popover text-popover-foreground opacity-0", defaultClassNames.dropdown ), caption_label: cn( "font-medium select-none", captionLayout === "label" ? "truncate text-sm" : "flex h-8 items-center gap-1 rounded-(--cell-radius) ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label ), month_grid: cn( "w-full table-fixed border-collapse", defaultClassNames.month_grid ), weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( "w-(--cell-size) min-w-0 text-xs font-normal text-muted-foreground select-none", defaultClassNames.weekday ), week: cn("mt-1 flex w-full", defaultClassNames.week), week_number_header: cn( "w-(--cell-size) shrink-0 select-none", defaultClassNames.week_number_header ), week_number: cn( "text-xs font-normal text-muted-foreground select-none", defaultClassNames.week_number ), day: cn( "group/day relative aspect-square w-(--cell-size) min-w-0 p-0 text-center transition-[background-color] duration-150 ease-out-quint select-none data-preview:bg-muted/60 data-[preview=end]:rounded-e-(--cell-radius) data-[preview=start]:rounded-s-(--cell-radius) data-[preview=end]:data-selected:rounded-s-none data-[preview=start]:data-selected:rounded-e-none [&:is([data-preview],[data-range-middle]):first-of-type]:rounded-s-(--cell-radius) [&:is([data-preview],[data-range-middle]):has(+[data-duplicate])]:rounded-e-(--cell-radius) [&:is([data-preview],[data-range-middle]):last-of-type]:rounded-e-(--cell-radius) [[data-duplicate]+&:is([data-preview],[data-range-middle])]:rounded-s-(--cell-radius)", defaultClassNames.day ), range_start: cn( "rounded-s-(--cell-radius) bg-muted", defaultClassNames.range_start ), range_middle: cn("bg-muted", defaultClassNames.range_middle), range_end: cn( "rounded-e-(--cell-radius) bg-muted", defaultClassNames.range_end ), today: cn(defaultClassNames.today), outside: cn(defaultClassNames.outside), disabled: cn(defaultClassNames.disabled), hidden: cn("invisible", defaultClassNames.hidden), footer: cn( "pt-3 text-sm text-pretty text-muted-foreground", defaultClassNames.footer ), ...classNames, }} components={{ Root: CalendarRoot, Chevron: CalendarChevron, Months: CalendarMonths, Month: CalendarMonth, MonthCaption: CalendarMonthCaption, Weeks: CalendarWeeks, Day: CalendarDay, DayButton: CalendarDayButton, WeekNumber: CalendarWeekNumber, ...components, }} {...props} /> ) } function CalendarRoot({ className, rootRef, onKeyDownCapture, ...props }: RootProps) { const { id, todayKey } = useCalendarContext("CalendarRoot") return (

{ event.currentTarget.dataset.keyboardAt = String(performance.now()) onKeyDownCapture?.(event) }} {...props} data-slot="calendar" data-calendar-id={id} data-today={todayKey} /> ) } function CalendarChevron({ className, orientation, ...props }: ChevronProps) { const { dayPickerProps } = useDayPicker() const mirrored = dayPickerProps.navLayout === "around" && dayPickerProps.dir === "rtl" const icons = { left: IconChevronLeft, right: IconChevronRight, up: IconChevronUp, down: IconChevronDown, } const Icon = icons[orientation ?? "left"] return ( ) } function CalendarMonths({ className, ...props }: MonthsProps) { const { hovered } = useCalendarContext("CalendarMonths") const { selected, dayPickerProps } = useDayPicker() const preview = React.useMemo(() => { if (dayPickerProps.mode !== "range" || !hovered) { return undefined } const range = selected as DateRange | undefined if (!range?.from || (range.to && !isSameDay(range.from, range.to))) { return undefined } const next = addToRange( hovered, range, dayPickerProps.min, dayPickerProps.max, dayPickerProps.required ) if (!next?.from || !next.to || isSameDay(next.from, next.to)) { return undefined } return next }, [dayPickerProps, hovered, selected]) return (

) } const bottomClip = "inset(-1rem -1rem 0 -1rem)" function layoutSize(element: HTMLElement) { const style = getComputedStyle(element) const width = parseFloat(style.width) const height = parseFloat(style.height) if (Number.isFinite(width) && Number.isFinite(height)) { return { width, height } } const rect = element.getBoundingClientRect() return { width: rect.width, height: rect.height } } function CalendarMonth({ calendarMonth, className, ...rest }: MonthProps) { const props = omit(rest, "displayIndex") const { animate } = useCalendarContext("CalendarMonth") const elementRef = React.useRef(null) const time = calendarMonth.date.getTime() const previousTimeRef = React.useRef(time) const animationsRef = React.useRef([]) const heightRef = React.useRef(0) React.useLayoutEffect(() => { const element = elementRef.current if (!element) { return } heightRef.current = layoutSize(element).height if (typeof ResizeObserver !== "function") { return } const observer = new ResizeObserver(() => { if (animationsRef.current.every((a) => a.playState !== "running")) { heightRef.current = layoutSize(element).height } }) observer.observe(element) return () => observer.disconnect() }, []) React.useLayoutEffect(() => { const element = elementRef.current const previous = previousTimeRef.current previousTimeRef.current = time if ( !animate || !element || previous === time || typeof element.animate !== "function" ) { return } const reduceMotion = typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches const keyboardAt = Number( element.closest("[data-slot=calendar]")?.dataset .keyboardAt ?? -Infinity ) const fromKeyboard = performance.now() - keyboardAt < 100 const rtl = getComputedStyle(element).direction === "rtl" const sign = (time > previous ? 1 : -1) * (rtl ? -1 : 1) const distance = Math.min(32, layoutSize(element).width * 0.1) const weeks = element.querySelector( "[data-slot=calendar-weeks]" ) const caption = element.querySelector( "[data-slot=calendar-month-caption]" ) const interrupted = animationsRef.current.some( (a) => a.playState === "running" ) const fromHeight = interrupted ? layoutSize(element).height : heightRef.current const fromOpacity = interrupted && weeks ? parseFloat(getComputedStyle(weeks).opacity) / 2 : 0 for (const running of animationsRef.current) { running.cancel() } const toHeight = layoutSize(element).height heightRef.current = toHeight const slide = (target: HTMLElement, offset: number, duration: number) => target.animate( reduceMotion || fromKeyboard ? [{ opacity: fromOpacity }, { opacity: 1 }] : [ { translate: `${sign * offset}px 0`, opacity: fromOpacity }, { translate: "0 0", opacity: 1 }, ], { duration: reduceMotion ? 150 : fromKeyboard ? 120 : duration, easing: easeOut, } ) const next: Animation[] = [] if (weeks) { next.push(slide(weeks, distance, 280)) } if (caption) { next.push(slide(caption, distance * 0.4, 220)) } if (fromHeight > 0 && Math.abs(fromHeight - toHeight) > 0.5) { next.push( element.animate( [ { height: `${fromHeight}px`, clipPath: bottomClip }, { height: `${toHeight}px`, clipPath: bottomClip }, ], { duration: reduceMotion ? 0 : 300, easing: easeSpring } ) ) } animationsRef.current = next }, [animate, time]) React.useEffect(() => { const animations = animationsRef return () => { for (const running of animations.current) { running.cancel() } } }, []) return (

) } function CalendarMonthCaption({ className, ...rest }: MonthCaptionProps) { const props = omit(rest, "calendarMonth", "displayIndex") return (

) } function CalendarWeeks({ className, ...props }: WeeksProps) { return } function CalendarDay({ day, modifiers, className, children, ...props }: DayProps) { const preview = React.useContext(CalendarPreviewContext) const { months } = useDayPicker() const duplicate = day.outside && months.length > 1 && months.some( (month) => month.date.getFullYear() === day.date.getFullYear() && month.date.getMonth() === day.date.getMonth() ) if (duplicate) { return ( ) } let state: "start" | "middle" | "end" | undefined if (preview?.from && preview.to && !modifiers.hidden) { const date = day.date if (isSameDay(date, preview.from)) { state = "start" } else if (isSameDay(date, preview.to)) { state = "end" } else if (date > preview.from && date < preview.to) { state = "middle" } } return ( {children} ) } function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) { const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) { ref.current?.focus() } }, [modifiers.focused]) const rangeStart = Boolean(modifiers.range_start) const rangeEnd = Boolean(modifiers.range_end) const rangeMiddle = Boolean(modifiers.range_middle) const selectedSingle = Boolean(modifiers.selected) && !rangeStart && !rangeEnd && !rangeMiddle return (