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:T5428,"use client"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { format, type Locale, startOfMonth } from "date-fns"; import { CalendarIcon, X } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { type ForwardedRef, forwardRef, type MouseEvent, type RefObject, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { Calendar, type CalendarProps } from "@/components/ui/calendar"; import { cn } from "@/lib/utils"; const datePickerTriggerCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const datePickerInputShellClassName = cn( "group flex w-full items-center border border-border bg-card text-left text-foreground text-sm transition-[border-color,box-shadow] focus-within:border-foreground/30 hover:border-foreground/30", "[&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50", "[&:has(input[aria-invalid=true])]:border-destructive" ); const datePickerInputClassName = cn( "min-w-0 flex-1 cursor-pointer truncate bg-transparent py-0 text-left font-medium tracking-tight outline-none focus-visible:outline-none", "text-foreground placeholder:text-muted-foreground", "[-webkit-tap-highlight-color:transparent]" ); export const DATE_PICKER_PANEL_WIDTH = { sm: 212, md: 240, lg: 282, } as const; export type DatePickerAlign = "start" | "end"; export type DatePickerSide = "top" | "bottom"; export const DEFAULT_DATE_PICKER_FORMAT = "EEE, MMM d, yyyy"; export const DEFAULT_DATE_PICKER_ARIA_FORMAT = "PPPP"; const DATE_PICKER_FORM_VALUE_FORMAT = "yyyy-MM-dd"; const PANEL_GAP_PX = 12; const VIEWPORT_PADDING_PX = 8; const FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; export function getDatePickerPanelWidth( size: NonNullable = "md" ): number { return DATE_PICKER_PANEL_WIDTH[size]; } export function resolveDatePickerViewMonth( value: Date | null | undefined, selected: Date | null | undefined, fallback: Date = new Date() ): Date { const source = value !== undefined ? value : selected; return startOfMonth(source ?? fallback); } export function formatDatePickerLabel( date: Date, dateFormat: string, locale?: Locale ): string { const options = locale ? { locale } : undefined; try { return format(date, dateFormat, options); } catch { return format(date, DEFAULT_DATE_PICKER_FORMAT, options); } } export function getDatePickerFormValue(date: Date): string { return format(date, DATE_PICKER_FORM_VALUE_FORMAT); } export function getDatePickerPanelPosition({ align, gap = PANEL_GAP_PX, panelHeight, panelWidth, side, triggerRect, viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0, viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0, }: { align: DatePickerAlign; gap?: number; panelHeight: number; panelWidth: number; side: DatePickerSide; triggerRect: Pick; viewportHeight?: number; viewportWidth?: number; }): { left: number; side: DatePickerSide; top: number } { const spaceBelow = viewportHeight - triggerRect.bottom; const spaceAbove = triggerRect.top; let resolvedSide = side; if ( panelHeight > 0 && side === "bottom" && spaceBelow < panelHeight + gap && spaceAbove > spaceBelow ) { resolvedSide = "top"; } else if ( panelHeight > 0 && side === "top" && spaceAbove < panelHeight + gap && spaceBelow > spaceAbove ) { resolvedSide = "bottom"; } const top = resolvedSide === "bottom" ? triggerRect.bottom + gap : triggerRect.top - panelHeight - gap; let left = align === "start" ? triggerRect.left : triggerRect.right - panelWidth; left = Math.max( VIEWPORT_PADDING_PX, Math.min(left, viewportWidth - panelWidth - VIEWPORT_PADDING_PX) ); return { left, side: resolvedSide, top }; } type DatePickerCalendarProps = Omit< CalendarProps, | "selected" | "defaultSelected" | "onSelect" | "month" | "onMonthChange" | "mode" | "range" | "defaultRange" | "onRangeSelect" | "name" >; export type DatePickerProps = { value?: Date | null; defaultValue?: Date | null; onChange?: (date: Date | null) => void; className?: string; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; placeholder?: string; disabled?: boolean; clearable?: boolean; closeOnSelect?: boolean; dateFormat?: string; name?: string; id?: string; "aria-invalid"?: boolean; side?: DatePickerSide; align?: DatePickerAlign; /** Props forwarded to the embedded Calendar, except selection and month state. */ calendarProps?: DatePickerCalendarProps; }; type PanelPlacement = { left: number; top: number; width: number; }; function useFocusTrap( containerRef: RefObject, returnFocusRef: RefObject, active: boolean ) { useEffect(() => { if (!(active && containerRef.current)) return; const container = containerRef.current; let frameId = 0; const focusFirst = () => { const focusable = Array.from( container.querySelectorAll(FOCUSABLE_SELECTOR) ); if (focusable.length === 0) { frameId = window.requestAnimationFrame(focusFirst); return; } focusable[0]?.focus(); }; frameId = window.requestAnimationFrame(focusFirst); const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== "Tab" || !containerRef.current) return; const focusable = Array.from( containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR) ); if (focusable.length === 0) return; const first = focusable[0]; const last = focusable.at(-1); if (event.shiftKey) { if (document.activeElement === first) { event.preventDefault(); last?.focus(); } return; } if (document.activeElement === last) { event.preventDefault(); first?.focus(); } }; document.addEventListener("keydown", handleKeyDown); return () => { window.cancelAnimationFrame(frameId); document.removeEventListener("keydown", handleKeyDown); returnFocusRef.current?.focus(); }; }, [active, containerRef, returnFocusRef]); } function useDismissiblePanel({ open, rootRef, panelRef, setOpenState, }: { open: boolean; rootRef: RefObject; panelRef: RefObject; setOpenState: (nextOpen: boolean) => void; }) { useEffect(() => { if (!open) return; const handlePointerDown = (event: PointerEvent) => { const target = event.target as Node; if (rootRef.current?.contains(target)) return; if (panelRef.current?.contains(target)) return; setOpenState(false); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); setOpenState(false); } }; document.addEventListener("pointerdown", handlePointerDown, true); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("pointerdown", handlePointerDown, true); document.removeEventListener("keydown", handleKeyDown); }; }, [open, panelRef, rootRef, setOpenState]); } function usePanelPlacement({ align, anchorRef, hasRenderedPanel, open, panelRef, panelWidth, side, }: { align: DatePickerAlign; anchorRef: RefObject; hasRenderedPanel: boolean; open: boolean; panelRef: RefObject; panelWidth: number; side: DatePickerSide; }) { const [panelPlacement, setPanelPlacement] = useState( null ); const updatePanelPlacement = useCallback(() => { const anchor = anchorRef.current; const panel = panelRef.current; if (!(anchor && panel)) return; const panelHeight = panel.offsetHeight; if (panelHeight === 0) return; const position = getDatePickerPanelPosition({ align, panelHeight, panelWidth, side, triggerRect: anchor.getBoundingClientRect(), }); setPanelPlacement({ left: position.left, top: position.top, width: panelWidth, }); }, [align, anchorRef, panelRef, panelWidth, side]); useLayoutEffect(() => { if (!(open && hasRenderedPanel)) return; updatePanelPlacement(); const frameId = window.requestAnimationFrame(updatePanelPlacement); window.addEventListener("resize", updatePanelPlacement); window.addEventListener("scroll", updatePanelPlacement, true); const panel = panelRef.current; const resizeObserver = panel && typeof ResizeObserver !== "undefined" ? new ResizeObserver(updatePanelPlacement) : null; if (panel && resizeObserver) { resizeObserver.observe(panel); } return () => { window.cancelAnimationFrame(frameId); window.removeEventListener("resize", updatePanelPlacement); window.removeEventListener("scroll", updatePanelPlacement, true); resizeObserver?.disconnect(); }; }, [hasRenderedPanel, open, panelRef, updatePanelPlacement]); return panelPlacement; } function mergeTriggerRef( node: HTMLInputElement | null, triggerRef: RefObject, ref: ForwardedRef ) { triggerRef.current = node; if (typeof ref === "function") { ref(node); return; } if (ref) { ref.current = node; } } type DatePickerTriggerProps = { ariaInvalid?: boolean; ariaLabel: string; clearable: boolean; disabled: boolean; id?: string; labelId: string; onClear: (event: MouseEvent) => void; onToggle: () => void; open: boolean; panelId: string; placeholder: string; selected: Date | null; setTriggerRef: (node: HTMLInputElement | null) => void; triggerLabel: string; }; function DatePickerTrigger({ ariaInvalid, ariaLabel, clearable, disabled, id, labelId, onClear, onToggle, open, panelId, placeholder, selected, setTriggerRef, triggerLabel, }: DatePickerTriggerProps) { const handleActivate = () => { if (disabled) return; onToggle(); }; return (

{ if (event.key === "Enter" || event.key === " ") { event.preventDefault(); handleActivate(); } }} placeholder={placeholder} readOnly render={(inputProps) => { const { className: primitiveClassName, ref: primitiveRef, ...resolvedInputProps } = inputProps; return ( { setTriggerRef(node); if (typeof primitiveRef === "function") { primitiveRef(node); return; } if (primitiveRef) { primitiveRef.current = node; } }} /> ); }} value={selected ? triggerLabel : ""} />

{clearable && selected && !disabled ? ( ) : null}

); } type DatePickerPanelProps = { calendarClassName?: string; calendarSize: NonNullable; hasRenderedPanel: boolean; labelId: string; locale?: Locale; onMonthChange: (month: Date) => void; onSelect: (date: Date | null) => void; open: boolean; panelId: string; panelPlacement: PanelPlacement | null; panelRef: RefObject; panelTransition: | { duration: number } | { type: "spring"; stiffness: number; damping: number }; panelWidth: number; reduceMotion: boolean | null; restCalendarProps: Omit< DatePickerCalendarProps, "className" | "locale" | "size" >; selected: Date | null; viewMonth: Date; }; function DatePickerPanel({ calendarClassName, calendarSize, hasRenderedPanel, labelId, locale, onMonthChange, onSelect, open, panelId, panelPlacement, panelRef, panelTransition, panelWidth, reduceMotion, restCalendarProps, selected, viewMonth, }: DatePickerPanelProps) { if (!hasRenderedPanel) return null; return ( ); } export const AnimatedDatePicker = forwardRef( function AnimatedDatePicker(props, ref) { const { value, defaultValue = null, onChange, className, defaultOpen = false, open: openProp, onOpenChange, placeholder = "Select a date", disabled = false, clearable = false, closeOnSelect = true, dateFormat = DEFAULT_DATE_PICKER_FORMAT, name, id, "aria-invalid": ariaInvalid, side = "bottom", align = "start", calendarProps, } = props; const isValueControlled = value !== undefined; const isOpenControlled = openProp !== undefined; const reduceMotion = useReducedMotion(); const rootRef = useRef(null); const triggerRef = useRef(null); const panelRef = useRef(null); const panelId = useId(); const labelId = useId(); const [mounted, setMounted] = useState(false); const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const [hasRenderedPanel, setHasRenderedPanel] = useState(defaultOpen); const [internalSelected, setInternalSelected] = useState( defaultValue ); const [viewMonth, setViewMonth] = useState(() => resolveDatePickerViewMonth(value, defaultValue) ); const open = isOpenControlled ? Boolean(openProp) : uncontrolledOpen; const selected = isValueControlled ? (value ?? null) : internalSelected; const { className: calendarClassName, locale, size, ...restCalendarProps } = calendarProps ?? {}; const calendarSize = size ?? "md"; const panelWidth = getDatePickerPanelWidth(calendarSize); const setOpenState = useCallback( (nextOpen: boolean) => { if (disabled && nextOpen) return; if (nextOpen) { setHasRenderedPanel(true); } if (!isOpenControlled) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen); }, [disabled, isOpenControlled, onOpenChange] ); const panelPlacement = usePanelPlacement({ align, anchorRef: rootRef, hasRenderedPanel, open, panelRef, panelWidth, side, }); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!isValueControlled) return; setViewMonth(resolveDatePickerViewMonth(value, selected)); }, [isValueControlled, selected, value]); useEffect(() => { if (!open) return; setViewMonth(resolveDatePickerViewMonth(selected, selected)); }, [open, selected]); useEffect(() => { if (disabled && open) { setOpenState(false); } }, [disabled, open, setOpenState]); useDismissiblePanel({ open, panelRef, rootRef, setOpenState }); useFocusTrap( panelRef, triggerRef, open && hasRenderedPanel && panelPlacement !== null ); const handleSelect = useCallback( (date: Date | null) => { if (!isValueControlled) { setInternalSelected(date); } if (date) { setViewMonth(startOfMonth(date)); } onChange?.(date); if (closeOnSelect && date) { setOpenState(false); } }, [closeOnSelect, isValueControlled, onChange, setOpenState] ); const handleClear = useCallback( (event: MouseEvent) => { event.stopPropagation(); if (!isValueControlled) { setInternalSelected(null); } onChange?.(null); setOpenState(false); triggerRef.current?.focus(); }, [isValueControlled, onChange, setOpenState] ); const handleMonthChange = useCallback((month: Date) => { setViewMonth(startOfMonth(month)); }, []); const setTriggerRef = useCallback( (node: HTMLInputElement | null) => { mergeTriggerRef(node, triggerRef, ref); }, [ref] ); const triggerLabel = selected ? formatDatePickerLabel(selected, dateFormat, locale) : placeholder; const ariaLabel = selected ? `Selected date, ${formatDatePickerLabel(selected, DEFAULT_DATE_PICKER_ARIA_FORMAT, locale)}` : placeholder; const triggerId = id ?? labelId; const panelTransition = reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 260, damping: 28 }; const panel = ( ); return (

{name ? ( } tabIndex={-1} value={selected ? getDatePickerFormValue(selected) : ""} /> ) : null} setOpenState(!open)} open={open} panelId={panelId} placeholder={placeholder} selected={selected} setTriggerRef={setTriggerRef} triggerLabel={triggerLabel} /> {mounted && panel ? createPortal(panel, document.body) : null}

); } ); AnimatedDatePicker.displayName = "DatePicker"; export { AnimatedDatePicker as DatePicker }; 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","@base-ui/react/input",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact%2Finput","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":"@base-ui/react/input"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","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","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","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":"date-fns"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":["calendar"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"date-picker.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]