52: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"] 53: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"] 54:Te6a1,"use client"; import { DatePicker as DatePickerPrimitive, useDatePickerContext, } from "@ark-ui/react/date-picker"; import { Portal } from "@ark-ui/react/portal"; import { mergeProps } from "@base-ui/react/merge-props"; import { Popover as PopoverPrimitive } from "@base-ui/react/popover"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "cn"; import { Calendar, ChevronDownIcon, ChevronUpIcon, Clock, XIcon, } from "lucide-react"; import { createContext, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type FocusEvent as ReactFocusEvent, } from "react"; import { Button, type ButtonProps } from "@/components/ui/button"; import { CalendarContent, type CalendarContentProps, } from "@/components/ui/calendar"; import { DateInput, type DateInputProps } from "@/components/ui/date-input"; import { Label } from "@/components/ui/label"; import { adaptDatePickerProps, formatDate, fromDateValue, toDateValue, useResponsiveCalendarMonths, type DatePickerRootDateProps, } from "@/lib/date"; // Styles for invalid animation shake const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; export type DatePickerProps = Omit & { invalid?: boolean; }; const DatePickerControlContext = createContext(false); const DatePickerInputContext = createContext<{ locale?: string; timeZone?: string; min?: Date; max?: Date; format?: | string | Intl.DateTimeFormatOptions | ((date: Date, details: { locale: string; timeZone: string }) => string); invalid?: boolean; }>({}); const DatePickerChipsClickContext = createContext< ComponentProps<"button">["onClick"] | undefined >(undefined); export type DatePickerControlProps = ComponentProps< typeof DatePickerPrimitive.Control >; function DatePickerControl({ className, ...props }: DatePickerControlProps) { return ( ); } function DatePicker({ className, selectionMode = "single", positioning, numOfMonths, invalid, ...props }: DatePickerProps) { const visibleMonths = useResponsiveCalendarMonths(numOfMonths); const rootRef = useRef(null); const outsidePointerDownRef = useRef(false); useEffect(() => { const handlePointerDown = (event: PointerEvent) => { const root = rootRef.current; const target = event.target; if (!root || !(target instanceof Node)) { outsidePointerDownRef.current = false; return; } if (root.dataset.state !== "open") { outsidePointerDownRef.current = false; return; } const trigger = root.querySelector("[aria-controls]"); const contentId = trigger?.getAttribute("aria-controls"); const content = contentId ? document.getElementById(contentId) : null; outsidePointerDownRef.current = !root.contains(target) && !(content?.contains(target) ?? false); if (outsidePointerDownRef.current) { requestAnimationFrame(() => { requestAnimationFrame(() => { outsidePointerDownRef.current = false; }); }); } }; const handleFocusIn = (event: FocusEvent) => { if (!outsidePointerDownRef.current) return; outsidePointerDownRef.current = false; const root = rootRef.current; const target = event.target; if (root && target instanceof HTMLElement && root.contains(target)) { // Ignore Ark's pointer-dismiss focus restoration before chip focus // handlers can expand the control and cause a visible layout shift. target.blur(); event.stopPropagation(); } }; document.addEventListener("pointerdown", handlePointerDown, true); document.addEventListener("focusin", handleFocusIn, true); return () => { document.removeEventListener("pointerdown", handlePointerDown, true); document.removeEventListener("focusin", handleFocusIn, true); }; }, []); const adaptedProps = adaptDatePickerProps(props); const inputContextValue = useMemo(() => { return { locale: props.locale, timeZone: props.timeZone, min: props.min, max: props.max, format: props.format, invalid, }; }, [ invalid, props.format, props.locale, props.max, props.min, props.timeZone, ]); return ( <> ); } export type DatePickerLabelProps = ComponentProps; function DatePickerLabel({ className, ...props }: DatePickerLabelProps) { return ( ); } export type DatePickerTriggerProps = Omit & { invalid?: boolean; }; function DatePickerTrigger({ children, className, size = "default", invalid, ...props }: DatePickerTriggerProps) { const hasControl = useContext(DatePickerControlContext); const picker = useDatePickerContext(); const settings = useContext(DatePickerInputContext); const isInvalid = invalid ?? settings.invalid ?? picker.invalid; if (picker.selectionMode === "multiple") { return ( {children ?? } ); } const trigger = ( ); const isFullWidth = typeof className === "string" && className.includes("w-full"); return hasControl ? ( trigger ) : ( {trigger} ); } export type DatePickerChipsProps = Omit, "onClick"> & { overflowBehavior?: "wrap" | "wrap-when-open" | "cutoff"; maxCount?: number; invalid?: boolean; onClick?: ComponentProps<"button">["onClick"]; }; function DatePickerChips({ children, className, overflowBehavior = "wrap-when-open", maxCount, onClick, onFocus, onBlur, invalid, ...props }: DatePickerChipsProps) { const hasControl = useContext(DatePickerControlContext); const picker = useDatePickerContext(); const settings = useContext(DatePickerInputContext); const isInvalid = invalid ?? settings.invalid ?? picker.invalid; const containerRef = useRef(null); const overflowBadgeRef = useRef(null); const [overflowAmount, setOverflowAmount] = useState(0); const [isFocused, setIsFocused] = useState(false); const content = children ?? ; const hasValue = picker.value.length > 0; const isSelecting = picker.open || isFocused; const shouldWrap = overflowBehavior === "wrap" || (overflowBehavior === "wrap-when-open" && isSelecting); const applyOverflow = useCallback(() => { const container = containerRef.current; if (!container) return 0; const items = container.querySelectorAll( "[data-slot=date-picker-chip]" ); const badge = overflowBadgeRef.current; if (shouldWrap) { items.forEach((item) => { item.style.removeProperty("display"); }); if (badge) { badge.style.display = "none"; } return 0; } items.forEach((item) => { item.style.removeProperty("display"); }); if (badge) { badge.style.display = "none"; } if (items.length === 0) { return 0; } if (maxCount !== undefined && items.length > maxCount) { const amount = items.length - maxCount; for (let i = items.length - 1; i >= maxCount; i--) { const item = items[i]; if (item) item.style.display = "none"; } if (badge) { badge.style.removeProperty("display"); badge.textContent = `+${amount}`; } return amount; } if (container.scrollWidth <= container.clientWidth + 1) { return 0; } let amount = 0; for (let i = items.length - 1; i >= 0; i--) { amount = items.length - i; const item = items[i]; if (item) { item.style.display = "none"; } if (badge) { badge.style.removeProperty("display"); badge.textContent = `+${amount}`; } if (container.scrollWidth <= container.clientWidth + 1) { break; } } return amount; }, [shouldWrap, maxCount]); const checkOverflow = useCallback(() => { setOverflowAmount(applyOverflow()); }, [applyOverflow]); useLayoutEffect(() => { applyOverflow(); }, [applyOverflow, picker.value]); useEffect(() => { const container = containerRef.current; if (!container) return; let rafId: number | null = null; const scheduleCheck = () => { if (rafId !== null) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(() => { checkOverflow(); }); }; const resizeObserver = new ResizeObserver(scheduleCheck); resizeObserver.observe(container); const mutationObserver = new MutationObserver(scheduleCheck); mutationObserver.observe(container, { childList: true, subtree: true }); return () => { if (rafId !== null) cancelAnimationFrame(rafId); resizeObserver.disconnect(); mutationObserver.disconnect(); }; }, [checkOverflow]); useEffect(() => { const container = containerRef.current; if (!container) return; const handleFocusIn = (event: globalThis.FocusEvent) => { setIsFocused(true); onFocus?.(event as unknown as ReactFocusEvent); }; const handleFocusOut = (event: globalThis.FocusEvent) => { const relatedTarget = event.relatedTarget; if ( !(relatedTarget instanceof Node) || !container.contains(relatedTarget) ) { setIsFocused(false); } onBlur?.(event as unknown as ReactFocusEvent); }; container.addEventListener("focusin", handleFocusIn); container.addEventListener("focusout", handleFocusOut); return () => { container.removeEventListener("focusin", handleFocusIn); container.removeEventListener("focusout", handleFocusOut); }; }, [onBlur, onFocus]); const chips = (

{hasValue && content} {hasValue && ( 0 ? undefined : "none" }} className="relative z-10 inline-flex h-6 shrink-0 pointer-events-none items-center justify-center rounded-md border border-border bg-secondary px-2 text-xs tabular-nums select-none" > +{overflowAmount} )}

); return hasControl ? ( chips ) : ( {chips} ); } export type DatePickerChipProps = Omit, "onClick"> & { onClick?: ComponentProps<"button">["onClick"]; onRemove?: () => void; disabled?: boolean; }; function DatePickerChip({ className, children, onClick, onRemove, disabled, ...props }: DatePickerChipProps) { const picker = useDatePickerContext(); const contextOnClick = useContext(DatePickerChipsClickContext); const isDisabled = disabled === true || picker.disabled || picker.readOnly; const label = typeof children === "string" ? children : undefined; const closedOnPointerDownRef = useRef(false); return (

{onRemove && ( { e.preventDefault(); e.stopPropagation(); onRemove(); }} /> )}

); } function DatePickerChipCloseIcon() { return ( ); } export type DatePickerChipRemoveProps = ComponentProps<"button">; function DatePickerChipRemove({ className, children, "aria-label": ariaLabel = "Remove date", ...props }: DatePickerChipRemoveProps) { return ( ); } export type DatePickerValueProps = Omit< ComponentProps, "children" > & { children?: | React.ReactNode | ((details: { value: Date; index: number; valueAsString: string; remove: () => void; }) => React.ReactNode); format?: | string | Intl.DateTimeFormatOptions | ((date: Date, details: { locale: string; timeZone: string }) => string); }; function DatePickerValue({ className, children, format: propFormat, placeholder = "Pick a date", separator, ...props }: DatePickerValueProps) { const picker = useDatePickerContext(); const settings = useContext(DatePickerInputContext); const resolvedFormat = propFormat ?? settings.format; const hasValue = picker.value.length > 0; const locale = settings.locale ?? "en-US"; const timeZone = settings.timeZone ?? "UTC"; const defaultFormatter = useMemo(() => { if ( resolvedFormat !== undefined || children !== undefined || picker.selectionMode === "multiple" ) { return null; } return new Intl.DateTimeFormat(locale, { month: "2-digit", day: "2-digit", year: "numeric", timeZone, }); }, [children, locale, picker.selectionMode, resolvedFormat, timeZone]); if (typeof children === "function") { if (!hasValue) { return ( {placeholder} ); } return ( <> {picker.value.map((dateValue, index) => children({ value: fromDateValue(dateValue), index, valueAsString: picker.valueAsString[index], remove: () => { picker.setValue(picker.value.filter((_, i) => i !== index)); }, }) )} ); } if (picker.selectionMode === "multiple") { if (!hasValue) { return ( {placeholder} ); } return ( <> {picker.value.map((dateValue, index) => { const dateObj = fromDateValue(dateValue); const label = resolvedFormat ? formatDate(dateObj, resolvedFormat, locale, timeZone) : picker.valueAsString[index]; return ( { picker.setValue(picker.value.filter((_, i) => i !== index)); }} > {label} ); })} ); } if (children !== undefined) { return ( {children} ); } const rangeSeparator = separator ?? (picker.selectionMode === "range" ? " – " : ", "); if (resolvedFormat) { if (!hasValue) { return ( {placeholder} ); } return ( {picker.value .map((dateValue) => formatDate( fromDateValue(dateValue), resolvedFormat, locale, timeZone ) ) .join(rangeSeparator)} ); } if (!hasValue) { return ( {placeholder} ); } return ( {picker.value.map((dateValue, index) => { const date = fromDateValue(dateValue); const parts = defaultFormatter!.formatToParts(date); return ( {index > 0 && ( )} {parts.map((part, partIndex) => part.type === "literal" ? ( ) : ( {part.value} ) )} ); })} ); } export type DatePickerInputProps = Omit< DateInputProps, | "value" | "defaultValue" | "onValueChange" | "selectionMode" | "locale" | "timeZone" | "min" | "max" | "isDateUnavailable" | "endAdornment" | "granularity" | "timeOnly" > & { index?: number; showTrigger?: boolean; }; function DatePickerInput({ className, size = "default", index = 0, showTrigger, ...props }: DatePickerInputProps) { const hasControl = useContext(DatePickerControlContext); const picker = useDatePickerContext(); const settings = useContext(DatePickerInputContext); const inputProps = picker.getInputProps({ index }); const selectedValue = picker.value[index]; const { format: contextFormat, ...dateInputSettings } = settings; const format = contextFormat === undefined ? props.format : (date: Date, details: { locale: string; timeZone: string }) => formatDate(date, contextFormat, details.locale, details.timeZone); const shouldShowTrigger = showTrigger ?? (picker.selectionMode === "range" || index === 0); const input = ( picker.isUnavailable(toDateValue(date))} onValueChange={({ value }) => { const nextValue = [...picker.value]; const date = value[0]; if (date) { const nextDate = toDateValue(date); // Retain a separately selected time when editing only the date segments. nextValue[index] = selectedValue ? selectedValue.set({ year: nextDate.year, month: nextDate.month, day: nextDate.day, }) : nextDate; picker.setValue(nextValue.filter(Boolean)); picker.setFocusedValue(nextValue[index]); } else { nextValue.splice(index, 1); picker.setValue(nextValue); } }} endAdornment={ shouldShowTrigger && ( ) } /> ); return hasControl ? input : {input}; } export type DatePickerContentProps = ComponentProps< typeof DatePickerPrimitive.Content > & { reduceMotion?: boolean }; function DatePickerContent({ children, className, reduceMotion = false, ...props }: DatePickerContentProps) { return ( {children ?? } ); } export type DatePickerCalendarProps = CalendarContentProps; function DatePickerCalendar(props: DatePickerCalendarProps) { return ; } function parseTime24( timeStr?: string ): { hour: number; minute: number } | null { if (!timeStr) return null; const match = timeStr.trim().match(/^(\d{1,2}):(\d{2})/); if (!match) return null; const hour = parseInt(match[1], 10); const minute = parseInt(match[2], 10); if ( isNaN(hour) || isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59 ) { return null; } return { hour, minute }; } function to12Hour(hour24: number): { hour12: string; period: "AM" | "PM" } { const period: "AM" | "PM" = hour24 >= 12 ? "PM" : "AM"; let h = hour24 % 12; if (h === 0) h = 12; return { hour12: String(h).padStart(2, "0"), period }; } function to24Hour(hour12: number, period: "AM" | "PM"): number { let h = hour12 % 12; if (period === "PM") h += 12; return h; } type DatePickerTimerScrollColumnProps = { ariaLabel: string; items: string[]; selectedValue: string; onSelect: (value: string) => void; itemClassName: string; open: boolean; reduceMotion: boolean; }; function DatePickerTimerScrollColumn({ ariaLabel, items, selectedValue, onSelect, itemClassName, open, reduceMotion, }: DatePickerTimerScrollColumnProps) { const columnRef = useRef(null); const autoScrollTimeoutRef = useRef(null); const [scrollState, setScrollState] = useState({ canScrollDown: false, canScrollUp: false, }); useEffect(() => { const column = columnRef.current; if (!column) return; const updateScrollState = () => { const canScrollUp = column.scrollTop > 0; const canScrollDown = column.scrollTop + column.clientHeight < column.scrollHeight - 1; setScrollState((previous) => previous.canScrollUp === canScrollUp && previous.canScrollDown === canScrollDown ? previous : { canScrollDown, canScrollUp } ); }; updateScrollState(); column.addEventListener("scroll", updateScrollState, { passive: true }); const resizeObserver = new ResizeObserver(updateScrollState); resizeObserver.observe(column); return () => { column.removeEventListener("scroll", updateScrollState); resizeObserver.disconnect(); }; }, [items.length]); useEffect(() => { if (!open) return; const frame = requestAnimationFrame(() => { const column = columnRef.current; const selected = column?.querySelector("[data-selected]"); if (!column || !selected) return; column.scrollTop = selected.offsetTop - (column.clientHeight - selected.clientHeight) / 2; }); return () => cancelAnimationFrame(frame); }, [open, selectedValue]); const stopAutoScroll = useCallback(() => { if (autoScrollTimeoutRef.current !== null) { window.clearTimeout(autoScrollTimeoutRef.current); autoScrollTimeoutRef.current = null; } }, []); const startAutoScroll = useCallback( (direction: "up" | "down") => { if (reduceMotion || autoScrollTimeoutRef.current !== null) return; const scroll = () => { const column = columnRef.current; if (!column) return; const maxScrollTop = Math.max( 0, column.scrollHeight - column.clientHeight ); const scrollTop = Math.min(Math.max(column.scrollTop, 0), maxScrollTop); const isAtEdge = scrollTop === (direction === "up" ? 0 : maxScrollTop); if (isAtEdge) { stopAutoScroll(); return; } const items = Array.from( column.querySelectorAll("[role=option]") ); const scrollArrowHeight = 24; let nextScrollTop = direction === "up" ? 0 : maxScrollTop; if (direction === "up") { let firstVisibleIndex = 0; const visibleTop = scrollTop + scrollArrowHeight - 1; for (let i = 0; i < items.length; i += 1) { const item = items[i]; if (item && item.offsetTop >= visibleTop) { firstVisibleIndex = i; break; } } const target = items[Math.max(0, firstVisibleIndex - 1)]; if (target) { nextScrollTop = Math.max(0, target.offsetTop - scrollArrowHeight); } } else { let lastVisibleIndex = items.length - 1; const visibleBottom = scrollTop + column.clientHeight - scrollArrowHeight + 1; for (let i = 0; i < items.length; i += 1) { const item = items[i]; if (item && item.offsetTop + item.offsetHeight > visibleBottom) { lastVisibleIndex = Math.max(0, i - 1); break; } } const target = items[Math.min(items.length - 1, lastVisibleIndex + 1)]; if (target) { nextScrollTop = Math.min( maxScrollTop, target.offsetTop + target.offsetHeight - column.clientHeight + scrollArrowHeight ); } } if (nextScrollTop === scrollTop) { stopAutoScroll(); return; } column.scrollTop = nextScrollTop; autoScrollTimeoutRef.current = window.setTimeout(scroll, 40); }; autoScrollTimeoutRef.current = window.setTimeout(scroll, 40); }, [reduceMotion, stopAutoScroll] ); useEffect(() => stopAutoScroll, [stopAutoScroll]); const scrollColumn = (direction: "up" | "down") => { const column = columnRef.current; if (!column) return; stopAutoScroll(); const distance = column.clientHeight / 2; const nextTop = Math.min( Math.max( column.scrollTop + (direction === "up" ? -distance : distance), 0 ), column.scrollHeight - column.clientHeight ); column.scrollTo({ top: nextTop, behavior: reduceMotion ? "auto" : "smooth", }); }; const activeIndex = Math.max(0, items.indexOf(selectedValue)); return (

{scrollState.canScrollUp && ( )} {scrollState.canScrollDown && ( )}

); } export type DatePickerTimerProps = Omit< ComponentProps<"button">, "onChange" | "value" | "defaultValue" > & { value?: string; defaultValue?: string; onChange?: ( event: | React.ChangeEvent | { target: { value: string; name?: string; id?: string } } ) => void; onValueChange?: (value: string) => void; format?: "12" | "24"; step?: number; placeholder?: string; invalid?: boolean; size?: | "default" | "xs" | "sm" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "icon-xl"; popupClassName?: string; reduceMotion?: boolean; readOnly?: boolean; }; function DatePickerTimer({ id, name, value: propValue, defaultValue, onChange, onValueChange, format = "12", step = 1, placeholder = "Select time", size = "default", className, popupClassName, reduceMotion = false, disabled, readOnly, invalid, ...props }: DatePickerTimerProps) { const isControlled = propValue !== undefined; const [internalValue, setInternalValue] = useState(defaultValue ?? ""); const currentValue = isControlled ? propValue : internalValue; const parsed = parseTime24(currentValue); const [open, setOpen] = useState(false); const [selectedPeriod, setSelectedPeriod] = useState<"AM" | "PM">( parsed ? to12Hour(parsed.hour).period : "AM" ); const activePeriod = parsed ? to12Hour(parsed.hour).period : selectedPeriod; const displayTime = parsed ? format === "24" ? `${String(parsed.hour).padStart(2, "0")}:${String(parsed.minute).padStart(2, "0")}` : `${to12Hour(parsed.hour).hour12}:${String(parsed.minute).padStart(2, "0")} ${to12Hour(parsed.hour).period}` : ""; const commitTime = (h: number, m: number) => { const next24 = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`; if (!isControlled) { setInternalValue(next24); } if (onChange) { const syntheticEvent = { target: { value: next24, name, id }, currentTarget: { value: next24, name, id }, } as unknown as React.ChangeEvent; onChange(syntheticEvent); } onValueChange?.(next24); }; const handleHourSelect = (selectedH: string) => { if (disabled || readOnly) return; const hNum = parseInt(selectedH, 10); const nextHour = format === "24" ? hNum : to24Hour(hNum, activePeriod); const nextMinute = parsed ? parsed.minute : 0; commitTime(nextHour, nextMinute); }; const handleMinuteSelect = (selectedM: string) => { if (disabled || readOnly) return; const mNum = parseInt(selectedM, 10); const nextHour = parsed ? parsed.hour : format === "24" ? 12 : to24Hour(12, activePeriod); commitTime(nextHour, mNum); }; const handlePeriodSelect = (p: "AM" | "PM") => { if (disabled || readOnly) return; setSelectedPeriod(p); if (parsed) { const current12 = parseInt(to12Hour(parsed.hour).hour12, 10); commitTime(to24Hour(current12, p), parsed.minute); } }; const stepVal = Math.max(1, step); const hours = useMemo( () => format === "24" ? Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0")) : [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ], [format] ); const minutes = useMemo( () => Array.from({ length: Math.ceil(60 / stepVal) }, (_, i) => String(i * stepVal).padStart(2, "0") ), [stepVal] ); const activeHourStr = parsed ? format === "24" ? String(parsed.hour).padStart(2, "0") : to12Hour(parsed.hour).hour12 : ""; const activeMinuteStr = parsed ? String(parsed.minute).padStart(2, "0") : ""; return ( <> )["data-invalid"] as | string | undefined) ?? (invalid ? "" : undefined) } className={cn( "h-9 min-w-0 max-w-full justify-start gap-2 px-3 font-normal tabular-nums transition-[border-color,outline-width,outline-offset,outline-color] duration-100 ease-out border-input/70 not-dark:border-input dark:border-input/70 data-invalid:border-destructive! data-invalid:outline-2 data-invalid:outline-offset-2 data-invalid:outline-destructive/50! data-invalid:outline-solid data-invalid:shadow-none! aria-invalid:border-destructive! aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-destructive/50! aria-invalid:outline-solid aria-invalid:shadow-none! dark:data-invalid:border-destructive! dark:aria-invalid:border-destructive! dark:data-invalid:outline-destructive/50! dark:aria-invalid:outline-destructive/50! focus-visible:data-invalid:border-destructive! focus-visible:aria-invalid:border-destructive! focus-visible:data-invalid:outline-destructive/50! focus-visible:aria-invalid:outline-destructive/50! focus-visible:data-invalid:ring-0 focus-visible:aria-invalid:ring-0 [[data-slot=field][data-invalid]_&]:border-destructive! dark:[[data-slot=field][data-invalid]_&]:border-destructive! [[data-slot=field][data-invalid]_&]:outline-2 [[data-slot=field][data-invalid]_&]:outline-offset-2 [[data-slot=field][data-invalid]_&]:outline-destructive/50! dark:[[data-slot=field][data-invalid]_&]:outline-destructive/50! [[data-slot=field][data-invalid]_&]:outline-solid [[data-slot=field][data-invalid]_&]:shadow-none! motion-reduce:transition-none", size.startsWith("icon") && "hitbox-[1px]", className )} data-invalid-shake="owner" data-slot="date-picker-timer-trigger" {...(props as Record)} /> } > {name && }

{format === "12" && ( )}

); } export type DatePickerClearTriggerProps = Omit; function DatePickerClearTrigger({ children, className, render, size = "icon", ref, ...props }: DatePickerClearTriggerProps) { const picker = useDatePickerContext(); const disabled = picker.disabled || picker.readOnly || !!props.disabled; return useRender({ defaultTagName: "button", render: render ??