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/1o6_421saitt-.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:T2349,"use client"; import * as React from "react"; import { DayButton, DayPicker, getDefaultClassNames, DayPickerProps, } from "react-day-picker"; import { cn } from "@/stories/lib/utils"; import { Button, buttonVariants } from "@/components/ui/button"; type View = "days" | "months" | "years"; function Calendar({ className, classNames, showOutsideDays = true, buttonVariant = "white", month: controlledMonth, onMonthChange, ...props }: DayPickerProps & { buttonVariant?: React.ComponentProps["variant"]; }) { const defaultClassNames = getDefaultClassNames(); const [month, setMonth] = React.useState(controlledMonth || new Date()); const actualMonth = controlledMonth || month; const handleMonthChange = (date: Date) => { if (onMonthChange) onMonthChange(date); if (!controlledMonth) setMonth(date); }; const [view, setView] = React.useState("days"); function onMonthSelect(newMonth: Date) { handleMonthChange(newMonth); setView("days"); } function onYearSelect(newYearDate: Date) { const newMonthDate = new Date( newYearDate.getFullYear(), actualMonth.getMonth(), 1, ); handleMonthChange(newMonthDate); setView("months"); } // function Caption({ displayMonth }: { displayMonth: Date }) { // return ( //

// // //

// ); // } if (view === "months") { return ( ); } if (view === "years") { return ( ); } return ( date.getMonth() !== actualMonth.getMonth()} className={cn( "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-background", className, )} captionLayout="label" components={{ // Caption: Caption, DayButton: CalendarDayButton, ...props.components, }} classNames={{ root: cn("w-fit", defaultClassNames.root), months: cn( "flex gap-4 flex-col md:flex-row relative", defaultClassNames.months, ), month: cn("flex flex-col w-full gap-4", defaultClassNames.month), nav: cn( "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between px-2", defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), "size-[--cell-size] aria-disabled:opacity-50 p-0 select-none text-center", defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), "size-[--cell-size] aria-disabled:opacity-50 p-0 select-none text-center", defaultClassNames.button_next, ), month_caption: cn( "flex items-center justify-center h-[--cell-size] w-full px-[--cell-size] select-none font-medium", defaultClassNames.month_caption, ), dropdowns: cn( "w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5", defaultClassNames.dropdowns, ), dropdown_root: cn( "relative border border-input shadow-xs has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root, ), dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown), caption_label: cn( "select-none font-medium", "text-sm", defaultClassNames.caption_label, ), table: "w-full border-collapse", weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( "text-muted-foreground flex-1 text-[0.8rem] select-none", defaultClassNames.weekday, ), week: cn("flex w-full mt-2", defaultClassNames.week), day: cn( "relative w-full h-full p-0 text-center group/day aspect-square select-none", defaultClassNames.day, ), range_start: cn( "rounded-l-md bg-accent", defaultClassNames.range_start, ), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), today: cn( "bg-accent text-accent-foreground font-bold rounded-md data-[selected=true]:rounded-none", defaultClassNames.today, ), outside: cn("text-muted-foreground", defaultClassNames.outside), disabled: cn( "text-muted-foreground opacity-50 pointer-events-none bg-transparent hover:bg-transparent active:bg-transparent", defaultClassNames.disabled, ), hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} /> ); } function MonthsGrid({ year, onSelect, }: { year: number; onSelect: (date: Date) => void; }) { const months = Array.from({ length: 12 }, (_, i) => i); return (

{months.map((monthIndex) => { const date = new Date(year, monthIndex, 1); return ( ); })}

); } function YearsGrid({ selectedYear, onSelect, }: { selectedYear: number; onSelect: (date: Date) => void; }) { const startYear = selectedYear - 10; const years = Array.from({ length: 21 }, (_, i) => startYear + i); return (

{years.map((year) => ( ))}

); } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames(); const ref = React.useRef(null); React.useEffect(() => { if (modifiers.focused) ref.current?.focus(); }, [modifiers.focused]); return (