best-react-datepicker 0.2.0

package/dist/chunk-FBN3SFQJ.js

@@ -0,0 +1,1140 @@
+import { generateCalendarMonths, isDateInRange, isDateDisabled, isDateHighlighted, subYears, subMonths, addYears, addMonths, endOfWeek, startOfWeek, subDays, addDays, formatDate, isSameDay, parseDate, differenceInDays, isBefore, isBetween, isAfter, to12Hour, clone, to24Hour, generateHours, generateMinutes, generateSeconds, formatTime, generateMonthGrid, createDate, startOfMonth, isSameMonth, generateYearGrid, getWeekNumber, getWeekDates } from './chunk-W6KEY2SO.js';
+import { defaultLocale } from './chunk-QW2CUEX4.js';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+
+function useControllable(options) {
+  const { value: controlledValue, defaultValue, onChange } = options;
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChangeRef.current?.(newValue);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+function useCalendar(options = {}) {
+  const {
+    numberOfMonths = 1,
+    weekStartsOn: weekStartsOnProp,
+    fixedWeeks = false,
+    minDate,
+    maxDate,
+    disabled,
+    highlighted,
+    locale = defaultLocale
+  } = options;
+  const weekStartsOn = weekStartsOnProp ?? locale.weekStartsOn;
+  const now = /* @__PURE__ */ new Date();
+  const [viewingDate, setViewingDate] = useControllable({
+    value: options.month,
+    defaultValue: options.defaultMonth ?? new Date(now.getFullYear(), now.getMonth(), 1),
+    onChange: (date) => options.onMonthChange?.(date)
+  });
+  const [focusedDate, setFocusedDate] = useState(null);
+  const viewingYear = viewingDate.getFullYear();
+  const viewingMonth = viewingDate.getMonth();
+  const months = useMemo(
+    () => generateCalendarMonths(viewingYear, viewingMonth, numberOfMonths, {
+      weekStartsOn,
+      fixedWeeks
+    }),
+    [viewingYear, viewingMonth, numberOfMonths, weekStartsOn, fixedWeeks]
+  );
+  const navigate = useCallback(
+    (year, month) => {
+      const adjusted = new Date(year, month, 1);
+      setViewingDate(adjusted);
+    },
+    [setViewingDate]
+  );
+  const goToNextMonth = useCallback(() => {
+    navigate(viewingYear, viewingMonth + 1);
+  }, [navigate, viewingYear, viewingMonth]);
+  const goToPrevMonth = useCallback(() => {
+    navigate(viewingYear, viewingMonth - 1);
+  }, [navigate, viewingYear, viewingMonth]);
+  const goToNextYear = useCallback(() => {
+    navigate(viewingYear + 1, viewingMonth);
+  }, [navigate, viewingYear, viewingMonth]);
+  const goToPrevYear = useCallback(() => {
+    navigate(viewingYear - 1, viewingMonth);
+  }, [navigate, viewingYear, viewingMonth]);
+  const goToMonth = useCallback(
+    (month) => {
+      navigate(viewingYear, month);
+    },
+    [navigate, viewingYear]
+  );
+  const goToYear = useCallback(
+    (year) => {
+      navigate(year, viewingMonth);
+    },
+    [navigate, viewingMonth]
+  );
+  const goToDate = useCallback(
+    (date) => {
+      navigate(date.getFullYear(), date.getMonth());
+    },
+    [navigate]
+  );
+  const goToToday = useCallback(() => {
+    const t = /* @__PURE__ */ new Date();
+    navigate(t.getFullYear(), t.getMonth());
+  }, [navigate]);
+  const checkDisabled = useCallback(
+    (date) => {
+      if (!isDateInRange(date, minDate, maxDate)) return true;
+      return isDateDisabled(date, disabled);
+    },
+    [minDate, maxDate, disabled]
+  );
+  const checkHighlighted = useCallback(
+    (date) => isDateHighlighted(date, highlighted),
+    [highlighted]
+  );
+  const checkOutsideRange = useCallback(
+    (date) => !isDateInRange(date, minDate, maxDate),
+    [minDate, maxDate]
+  );
+  return {
+    months,
+    focusedDate,
+    viewingYear,
+    viewingMonth,
+    goToNextMonth,
+    goToPrevMonth,
+    goToNextYear,
+    goToPrevYear,
+    goToMonth,
+    goToYear,
+    goToDate,
+    goToToday,
+    setFocusedDate,
+    isDateDisabled: checkDisabled,
+    isDateHighlighted: checkHighlighted,
+    isOutsideRange: checkOutsideRange,
+    locale
+  };
+}
+function useKeyboardNav(options) {
+  const {
+    focusedDate,
+    onFocusChange,
+    onSelect,
+    onClose,
+    weekStartsOn = 0,
+    minDate,
+    maxDate,
+    disabled
+  } = options;
+  const isValid = (date) => {
+    return isDateInRange(date, minDate, maxDate) && !isDateDisabled(date, disabled);
+  };
+  const moveFocus = (newDate) => {
+    if (isDateInRange(newDate, minDate, maxDate)) {
+      onFocusChange(newDate);
+    }
+  };
+  const handleKeyDown = useCallback(
+    (event) => {
+      let handled = true;
+      switch (event.key) {
+        case "ArrowRight":
+          moveFocus(addDays(focusedDate, 1));
+          break;
+        case "ArrowLeft":
+          moveFocus(subDays(focusedDate, 1));
+          break;
+        case "ArrowDown":
+          moveFocus(addDays(focusedDate, 7));
+          break;
+        case "ArrowUp":
+          moveFocus(subDays(focusedDate, 7));
+          break;
+        case "Home":
+          moveFocus(startOfWeek(focusedDate, weekStartsOn));
+          break;
+        case "End":
+          moveFocus(endOfWeek(focusedDate, weekStartsOn));
+          break;
+        case "PageDown":
+          if (event.shiftKey) {
+            moveFocus(addYears(focusedDate, 1));
+          } else {
+            moveFocus(addMonths(focusedDate, 1));
+          }
+          break;
+        case "PageUp":
+          if (event.shiftKey) {
+            moveFocus(subYears(focusedDate, 1));
+          } else {
+            moveFocus(subMonths(focusedDate, 1));
+          }
+          break;
+        case "Enter":
+        case " ":
+          if (isValid(focusedDate)) {
+            onSelect(focusedDate);
+          }
+          break;
+        case "Escape":
+          onClose?.();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [focusedDate, onFocusChange, onSelect, onClose, weekStartsOn, minDate, maxDate, disabled]
+  );
+  return { handleKeyDown };
+}
+function useDatePicker(options = {}) {
+  const {
+    closeOnSelect = true,
+    clearable = false,
+    required = false,
+    readOnly = false,
+    placeholder,
+    name,
+    locale = defaultLocale,
+    ...calendarOptions
+  } = options;
+  const format = options.format ?? locale.dateFormat;
+  const calendar = useCalendar({ ...calendarOptions, locale });
+  const [selectedDate, setSelectedDate] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? null,
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const [inputValue, setInputValue] = useState("");
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const formattedValue = useMemo(
+    () => selectedDate ? formatDate(selectedDate, format, locale.code) : "",
+    [selectedDate, format, locale.code]
+  );
+  const open = useCallback(() => {
+    if (!readOnly) setIsOpen(true);
+  }, [readOnly, setIsOpen]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setInputValue("");
+  }, [setIsOpen]);
+  const toggle = useCallback(() => {
+    if (isOpen) close();
+    else open();
+  }, [isOpen, open, close]);
+  const selectDate = useCallback(
+    (date) => {
+      if (calendar.isDateDisabled(date)) return;
+      setSelectedDate(date);
+      if (closeOnSelect) close();
+    },
+    [calendar.isDateDisabled, setSelectedDate, closeOnSelect, close]
+  );
+  const clearDate = useCallback(() => {
+    setSelectedDate(null);
+    setInputValue("");
+  }, [setSelectedDate]);
+  const isSelected = useCallback(
+    (date) => selectedDate ? isSameDay(date, selectedDate) : false,
+    [selectedDate]
+  );
+  const handleInputChange = useCallback(
+    (value) => {
+      setInputValue(value);
+      const parsed = parseDate(value, format, locale.code);
+      if (parsed && !calendar.isDateDisabled(parsed)) {
+        setSelectedDate(parsed);
+        calendar.goToDate(parsed);
+      }
+    },
+    [format, locale.code, calendar, setSelectedDate]
+  );
+  const handleInputBlur = useCallback(() => {
+    setIsInputFocused(false);
+    setInputValue("");
+  }, []);
+  const handleInputFocus = useCallback(() => {
+    setIsInputFocused(true);
+  }, []);
+  const getInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: isInputFocused && inputValue ? inputValue : formattedValue,
+      placeholder: placeholder ?? format,
+      readOnly,
+      "aria-label": placeholder ?? "Select date",
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      autoComplete: "off",
+      onChange: (e) => handleInputChange(e.target.value),
+      onFocus: () => {
+        handleInputFocus();
+        open();
+      },
+      onBlur: handleInputBlur,
+      onClick: () => open()
+    }),
+    [formattedValue, inputValue, isInputFocused, placeholder, format, readOnly, isOpen, handleInputChange, handleInputFocus, handleInputBlur, open]
+  );
+  const getPopoverProps = useCallback(
+    () => ({
+      role: "dialog",
+      "aria-modal": true,
+      "aria-label": "Choose date"
+    }),
+    []
+  );
+  const getHiddenInputProps = useCallback(
+    () => ({
+      type: "hidden",
+      name,
+      value: selectedDate ? selectedDate.toISOString() : ""
+    }),
+    [name, selectedDate]
+  );
+  return {
+    ...calendar,
+    selectedDate,
+    selectDate,
+    clearDate,
+    formattedValue,
+    isOpen,
+    open,
+    close,
+    toggle,
+    isSelected,
+    getInputProps,
+    getPopoverProps,
+    getHiddenInputProps,
+    clearable,
+    required
+  };
+}
+function useRangePicker(options = {}) {
+  const {
+    minDays,
+    maxDays,
+    presets = [],
+    allowSameDay = true,
+    separator = " \u2013 ",
+    startName,
+    endName,
+    startPlaceholder,
+    endPlaceholder,
+    closeOnSelect = false,
+    locale = defaultLocale,
+    ...calendarOptions
+  } = options;
+  const format = options.format ?? locale.dateFormat;
+  const calendar = useCalendar({
+    ...calendarOptions,
+    numberOfMonths: calendarOptions.numberOfMonths ?? 2,
+    locale
+  });
+  const emptyRange = { from: null, to: null };
+  const [range, setRange] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? emptyRange,
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [activeInput, setActiveInput] = useState("start");
+  const isValidRange = useCallback(
+    (from, to) => {
+      const days = Math.abs(differenceInDays(to, from)) + 1;
+      if (!allowSameDay && days === 1) return false;
+      if (minDays && days < minDays) return false;
+      if (maxDays && days > maxDays) return false;
+      return true;
+    },
+    [allowSameDay, minDays, maxDays]
+  );
+  const handleDayClick = useCallback(
+    (date) => {
+      if (calendar.isDateDisabled(date)) return;
+      if (!range.from || range.from && range.to) {
+        setRange({ from: date, to: null });
+        setActiveInput("end");
+      } else {
+        let from = range.from;
+        let to = date;
+        if (isBefore(to, from)) {
+          [from, to] = [to, from];
+        }
+        if (isValidRange(from, to)) {
+          setRange({ from, to });
+          setActiveInput("start");
+          if (closeOnSelect) {
+            setIsOpen(false);
+          }
+        } else {
+          setRange({ from: date, to: null });
+          setActiveInput("end");
+        }
+      }
+    },
+    [range, calendar.isDateDisabled, isValidRange, setRange, closeOnSelect, setIsOpen]
+  );
+  const applyPreset = useCallback(
+    (preset) => {
+      const value = typeof preset.value === "function" ? preset.value() : preset.value;
+      setRange(value);
+      if (closeOnSelect) {
+        setIsOpen(false);
+      }
+    },
+    [setRange, closeOnSelect, setIsOpen]
+  );
+  const activePresetIndex = useMemo(() => {
+    if (!range.from || !range.to) return -1;
+    return presets.findIndex((preset) => {
+      const resolved = typeof preset.value === "function" ? preset.value() : preset.value;
+      if (!resolved.from || !resolved.to) return false;
+      return isSameDay(range.from, resolved.from) && isSameDay(range.to, resolved.to);
+    });
+  }, [range.from, range.to, presets]);
+  const clearRange = useCallback(() => {
+    setRange(emptyRange);
+    setActiveInput("start");
+  }, [setRange]);
+  const isRangeStart = useCallback(
+    (date) => range.from ? isSameDay(date, range.from) : false,
+    [range.from]
+  );
+  const isRangeEnd = useCallback(
+    (date) => range.to ? isSameDay(date, range.to) : false,
+    [range.to]
+  );
+  const isInRange = useCallback(
+    (date) => {
+      if (!range.from || !range.to) return false;
+      return isBetween(date, range.from, range.to, false) && !isSameDay(date, range.from) && !isSameDay(date, range.to);
+    },
+    [range.from, range.to]
+  );
+  const isInPreviewRange = useCallback(
+    (date) => {
+      if (!range.from || range.to || !hoveredDate) return false;
+      const start = isBefore(hoveredDate, range.from) ? hoveredDate : range.from;
+      const end = isAfter(hoveredDate, range.from) ? hoveredDate : range.from;
+      return isBetween(date, start, end);
+    },
+    [range.from, range.to, hoveredDate]
+  );
+  const isSelected = useCallback(
+    (date) => isRangeStart(date) || isRangeEnd(date),
+    [isRangeStart, isRangeEnd]
+  );
+  const formattedStart = useMemo(
+    () => range.from ? formatDate(range.from, format, locale.code) : "",
+    [range.from, format, locale.code]
+  );
+  const formattedEnd = useMemo(
+    () => range.to ? formatDate(range.to, format, locale.code) : "",
+    [range.to, format, locale.code]
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const getStartInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: formattedStart,
+      placeholder: startPlaceholder ?? locale.labels.startDate,
+      readOnly: true,
+      "aria-label": locale.labels.startDate,
+      onClick: () => {
+        setActiveInput("start");
+        open();
+      }
+    }),
+    [formattedStart, startPlaceholder, locale.labels.startDate, open]
+  );
+  const getEndInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: formattedEnd,
+      placeholder: endPlaceholder ?? locale.labels.endDate,
+      readOnly: true,
+      "aria-label": locale.labels.endDate,
+      onClick: () => {
+        setActiveInput("end");
+        open();
+      }
+    }),
+    [formattedEnd, endPlaceholder, locale.labels.endDate, open]
+  );
+  const getPopoverProps = useCallback(
+    () => ({
+      role: "dialog",
+      "aria-modal": true,
+      "aria-label": "Choose date range"
+    }),
+    []
+  );
+  const getPresetButtonProps = useCallback(
+    (preset) => ({
+      type: "button",
+      onClick: () => applyPreset(preset),
+      "aria-label": preset.label
+    }),
+    [applyPreset]
+  );
+  return {
+    ...calendar,
+    range,
+    hoveredDate,
+    activeInput,
+    handleDayClick,
+    applyPreset,
+    clearRange,
+    setHoveredDate,
+    isRangeStart,
+    isRangeEnd,
+    isInRange,
+    isInPreviewRange,
+    isSelected,
+    formattedStart,
+    formattedEnd,
+    isOpen,
+    open,
+    close,
+    toggle,
+    presets,
+    separator,
+    activePresetIndex,
+    getStartInputProps,
+    getEndInputProps,
+    getPopoverProps,
+    getPresetButtonProps
+  };
+}
+function useMultiPicker(options = {}) {
+  const {
+    maxSelections,
+    locale = defaultLocale,
+    ...calendarOptions
+  } = options;
+  const format = options.format ?? locale.dateFormat;
+  const calendar = useCalendar({ ...calendarOptions, locale });
+  const [selectedDates, setSelectedDates] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? [],
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const toggleDate = useCallback(
+    (date) => {
+      if (calendar.isDateDisabled(date)) return;
+      const index = selectedDates.findIndex((d) => isSameDay(d, date));
+      if (index >= 0) {
+        setSelectedDates(selectedDates.filter((_, i) => i !== index));
+      } else {
+        if (maxSelections && selectedDates.length >= maxSelections) return;
+        setSelectedDates([...selectedDates, date]);
+      }
+    },
+    [selectedDates, maxSelections, calendar.isDateDisabled, setSelectedDates]
+  );
+  const removeDate = useCallback(
+    (date) => {
+      setSelectedDates(selectedDates.filter((d) => !isSameDay(d, date)));
+    },
+    [selectedDates, setSelectedDates]
+  );
+  const clearAll = useCallback(() => {
+    setSelectedDates([]);
+  }, [setSelectedDates]);
+  const isSelected = useCallback(
+    (date) => selectedDates.some((d) => isSameDay(d, date)),
+    [selectedDates]
+  );
+  const formattedValues = useMemo(
+    () => selectedDates.map((d) => formatDate(d, format, locale.code)),
+    [selectedDates, format, locale.code]
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  return {
+    ...calendar,
+    selectedDates,
+    toggleDate,
+    removeDate,
+    clearAll,
+    isSelected,
+    formattedValues,
+    isOpen,
+    open,
+    close,
+    toggle
+  };
+}
+function useTimePicker(options = {}) {
+  const {
+    format = "12h",
+    minuteStep = 1,
+    secondStep = 1,
+    showSeconds = false,
+    minTime,
+    maxTime,
+    name,
+    placeholder
+  } = options;
+  const [selectedTime, setSelectedTime] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? null,
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const hours24 = selectedTime?.getHours() ?? 0;
+  const minutes = selectedTime?.getMinutes() ?? 0;
+  const seconds = selectedTime?.getSeconds() ?? 0;
+  const { hours: display12h, meridiem } = to12Hour(hours24);
+  const displayHours = format === "12h" ? display12h : hours24;
+  const updateTime = useCallback(
+    (h, m, s) => {
+      const base = selectedTime ? clone(selectedTime) : /* @__PURE__ */ new Date();
+      base.setHours(h, m, s, 0);
+      setSelectedTime(base);
+    },
+    [selectedTime, setSelectedTime]
+  );
+  const setHours = useCallback(
+    (h) => {
+      const h24 = format === "12h" ? to24Hour(h, meridiem) : h;
+      updateTime(h24, minutes, seconds);
+    },
+    [format, meridiem, minutes, seconds, updateTime]
+  );
+  const setMinutes = useCallback(
+    (m) => updateTime(hours24, m, seconds),
+    [hours24, seconds, updateTime]
+  );
+  const setSeconds = useCallback(
+    (s) => updateTime(hours24, minutes, s),
+    [hours24, minutes, updateTime]
+  );
+  const setMeridiem = useCallback(
+    (m) => {
+      const h = to24Hour(display12h, m);
+      updateTime(h, minutes, seconds);
+    },
+    [display12h, minutes, seconds, updateTime]
+  );
+  const availableHours = useMemo(() => generateHours(format), [format]);
+  const availableMinutes = useMemo(() => generateMinutes(minuteStep), [minuteStep]);
+  const availableSeconds = useMemo(() => generateSeconds(secondStep), [secondStep]);
+  const formattedValue = useMemo(
+    () => selectedTime ? formatTime(selectedTime, format) : "",
+    [selectedTime, format]
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const getInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: formattedValue,
+      placeholder: placeholder ?? (format === "12h" ? "hh:mm AM" : "HH:mm"),
+      readOnly: true,
+      "aria-label": placeholder ?? "Select time",
+      "aria-haspopup": "listbox",
+      "aria-expanded": isOpen,
+      onClick: () => open()
+    }),
+    [formattedValue, placeholder, format, isOpen, open]
+  );
+  const getTimeOptionProps = useCallback(
+    (type, value) => {
+      const isActive = type === "hours" ? displayHours === value : type === "minutes" ? minutes === value : type === "seconds" ? seconds === value : meridiem === value;
+      return {
+        type: "button",
+        role: "option",
+        "aria-selected": isActive,
+        "data-active": isActive || void 0,
+        onClick: () => {
+          switch (type) {
+            case "hours":
+              setHours(value);
+              break;
+            case "minutes":
+              setMinutes(value);
+              break;
+            case "seconds":
+              setSeconds(value);
+              break;
+            case "meridiem":
+              setMeridiem(value);
+              break;
+          }
+        }
+      };
+    },
+    [displayHours, minutes, seconds, meridiem, setHours, setMinutes, setSeconds, setMeridiem]
+  );
+  return {
+    hours: displayHours,
+    minutes,
+    seconds,
+    meridiem,
+    setHours,
+    setMinutes,
+    setSeconds,
+    setMeridiem,
+    formattedValue,
+    availableHours,
+    availableMinutes,
+    availableSeconds,
+    showSeconds,
+    format,
+    isOpen,
+    open,
+    close,
+    toggle,
+    getInputProps,
+    getTimeOptionProps,
+    selectedTime
+  };
+}
+function useMonthPicker(options = {}) {
+  const { minDate, maxDate, locale = defaultLocale } = options;
+  const format = options.format ?? "MMM YYYY";
+  const [selectedDate, setSelectedDate] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? null,
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const [viewingYear, setViewingYear] = useState(
+    () => selectedDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()
+  );
+  const monthGrid = useMemo(() => {
+    const grid = generateMonthGrid(viewingYear);
+    return grid.map((item) => {
+      const date = createDate(viewingYear, item.month, 1);
+      const isDisabled = (minDate ? isBefore(date, startOfMonth(minDate)) : false) || (maxDate ? isAfter(date, maxDate) : false);
+      const isSelected = selectedDate ? isSameMonth(date, selectedDate) : false;
+      return { ...item, isDisabled, isSelected, date };
+    });
+  }, [viewingYear, minDate, maxDate, selectedDate]);
+  const goToNextYear = useCallback(() => setViewingYear((y) => y + 1), []);
+  const goToPrevYear = useCallback(() => setViewingYear((y) => y - 1), []);
+  const selectMonth = useCallback(
+    (month) => {
+      const date = createDate(viewingYear, month, 1);
+      setSelectedDate(date);
+    },
+    [viewingYear, setSelectedDate]
+  );
+  const formattedValue = useMemo(
+    () => selectedDate ? formatDate(selectedDate, format, locale.code) : "",
+    [selectedDate, format, locale.code]
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const getInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: formattedValue,
+      readOnly: true,
+      "aria-label": locale.labels.selectMonth,
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      onClick: () => open()
+    }),
+    [formattedValue, locale.labels.selectMonth, isOpen, open]
+  );
+  const getMonthButtonProps = useCallback(
+    (month) => {
+      const item = monthGrid.find((m) => m.month === month);
+      return {
+        type: "button",
+        "aria-selected": item?.isSelected ?? false,
+        "aria-disabled": item?.isDisabled ?? false,
+        disabled: item?.isDisabled ?? false,
+        onClick: () => {
+          if (!item?.isDisabled) {
+            selectMonth(month);
+            close();
+          }
+        }
+      };
+    },
+    [monthGrid, selectMonth, close]
+  );
+  return {
+    viewingYear,
+    selectedDate,
+    monthGrid,
+    goToNextYear,
+    goToPrevYear,
+    selectMonth,
+    formattedValue,
+    isOpen,
+    open,
+    close,
+    toggle,
+    getInputProps,
+    getMonthButtonProps,
+    locale
+  };
+}
+function useYearPicker(options = {}) {
+  const { minYear, maxYear, yearsPerPage = 12 } = options;
+  const [selectedYear, setSelectedYear] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? null,
+    onChange: options.onChange
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const [centerYear, setCenterYear] = useState(selectedYear ?? currentYear);
+  const years = useMemo(() => {
+    const grid = generateYearGrid(centerYear, yearsPerPage);
+    return grid.map((item) => ({
+      ...item,
+      isDisabled: minYear != null && item.year < minYear || maxYear != null && item.year > maxYear,
+      isSelected: selectedYear === item.year,
+      isCurrentYear: item.year === currentYear
+    }));
+  }, [centerYear, yearsPerPage, minYear, maxYear, selectedYear, currentYear]);
+  const decadeStart = years[0]?.year ?? centerYear;
+  const goToNextDecade = useCallback(
+    () => setCenterYear((y) => y + yearsPerPage),
+    [yearsPerPage]
+  );
+  const goToPrevDecade = useCallback(
+    () => setCenterYear((y) => y - yearsPerPage),
+    [yearsPerPage]
+  );
+  const selectYear = useCallback(
+    (year) => setSelectedYear(year),
+    [setSelectedYear]
+  );
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const getInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: selectedYear != null ? String(selectedYear) : "",
+      readOnly: true,
+      "aria-label": "Select year",
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      onClick: () => open()
+    }),
+    [selectedYear, isOpen, open]
+  );
+  const getYearButtonProps = useCallback(
+    (year) => {
+      const item = years.find((y) => y.year === year);
+      return {
+        type: "button",
+        "aria-selected": item?.isSelected ?? false,
+        "aria-disabled": item?.isDisabled ?? false,
+        disabled: item?.isDisabled ?? false,
+        onClick: () => {
+          if (!item?.isDisabled) {
+            selectYear(year);
+            close();
+          }
+        }
+      };
+    },
+    [years, selectYear, close]
+  );
+  return {
+    decadeStart,
+    selectedYear,
+    years,
+    goToNextDecade,
+    goToPrevDecade,
+    selectYear,
+    isOpen,
+    open,
+    close,
+    toggle,
+    getInputProps,
+    getYearButtonProps
+  };
+}
+function useWeekPicker(options = {}) {
+  const { locale = defaultLocale, ...calendarOptions } = options;
+  const format = options.format ?? locale.dateFormat;
+  const weekStartsOn = options.weekStartsOn ?? locale.weekStartsOn;
+  const calendar = useCalendar({
+    ...calendarOptions,
+    locale,
+    showWeekNumbers: true,
+    weekStartsOn
+  });
+  const [selectedWeekDate, setSelectedWeekDate] = useControllable({
+    value: options.value,
+    defaultValue: options.defaultValue ?? null,
+    onChange: void 0
+  });
+  const [isOpen, setIsOpen] = useControllable({
+    value: options.open,
+    defaultValue: options.defaultOpen ?? false,
+    onChange: options.onOpenChange
+  });
+  const selectedWeek = useMemo(() => {
+    if (!selectedWeekDate) return null;
+    const start = startOfWeek(selectedWeekDate, weekStartsOn);
+    const end = endOfWeek(selectedWeekDate, weekStartsOn);
+    const weekNumber = getWeekNumber(selectedWeekDate, weekStartsOn);
+    return { start, end, weekNumber };
+  }, [selectedWeekDate, weekStartsOn]);
+  const selectWeek = useCallback(
+    (date) => {
+      if (calendar.isDateDisabled(date)) return;
+      setSelectedWeekDate(date);
+      const start = startOfWeek(date, weekStartsOn);
+      const end = endOfWeek(date, weekStartsOn);
+      const weekNumber = getWeekNumber(date, weekStartsOn);
+      options.onChange?.(start, end, weekNumber);
+    },
+    [calendar.isDateDisabled, weekStartsOn, options.onChange, setSelectedWeekDate]
+  );
+  const isInSelectedWeek = useCallback(
+    (date) => {
+      if (!selectedWeek) return false;
+      const weekDates = getWeekDates(selectedWeek.start, weekStartsOn);
+      return weekDates.some((d) => isSameDay(d, date));
+    },
+    [selectedWeek, weekStartsOn]
+  );
+  const formattedValue = useMemo(() => {
+    if (!selectedWeek) return "";
+    return `${formatDate(selectedWeek.start, format, locale.code)} \u2013 ${formatDate(selectedWeek.end, format, locale.code)}`;
+  }, [selectedWeek, format, locale.code]);
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const getInputProps = useCallback(
+    () => ({
+      type: "text",
+      value: formattedValue,
+      readOnly: true,
+      "aria-label": "Select week",
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      onClick: () => open()
+    }),
+    [formattedValue, isOpen, open]
+  );
+  return {
+    ...calendar,
+    selectedWeek,
+    selectWeek,
+    isInSelectedWeek,
+    formattedValue,
+    isOpen,
+    open,
+    close,
+    toggle,
+    getInputProps
+  };
+}
+function useDateTimePicker(options = {}) {
+  const {
+    timeFormat = "12h",
+    minuteStep = 1,
+    showSeconds = false,
+    locale = defaultLocale,
+    ...dateOptions
+  } = options;
+  const dateFormat = options.dateFormat ?? locale.dateFormat;
+  const datePicker = useDatePicker({
+    ...dateOptions,
+    format: dateFormat,
+    closeOnSelect: false,
+    locale
+  });
+  const [activeTab, setActiveTab] = useState("date");
+  const selectedDate = datePicker.selectedDate;
+  const hours24 = selectedDate?.getHours() ?? 0;
+  const minutes = selectedDate?.getMinutes() ?? 0;
+  const seconds = selectedDate?.getSeconds() ?? 0;
+  const { hours: display12h, meridiem } = to12Hour(hours24);
+  const displayHours = timeFormat === "12h" ? display12h : hours24;
+  const updateTime = useCallback(
+    (h, m, s) => {
+      const base = selectedDate ? clone(selectedDate) : /* @__PURE__ */ new Date();
+      base.setHours(h, m, s, 0);
+      datePicker.selectDate(base);
+    },
+    [selectedDate, datePicker.selectDate]
+  );
+  const setHours = useCallback(
+    (h) => {
+      const h24 = timeFormat === "12h" ? to24Hour(h, meridiem) : h;
+      updateTime(h24, minutes, seconds);
+    },
+    [timeFormat, meridiem, minutes, seconds, updateTime]
+  );
+  const setMinutes = useCallback(
+    (m) => updateTime(hours24, m, seconds),
+    [hours24, seconds, updateTime]
+  );
+  const setSeconds = useCallback(
+    (s) => updateTime(hours24, minutes, s),
+    [hours24, minutes, updateTime]
+  );
+  const setMeridiem = useCallback(
+    (m) => {
+      const h = to24Hour(display12h, m);
+      updateTime(h, minutes, seconds);
+    },
+    [display12h, minutes, seconds, updateTime]
+  );
+  const formattedValue = useMemo(() => {
+    if (!selectedDate) return "";
+    const datePart = formatDate(selectedDate, dateFormat, locale.code);
+    const timePart = formatTime(selectedDate, timeFormat);
+    return `${datePart} ${timePart}`;
+  }, [selectedDate, dateFormat, timeFormat, locale.code]);
+  return {
+    ...datePicker,
+    formattedValue,
+    hours: displayHours,
+    minutes,
+    seconds,
+    meridiem,
+    setHours,
+    setMinutes,
+    setSeconds,
+    setMeridiem,
+    activeTab,
+    setActiveTab,
+    timeFormat,
+    minuteStep,
+    showSeconds
+  };
+}
+function useClickOutside(refs, handler, enabled = true) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const target = event.target;
+      const isOutside = refs.every((ref) => {
+        return !ref.current || !ref.current.contains(target);
+      });
+      if (isOutside) {
+        handlerRef.current(event);
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, enabled]);
+}
+function usePortal(options) {
+  const { containerId = "brdp-portal", enabled = true } = options ?? {};
+  const [portalTarget, setPortalTarget] = useState(null);
+  useEffect(() => {
+    if (!enabled) {
+      setPortalTarget(null);
+      return;
+    }
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      document.body.appendChild(container);
+    }
+    setPortalTarget(container);
+  }, [containerId, enabled]);
+  return {
+    portalTarget,
+    isPortalReady: !!portalTarget
+  };
+}
+function useFocusTrap(containerRef, enabled = true) {
+  const previousFocusRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !containerRef.current) return;
+    previousFocusRef.current = document.activeElement;
+    const container = containerRef.current;
+    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const focusFirst = () => {
+      const firstFocusable = container.querySelector(focusableSelector);
+      firstFocusable?.focus();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusableElements = container.querySelectorAll(focusableSelector);
+      if (focusableElements.length === 0) return;
+      const firstFocusable = focusableElements[0];
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          event.preventDefault();
+          lastFocusable.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          event.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    };
+    focusFirst();
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [containerRef, enabled]);
+}
+
+export { useCalendar, useClickOutside, useControllable, useDatePicker, useDateTimePicker, useFocusTrap, useKeyboardNav, useMonthPicker, useMultiPicker, usePortal, useRangePicker, useTimePicker, useWeekPicker, useYearPicker };
+//# sourceMappingURL=chunk-FBN3SFQJ.js.map
+//# sourceMappingURL=chunk-FBN3SFQJ.js.map