4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1a30,import { forwardRef } from "react"; import { DatePicker as Primitive, type DatePickerRootProps, type TriggerProps, type ContentProps, type HeaderProps, type NavButtonProps, type TitleProps, type GridProps, type DayProps, type FooterProps, type ActionButtonProps, } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { rootClassNames, triggerClassNames, contentClassNames, headerClassNames, gridClassNames, dayClassNames, footerClassNames, } from "../../theme"; export const Root = forwardRef( ({ className, size, ...props }, ref) => ( ), ); Root.displayName = "DatePicker.Root"; export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, ...props }, ref) => ( ), ); Trigger.displayName = "DatePicker.Trigger"; export const Content = forwardRef( ({ className, inlineClassName, ...props }, ref) => ( ), ); Content.displayName = "DatePicker.Content"; export const Header = forwardRef(({ className, ...props }, ref) => ( )); Header.displayName = "DatePicker.Header"; export const PrevButton = forwardRef( ({ className, ...props }, ref) => ( ), ); PrevButton.displayName = "DatePicker.PrevButton"; export const NextButton = forwardRef( ({ className, ...props }, ref) => ( ), ); NextButton.displayName = "DatePicker.NextButton"; export const Title = forwardRef( ({ className, selectClassName, ...props }, ref) => ( ), ); Title.displayName = "DatePicker.Title"; export const Grid = forwardRef( ({ className, weekdayClassName, weekdaysClassName, weekClassName, ...props }, ref) => ( ), ); Grid.displayName = "DatePicker.Grid"; export const Day = forwardRef(({ className, ...props }, ref) => ( )); Day.displayName = "DatePicker.Day"; export const Footer = forwardRef(({ className, ...props }, ref) => ( )); Footer.displayName = "DatePicker.Footer"; export const ClearButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ClearButton.displayName = "DatePicker.ClearButton"; export const CancelButton = forwardRef( ({ className, ...props }, ref) => ( ), ); CancelButton.displayName = "DatePicker.CancelButton"; export const ConfirmButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ConfirmButton.displayName = "DatePicker.ConfirmButton"; export const TodayButton = forwardRef( ({ className, ...props }, ref) => ( ), ); TodayButton.displayName = "DatePicker.TodayButton"; 53:T58c,import * as C from "./Compound"; import type { DatePickerRootProps } from "../../ui-primitives/index"; import { rangeClassNames } from "../../theme"; export interface DatePickerProps extends Omit { hideHeader?: boolean; hideFooter?: boolean; } export function DatePickerSimple({ hideHeader, hideFooter, ...props }: DatePickerProps) { const showFooter = hideFooter !== undefined ? !hideFooter : !props.inline && !props.shouldCloseOnSelect; const showNav = props.captionLayout !== "dropdown"; const numMonths = props.numberOfMonths ?? 1; return ( {!props.inline && } {!hideHeader && ( {showNav && } {showNav && } )} {numMonths > 1 ? (

{Array.from({ length: numMonths }, (_, i) => ( ))}

) : ( )} {showFooter && ( )} ); } export const DatePicker = Object.assign(DatePickerSimple, C); 54:T1ed4,import { forwardRef } from "react"; import { DateRangePicker as Primitive, type DateRangePickerRootProps, type TriggerProps, type ContentProps, type HeaderProps, type NavButtonProps, type TitleProps, type GridProps, type DayProps, type FooterProps, type ActionButtonProps, type CalendarsProps, type PresetsProps, type PresetItemProps, } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { rootClassNames, triggerClassNames, contentClassNames, headerClassNames, gridClassNames, dayClassNames, footerClassNames, rangeClassNames, } from "../../theme"; export const Root = forwardRef( ({ className, size, ...props }, ref) => ( ), ); Root.displayName = "DateRangePicker.Root"; export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, ...props }, ref) => ( ), ); Trigger.displayName = "DateRangePicker.Trigger"; export const Content = forwardRef( ({ className, inlineClassName, ...props }, ref) => ( ), ); Content.displayName = "DateRangePicker.Content"; export const Header = forwardRef(({ className, ...props }, ref) => ( )); Header.displayName = "DateRangePicker.Header"; export const PrevButton = forwardRef( ({ className, ...props }, ref) => ( ), ); PrevButton.displayName = "DateRangePicker.PrevButton"; export const NextButton = forwardRef( ({ className, ...props }, ref) => ( ), ); NextButton.displayName = "DateRangePicker.NextButton"; export const Title = forwardRef( ({ className, selectClassName, ...props }, ref) => ( ), ); Title.displayName = "DateRangePicker.Title"; export const Grid = forwardRef( ({ className, weekdayClassName, weekdaysClassName, weekClassName, ...props }, ref) => ( ), ); Grid.displayName = "DateRangePicker.Grid"; export const Day = forwardRef(({ className, ...props }, ref) => ( )); Day.displayName = "DateRangePicker.Day"; export const Calendars = forwardRef( ({ className, ...props }, ref) => ( ), ); Calendars.displayName = "DateRangePicker.Calendars"; export const Presets = forwardRef(({ className, ...props }, ref) => ( )); Presets.displayName = "DateRangePicker.Presets"; export const PresetItem = forwardRef( ({ className, activeClassName, ...props }, ref) => ( ), ); PresetItem.displayName = "DateRangePicker.PresetItem"; export const Footer = forwardRef(({ className, ...props }, ref) => ( )); Footer.displayName = "DateRangePicker.Footer"; export const ClearButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ClearButton.displayName = "DateRangePicker.ClearButton"; export const CancelButton = forwardRef( ({ className, ...props }, ref) => ( ), ); CancelButton.displayName = "DateRangePicker.CancelButton"; export const ConfirmButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ConfirmButton.displayName = "DateRangePicker.ConfirmButton"; export const TodayButton = forwardRef( ({ className, ...props }, ref) => ( ), ); TodayButton.displayName = "DateRangePicker.TodayButton"; 55:T768,import * as C from "./Compound"; import type { DateRangePickerRootProps } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { headerClassNames, rangeClassNames } from "../../theme"; export interface DateRangePickerProps extends Omit { hideHeader?: boolean; hideFooter?: boolean; } export function DateRangePickerSimple({ hideHeader, hideFooter, ...props }: DateRangePickerProps) { const hasPresets = props.presets && props.presets.length > 0; const showFooter = hideFooter !== undefined ? !hideFooter : !props.inline && !props.shouldCloseOnSelect; const showNav = props.captionLayout !== "dropdown"; return ( {!props.inline && }

{hasPresets && ( {props.presets?.map((p, i) => ( ))} )}

{!hideHeader && ( {showNav && }

{showNav && } )} {showFooter && ( )}

); } export const DateRangePicker = Object.assign(DateRangePickerSimple, C); 56:T2561,import { forwardRef } from "react"; import { DateRangeTimePicker as Primitive, type DateRangeTimePickerRootProps, type TriggerProps, type ContentProps, type HeaderProps, type NavButtonProps, type TitleProps, type GridProps, type DayProps, type FooterProps, type ActionButtonProps, type CalendarsProps, type PresetsProps, type PresetItemProps, type StartTimeSectionProps, type EndTimeSectionProps, type TimePanelProps, } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { rootClassNames, triggerClassNames, contentClassNames, headerClassNames, gridClassNames, dayClassNames, footerClassNames, rangeClassNames, dateTimeClassNames, timePanelClassNames, } from "../../theme"; export const Root = forwardRef( ({ className, size, ...props }, ref) => ( ), ); Root.displayName = "DateRangeTimePicker.Root"; export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, ...props }, ref) => ( ), ); Trigger.displayName = "DateRangeTimePicker.Trigger"; export const Content = forwardRef( ({ className, inlineClassName, ...props }, ref) => ( ), ); Content.displayName = "DateRangeTimePicker.Content"; export const Header = forwardRef(({ className, ...props }, ref) => ( )); Header.displayName = "DateRangeTimePicker.Header"; export const PrevButton = forwardRef( ({ className, ...props }, ref) => ( ), ); PrevButton.displayName = "DateRangeTimePicker.PrevButton"; export const NextButton = forwardRef( ({ className, ...props }, ref) => ( ), ); NextButton.displayName = "DateRangeTimePicker.NextButton"; export const Title = forwardRef( ({ className, selectClassName, ...props }, ref) => ( ), ); Title.displayName = "DateRangeTimePicker.Title"; export const Grid = forwardRef( ({ className, weekdayClassName, weekdaysClassName, weekClassName, ...props }, ref) => ( ), ); Grid.displayName = "DateRangeTimePicker.Grid"; export const Day = forwardRef(({ className, ...props }, ref) => ( )); Day.displayName = "DateRangeTimePicker.Day"; export const Calendars = forwardRef( ({ className, ...props }, ref) => ( ), ); Calendars.displayName = "DateRangeTimePicker.Calendars"; export const Presets = forwardRef(({ className, ...props }, ref) => ( )); Presets.displayName = "DateRangeTimePicker.Presets"; export const PresetItem = forwardRef( ({ className, activeClassName, ...props }, ref) => ( ), ); PresetItem.displayName = "DateRangeTimePicker.PresetItem"; export const StartTimeSection = forwardRef( ({ className, ...props }, ref) => ( ), ); StartTimeSection.displayName = "DateRangeTimePicker.StartTimeSection"; export const EndTimeSection = forwardRef( ({ className, ...props }, ref) => ( ), ); EndTimeSection.displayName = "DateRangeTimePicker.EndTimeSection"; export const TimePanel = forwardRef( ({ className, ...props }, ref) => ( ), ); TimePanel.displayName = "DateRangeTimePicker.TimePanel"; export const Footer = forwardRef(({ className, ...props }, ref) => ( )); Footer.displayName = "DateRangeTimePicker.Footer"; export const ClearButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ClearButton.displayName = "DateRangeTimePicker.ClearButton"; export const CancelButton = forwardRef( ({ className, ...props }, ref) => ( ), ); CancelButton.displayName = "DateRangeTimePicker.CancelButton"; export const ConfirmButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ConfirmButton.displayName = "DateRangeTimePicker.ConfirmButton"; export const TodayButton = forwardRef( ({ className, ...props }, ref) => ( ), ); TodayButton.displayName = "DateRangeTimePicker.TodayButton"; 57:T986,import * as C from "./Compound"; import type { DateRangeTimePickerRootProps } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { headerClassNames, rangeClassNames, dateTimeClassNames } from "../../theme"; export interface DateRangeTimePickerProps extends Omit { hideHeader?: boolean; hideFooter?: boolean; } export function DateRangeTimePickerSimple({ hideHeader, hideFooter, ...props }: DateRangeTimePickerProps) { const hasPresets = props.presets && props.presets.length > 0; const showFooter = hideFooter !== undefined ? !hideFooter : !props.inline && !props.shouldCloseOnSelect; const showNav = props.captionLayout !== "dropdown"; return ( {!props.inline && }

{hasPresets && ( {props.presets?.map((p, i) => ( ))} )}

{!hideHeader && ( {showNav && }

{showNav && } )}

Start Time

End Time

{showFooter && ( )}

); } export const DateRangeTimePicker = Object.assign(DateRangeTimePickerSimple, C); 58:T1f20,import { forwardRef } from "react"; import { DateTimePicker as Primitive, type DateTimePickerRootProps, type TriggerProps, type ContentProps, type HeaderProps, type NavButtonProps, type TitleProps, type GridProps, type DayProps, type FooterProps, type ActionButtonProps, type DateTimeSectionProps, type TimePanelProps, } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { rootClassNames, triggerClassNames, contentClassNames, headerClassNames, gridClassNames, dayClassNames, footerClassNames, dateTimeClassNames, timePanelClassNames, } from "../../theme"; export const Root = forwardRef( ({ className, size, ...props }, ref) => ( ), ); Root.displayName = "DateTimePicker.Root"; export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, ...props }, ref) => ( ), ); Trigger.displayName = "DateTimePicker.Trigger"; export const Content = forwardRef( ({ className, inlineClassName, ...props }, ref) => ( ), ); Content.displayName = "DateTimePicker.Content"; export const Header = forwardRef(({ className, ...props }, ref) => ( )); Header.displayName = "DateTimePicker.Header"; export const PrevButton = forwardRef( ({ className, ...props }, ref) => ( ), ); PrevButton.displayName = "DateTimePicker.PrevButton"; export const NextButton = forwardRef( ({ className, ...props }, ref) => ( ), ); NextButton.displayName = "DateTimePicker.NextButton"; export const Title = forwardRef( ({ className, selectClassName, ...props }, ref) => ( ), ); Title.displayName = "DateTimePicker.Title"; export const Grid = forwardRef( ({ className, weekdayClassName, weekdaysClassName, weekClassName, ...props }, ref) => ( ), ); Grid.displayName = "DateTimePicker.Grid"; export const Day = forwardRef(({ className, ...props }, ref) => ( )); Day.displayName = "DateTimePicker.Day"; export const TimeSection = forwardRef( ({ className, ...props }, ref) => ( ), ); TimeSection.displayName = "DateTimePicker.TimeSection"; export const TimePanel = forwardRef( ({ className, ...props }, ref) => ( ), ); TimePanel.displayName = "DateTimePicker.TimePanel"; export const Footer = forwardRef(({ className, ...props }, ref) => ( )); Footer.displayName = "DateTimePicker.Footer"; export const ClearButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ClearButton.displayName = "DateTimePicker.ClearButton"; export const CancelButton = forwardRef( ({ className, ...props }, ref) => ( ), ); CancelButton.displayName = "DateTimePicker.CancelButton"; export const ConfirmButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ConfirmButton.displayName = "DateTimePicker.ConfirmButton"; export const TodayButton = forwardRef( ({ className, ...props }, ref) => ( ), ); TodayButton.displayName = "DateTimePicker.TodayButton"; 59:T516,import * as C from "./Compound"; import type { DateTimePickerRootProps } from "../../ui-primitives/index"; import { dateTimeClassNames } from "../../theme"; export interface DateTimePickerProps extends Omit { hideHeader?: boolean; hideFooter?: boolean; } export function DateTimePickerSimple({ hideHeader, hideFooter, ...props }: DateTimePickerProps) { const showFooter = hideFooter !== undefined ? !hideFooter : !props.inline && !props.shouldCloseOnSelect; const showNav = props.captionLayout !== "dropdown"; return ( {!props.inline && } {!hideHeader && ( {showNav && } {showNav && } )}

Time

{showFooter && ( )} ); } export const DateTimePicker = Object.assign(DateTimePickerSimple, C); 5a:Tff9,import { forwardRef } from "react"; import { TimePicker as Primitive, type TimePickerRootProps, type TriggerProps, type ContentProps, type FooterProps, type ActionButtonProps, type TimePanelProps, type TimePickerPeriodToggleProps, } from "../../ui-primitives/index"; import { cn } from "../../utils"; import { rootClassNames, triggerClassNames, contentClassNames, footerClassNames, timePanelClassNames, timePickerClassNames, } from "../../theme"; export const Root = forwardRef( ({ className, ...props }, ref) => ( ), ); Root.displayName = "TimePicker.Root"; export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, ...props }, ref) => ( ), ); Trigger.displayName = "TimePicker.Trigger"; export const Content = forwardRef( ({ className, inlineClassName, ...props }, ref) => ( ), ); Content.displayName = "TimePicker.Content"; export const TimePanel = forwardRef( ({ className, ...props }, ref) => ( ), ); TimePanel.displayName = "TimePicker.TimePanel"; export const PeriodToggle = forwardRef( ({ className, ...props }, ref) => ( ), ); PeriodToggle.displayName = "TimePicker.PeriodToggle"; export const Footer = forwardRef(({ className, ...props }, ref) => ( )); Footer.displayName = "TimePicker.Footer"; export const ClearButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ClearButton.displayName = "TimePicker.ClearButton"; export const CancelButton = forwardRef( ({ className, ...props }, ref) => ( ), ); CancelButton.displayName = "TimePicker.CancelButton"; export const ConfirmButton = forwardRef( ({ className, ...props }, ref) => ( ), ); ConfirmButton.displayName = "TimePicker.ConfirmButton"; 5b:T179e,// Theme values for tailwind4 export const rootClassNames = { root: "relative w-max font-sans text-[13px] text-foreground select-none", }; export const triggerClassNames = { trigger: "flex items-center gap-2 justify-between min-w-[200px] px-3.5 py-2 text-sm bg-background border border-input rounded-md shadow-sm hover:border-ring/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring", placeholder: "text-muted-foreground", clear: "ml-2 p-1 -m-1 appearance-none border-0 bg-transparent text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm cursor-pointer", }; export const headerClassNames = { header: "flex items-center justify-between mb-3", navButton: "flex items-center justify-center w-7 h-7 text-muted-foreground rounded-md hover:bg-accent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: "flex-1 flex items-center justify-center gap-1 font-semibold text-[15px] text-foreground", select: "px-1 py-0.5 text-sm bg-transparent border border-transparent rounded hover:border-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer", spacer: "flex-1", }; export const gridClassNames = { panel: "flex flex-col", weekdays: "grid grid-cols-7 mb-1", weekday: "flex items-center justify-center h-7 text-xs font-medium text-muted-foreground", grid: "flex flex-col gap-1", week: "grid grid-cols-7", }; export const dayClassNames = { day: "flex items-center justify-center min-w-9 h-9 mx-[1px] rounded-lg transition-colors cursor-pointer hover:bg-accent focus-visible:outline-none", empty: "invisible pointer-events-none", today: "font-bold text-primary", selected: "bg-primary text-primary-foreground font-semibold hover:bg-primary hover:text-primary-foreground", disabled: "text-muted-foreground opacity-50 pointer-events-none", outside: "text-muted-foreground/50", highlighted: "relative after:absolute after:bottom-[3px] after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-primary after:rounded-full", inRange: "bg-primary/10 text-foreground rounded-none mx-0 hover:bg-primary/10", rangeStart: "bg-primary text-primary-foreground rounded-l-lg rounded-r-none mx-0 hover:bg-primary hover:text-primary-foreground", rangeEnd: "bg-primary text-primary-foreground rounded-r-lg rounded-l-none mx-0 hover:bg-primary hover:text-primary-foreground", rangeSingle: "bg-primary text-primary-foreground mx-0 hover:bg-primary hover:text-primary-foreground", hoverRange: "bg-primary/5 text-foreground rounded-none mx-0", hoverTarget: "bg-primary/15 text-foreground", focused: "ring-2 ring-ring ring-offset-1 ring-offset-background", }; export const footerClassNames = { footer: "flex justify-end gap-2 mt-3 pt-3 border-t border-border", button: "px-3.5 py-1.5 text-muted-foreground border border-input hover:bg-accent hover:border-ring/50 rounded-md transition-colors motion-reduce:transition-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", confirmButton: "px-3.5 py-1.5 text-primary-foreground bg-primary hover:bg-primary/90 rounded-md transition-colors motion-reduce:transition-none disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", clearButton: "mr-auto px-3.5 py-1.5 text-destructive hover:text-foreground hover:bg-accent rounded-md transition-colors motion-reduce:transition-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", }; export const contentClassNames = { content: "absolute top-[calc(100%+8px)] left-0 z-50 p-4 bg-popover text-popover-foreground border border-border rounded-xl shadow-lg", contentInline: "static z-auto shadow-none mt-0", }; export const rangeClassNames = { presetsContainer: "flex flex-col gap-0.5 pr-4 border-r border-border min-w-[140px]", presetButton: "px-4 py-2 text-left rounded-md transition-colors motion-reduce:transition-none hover:bg-accent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", presetButtonActive: "bg-accent text-primary font-medium", presetsLayout: "flex flex-wrap gap-4", calendarsContainer: "flex flex-wrap gap-6 max-sm:flex-col max-sm:gap-4", }; export const dateTimeClassNames = { timeSection: "flex flex-col gap-3 mt-3 pt-3 border-t border-border", timeLabel: "text-xs font-medium text-muted-foreground", }; export const timePanelClassNames = { timePanel: "relative flex items-center justify-center w-fit mx-auto min-w-[120px] h-[176px]", timeHighlight: "absolute left-1 right-1 h-8 rounded-md bg-primary/10 pointer-events-none", timeColumns: "relative flex items-center w-full h-full", timeColumn: "flex-1 h-[160px] overflow-y-auto [scrollbar-width:none] [scroll-snap-type:y_mandatory] [&::-webkit-scrollbar]:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset rounded-md", timeItem: "h-8 flex items-center justify-center cursor-pointer text-sm text-muted-foreground [scroll-snap-align:center] transition-colors select-none hover:text-foreground", timeItemActive: "text-foreground font-semibold", timePadding: "h-8 shrink-0", timeColon: "text-sm font-semibold text-foreground w-3 text-center shrink-0", timePeriodButton: "h-8 flex items-center justify-center cursor-pointer text-sm text-foreground font-semibold border border-border bg-background hover:bg-accent hover:text-accent-foreground rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", }; export const timePickerClassNames = { root: "relative w-max font-sans text-[13px] text-foreground select-none", content: "min-w-[250px] [&.rdrp-size-small]:min-w-[210px] [&.rdrp-size-large]:min-w-[290px] [&.rdrp-size-x-large]:min-w-[340px]", }; 5c:T5d2,import { mergeRefs } from "../../utils/mergeRefs"; import { forwardRef, type ReactNode } from "react"; import { usePickerContext, formatBasic } from "react-date-range-picker-headless"; import { DatePickerProvider, type DatePickerProviderProps } from "react-date-range-picker-headless"; export interface DatePickerRootProps extends DatePickerProviderProps { className?: string; cn?: (...args: unknown[]) => string; } interface InnerProps { className?: string; children?: ReactNode; name?: string; value?: Date | null; } const Inner = forwardRef( ({ className, children, name, value }, ref) => { const context = usePickerContext(); return (

{name && ( )} {children}

); }, ); Inner.displayName = "Inner"; export const DatePickerRoot = forwardRef( ({ className, cn: cnFn, children, ...options }, ref) => { const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); return ( {children} ); }, ); DatePickerRoot.displayName = "DatePickerRoot"; 5d:T4ea,import { type ReactNode, forwardRef } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; export interface PresetItemProps { index: number; className?: string; activeClassName?: string; children?: ReactNode; cn?: (...args: unknown[]) => string; } export const PresetItem = forwardRef( ({ index, className, activeClassName, children, cn: cnFn }, ref) => { const { presets, activePresetIndex, handlePresetClick } = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); if (!presets) { throw new Error("PresetItem can only be used within DateRangePicker, DateRangeTimePicker"); } if (!presets[index]) return null; const preset = presets[index]; const isActive = index === activePresetIndex; return ( ); }, ); PresetItem.displayName = "PresetItem"; 5e:T806,import { mergeRefs } from "../../utils/mergeRefs"; import { forwardRef, type ReactNode } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { DateRangePickerProvider, type DateRangePickerProviderProps, } from "react-date-range-picker-headless"; import { formatBasic } from "react-date-range-picker-headless"; export interface DateRangePickerRootProps extends DateRangePickerProviderProps { className?: string; endName?: string; cn?: (...args: unknown[]) => string; } interface InnerProps { className?: string; children?: ReactNode; name?: string; endName?: string; value?: { start: Date | null; end: Date | null }; } const Inner = forwardRef( ({ className, children, name, endName, value }, ref) => { const context = usePickerContext(); return (

{name && ( )} {name && ( )} {children}

); }, ); Inner.displayName = "Inner"; export const DateRangePickerRoot = forwardRef( ({ className, cn: cnFn, children, endName, ...options }, ref) => { const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); return ( {children} ); }, ); DateRangePickerRoot.displayName = "DateRangePickerRoot"; 5f:T411,import { DateRangePickerRoot } from "./Root"; import { Calendars } from "./Calendars"; import { Presets } from "./Presets"; import { PresetItem } from "./PresetItem"; import { Trigger } from "../shared/Trigger"; import { Content } from "../shared/Content"; import { Header } from "../shared/Header"; import { PrevButton } from "../shared/PrevButton"; import { NextButton } from "../shared/NextButton"; import { Title } from "../shared/Title"; import { Grid } from "../shared/Grid"; import { Day } from "../shared/Day"; import { Footer } from "../shared/Footer"; import { ClearButton } from "../shared/ClearButton"; import { CancelButton } from "../shared/CancelButton"; import { ConfirmButton } from "../shared/ConfirmButton"; import { TodayButton } from "../shared/TodayButton"; export const DateRangePicker = { Root: DateRangePickerRoot, Trigger, Content, Header, PrevButton, NextButton, Title, Grid, Day, Calendars, Presets, PresetItem, Footer, ClearButton, CancelButton, ConfirmButton, TodayButton, }; 60:T82e,import { mergeRefs } from "../../utils/mergeRefs"; import { forwardRef, type ReactNode } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { DateRangeTimePickerProvider, type DateRangeTimePickerProviderProps, } from "react-date-range-picker-headless"; import { formatBasic } from "react-date-range-picker-headless"; export interface DateRangeTimePickerRootProps extends DateRangeTimePickerProviderProps { className?: string; endName?: string; cn?: (...args: unknown[]) => string; } interface InnerProps { className?: string; children?: ReactNode; name?: string; endName?: string; value?: { start: Date | null; end: Date | null }; } const Inner = forwardRef( ({ className, children, name, endName, value }, ref) => { const context = usePickerContext(); return (

{name && ( )} {name && ( )} {children}

); }, ); Inner.displayName = "Inner"; export const DateRangeTimePickerRoot = forwardRef( ({ className, cn: cnFn, children, endName, ...options }, ref) => { const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); return ( {children} ); }, ); DateRangeTimePickerRoot.displayName = "DateRangeTimePickerRoot"; 61:T51e,import { DateRangeTimePickerRoot } from "./Root"; import { StartTimeSection } from "./StartTimeSection"; import { EndTimeSection } from "./EndTimeSection"; import { Calendars } from "../DateRangePicker/Calendars"; import { Presets } from "../DateRangePicker/Presets"; import { PresetItem } from "../DateRangePicker/PresetItem"; import { Trigger } from "../shared/Trigger"; import { Content } from "../shared/Content"; import { Header } from "../shared/Header"; import { PrevButton } from "../shared/PrevButton"; import { NextButton } from "../shared/NextButton"; import { Title } from "../shared/Title"; import { Grid } from "../shared/Grid"; import { Day } from "../shared/Day"; import { Footer } from "../shared/Footer"; import { ClearButton } from "../shared/ClearButton"; import { CancelButton } from "../shared/CancelButton"; import { ConfirmButton } from "../shared/ConfirmButton"; import { TodayButton } from "../shared/TodayButton"; import { TimePanel } from "../shared/TimePanel"; export const DateRangeTimePicker = { Root: DateRangeTimePickerRoot, Trigger, Content, Header, PrevButton, NextButton, Title, Grid, Day, Calendars, Presets, PresetItem, StartTimeSection, EndTimeSection, TimePanel, Footer, ClearButton, CancelButton, ConfirmButton, TodayButton, }; 62:T638,import { mergeRefs } from "../../utils/mergeRefs"; import { forwardRef, type ReactNode } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { DateTimePickerProvider, type DateTimePickerProviderProps, formatBasic, } from "react-date-range-picker-headless"; export interface DateTimePickerRootProps extends DateTimePickerProviderProps { className?: string; cn?: (...args: unknown[]) => string; } interface InnerProps { className?: string; children?: ReactNode; name?: string; value?: Date | null; } const Inner = forwardRef( ({ className, children, name, value }, ref) => { const context = usePickerContext(); return (

{name && ( )} {children}

); }, ); Inner.displayName = "Inner"; export const DateTimePickerRoot = forwardRef( ({ className, cn: cnFn, children, ...options }, ref) => { const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); return ( {children} ); }, ); DateTimePickerRoot.displayName = "DateTimePickerRoot"; 63:T692,import { mergeRefs } from "../../utils/mergeRefs"; import { forwardRef, type ReactNode } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { StandaloneTimePickerProvider, type StandaloneTimePickerProviderProps, formatBasic, } from "react-date-range-picker-headless"; export interface TimePickerRootProps extends StandaloneTimePickerProviderProps { className?: string; cn?: (...args: unknown[]) => string; } interface InnerProps { className?: string; children?: ReactNode; name?: string; value?: Date | null; } const Inner = forwardRef( ({ className, children, name, value }, ref) => { const context = usePickerContext(); return (

{name && ( )} {children}

); }, ); Inner.displayName = "Inner"; export const TimePickerRoot = forwardRef( ({ className, cn: cnFn, children, ...options }, ref) => { const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); return ( {children} ); }, ); TimePickerRoot.displayName = "TimePickerRoot"; 64:Ta2f,// Utils // Components // Types export type { TriggerRenderProps, HeaderRenderProps, WeekdayRowRenderProps, DayCellRenderProps, FooterRenderProps, TimeSectionRenderProps, RangeTimeSectionRenderProps, PresetsBarRenderProps, RenderProps, VisualProps, FormNameProps, RangeFormNameProps, DatePickerProps, DateRangePickerProps, DateTimePickerProps, DateRangeTimePickerProps, CalendarGridProps, TimePanelInternalProps, // ClassNames types CalendarGridClassNames, TimePanelClassNames, BasePickerClassNames, DatePickerClassNames, DateRangePickerClassNames, DateTimePickerClassNames, DateRangeTimePickerClassNames, // User-facing classNames prop types DatePickerUserClassNames, DateRangePickerUserClassNames, DateTimePickerUserClassNames, DateRangeTimePickerUserClassNames, TimePickerProps, TimePickerUserClassNames, TimePickerClassNames, } from "./types"; export { DatePicker } from "./DatePicker"; export { DateRangePicker } from "./DateRangePicker"; export { DateTimePicker } from "./DateTimePicker"; export { DateRangeTimePicker } from "./DateRangeTimePicker"; export { TimePicker } from "./TimePicker"; export type { DatePickerRootProps } from "./DatePicker/Root"; export type { DateRangePickerRootProps } from "./DateRangePicker/Root"; export type { DateTimePickerRootProps } from "./DateTimePicker/Root"; export type { DateRangeTimePickerRootProps } from "./DateRangeTimePicker/Root"; export type { TimePickerRootProps } from "./TimePicker/Root"; export type { TimePickerPeriodToggleProps } from "./TimePicker/PeriodToggle"; export type { ContentProps } from "./shared/Content"; export type { HeaderProps } from "./shared/Header"; export type { NavButtonProps } from "./shared/PrevButton"; export type { TitleProps } from "./shared/Title"; export type { GridProps } from "./shared/Grid"; export type { DayProps, DayRenderProps } from "./shared/Day"; export type { FooterProps } from "./shared/Footer"; export type { ActionButtonProps } from "./shared/ClearButton"; export type { TimePanelProps } from "./shared/TimePanel"; export type { CalendarsProps } from "./DateRangePicker/Calendars"; export type { PresetsProps } from "./DateRangePicker/Presets"; export type { PresetItemProps } from "./DateRangePicker/PresetItem"; export type { TimeSectionProps as DateTimeSectionProps } from "./DateTimePicker/TimeSection"; export type { StartTimeSectionProps } from "./DateRangeTimePicker/StartTimeSection"; export type { EndTimeSectionProps } from "./DateRangeTimePicker/EndTimeSection"; export type { TriggerProps } from "./shared/Trigger"; 65:T20ed,import type { CSSProperties, ReactNode } from "react"; import type { Locale, DayProps, DatePickerSize, DateRangePreset, CaptionLayout, CalendarMonth, UseDatePickerOptions, UseDateRangePickerOptions, UseDateTimePickerOptions, UseDateRangeTimePickerOptions, TimeConfig, TimePeriod, UseStandaloneTimePickerOptions, } from "react-date-range-picker-headless"; // ── Render prop context types ── export interface TriggerRenderProps { displayValue: string; placeholder: string; hasValue: boolean; isOpen: boolean; onToggle: () => void; onClear: () => void; locale: Locale; /** Callback ref to attach to the trigger element for Floating UI positioning. */ triggerRef: (node: HTMLElement | null) => void; } export interface HeaderRenderProps { month: Date; formattedMonthYear: string; onPrevMonth: () => void; onNextMonth: () => void; locale: Locale; captionLayout: CaptionLayout; years: number[]; months: number[]; onYearSelect: (year: number) => void; onMonthSelect: (month: number) => void; } export interface WeekdayRowRenderProps { weekdays: string[]; } export interface DayCellRenderProps extends DayProps { /** Unique id for the day cell, used by aria-activedescendant on the dialog. */ id: string; onClick: () => void; onMouseEnter?: () => void; onMouseLeave?: () => void; } export interface FooterRenderProps { canConfirm: boolean; hasValue: boolean; onConfirm: () => void; onCancel: () => void; onClear: () => void; locale: Locale; } export interface TimeSectionRenderProps { displayValue: string; label: string; timeConfig: Required; hour: number; minute: number; second: number; period: TimePeriod; } export interface RangeTimeSectionRenderProps { timeConfig: Required; start: { displayValue: string; label: string; hour: number; minute: number; second: number; period: TimePeriod; }; end: { displayValue: string; label: string; hour: number; minute: number; second: number; period: TimePeriod; }; } export interface PresetsBarRenderProps { presets: DateRangePreset[]; activePresetIndex: number; onPresetClick: (preset: DateRangePreset) => void; } // ── Shared visual/render props ── export interface RenderProps { renderTrigger?: (props: TriggerRenderProps) => ReactNode; renderHeader?: (props: HeaderRenderProps) => ReactNode; renderWeekdayRow?: (props: WeekdayRowRenderProps) => ReactNode; renderDayCell?: (props: DayCellRenderProps) => ReactNode; renderFooter?: (props: FooterRenderProps) => ReactNode; renderTimeSection?: (props: TimeSectionRenderProps) => ReactNode; renderPresetsBar?: (props: PresetsBarRenderProps) => ReactNode; } export interface VisualProps { className?: string; style?: CSSProperties; inline?: boolean; hideHeader?: boolean; hideFooter?: boolean; hideWeekdays?: boolean; } // ── Form integration props ── export interface FormNameProps { /** When provided, renders a hidden `` with the selected value for native form submission. */ name?: string; } export interface RangeFormNameProps extends FormNameProps { /** Name for the end-date hidden input. Defaults to `${name}-end` when only `name` is provided. */ endName?: string; } // ── User-facing classNames prop types ── export interface DatePickerUserClassNames extends Partial { calendar?: Partial; } export interface DateRangePickerUserClassNames extends Partial { calendar?: Partial; } export interface DateTimePickerUserClassNames extends Partial { calendar?: Partial; timePanel?: Partial; } export interface DateRangeTimePickerUserClassNames extends Partial { calendar?: Partial; timePanel?: Partial; } export interface TimePickerUserClassNames extends Partial { timePanel?: Partial; } // ── Public component props ── export interface DatePickerProps extends UseDatePickerOptions, VisualProps, RenderProps, FormNameProps { classNames?: DatePickerUserClassNames; } export interface DateRangePickerProps extends UseDateRangePickerOptions, VisualProps, RenderProps, RangeFormNameProps { classNames?: DateRangePickerUserClassNames; } export interface DateTimePickerProps extends UseDateTimePickerOptions, VisualProps, RenderProps, FormNameProps { classNames?: DateTimePickerUserClassNames; } export interface DateRangeTimePickerProps extends UseDateRangeTimePickerOptions, VisualProps, Omit, RangeFormNameProps { renderTimeSection?: (props: RangeTimeSectionRenderProps) => ReactNode; classNames?: DateRangeTimePickerUserClassNames; } export interface TimePickerProps extends UseStandaloneTimePickerOptions, FormNameProps { size?: DatePickerSize; className?: string; style?: CSSProperties; inline?: boolean; hideFooter?: boolean; renderFooter?: (props: FooterRenderProps) => ReactNode; classNames?: TimePickerUserClassNames; } // ── ClassNames types (for theme injection) ── export interface CalendarGridClassNames { calendarPanel?: string; header?: string; headerTitle?: string; captionSelect?: string; weekdays?: string; weekday?: string; grid?: string; week?: string; day?: string; dayEmpty?: string; dayToday?: string; daySelected?: string; dayDisabled?: string; dayOutside?: string; dayHighlighted?: string; dayInRange?: string; dayRangeStart?: string; dayRangeEnd?: string; dayRangeSingle?: string; dayHoverRange?: string; dayHoverTarget?: string; dayFocused?: string; } export interface TimePanelClassNames { timePanel?: string; timeHighlight?: string; timeColumns?: string; timeColumn?: string; timeItem?: string; timeItemActive?: string; timePadding?: string; timeColon?: string; timePeriodButton?: string; } /** Common classNames shared by all picker components */ export interface BasePickerClassNames { root?: string; content?: string; contentInline?: string; trigger?: string; triggerPlaceholder?: string; triggerClear?: string; header?: string; headerNavButton?: string; headerTitle?: string; headerSelect?: string; headerSpacer?: string; footer?: string; footerButton?: string; footerClearButton?: string; footerConfirmButton?: string; } export type DatePickerClassNames = BasePickerClassNames; export interface DateRangePickerClassNames extends BasePickerClassNames { presetsContainer?: string; presetButton?: string; presetButtonActive?: string; presetsLayout?: string; calendarsContainer?: string; } export interface DateTimePickerClassNames extends BasePickerClassNames { timeSection?: string; timeLabel?: string; } export interface DateRangeTimePickerClassNames extends BasePickerClassNames { presetsContainer?: string; presetButton?: string; presetButtonActive?: string; presetsLayout?: string; calendarsContainer?: string; timeSection?: string; timeLabel?: string; } export type TimePickerClassNames = BasePickerClassNames; // ── Internal CalendarGrid props ── export interface CalendarGridProps { calendar: CalendarMonth; locale: Locale; focusedDate?: Date | null; getDayProps: (date: Date, referenceMonth?: Date) => DayProps; onDateClick: (date: Date) => void; onDateHover?: (date: Date | null) => void; showTitle?: boolean; hideWeekdays?: boolean; captionLayout?: CaptionLayout; years?: number[]; monthOptions?: number[]; onYearSelect?: (year: number, calendarIndex?: number) => void; onMonthSelect?: (month: number, calendarIndex?: number) => void; calendarIndex?: number; renderWeekdayRow?: (props: WeekdayRowRenderProps) => ReactNode; renderDayCell?: (props: DayCellRenderProps) => ReactNode; } // ── Internal TimePanelInternal props ── export interface TimePanelInternalProps { hour: number; minute: number; second: number; period: TimePeriod; onHourChange: (h: number) => void; onMinuteChange: (m: number) => void; onSecondChange: (s: number) => void; onPeriodChange: (p: TimePeriod) => void; timeConfig: Required; } 66:Tc5a,import { type ReactNode, forwardRef, useRef } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { useFloating, autoUpdate, offset, flip, shift, FloatingPortal, FloatingFocusManager, } from "@floating-ui/react"; import { mergeRefs } from "../../utils/mergeRefs"; export interface ContentProps { className?: string; inlineClassName?: string; children?: ReactNode; cn?: (...args: unknown[]) => string; } export const Content = forwardRef( ({ className, inlineClassName, children, cn: cnFn }, forwardedRef) => { const context = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); const { isOpen, inline, containerRef, popupRef, handleKeyDown, locale, focusedDate, calendars, } = context; const localPopupRef = useRef(null); const showContent = inline || isOpen; const { refs, floatingStyles, context: floatingContext, } = useFloating({ open: !inline && isOpen, placement: "bottom-start", middleware: [offset(8), flip(), shift({ padding: 8 })], whileElementsMounted: autoUpdate, }); if (!inline && containerRef?.current && !refs.reference.current) { refs.setPositionReference(containerRef.current); } if (!showContent) return null; // Find which calendar "owns" the focused date (matching month) for unique id let focusedCalIdx = 0; if (focusedDate && calendars.length > 1) { const idx = calendars.findIndex( (cal) => cal.month.getFullYear() === focusedDate.getFullYear() && cal.month.getMonth() === focusedDate.getMonth(), ); if (idx >= 0) focusedCalIdx = idx; } const activeDescendant = focusedDate ? `rdrp-day-${focusedCalIdx}-${locale.formatDate(focusedDate)}` : undefined; if (inline) { return (

{children}

); } return ( ); }, ); Content.displayName = "Content"; 67:T11c2,import { type ReactNode, forwardRef } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; export interface DayRenderProps { date: Date; day: number; isToday: boolean; isSelected: boolean; isDisabled: boolean; isInRange: boolean; isRangeStart: boolean; isRangeEnd: boolean; isInHoverRange: boolean; isHoverTarget: boolean; hasLeftConnection: boolean; hasRightConnection: boolean; isConsecutiveRange: boolean; isFocused: boolean; dayOfWeek: number; isOutsideDay: boolean; isHighlighted: boolean; isRangeSingle: boolean; onClick: () => void; onMouseEnter: () => void; onMouseLeave: () => void; } export interface DayProps { date: Date; calendarIndex?: number; className?: string; todayClassName?: string; selectedClassName?: string; disabledClassName?: string; outsideClassName?: string; highlightedClassName?: string; inRangeClassName?: string; rangeStartClassName?: string; rangeEndClassName?: string; rangeSingleClassName?: string; hoverRangeClassName?: string; hoverTargetClassName?: string; focusedClassName?: string; emptyClassName?: string; children?: ReactNode | ((props: DayRenderProps) => ReactNode); cn?: (...args: unknown[]) => string; } export const Day = forwardRef( ( { date, calendarIndex = 0, className, todayClassName, selectedClassName, disabledClassName, outsideClassName, highlightedClassName, inRangeClassName, rangeStartClassName, rangeEndClassName, rangeSingleClassName, hoverRangeClassName, hoverTargetClassName, focusedClassName, emptyClassName: _emptyClassName, children, cn: cnFn, }, ref, ) => { const context = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); // Pass reference month if needed for outside days computation const props = context.getDayProps(date); const onClick = () => context.handleDateClick(date); const onMouseEnter = () => context.handleDateHover?.(date); const onMouseLeave = () => context.handleDateHover?.(null); if (typeof children === "function") { return ( <> {children({ ...props, onClick, onMouseEnter, onMouseLeave, })} ); } const { day, isToday, isSelected, isDisabled, isInRange, isRangeStart, isRangeEnd, isInHoverRange, isHoverTarget, isFocused, isOutsideDay, isHighlighted, isRangeSingle, } = props; const showFocusRing = isFocused && !isSelected && !isRangeStart && !isRangeEnd; return ( ); }, ); Day.displayName = "Day"; 68:Tf81,import { type ReactNode, forwardRef } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { formatBasic } from "react-date-range-picker-headless"; import { Day } from "./Day"; export interface GridProps { className?: string; weekdayClassName?: string; weekdaysClassName?: string; weekClassName?: string; gridClassName?: string; children?: (props: { date: Date; calendarIndex: number }) => ReactNode; calendarIndex?: number; cn?: (...args: unknown[]) => string; // Fallback for simple usage without custom day renderer dayClassName?: string; dayTodayClassName?: string; daySelectedClassName?: string; dayDisabledClassName?: string; dayOutsideClassName?: string; dayHighlightedClassName?: string; dayInRangeClassName?: string; dayRangeStartClassName?: string; dayRangeEndClassName?: string; dayRangeSingleClassName?: string; dayHoverRangeClassName?: string; dayHoverTargetClassName?: string; dayFocusedClassName?: string; dayEmptyClassName?: string; } export const Grid = forwardRef( ( { className, weekdayClassName, weekdaysClassName, weekClassName, gridClassName, children, calendarIndex = 0, cn: cnFn, ...dayClasses }, ref, ) => { const { calendars, locale } = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); const cal = calendars[calendarIndex]; if (!cal) return null; return (

{locale.weekdays.map((wd) => (

{wd}

))}

{cal.weeks.map((week, wIdx) => (

{week.map((date, dIdx) => { if (!date) { return (

); } const key = formatBasic(date, "YYYY-MM-DD"); if (typeof children === "function") { return {children({ date, calendarIndex })}; } return ( ); })}

))}

); }, ); Grid.displayName = "Grid"; 69:T2163,import { forwardRef, useEffect } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; import { useTimePicker } from "react-date-range-picker-headless"; export interface TimePanelProps { target?: "start" | "end" | "single"; className?: string; highlightClassName?: string; columnsClassName?: string; columnClassName?: string; itemClassName?: string; itemActiveClassName?: string; paddingClassName?: string; colonClassName?: string; periodButtonClassName?: string; cn?: (...args: unknown[]) => string; } export const TimePanel = forwardRef( ( { target = "single", className, highlightClassName, columnsClassName, columnClassName, itemClassName, itemActiveClassName, paddingClassName, colonClassName, periodButtonClassName, cn: cnFn, }, ref, ) => { const context = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); let config = context.resolvedTimeConfig; if (!config) config = {} as Required; // Not a time picker let hour, minute, second, period, onHour, onMinute, onSecond, onPeriod; if (target === "single") { hour = context.tempHour ?? 0; minute = context.tempMinute ?? 0; second = context.tempSecond ?? 0; period = context.tempPeriod ?? "AM"; onHour = context.handleHourChange!; onMinute = context.handleMinuteChange!; onSecond = context.handleSecondChange!; onPeriod = context.handlePeriodChange!; } else if (target === "start") { hour = context.startHour ?? 0; minute = context.startMinute ?? 0; second = context.startSecond ?? 0; period = context.startPeriod ?? "AM"; onHour = context.handleStartHourChange!; onMinute = context.handleStartMinuteChange!; onSecond = context.handleStartSecondChange!; onPeriod = context.handleStartPeriodChange!; } else { hour = context.endHour ?? 0; minute = context.endMinute ?? 0; second = context.endSecond ?? 0; period = context.endPeriod ?? "AM"; onHour = context.handleEndHourChange!; onMinute = context.handleEndMinuteChange!; onSecond = context.handleEndSecondChange!; onPeriod = context.handleEndPeriodChange!; } const tp = useTimePicker({ hour, minute, second, period, onHourChange: onHour, onMinuteChange: onMinute, onSecondChange: onSecond, onPeriodChange: onPeriod, precision: config?.precision, hourFormat: config?.hourFormat, minuteStep: config?.minuteStep, secondStep: config?.secondStep, itemHeight: config?.itemHeight, }); // Auto scroll when panel appears useEffect(() => { tp.scrollToValues(); }, [tp.scrollToValues]); return (

{tp.showMinutes && ( <>

)} {tp.showSeconds && ( <>

)} {tp.is12Hour && ( )}

); }, ); TimePanel.displayName = "TimePanel"; 6a:T7a1,import { type ReactNode, forwardRef } from "react"; import { usePickerContext } from "react-date-range-picker-headless"; export interface TitleProps { className?: string; selectClassName?: string; calendarIndex?: number; children?: ReactNode; cn?: (...args: unknown[]) => string; } export const Title = forwardRef( ({ className, selectClassName, calendarIndex = 0, children, cn: cnFn }, ref) => { const { calendars, locale, captionLayout, years, months, handleYearSelect, handleMonthSelect } = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); const monthObj = calendars[calendarIndex]?.month; if (!monthObj) return null; if (captionLayout === "dropdown") { return (

); } return (

{children || locale.formatMonthYear(monthObj)}

); }, ); Title.displayName = "Title"; 6b:Tb9f,import { type ReactNode, forwardRef, type MutableRefObject } from "react"; import { usePickerContext, type Locale } from "react-date-range-picker-headless"; export interface TriggerRenderProps { displayValue: string; placeholder: string; hasValue: boolean; isOpen: boolean; onToggle: () => void; onClear: () => void; locale: Locale; triggerRef: (node: HTMLElement | null) => void; } export interface TriggerProps { className?: string; placeholderClassName?: string; clearClassName?: string; placeholder?: string; children?: ReactNode | ((props: TriggerRenderProps) => ReactNode); cn?: (...args: unknown[]) => string; } export const Trigger = forwardRef( ({ className, placeholderClassName, clearClassName, placeholder, children, cn: cnFn }, ref) => { const context = usePickerContext(); const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(" ")); const handleClearClick = (e: React.MouseEvent) => { e.stopPropagation(); context.handleClear(); }; const handleClearKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); context.handleClear(); } }; if (typeof children === "function") { return ( <> {children({ displayValue: context.displayValue, placeholder: placeholder || context.placeholder || context.locale.placeholder, hasValue: context.hasValue, isOpen: context.isOpen, onToggle: context.handleToggle, onClear: context.handleClear, locale: context.locale, triggerRef: (node) => { if (typeof ref === "function") ref(node as unknown as HTMLButtonElement); else if (ref && "current" in ref) (ref as MutableRefObject).current = node; }, })} ); } return ( ); }, ); Trigger.displayName = "Trigger"; 6c:T8ad,import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; /** Merge class names with Tailwind conflict resolution. */ export function cn(...args: unknown[]): string { return twMerge(clsx(args)); } import type { DatePickerSize } from "react-date-range-picker-headless"; /** Return the size modifier class. Uses data-slot attributes set by ui-primitives. */ export function sizeClass(size: DatePickerSize = "medium"): string { const sizeMap: Record = { small: "text-[11px] [&_[data-slot=day]]:w-7 [&_[data-slot=day]]:h-7 [&_[data-slot=day]]:text-[11px] [&_[data-slot=nav-button]]:w-6 [&_[data-slot=nav-button]]:h-6 [&_[data-slot=trigger]]:min-w-[160px] [&_[data-slot=trigger]]:px-2.5 [&_[data-slot=trigger]]:py-1.5 [&_[data-slot=time-item]]:text-[11px] [&_[data-slot=time-item]]:h-7 [&_[data-slot=time-panel]]:w-[100px] [&_[data-slot=time-panel]]:h-[148px]", medium: "text-[13px] [&_[data-slot=day]]:w-9 [&_[data-slot=day]]:h-9 [&_[data-slot=day]]:text-[13px] [&_[data-slot=nav-button]]:w-7 [&_[data-slot=nav-button]]:h-7 [&_[data-slot=trigger]]:min-w-[200px] [&_[data-slot=trigger]]:px-3.5 [&_[data-slot=trigger]]:py-2 [&_[data-slot=time-item]]:text-[14px] [&_[data-slot=time-item]]:h-8 [&_[data-slot=time-panel]]:w-[120px] [&_[data-slot=time-panel]]:h-[176px]", large: "text-[14px] [&_[data-slot=day]]:w-11 [&_[data-slot=day]]:h-11 [&_[data-slot=day]]:text-[14px] [&_[data-slot=nav-button]]:w-8 [&_[data-slot=nav-button]]:h-8 [&_[data-slot=trigger]]:min-w-[240px] [&_[data-slot=trigger]]:px-4 [&_[data-slot=trigger]]:py-2.5 [&_[data-slot=time-item]]:text-[15px] [&_[data-slot=time-item]]:h-9 [&_[data-slot=time-panel]]:w-[140px] [&_[data-slot=time-panel]]:h-[196px]", "x-large": "text-[15px] [&_[data-slot=day]]:w-[52px] [&_[data-slot=day]]:h-[52px] [&_[data-slot=day]]:text-[15px] [&_[data-slot=nav-button]]:w-9 [&_[data-slot=nav-button]]:h-9 [&_[data-slot=trigger]]:min-w-[280px] [&_[data-slot=trigger]]:px-5 [&_[data-slot=trigger]]:py-3 [&_[data-slot=time-item]]:text-[16px] [&_[data-slot=time-item]]:h-10 [&_[data-slot=time-panel]]:w-[160px] [&_[data-slot=time-panel]]:h-[216px]", }; return sizeMap[size] || sizeMap["medium"]; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","react-date-range-picker-headless",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-date-range-picker-headless","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"react-date-range-picker-headless"}]]}]}],["$","li","@floating-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@floating-ui/react"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://dsikeres1.github.io/react-date-range-picker/r/date-range-picker.json","proxyUrl":"https://shadcnregistry.com/r/dsikeres1/date-range-picker","itemId":"@dsikeres1/date-range-picker"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/components/DatePicker/Compound.tsx","content":"$52","type":"registry:component","target":"components/date-range-picker/components/DatePicker/Compound.tsx"},{"path":"registry/components/DatePicker/index.tsx","content":"$53","type":"registry:component","target":"components/date-range-picker/components/DatePicker/index.tsx"},{"path":"registry/components/DateRangePicker/Compound.tsx","content":"$54","type":"registry:component","target":"components/date-range-picker/components/DateRangePicker/Compound.tsx"},{"path":"registry/components/DateRangePicker/index.tsx","content":"$55","type":"registry:component","target":"components/date-range-picker/components/DateRangePicker/index.tsx"},{"path":"registry/components/DateRangeTimePicker/Compound.tsx","content":"$56","type":"registry:component","target":"components/date-range-picker/components/DateRangeTimePicker/Compound.tsx"},{"path":"registry/components/DateRangeTimePicker/index.tsx","content":"$57","type":"registry:component","target":"components/date-range-picker/components/DateRangeTimePicker/index.tsx"},{"path":"registry/components/DateTimePicker/Compound.tsx","content":"$58","type":"registry:component","target":"components/date-range-picker/components/DateTimePicker/Compound.tsx"},{"path":"registry/components/DateTimePicker/index.tsx","content":"$59","type":"registry:component","target":"components/date-range-picker/components/DateTimePicker/index.tsx"},{"path":"registry/components/TimePicker/Compound.tsx","content":"$5a","type":"registry:component","target":"components/date-range-picker/components/TimePicker/Compound.tsx"},{"path":"registry/components/TimePicker/index.tsx","content":"import * as C from \"./Compound\";\nimport type { TimePickerRootProps } from \"../../ui-primitives/index\";\n\nexport interface TimePickerProps extends Omit {\n hideFooter?: boolean;\n}\n\nexport function TimePickerSimple({ hideFooter, ...props }: TimePickerProps) {\n const showFooter = hideFooter !== undefined ? !hideFooter : !props.inline;\n\n return (\n \n {!props.inline && }\n \n \n {showFooter && (\n \n \n \n \n \n )}\n \n \n );\n}\n\nexport const TimePicker = Object.assign(TimePickerSimple, C);\n","type":"registry:component","target":"components/date-range-picker/components/TimePicker/index.tsx"},{"path":"registry/theme.ts","content":"$5b","type":"registry:component","target":"components/date-range-picker/theme.ts"},{"path":"registry/ui-primitives/DatePicker/Root.tsx","content":"$5c","type":"registry:component","target":"components/date-range-picker/ui-primitives/DatePicker/Root.tsx"},{"path":"registry/ui-primitives/DatePicker/index.ts","content":"import { DatePickerRoot } from \"./Root\";\nimport { Trigger } from \"../shared/Trigger\";\nimport { Content } from \"../shared/Content\";\nimport { Header } from \"../shared/Header\";\nimport { PrevButton } from \"../shared/PrevButton\";\nimport { NextButton } from \"../shared/NextButton\";\nimport { Title } from \"../shared/Title\";\nimport { Grid } from \"../shared/Grid\";\nimport { Day } from \"../shared/Day\";\nimport { Footer } from \"../shared/Footer\";\nimport { ClearButton } from \"../shared/ClearButton\";\nimport { CancelButton } from \"../shared/CancelButton\";\nimport { ConfirmButton } from \"../shared/ConfirmButton\";\nimport { TodayButton } from \"../shared/TodayButton\";\n\nexport const DatePicker = {\n Root: DatePickerRoot,\n Trigger,\n Content,\n Header,\n PrevButton,\n NextButton,\n Title,\n Grid,\n Day,\n Footer,\n ClearButton,\n CancelButton,\n ConfirmButton,\n TodayButton,\n};\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DatePicker/index.ts"},{"path":"registry/ui-primitives/DateRangePicker/Calendars.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface CalendarsProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const Calendars = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nCalendars.displayName = \"Calendars\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangePicker/Calendars.tsx"},{"path":"registry/ui-primitives/DateRangePicker/PresetItem.tsx","content":"$5d","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangePicker/PresetItem.tsx"},{"path":"registry/ui-primitives/DateRangePicker/Presets.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\n\nexport interface PresetsProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const Presets = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { presets } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n if (!presets) {\n throw new Error(\"Presets can only be used within DateRangePicker, DateRangeTimePicker\");\n }\n if (presets.length === 0) return null;\n\n return (\n

\n {children}\n

\n );\n },\n);\nPresets.displayName = \"Presets\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangePicker/Presets.tsx"},{"path":"registry/ui-primitives/DateRangePicker/Root.tsx","content":"$5e","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangePicker/Root.tsx"},{"path":"registry/ui-primitives/DateRangePicker/index.ts","content":"$5f","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangePicker/index.ts"},{"path":"registry/ui-primitives/DateRangeTimePicker/EndTimeSection.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface EndTimeSectionProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const EndTimeSection = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nEndTimeSection.displayName = \"EndTimeSection\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangeTimePicker/EndTimeSection.tsx"},{"path":"registry/ui-primitives/DateRangeTimePicker/Root.tsx","content":"$60","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangeTimePicker/Root.tsx"},{"path":"registry/ui-primitives/DateRangeTimePicker/StartTimeSection.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface StartTimeSectionProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const StartTimeSection = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nStartTimeSection.displayName = \"StartTimeSection\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangeTimePicker/StartTimeSection.tsx"},{"path":"registry/ui-primitives/DateRangeTimePicker/index.ts","content":"$61","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateRangeTimePicker/index.ts"},{"path":"registry/ui-primitives/DateTimePicker/Root.tsx","content":"$62","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateTimePicker/Root.tsx"},{"path":"registry/ui-primitives/DateTimePicker/TimeSection.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface TimeSectionProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const TimeSection = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nTimeSection.displayName = \"TimeSection\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateTimePicker/TimeSection.tsx"},{"path":"registry/ui-primitives/DateTimePicker/index.ts","content":"import { DateTimePickerRoot } from \"./Root\";\nimport { TimeSection } from \"./TimeSection\";\nimport { Trigger } from \"../shared/Trigger\";\nimport { Content } from \"../shared/Content\";\nimport { Header } from \"../shared/Header\";\nimport { PrevButton } from \"../shared/PrevButton\";\nimport { NextButton } from \"../shared/NextButton\";\nimport { Title } from \"../shared/Title\";\nimport { Grid } from \"../shared/Grid\";\nimport { Day } from \"../shared/Day\";\nimport { Footer } from \"../shared/Footer\";\nimport { ClearButton } from \"../shared/ClearButton\";\nimport { CancelButton } from \"../shared/CancelButton\";\nimport { ConfirmButton } from \"../shared/ConfirmButton\";\nimport { TodayButton } from \"../shared/TodayButton\";\nimport { TimePanel } from \"../shared/TimePanel\";\n\nexport const DateTimePicker = {\n Root: DateTimePickerRoot,\n Trigger,\n Content,\n Header,\n PrevButton,\n NextButton,\n Title,\n Grid,\n Day,\n TimeSection,\n TimePanel,\n Footer,\n ClearButton,\n CancelButton,\n ConfirmButton,\n TodayButton,\n};\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/DateTimePicker/index.ts"},{"path":"registry/ui-primitives/TimePicker/PeriodToggle.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\nimport { useStandaloneTimePickerContext } from \"react-date-range-picker-headless\";\n\nexport interface TimePickerPeriodToggleProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const TimePickerPeriodToggle = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { tempPeriod, handlePeriodChange, locale } = useStandaloneTimePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n return (\n handlePeriodChange(tempPeriod === \"AM\" ? \"PM\" : \"AM\")}\n >\n {children || (tempPeriod === \"AM\" ? locale.am : locale.pm)}\n \n );\n },\n);\nTimePickerPeriodToggle.displayName = \"TimePickerPeriodToggle\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/TimePicker/PeriodToggle.tsx"},{"path":"registry/ui-primitives/TimePicker/Root.tsx","content":"$63","type":"registry:component","target":"components/date-range-picker/ui-primitives/TimePicker/Root.tsx"},{"path":"registry/ui-primitives/TimePicker/index.ts","content":"import { TimePickerRoot } from \"./Root\";\nimport { TimePickerPeriodToggle } from \"./PeriodToggle\";\nimport { Trigger } from \"../shared/Trigger\";\nimport { Content } from \"../shared/Content\";\nimport { TimePanel } from \"../shared/TimePanel\";\nimport { Footer } from \"../shared/Footer\";\nimport { ClearButton } from \"../shared/ClearButton\";\nimport { CancelButton } from \"../shared/CancelButton\";\nimport { ConfirmButton } from \"../shared/ConfirmButton\";\n\nexport const TimePicker = {\n Root: TimePickerRoot,\n Trigger,\n Content,\n TimePanel,\n PeriodToggle: TimePickerPeriodToggle,\n Footer,\n ClearButton,\n CancelButton,\n ConfirmButton,\n};\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/TimePicker/index.ts"},{"path":"registry/ui-primitives/index.ts","content":"$64","type":"registry:component","target":"components/date-range-picker/ui-primitives/index.ts"},{"path":"registry/ui-primitives/types.ts","content":"$65","type":"registry:component","target":"components/date-range-picker/ui-primitives/types.ts"},{"path":"registry/ui-primitives/shared/CancelButton.tsx","content":"import { forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\nimport type { ActionButtonProps } from \"./ClearButton\";\n\nexport const CancelButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handleCancel, locale } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n return (\n \n {children || locale.cancel}\n \n );\n },\n);\nCancelButton.displayName = \"CancelButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/CancelButton.tsx"},{"path":"registry/ui-primitives/shared/ClearButton.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\n\nexport interface ActionButtonProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const ClearButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handleClear, locale, hasValue } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n if (!hasValue) return null;\n\n return (\n \n {children || locale.clear}\n \n );\n },\n);\nClearButton.displayName = \"ClearButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/ClearButton.tsx"},{"path":"registry/ui-primitives/shared/ConfirmButton.tsx","content":"import { forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\nimport type { ActionButtonProps } from \"./ClearButton\";\n\nexport const ConfirmButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handleConfirm, canConfirm, locale } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n return (\n \n {children || locale.confirm}\n \n );\n },\n);\nConfirmButton.displayName = \"ConfirmButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/ConfirmButton.tsx"},{"path":"registry/ui-primitives/shared/Content.tsx","content":"$66","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Content.tsx"},{"path":"registry/ui-primitives/shared/Day.tsx","content":"$67","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Day.tsx"},{"path":"registry/ui-primitives/shared/Footer.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface FooterProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const Footer = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nFooter.displayName = \"Footer\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Footer.tsx"},{"path":"registry/ui-primitives/shared/Grid.tsx","content":"$68","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Grid.tsx"},{"path":"registry/ui-primitives/shared/Header.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\n\nexport interface HeaderProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const Header = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n

\n {children}\n

\n );\n },\n);\nHeader.displayName = \"Header\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Header.tsx"},{"path":"registry/ui-primitives/shared/NextButton.tsx","content":"import { forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\nimport type { NavButtonProps } from \"./PrevButton\";\n\nexport const NextButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handleNextMonth, locale } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n \n {children || locale.nextMonth}\n \n );\n },\n);\nNextButton.displayName = \"NextButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/NextButton.tsx"},{"path":"registry/ui-primitives/shared/PrevButton.tsx","content":"import { type ReactNode, forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\n\nexport interface NavButtonProps {\n className?: string;\n children?: ReactNode;\n cn?: (...args: unknown[]) => string;\n}\n\nexport const PrevButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handlePrevMonth, locale } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n return (\n \n {children || locale.prevMonth}\n \n );\n },\n);\nPrevButton.displayName = \"PrevButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/PrevButton.tsx"},{"path":"registry/ui-primitives/shared/TimePanel.tsx","content":"$69","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/TimePanel.tsx"},{"path":"registry/ui-primitives/shared/Title.tsx","content":"$6a","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Title.tsx"},{"path":"registry/ui-primitives/shared/TodayButton.tsx","content":"import { forwardRef } from \"react\";\nimport { usePickerContext } from \"react-date-range-picker-headless\";\nimport type { ActionButtonProps } from \"./ClearButton\";\n\nexport const TodayButton = forwardRef(\n ({ className, children, cn: cnFn }, ref) => {\n const { handleGoToToday, locale } = usePickerContext();\n const cn = cnFn ?? ((...args: unknown[]) => args.filter(Boolean).join(\" \"));\n\n return (\n \n {children || locale.today}\n \n );\n },\n);\nTodayButton.displayName = \"TodayButton\";\n","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/TodayButton.tsx"},{"path":"registry/ui-primitives/shared/Trigger.tsx","content":"$6b","type":"registry:component","target":"components/date-range-picker/ui-primitives/shared/Trigger.tsx"},{"path":"registry/utils.ts","content":"$6c","type":"registry:component","target":"components/date-range-picker/utils.ts"},{"path":"registry/utils/mergeRefs.ts","content":"import type { MutableRefObject, Ref } from \"react\";\n\n/** Merge multiple refs (callback or object) into a single callback ref. */\nexport function mergeRefs(...refs: (Ref | undefined)[]) {\n return (node: T | null) => {\n const cleanups: (() => void)[] = [];\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n const cleanup = ref(node);\n if (typeof cleanup === \"function\") {\n cleanups.push(cleanup);\n }\n } else if (ref) {\n (ref as MutableRefObject).current = node;\n }\n });\n if (cleanups.length > 0) {\n return () => cleanups.forEach((fn) => fn());\n }\n };\n}\n","type":"registry:component","target":"components/date-range-picker/utils/mergeRefs.ts"}]}]]}],"$L6d"]}]

Date Range Picker

Installation

Files

components

Styles