51: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"] 52: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"] 53:T32c5,"use client"; import { DateInput as DateInputPrimitive, useDateInputContext, } from "@ark-ui/react/date-input"; import { DateFormatter } from "@internationalized/date"; import { cn } from "cn"; import { XIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { InputGroup } from "@/components/ui/input-group"; import { fromDateValue, toDateValue } from "@/lib/date"; export type DateInputValueChangeDetails = { value: Date[]; valueAsString: string[]; }; export type DateInputPlaceholderChangeDetails = { placeholderValue: Date; } & DateInputValueChangeDetails; export type DateInputProps = { value?: Date[]; defaultValue?: Date[]; min?: Date; max?: Date; placeholderValue?: Date; defaultPlaceholderValue?: Date; onValueChange?: (details: DateInputValueChangeDetails) => void; onPlaceholderChange?: (details: DateInputPlaceholderChangeDetails) => void; isDateUnavailable?: (date: Date, locale: string) => boolean; format?: ( date: Date, details: { locale: string; timeZone: string } ) => string; id?: string; size?: "sm" | "default" | "lg"; granularity?: "day" | "hour" | "minute" | "second"; clearable?: boolean; clearLabel?: string; timeOnly?: boolean; startName?: string; endName?: string; startLabel?: string; endLabel?: string; endAdornment?: React.ReactNode; shouldForceLeadingZeros?: boolean; } & Omit< React.ComponentProps, | "asChild" | "children" | "defaultPlaceholderValue" | "defaultValue" | "format" | "granularity" | "isDateUnavailable" | "max" | "min" | "onPlaceholderChange" | "onValueChange" | "placeholderValue" | "value" >; function DateInput({ className, value, defaultValue, min, max, placeholderValue, defaultPlaceholderValue, onValueChange, onPlaceholderChange, isDateUnavailable, format, id, size = "default", granularity = "day", clearable = false, clearLabel = "Clear date", timeOnly = false, startName, endName, startLabel = "Start date", endLabel = "End date", endAdornment, selectionMode = "single", locale = "en-US", timeZone = "UTC", hourCycle, formatter, name, readOnly, shouldForceLeadingZeros = true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: DateInputProps) { const generatedId = React.useId(); const [resetKey, setResetKey] = React.useState(0); const handleFormReset = React.useCallback(() => { setResetKey((previous) => previous + 1); }, []); const resolvedGranularity = timeOnly && granularity === "day" ? "minute" : granularity; const includeTime = resolvedGranularity !== "day"; const timeFormatter = React.useMemo( () => timeOnly ? new DateFormatter(locale, { hour: "numeric", minute: resolvedGranularity !== "hour" ? "2-digit" : undefined, second: resolvedGranularity === "second" ? "2-digit" : undefined, hourCycle: hourCycle === 12 ? "h12" : hourCycle === 24 ? "h23" : undefined, timeZone, }) : undefined, [hourCycle, locale, resolvedGranularity, timeOnly, timeZone] ); return ( toDateValue(date, includeTime))} format={ format ? (date, details) => format(fromDateValue(date), details) : undefined } formatter={formatter ?? timeFormatter} granularity={resolvedGranularity} hourCycle={hourCycle} isDateUnavailable={ isDateUnavailable ? (date, dateLocale) => isDateUnavailable(fromDateValue(date), dateLocale) : undefined } locale={locale} max={max ? toDateValue(max, includeTime) : undefined} min={min ? toDateValue(min, includeTime) : undefined} name={name} onPlaceholderChange={ onPlaceholderChange ? (details) => onPlaceholderChange({ ...details, value: details.value.map(fromDateValue), placeholderValue: fromDateValue(details.placeholderValue), }) : undefined } onValueChange={ onValueChange ? (details) => onValueChange({ ...details, value: details.value.map(fromDateValue), }) : undefined } placeholderValue={ placeholderValue ? toDateValue(placeholderValue, includeTime) : undefined } readOnly={readOnly} selectionMode={selectionMode} timeZone={timeZone} value={value?.map((date) => toDateValue(date, includeTime))} > {(api) => ( <>

{(selectionMode === "range" ? [0, 1] : [0]).map((index) => ( {index === 1 && ( )} {selectionMode === "range" && ( {index === 0 ? startLabel : endLabel} )} {api .getSegments({ index }) .map((segment, segmentIndex) => ( ))} ))}

{clearable && !api.disabled && !readOnly && ( )} {endAdornment} )} ); } function DateInputHiddenFields({ endName, id, name, onFormReset, selectionMode, startName, }: Pick< DateInputProps, "endName" | "id" | "name" | "selectionMode" | "startName" > & { onFormReset: () => void; }) { const api = useDateInputContext(); const inputRef = React.useRef(null); const formId = api.getHiddenInputProps({ index: 0 }).form; React.useEffect(() => { const form = inputRef.current?.form; if (!form) return; let mounted = true; const handleReset = (event: Event) => { queueMicrotask(() => { if (mounted && !event.defaultPrevented) onFormReset(); }); }; form.addEventListener("reset", handleReset); return () => { mounted = false; form.removeEventListener("reset", handleReset); }; }, [formId, onFormReset]); return (selectionMode === "range" ? [0, 1] : [0]).map((index) => { const hiddenProps = api.getHiddenInputProps({ index }); return ( {})} onFocus={(event) => { hiddenProps.onFocus?.(event); if (index === 0 && id) { api.focus(); } }} ref={index === 0 ? inputRef : undefined} tabIndex={index === 0 && id ? -1 : undefined} type={index === 0 && id ? "text" : hiddenProps.type} /> ); }); } export { DateInput }; 54: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; }), }; } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/button.json","https://ui.iandefined.com/r/input-group.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/base/date-input.tsx","content":"$53","type":"registry:ui","target":"components/ui/date-input.tsx"},{"path":"src/shared/lib/date.ts","content":"$54","type":"registry:lib","target":"lib/date.ts"}],"className":"h-[70svh] min-h-80"}]]}]