4f: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"] 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/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"] 51:T4655,"use client" import * as React from "react" import { eachDayOfInterval, isBefore, isAfter, startOfDay, } from "date-fns" import type { Locale } from "date-fns" import { Calendar as CalendarIcon, X as CloseIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Separator } from "@/components/ui/separator" import { formatDateLabel, formatTriggerText, isRangeComplete, } from "./date-range-utils" import type { DateRange } from "./date-range-utils" import { DateRangeCalendar, type DateRangeCalendarLabels, } from "./date-range-calendar" import { DateRangePresets, getDateRangePresets, } from "./date-range-presets" import type { DateRangePreset } from "./date-range-presets" export type { DateRange, DateRangePreset } export { getDateRangePresets } export interface DateRangePickerLabels extends DateRangeCalendarLabels { /** Accessible name for the trigger clear action. */ clearAction: string /** Shown in the trigger while only the start date is picked. */ selectEndDate: string /** Accessible name for the preset group. */ presetsGroup?: string | undefined /** Announced when the start date has been picked. */ startSelected?: ((formattedStartDate: string) => string) | undefined /** Announced when a complete range is picked or applied. */ rangeSelected?: ((formattedFrom: string, formattedTo: string) => string) | undefined /** Announced when the value clears. */ cleared?: string | undefined } const DEFAULT_LABELS: DateRangePickerLabels = { previousMonth: "Previous month", nextMonth: "Next month", todayLabel: (formatted) => `Today, ${formatted}`, clearAction: "Clear date range", selectEndDate: "Select end date", presetsGroup: "Quick ranges", startSelected: (formatted) => `Start date selected, ${formatted}. Choose an end date.`, rangeSelected: (from, to) => `Date range selected, ${from} through ${to}.`, cleared: "Date range cleared.", } export interface DateRangePickerProps extends Omit< React.ComponentProps, | "onChange" | "value" | "defaultValue" | "children" | "disabled" | "required" | "type" | "variant" | "size" | "appearance" > { /** Controlled range. Omit to let the picker manage its own value. */ value?: DateRange | undefined /** Initial range for uncontrolled use. */ defaultValue?: DateRange | undefined /** Called with the committed range, or undefined once cleared. */ onValueChange?: ((range: DateRange | undefined) => void) | undefined /** Controlled popover state. */ open?: boolean | undefined /** Initial popover state for uncontrolled use. */ defaultOpen?: boolean | undefined /** Called whenever the popover opens or closes. */ onOpenChange?: ((open: boolean) => void) | undefined /** Earliest selectable date; navigation stops here too. */ minDate?: Date | undefined /** Latest selectable date; navigation stops here too. */ maxDate?: Date | undefined /** Extra availability rules beyond min and max. */ isDateDisabled?: ((date: Date) => boolean) | undefined /** Visible calendar months. One month is used on narrow screens. */ numberOfMonths?: number /** A date-fns locale used for formatting and week starts. */ locale?: Locale | undefined /** Overrides the locale's first day of the week. */ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined /** Shows dates from adjacent months. */ showOutsideDays?: boolean /** Optional quick ranges shown beside the calendar. */ presets?: DateRangePreset[] | undefined /** Requires Apply before the value commits. */ confirmMode?: boolean /** Allows clearing the value from the trigger and footer. */ clearable?: boolean /** Prevents all interaction. */ disabled?: boolean /** Shows the value without allowing edits. */ readOnly?: boolean /** Marks the value as required; hides the clear action. */ required?: boolean /** Applies the invalid treatment to the trigger. */ invalid?: boolean /** Trigger text while empty. */ placeholder?: string /** Replaces the visible formatting for complete ranges. */ formatRange?: ((range: DateRange) => string) | undefined /** Overrides built-in strings for localization. */ labels?: Partial } /** * Picks a date range from a popover of quick ranges and calendars. Values * stay incomplete until the second endpoint arrives, so applications never * receive half a range. */ function DateRangePicker({ value, defaultValue, onValueChange, open, defaultOpen = false, onOpenChange, minDate, maxDate, isDateDisabled, numberOfMonths = 2, locale, weekStartsOn, showOutsideDays = true, presets, confirmMode = false, clearable = true, disabled = false, readOnly = false, required = false, invalid = false, placeholder = "Select date range", formatRange, labels: labelsProp, className, ...triggerProps }: DateRangePickerProps) { const labels: DateRangePickerLabels = React.useMemo( () => ({ ...DEFAULT_LABELS, ...labelsProp }), [labelsProp] ) const [internalValue, setInternalValue] = React.useState(defaultValue) const isControlledValue = value !== undefined // An absent controlled value reads the same as a cleared value, which is // correct either way: both mean no committed range. const committed = (isControlledValue ? value : internalValue) ?? undefined const [openUncontrolled, setOpenUncontrolled] = React.useState(defaultOpen) const isOpen = open !== undefined ? open : openUncontrolled // Draft records work in progress while the popover is open. When it is // inactive the trigger falls back to the committed value. const [draftActive, setDraftActive] = React.useState(false) const [draftValue, setDraftValue] = React.useState(undefined) const [monthSync, setMonthSync] = React.useState<{ date: Date; nonce: number } | undefined>( undefined ) const [announcement, setAnnouncement] = React.useState("") const displayed: DateRange | undefined = draftActive ? draftValue : committed const effectiveMonths = useEffectiveMonths(numberOfMonths) const setOpen = React.useCallback( (next: boolean) => { if (open === undefined) { setOpenUncontrolled(next) } onOpenChange?.(next) // Discarding the draft on both edges covers cancel, outside clicks, // and Escape without dedicated paths. setDraftActive(false) setDraftValue(undefined) }, [open, onOpenChange] ) const commit = React.useCallback( (range: DateRange | undefined) => { if (!isControlledValue) { setInternalValue(range) } onValueChange?.(range) }, [isControlledValue, onValueChange] ) const announce = React.useCallback((message: string | undefined) => { if (message) { setAnnouncement(message) } }, []) const announceSelection = React.useCallback( (range: DateRange | undefined) => { if (!range?.from) { return } if (!range.to) { announce(labels.startSelected?.(formatDateLabel(range.from, locale))) return } announce( labels.rangeSelected?.( formatDateLabel(range.from, locale), formatDateLabel(range.to, locale) ) ) }, [announce, labels, locale] ) const isAvailable = React.useCallback( (date: Date) => { const day = startOfDay(date) if (minDate && isBefore(day, startOfDay(minDate))) { return false } if (maxDate && isAfter(day, startOfDay(maxDate))) { return false } return isDateDisabled ? !isDateDisabled(day) : true }, [minDate, maxDate, isDateDisabled] ) const spansUnavailableDay = React.useCallback( (range: DateRange): boolean => { if (!range.from || !range.to) { return false } const days = eachDayOfInterval({ start: startOfDay(range.from), end: startOfDay(range.to) }) return days.some((day) => !isAvailable(day)) }, [isAvailable] ) const handleDaySelect = React.useCallback( (day: Date) => { const base: DateRange = displayed ?? { from: undefined } let next: DateRange if (base.from && base.to) { // Starting another range never asks users to clear first. next = { from: day } } else if (base.from) { const completed = day.getTime() >= base.from.getTime() ? { from: base.from, to: day } : { from: day, to: base.from } next = completed } else { next = { from: day } } if (next.to && spansUnavailableDay(next)) { // A range would cross an unavailable date; restart from this day. next = { from: day } } setDraftActive(true) setDraftValue(next) setMonthSync((current) => ({ date: next.from ?? day, nonce: (current?.nonce ?? 0) + 1 })) if (isRangeComplete(next)) { announceSelection(next) if (!confirmMode) { commit(next) setOpen(false) } } else { announce(labels.startSelected?.(formatDateLabel(day, locale))) } }, [ displayed, spansUnavailableDay, announce, announceSelection, labels, locale, confirmMode, commit, setOpen, ] ) const handlePresetSelect = React.useCallback( (range: DateRange) => { setDraftActive(true) setDraftValue(range) setMonthSync((current) => ({ date: range.from ?? new Date(), nonce: (current?.nonce ?? 0) + 1 })) announceSelection(range) if (!confirmMode) { if (isRangeComplete(range)) { commit(range) } setOpen(false) } }, [announceSelection, confirmMode, commit, setOpen] ) const handleClear = React.useCallback(() => { setDraftActive(true) setDraftValue(undefined) announce(labels.cleared) }, [announce, labels]) const canClear = clearable && !required const triggerText = formatTriggerText(displayed, { locale, placeholder, selectEndDateLabel: labels.selectEndDate, formatRange, }) const showFooter = confirmMode && !readOnly if (readOnly) { return (

{triggerText}

) } return (

} > {triggerText} {canClear && committed !== undefined && ( )}

{presets && presets.length > 0 && ( <> )}

{showFooter && ( <>

{canClear ? ( ) : ( )}

)}

{announcement}

) } interface TriggerStyleInput { invalid: boolean } function triggerClassNames({ invalid }: TriggerStyleInput): string { return cn( "inline-flex h-[var(--hui-space-10)] w-full min-w-0 items-center gap-[var(--hui-space-3)] rounded-[var(--hui-radius-2)] border-[0.5px] bg-[var(--hui-color-background-base-primary)] text-left text-[var(--hui-color-foreground-base-primary)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-small)] [transition:var(--hui-transition-interactive)]", invalid ? "border-[var(--hui-color-border-danger-emphasis)]" : "border-[var(--hui-color-border-base-tertiary)]" ) } /** * Keeps one calendar on phones and the requested count elsewhere. Media * queries alone cannot change how many months DayPicker renders. */ function useEffectiveMonths(requested: number): number { const query = "(max-width: 47.99rem)" const subscribeNarrow = React.useCallback( (onStoreChange: () => void) => { const mediaQueryList = window.matchMedia(query) mediaQueryList.addEventListener("change", onStoreChange) return () => { mediaQueryList.removeEventListener("change", onStoreChange) } }, [] ) const getServerSnapshot = React.useCallback(() => false, []) const getSnapshot = React.useCallback(() => window.matchMedia(query).matches, []) const narrow = React.useSyncExternalStore(subscribeNarrow, getSnapshot, getServerSnapshot) if (!Number.isFinite(requested) || requested < 1) { return 2 } return narrow ? Math.min(requested, 1) : requested } // Re-exported for consumers composing their own surface around the calendar. export { DateRangeCalendar } export type { DateRangeCalendarProps } from "./date-range-calendar" export { DateRangePicker } 52:T338e,"use client" import * as React from "react" import { DayPicker, dateMatchModifiers } from "react-day-picker" import type { ClassNames, DateRange as DayPickerDateRange, Matcher } from "react-day-picker" import { format } from "date-fns" import type { Locale } from "date-fns" import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { completeRange, type DateRange } from "./date-range-utils" /** * Shared day button styles. The button fills its grid cell so the clickable * area and the range fill cover the whole square. */ const DAY_BUTTON_CLASS = "inline-flex h-full w-full cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-[var(--hui-radius-1)] p-0 text-[var(--hui-color-foreground-base-primary)] [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] outline-none motion-safe:[transition:background-color_var(--hui-duration-fast)_var(--hui-ease-out)] hover:bg-[var(--hui-color-background-base-primary-hover)] focus-visible:[outline:var(--hui-focus-ring)] focus-visible:[outline-offset:-1px]" /* * Range states arrive as class names on the cell (RDP's `range_start`, * `range_end`, and `range_middle` keys), never as data attributes. Each key * targets its own button so the fill reads as one object: middle cells stay * square while endpoints round only their outer edge. Committed ranges use * the solid accent; the hover and keyboard preview keeps the same shape * with lighter fills. */ /* * Range states arrive as class names on the cell (RDP's `range_start`, * `range_end`, and `range_middle` keys), never as data attributes. Each key * targets its own button so the fill reads as one object: middle cells stay * square while endpoints round only their outer edge. Committed ranges use * the solid accent; the hover and keyboard preview keeps the same shape * with lighter fills. Marker classes let the base cell exclude selected * days from today-ring and muted-outside treatments. */ const CELL_BASE_CLASSES = "h-(--hui-space-10) w-(--hui-space-10) p-0 text-center align-middle [&[data-today]:not([data-disabled]):not(.hui-range-endpoint):not(.hui-range-midpoint)>button]:shadow-[inset_0_0_0_1px_var(--hui-color-border-accent-primary)] [&[data-disabled]>button]:pointer-events-none [&[data-disabled]>button]:cursor-not-allowed [&[data-disabled]>button]:text-[var(--hui-color-foreground-base-tertiary)]! [&[data-outside]:not([data-disabled]):not(.hui-range-endpoint):not(.hui-range-midpoint)>button:not(:disabled)]:text-[var(--hui-color-foreground-base-secondary)]" function buildRangeClassNames(previewing: boolean): Partial { const fill = previewing ? "[&>button]:bg-[var(--hui-color-background-accent-primary)]! [&>button]:text-[var(--hui-color-foreground-accent-primary-hover)]!" : "[&>button]:bg-[var(--hui-color-background-accent-emphasis)]! [&>button]:text-[var(--hui-color-foreground-accent-emphasis)]! [&>button:hover]:bg-[var(--hui-color-background-accent-emphasis-hover)]!" const emphasis = cn( "hui-range-endpoint [&>button]:[font-weight:var(--hui-font-weight-medium)]", fill ) return { range_start: cn( "[&>button]:rounded-s-[var(--hui-radius-2)]! [&>button]:rounded-e-none!", emphasis ), range_end: cn( "[&>button]:rounded-e-[var(--hui-radius-2)]! [&>button]:rounded-s-none!", emphasis ), // A single-day range carries both keys; the opposite-side resets cancel // out, leaving one square-cornered accented cell without tails. range_middle: "hui-range-midpoint [&>button]:rounded-none! [&>button]:bg-[var(--hui-color-background-accent-primary)]! [&>button]:text-[var(--hui-color-foreground-base-secondary)]!", } } export interface DateRangeCalendarLabels { previousMonth: string nextMonth: string todayLabel: (formattedDate: string) => string } export interface DateRangeCalendarProps { /** The committed or temporary range rendered as selected. */ selected?: DateRange | undefined /** Called for every selectable day the user activates. */ onDaySelect: (date: Date) => void /** Earliest selectable date; navigation stops here too. */ minDate?: Date | undefined /** Latest selectable date; navigation stops here too. */ maxDate?: Date | undefined /** Extra availability rules beyond min and max. */ isDateDisabled?: ((date: Date) => boolean) | undefined numberOfMonths?: number locale?: Locale | undefined weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined showOutsideDays?: boolean labels: DateRangeCalendarLabels /** * When the value changes while the picker stays open, the parent bumps a * nonce anchored to the month that should become visible, such as after * picking a preset from another month. */ monthSync?: { date: Date; nonce: number } | undefined } export function DateRangeCalendar({ selected, onDaySelect, minDate, maxDate, isDateDisabled, numberOfMonths = 2, locale, weekStartsOn, showOutsideDays = true, labels, monthSync, }: DateRangeCalendarProps) { // The calendar mounts once per popover session, so starting from the // current selection is enough. No sync effects needed. const initialMonth = React.useMemo(() => resolveInitialMonth(selected), []) // eslint-disable-line react-hooks/exhaustive-deps const [month, setMonth] = React.useState(initialMonth) const [previewEnd, setPreviewEnd] = React.useState(undefined) const disabledMatchers = buildDisabledMatchers(minDate, maxDate, isDateDisabled) const startNavigationMonth = minDate ? firstOfMonth(minDate) : undefined const endNavigationMonth = maxDate ? firstOfMonth(maxDate) : undefined // Adjusting state during render is the React-approved way to react to a // parent-driven "show this month" signal without effect cascades. const [syncedNonce, setSyncedNonce] = React.useState(monthSync?.nonce) if (monthSync && monthSync.nonce !== syncedNonce) { setSyncedNonce(monthSync.nonce) setMonth( clampToNavigation( firstOfMonth(monthSync.date), startNavigationMonth, endNavigationMonth ) ) if (previewEnd) { setPreviewEnd(undefined) } } const selectingEnd = Boolean(selected?.from && !selected?.to) const displayed: DayPickerDateRange | undefined = selectingEnd && selected?.from && previewEnd && !isSameCalendarDay(selected.from, previewEnd) ? completeRange(selected.from, previewEnd) : selected const previewing = Boolean( displayed && displayed.from && displayed.to && !isSameCalendarDay(displayed.from, displayed.to) && selectingEnd ) const rangeClassNames = buildRangeClassNames(previewing) const previousDisabled = startNavigationMonth ? month.getTime() <= startNavigationMonth.getTime() : false const nextDisabled = endNavigationMonth ? addMonths(firstOfMonth(month), numberOfMonths - 1).getTime() >= endNavigationMonth.getTime() : false // Hover and keyboard focus preview the proposed range while only the // start date exists. Unavailable dates never become the previewed end. const updatePreviewEnd = (date: Date, unavailable: boolean) => { if (!selectingEnd || unavailable) { return } setPreviewEnd(date) } const clearPreviewEnd = () => { setPreviewEnd(undefined) } return (

{ void range if (!triggerDate || matchersReject(disabledMatchers, triggerDate)) { return } onDaySelect(triggerDate) }} onDayMouseEnter={(date, modifiers) => { updatePreviewEnd(date, modifiers.disabled === true) }} onDayMouseLeave={() => { clearPreviewEnd() }} onDayFocus={(date, modifiers) => { updatePreviewEnd(date, modifiers.disabled === true) }} onDayBlur={() => { clearPreviewEnd() }} month={month} onMonthChange={(nextMonthValue) => { setMonth( clampToNavigation(nextMonthValue, startNavigationMonth, endNavigationMonth) ) }} numberOfMonths={numberOfMonths} hideNavigation showOutsideDays={showOutsideDays} autoFocus locale={locale} weekStartsOn={weekStartsOn} disabled={disabledMatchers} classNames={{ months: "flex items-start gap-x-[var(--hui-space-8)]", month: "flex flex-col", month_caption: "flex h-(--hui-space-9) items-center justify-center text-center text-[var(--hui-color-foreground-base-primary)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-small)]", caption_label: "", nav: "hidden", button_previous: "hidden", button_next: "hidden", weekdays: "", weekday: "w-(--hui-space-10) pb-(--hui-space-2) text-center text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-mini)]", week: "min-w-max", weeks: "border-collapse", month_grid: "border-collapse", day: CELL_BASE_CLASSES, day_button: DAY_BUTTON_CLASS, today: "", outside: "", disabled: "", range_middle: rangeClassNames.range_middle ?? "", range_start: rangeClassNames.range_start ?? "", range_end: rangeClassNames.range_end ?? "", selected: "", footer: "sr-only", }} labels={{ labelDayButton: (date, modifiers, options) => buildDayLabel(date, modifiers, options ?? {}, locale, labels.todayLabel), }} />

) } function buildDisabledMatchers( minDate: Date | undefined, maxDate: Date | undefined, isDateDisabled: ((date: Date) => boolean) | undefined ): Matcher[] { const matchers: Matcher[] = [] if (minDate) { matchers.push({ before: minDate }) } if (maxDate) { matchers.push({ after: maxDate }) } if (isDateDisabled) { matchers.push(isDateDisabled) } return matchers } function matchersReject(matchers: Matcher[], date: Date): boolean { return matchers.length > 0 && dateMatchModifiers(date, matchers) } function resolveInitialMonth(selected: DateRange | undefined): Date { const anchor = selected?.from ?? selected?.to ?? new Date() return firstOfMonth(anchor) } function firstOfMonth(date: Date): Date { return new Date(date.getFullYear(), date.getMonth(), 1) } function addMonths(date: Date, amount: number): Date { return new Date(date.getFullYear(), date.getMonth() + amount, 1) } function shiftMonth( month: Date, amount: number, startLimit: Date | undefined, endLimit: Date | undefined ): Date { let candidate = addMonths(month, amount) if (startLimit && candidate < startLimit) { candidate = startLimit } if (endLimit && candidate > endLimit) { candidate = endLimit } return candidate } function clampToNavigation( month: Date, startMonth: Date | undefined, endMonth: Date | undefined ): Date { return shiftMonth(month, 0, startMonth, endMonth) } function isSameCalendarDay(a: Date, b: Date): boolean { return ( a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() ) } function buildDayLabel( date: Date, modifiers: Record, options: { locale?: Locale }, locale: Locale | undefined, todayLabel: (formattedDate: string) => string ): string { let label = format(date, "EEEE, MMMM d, yyyy", { ...(options ?? {}), locale }) if (modifiers.range_start && modifiers.range_end) { label += ", single day range" } else if (modifiers.range_start) { label += ", start of range" } else if (modifiers.range_end) { label += ", end of range" } else if (modifiers.range_middle) { label += ", within range" } if (modifiers.today) { label = todayLabel(label) } return label } 53:T10b3,"use client" import { endOfDay, startOfDay, startOfMonth, subDays, subMonths, endOfMonth, } from "date-fns" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { type DateRange, isSameRange } from "./date-range-utils" /** * A preset carries a label and returns its range when chosen. Calculating * the range at selection time keeps relative presets such as "Last 7 days" * correct after the component has been mounted for a while. */ export interface DateRangePreset { label: string getValue: () => DateRange } /** * The quick ranges recommended for a first configuration. Applications map * this list to localize the labels or replace entries with their own * ranges; nothing here is baked into the picker itself. */ export function getDateRangePresets(): DateRangePreset[] { return [ { label: "Today", getValue: todayRange }, { label: "Yesterday", getValue: yesterdayRange }, { label: "Last 7 days", getValue: () => lastNDaysRange(7) }, { label: "Last 30 days", getValue: () => lastNDaysRange(30) }, { label: "This month", getValue: thisMonthRange }, { label: "Last month", getValue: lastMonthRange }, ] } function todayRange(): DateRange { const day = startOfDay(new Date()) return { from: day, to: day } } function yesterdayRange(): DateRange { const day = subDays(startOfDay(new Date()), 1) return { from: day, to: day } } function lastNDaysRange(days: number): DateRange { const yesterday = subDays(startOfDay(new Date()), 1) return { from: subDays(yesterday, days - 1), to: yesterday } } function thisMonthRange(): DateRange { const now = new Date() return { from: startOfMonth(now), to: endOfDay(now) } } function lastMonthRange(): DateRange { const previous = subMonths(new Date(), 1) return { from: startOfMonth(previous), to: endOfMonth(previous) } } export interface DateRangePresetsProps { presets: DateRangePreset[] /** The range shown in the calendar; used for the selected state. */ value?: DateRange | undefined onSelect: (range: DateRange) => void /** Accessible name for the preset group. */ ariaLabel?: string | undefined disabled?: boolean | undefined className?: string | undefined } /** * The narrow column of quick ranges beside the calendar. Presets use quiet * text buttons so they never compete visually with the selected range. */ export function DateRangePresets({ presets, value, onSelect, ariaLabel, disabled, className, }: DateRangePresetsProps) { return (

{presets.map((preset) => { const isSelected = presetMatches(preset, value) return ( ) })}

) } /** * A preset counts as selected only when it produces exactly the current * complete range, compared by calendar day. */ function presetMatches(preset: DateRangePreset, value: DateRange | undefined): boolean { if (!value?.from || !value.to) { return false } const target = preset.getValue() return isSameRange(target, value) } 54:T95a,import { differenceInCalendarDays, format, isSameDay } from "date-fns" import type { Locale } from "date-fns" /** * The value shape used by DateRangePicker. `to` may be missing while a * selection is still incomplete; a cleared value is undefined at the * component level. */ export interface DateRange { from: Date | undefined to?: Date | undefined } export function isRangeComplete(range: DateRange | undefined): boolean { return Boolean(range?.from && range?.to) } /** * Compares two ranges by calendar day so equal values constructed at * different times of day stay interchangeable. */ export function isSameRange( a: DateRange | undefined, b: DateRange | undefined ): boolean { if (!a && !b) { return true } if (!a || !b) { return false } const fromMatches = (!a.from && !b.from) || (a.from !== undefined && b.from !== undefined && isSameDay(a.from, b.from)) const toMatches = (!a.to && !b.to) || (a.to !== undefined && b.to !== undefined && isSameDay(a.to, b.to)) return fromMatches && toMatches } /** * Builds the completed range for two picked days. When the second day comes * before the first, the earlier day becomes the start instead of reporting * an error. */ export function completeRange(first: Date, second: Date): DateRange { const [from, to] = differenceInCalendarDays(second, first) < 0 ? [second, first] : [first, second] return { from, to } } export function formatDateLabel(date: Date, locale?: Locale): string { return format(date, "MMM d, yyyy", { locale }) } export interface FormatTriggerOptions { locale?: Locale placeholder: string selectEndDateLabel: string formatRange?: ((range: DateRange) => string) | undefined } /** * Returns the text shown in the trigger for the current selection state: * the placeholder, the partial "start - Select end date" state, or the full * range formatted by `formatRange` or the default formatter. */ export function formatTriggerText( range: DateRange | undefined, options: FormatTriggerOptions ): string { if (!range?.from) { return options.placeholder } const start = formatDateLabel(range.from, options.locale) if (!range.to) { return `${start} - ${options.selectEndDateLabel}` } if (options.formatRange) { return options.formatRange(range) } return `${start} - ${formatDateLabel(range.to, options.locale)}` } 4e:["$","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","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"}]]}]}],["$","li","honestui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/honestui","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":"honestui"}]]}]}],["$","li","react-day-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker"}]]}]}]]}],["$","$L4f",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/button.json","https://www.honestui.com/r/popover.json","https://www.honestui.com/r/separator.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"date-range-picker.tsx","content":"$51","type":"registry:component","target":"components/ui/date-range-picker/date-range-picker.tsx"},{"path":"date-range-calendar.tsx","content":"$52","type":"registry:component","target":"components/ui/date-range-picker/date-range-calendar.tsx"},{"path":"date-range-presets.tsx","content":"$53","type":"registry:component","target":"components/ui/date-range-picker/date-range-presets.tsx"},{"path":"date-range-utils.ts","content":"$54","type":"registry:component","target":"components/ui/date-range-picker/date-range-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]