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/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"],"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/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"] 52:T466a,"use client"; import { DatePicker as CalendarPrimitive, useDatePickerContext, } from "@ark-ui/react/date-picker"; import { cn } from "cn"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import { type ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { adaptDatePickerProps, useResponsiveCalendarMonths, type DatePickerRootDateProps, } from "@/lib/date"; type CalendarProps = { size?: "sm" | "default" | "lg"; } & Omit; function Calendar({ children, className, size = "default", numOfMonths, ...props }: CalendarProps) { const visibleMonths = useResponsiveCalendarMonths(numOfMonths); return ( {children ?? } ); } type CalendarContentProps = {} & ComponentProps<"div">; function CalendarContent({ className, children, ...props }: CalendarContentProps) { return (

{children &&

{children}

}

); } type CalendarViewProps = ComponentProps; function CalendarView({ className, ...props }: CalendarViewProps) { return ( ); } type CalendarHeaderProps = ComponentProps; function CalendarHeader({ className, ...props }: CalendarHeaderProps) { return ( ); } type CalendarPreviousButtonProps = ComponentProps< typeof CalendarPrimitive.PrevTrigger >; function CalendarPreviousButton({ children, className, asChild, ...props }: CalendarPreviousButtonProps) { return ( {asChild ? ( children ) : ( )} ); } type CalendarNextButtonProps = ComponentProps< typeof CalendarPrimitive.NextTrigger >; function CalendarNextButton({ children, className, asChild, ...props }: CalendarNextButtonProps) { return ( {asChild ? ( children ) : ( )} ); } type CalendarHeadingProps = ComponentProps< typeof CalendarPrimitive.ViewTrigger >; function CalendarHeading({ children, className, asChild, ...props }: CalendarHeadingProps) { return ( {asChild ? ( children ) : ( )} ); } function CalendarRangeText() { const calendar = useDatePickerContext(); const { start, end } = calendar.visibleRangeText; const visibleRangeText = [...new Set([start, end].filter(Boolean))].join( " – " ); return (

{visibleRangeText}

); } type CalendarGridProps = ComponentProps; function CalendarGrid({ className, ...props }: CalendarGridProps) { return ( ); } type CalendarGridHeadProps = ComponentProps; function CalendarGridHead(props: CalendarGridHeadProps) { return ( ); } type CalendarGridBodyProps = ComponentProps; function CalendarGridBody(props: CalendarGridBodyProps) { return ( ); } type CalendarGridRowProps = ComponentProps; function CalendarGridRow(props: CalendarGridRowProps) { return ( ); } type CalendarGridHeaderCellProps = ComponentProps< typeof CalendarPrimitive.TableHeader >; function CalendarGridHeaderCell({ className, ...props }: CalendarGridHeaderCellProps) { return ( ); } type CalendarCellProps = ComponentProps; function CalendarCell({ className, ...props }: CalendarCellProps) { return ( ); } type CalendarCellButtonProps = ComponentProps< typeof CalendarPrimitive.TableCellTrigger >; function CalendarCellButton({ className, children, asChild, ...props }: CalendarCellButtonProps) { return ( {asChild ? ( children ) : ( )} ); } function CalendarDayGrids() { const calendar = useDatePickerContext(); return (

{Array.from({ length: calendar.numOfMonths }, (_, index) => { const month = calendar.getOffset({ months: index }); const visibleRange = { start: month.visibleRange.start, end: month.visibleRange.start .add({ months: 1 }) .subtract({ days: 1 }), }; return (

{calendar.numOfMonths > 1 && (

{month.visibleRangeText.start}

)} {calendar.showWeekNumbers && ( )} {calendar.weekDays.map((day) => ( {day.narrow} ))} {month.weeks.map((week, weekIndex) => ( {calendar.showWeekNumbers && ( )} {week.map((day, dayIndex) => { const isCurrentMonth = day.month === month.visibleRange.start.month; const isOverlapping = calendar.numOfMonths > 1 && !isCurrentMonth; const isRowStart = dayIndex === 0; const isRowEnd = dayIndex === week.length - 1; const cellState = calendar.getDayTableCellState({ value: day, visibleRange, }); const isRangeActive = cellState.inRange || cellState.inHoveredRange; const isRangeStart = cellState.firstInRange; const isRangeEnd = cellState.lastInRange; const hasRange = isRangeActive || isRangeStart || isRangeEnd; const extendsRangeLeft = hasRange && !isRowStart && !isRangeStart; const extendsRangeRight = hasRange && !isRowEnd && !isRangeEnd; const rangeConnectionClassName = cn( extendsRangeLeft && "ms-[-0.125rem]", extendsRangeRight && "me-[-0.125rem]", extendsRangeLeft && extendsRangeRight ? "w-[calc(100%+0.25rem)]" : (extendsRangeLeft || extendsRangeRight) && "w-[calc(100%+0.125rem)]" ); if (isOverlapping) { const isStart = cellState.firstInRange; const isEnd = cellState.lastInRange; return ( ); } return ( {day.day} ); })} ))}

); })}

); } function CalendarPeriodGrid({ view }: { view: "month" | "year" }) { const calendar = useDatePickerContext(); const rows = view === "month" ? calendar.getMonthsGrid({ columns: 3, format: "short" }) : calendar.getYearsGrid({ columns: 3 }); return ( {rows.map((row) => ( {row.map((cell) => ( {cell.label} ))} ))} ); } export { Calendar, CalendarContent, CalendarView, CalendarHeader, CalendarPreviousButton, CalendarNextButton, CalendarHeading, CalendarGrid, CalendarGridHead, CalendarGridBody, CalendarGridRow, CalendarGridHeaderCell, CalendarCell, CalendarCellButton, }; export type { CalendarProps, CalendarContentProps, CalendarViewProps, CalendarHeaderProps, CalendarPreviousButtonProps, CalendarNextButtonProps, CalendarHeadingProps, CalendarGridProps, CalendarGridHeadProps, CalendarGridBodyProps, CalendarGridRowProps, CalendarGridHeaderCellProps, CalendarCellProps, CalendarCellButtonProps, }; 53:T20b2,import { type DatePickerRootProps, type DateValue, } from "@ark-ui/react/date-picker"; import { CalendarDate, CalendarDateTime, GregorianCalendar, toCalendar, } from "@internationalized/date"; import { useSyncExternalStore } from "react"; const defaultDateFormatters = new Map(); function getDefaultDateFormatter(locale: string, timeZone: string) { const key = `${locale}\u0000${timeZone}`; const cachedFormatter = defaultDateFormatters.get(key); if (cachedFormatter) return cachedFormatter; const formatter = new Intl.DateTimeFormat(locale, { month: "2-digit", day: "2-digit", year: "numeric", timeZone, }); defaultDateFormatters.set(key, formatter); return formatter; } function subscribeToCalendarViewport(onChange: () => void) { const query = window.matchMedia("(min-width: 640px)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } // Change the machine's visible range too, so navigation and keyboard focus // never move into a second month that is merely hidden by CSS. export function useResponsiveCalendarMonths(numOfMonths = 1) { const isWide = useSyncExternalStore( subscribeToCalendarViewport, () => window.matchMedia("(min-width: 640px)").matches, () => false ); return isWide ? numOfMonths : 1; } export function toDateValue(value: Date, includeTime = false): DateValue { if (!(value instanceof Date) || Number.isNaN(value.getTime())) { throw new RangeError("Expected a valid Date."); } const year = value.getFullYear(); if (year < 1 || year > 9999) { throw new RangeError("Date years must be between 1 and 9999."); } return includeTime ? new CalendarDateTime( year, value.getMonth() + 1, value.getDate(), value.getHours(), value.getMinutes(), value.getSeconds(), value.getMilliseconds() ) : new CalendarDate(year, value.getMonth() + 1, value.getDate()); } export function fromDateValue(value: DateValue): Date { const date = toCalendar(value, new GregorianCalendar()); const result = new Date(2000, date.month - 1, date.day); result.setFullYear(date.year); if ("hour" in date) { result.setHours(date.hour, date.minute, date.second, date.millisecond); } else { result.setHours(0, 0, 0, 0); } return result; } export function formatDate( date: Date, format?: | string | Intl.DateTimeFormatOptions | ((date: Date, details: { locale: string; timeZone: string }) => string), locale = "en-US", timeZone = "UTC" ): string { if (typeof format === "function") { return format(date, { locale, timeZone }); } if (typeof format === "object" && format !== null) { return new Intl.DateTimeFormat(locale, format).format(date); } if (typeof format === "string" && format.length > 0) { const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDate(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const monthNamesShort = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const pad = (n: number) => String(n).padStart(2, "0"); const h12 = hours % 12 || 12; const period = hours >= 12 ? "PM" : "AM"; return format.replace( /\b(YYYY|YY|MMMM|MMM|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a)\b/g, (match) => { switch (match) { case "YYYY": return String(year); case "YY": return String(year).slice(-2); case "MMMM": return monthNames[month]; case "MMM": return monthNamesShort[month]; case "MM": return pad(month + 1); case "M": return String(month + 1); case "DD": return pad(day); case "D": return String(day); case "HH": return pad(hours); case "H": return String(hours); case "hh": return pad(h12); case "h": return String(h12); case "mm": return pad(minutes); case "m": return String(minutes); case "ss": return pad(seconds); case "s": return String(seconds); case "A": return period; case "a": return period.toLowerCase(); default: return match; } } ); } return date.toLocaleDateString(locale); } export type DateValueChangeDetails = { value: Date[]; valueAsString: string[]; view: "day" | "month" | "year"; }; type DateFields = | "value" | "defaultValue" | "focusedValue" | "defaultFocusedValue" | "min" | "max" | "onValueChange" | "onFocusChange" | "onOpenChange" | "onVisibleRangeChange" | "isDateUnavailable" | "format" | "parse"; export type DatePickerRootDateProps = Omit & { value?: Date[]; defaultValue?: Date[]; focusedValue?: Date; defaultFocusedValue?: Date; min?: Date; max?: Date; onValueChange?: (details: DateValueChangeDetails) => void; onFocusChange?: ( details: DateValueChangeDetails & { focusedValue: Date } ) => void; onOpenChange?: (details: { open: boolean; value: Date[] }) => void; onVisibleRangeChange?: (details: { view: "day" | "month" | "year"; visibleRange: { start: Date; end: Date }; }) => void; isDateUnavailable?: (date: Date, locale: string) => boolean; format?: ( date: Date, details: { locale: string; timeZone: string } ) => string; parse?: ( value: string, details: { locale: string; timeZone: string } ) => Date | undefined; }; export type DayjsDatePickerProps = DatePickerRootDateProps; export function adaptDatePickerProps( props: DatePickerRootDateProps ): DatePickerRootProps { const { value, defaultValue, focusedValue, defaultFocusedValue, min, max, onValueChange, onFocusChange, onOpenChange, onVisibleRangeChange, isDateUnavailable, format, parse, ...rest } = props; return { ...rest, value: value?.map((date) => toDateValue(date)), defaultValue: defaultValue?.map((date) => toDateValue(date)), focusedValue: focusedValue && toDateValue(focusedValue), defaultFocusedValue: defaultFocusedValue && toDateValue(defaultFocusedValue), min: min && toDateValue(min), max: max && toDateValue(max), onValueChange: onValueChange && ((details) => onValueChange({ ...details, value: details.value.map(fromDateValue) })), onFocusChange: onFocusChange && ((details) => onFocusChange({ ...details, value: details.value.map(fromDateValue), focusedValue: fromDateValue(details.focusedValue), })), onOpenChange: onOpenChange && ((details) => onOpenChange({ ...details, value: details.value.map(fromDateValue) })), onVisibleRangeChange: onVisibleRangeChange && ((details) => onVisibleRangeChange({ ...details, visibleRange: { start: fromDateValue(details.visibleRange.start), end: fromDateValue(details.visibleRange.end), }, })), isDateUnavailable: isDateUnavailable && ((date, locale) => isDateUnavailable(fromDateValue(date), locale)), format: format ? (date, details) => format(fromDateValue(date), details) : (date, details) => { const jsDate = fromDateValue(date); return getDefaultDateFormatter( details.locale, details.timeZone ).format(jsDate); }, parse: parse && ((text, details) => { const date = parse(text, details); return date instanceof Date && !Number.isNaN(date.getTime()) ? toDateValue(date) : undefined; }), }; } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","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":"@ark-ui/react"}]]}]}],["$","li","@internationalized/date",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40internationalized%2Fdate","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":"@internationalized/date"}]]}]}],["$","li","lucide-react",{"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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/calendar.tsx","content":"$52","type":"registry:ui","target":"components/ui/calendar.tsx"},{"path":"src/shared/lib/date.ts","content":"$53","type":"registry:lib","target":"lib/date.ts"}],"className":"h-[70svh] min-h-80"}]]}]