Function DateRangePicker

site/src/components/DateRangePicker/DateRangePicker.tsx:118–267

({
	value,
	onChange,
	now,
	presets,
	size = "sm",
})

}

export const DateRangePicker: FC<DateRangePickerProps> = ({
	value,
	onChange,
	now,
	presets,
	size = "sm",
}) => {
	const [open, setOpen] = useState(false);
	const currentTime = now ?? new Date();
	const resolvedPresets = presets ?? buildDefaultPresets(now);

	// Internal selection state kept separate from the committed value
	// so the user can freely adjust the range before applying. This
	// uses raw calendar dates (inclusive), not the API boundary format.
	const [selection, setSelection] = useState<DayPickerDateRange | undefined>(
		() => fromBoundary(value),
	);

	const commit = () => {
		if (selection?.from && selection?.to) {
			onChange(toBoundary(selection.from, selection.to, now ?? new Date()));
		}
		setOpen(false);
	};

	const handlePreset = (preset: DateRangePreset) => {
		const { from, to } = preset.range();
		setSelection({ from, to });
		// Presets are a complete selection — commit immediately.
		onChange(toBoundary(from, to, now ?? new Date()));
		setOpen(false);
	};

	const handleCalendarSelect = (range: DayPickerDateRange | undefined) => {
		if (!range) return;
		setSelection(range);
	};

	// Sync local selection when the popover opens so it reflects the
	// latest committed value. Reverse the boundary normalization so
	// the calendar highlights the correct inclusive dates.
	const handleOpenChange = (next: boolean) => {
		if (next) {
			setSelection(fromBoundary(value));
		}
		setOpen(next);
	};

	// Compare in the same coordinate space (raw calendar dates) so
	// re-selecting the identical range doesn't enable Apply.
	const committed = fromBoundary(value);
	const canApply =
		selection?.from &&
		selection?.to &&
		(selection.from.getTime() !== committed.from?.getTime() ||
			selection.to.getTime() !== committed.to?.getTime());

	return (