best-react-datepicker 0.2.0

package/dist/index.js

@@ -0,0 +1,1303 @@
+import { useDatePicker, useClickOutside, useKeyboardNav, usePortal, useRangePicker, useTimePicker, useDateTimePicker, useMonthPicker, useYearPicker, useWeekPicker } from './chunk-FBN3SFQJ.js';
+export { useCalendar, useClickOutside, useControllable, useDatePicker, useDateTimePicker, useFocusTrap, useKeyboardNav, useMonthPicker, useMultiPicker, usePortal, useRangePicker, useTimePicker, useWeekPicker, useYearPicker } from './chunk-FBN3SFQJ.js';
+export { createPresets } from './chunk-NF5M43IO.js';
+import { generateHours, generateMinutes } from './chunk-W6KEY2SO.js';
+export { addDays, addMonths, addYears, clone, createDate, differenceInDays, endOfDay, endOfMonth, endOfWeek, endOfYear, formatDate, formatTime, isAfter, isBefore, isBetween, isSameDay, isSameMonth, isSameYear, isToday, isWeekend, parseDate, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, subMonths, subYears, today } from './chunk-W6KEY2SO.js';
+export { createLocaleFromIntl, defaultLocale } from './chunk-QW2CUEX4.js';
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var DEFAULT_MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function SelectChevron() {
+  return /* @__PURE__ */ jsx("span", { className: "brdp-header__select-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2.5 3.75L5 6.25L7.5 3.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+function CalendarHeader({
+  label,
+  onPrevMonth,
+  onNextMonth,
+  onLabelClick,
+  prevMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  className,
+  showPrev = true,
+  showNext = true,
+  viewingMonth,
+  viewingYear,
+  onMonthChange,
+  onYearChange,
+  minDate,
+  maxDate,
+  monthNames
+}) {
+  const hasDropdowns = viewingMonth != null && viewingYear != null && onMonthChange && onYearChange;
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const minYear = minDate ? minDate.getFullYear() : currentYear - 100;
+  const maxYear = maxDate ? maxDate.getFullYear() : currentYear + 20;
+  const names = monthNames ?? DEFAULT_MONTH_NAMES;
+  const getMonthOptions = () => {
+    const options = [];
+    for (let m = 0; m < 12; m++) {
+      let disabled = false;
+      if (minDate && viewingYear != null && viewingYear === minDate.getFullYear() && m < minDate.getMonth()) {
+        disabled = true;
+      }
+      if (maxDate && viewingYear != null && viewingYear === maxDate.getFullYear() && m > maxDate.getMonth()) {
+        disabled = true;
+      }
+      options.push({ value: m, label: names[m], disabled });
+    }
+    return options;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `brdp-header ${className ?? ""}`, children: [
+    showPrev ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "brdp-header__nav-btn brdp-header__nav-btn--prev",
+        onClick: onPrevMonth,
+        "aria-label": prevMonthLabel,
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "brdp-header__nav-btn", style: { visibility: "hidden" } }),
+    hasDropdowns ? /* @__PURE__ */ jsxs("div", { className: "brdp-header__selects", children: [
+      /* @__PURE__ */ jsxs("div", { className: "brdp-header__select-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "brdp-header__select",
+            value: viewingMonth,
+            onChange: (e) => onMonthChange(Number(e.target.value)),
+            "aria-label": "Select month",
+            children: getMonthOptions().map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectChevron, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "brdp-header__select-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "brdp-header__select",
+            value: viewingYear,
+            onChange: (e) => onYearChange(Number(e.target.value)),
+            "aria-label": "Select year",
+            children: Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i).map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectChevron, {})
+      ] })
+    ] }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "brdp-header__label",
+        onClick: onLabelClick,
+        "aria-live": "polite",
+        children: label
+      }
+    ),
+    showNext ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "brdp-header__nav-btn brdp-header__nav-btn--next",
+        onClick: onNextMonth,
+        "aria-label": nextMonthLabel,
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "brdp-header__nav-btn", style: { visibility: "hidden" } })
+  ] });
+}
+function CalendarDay({
+  day,
+  isSelected = false,
+  isDisabled = false,
+  isHighlighted = false,
+  isRangeStart = false,
+  isRangeEnd = false,
+  isInRange = false,
+  isInPreviewRange = false,
+  isFocused = false,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  renderDay,
+  className,
+  showOutsideDays = true
+}) {
+  if (!day.isCurrentMonth && !showOutsideDays) {
+    return /* @__PURE__ */ jsx("td", { className: "brdp-day brdp-day--empty", "aria-hidden": "true" });
+  }
+  const classes = [
+    "brdp-day",
+    day.isToday && "brdp-day--today",
+    isSelected && "brdp-day--selected",
+    isDisabled && "brdp-day--disabled",
+    !day.isCurrentMonth && "brdp-day--outside",
+    day.isWeekend && "brdp-day--weekend",
+    isHighlighted && "brdp-day--highlighted",
+    isRangeStart && "brdp-day--range-start",
+    isRangeEnd && "brdp-day--range-end",
+    isInRange && "brdp-day--range-middle",
+    isInPreviewRange && "brdp-day--range-preview",
+    isFocused && "brdp-day--focused",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("td", { className: classes, role: "gridcell", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "brdp-day__btn",
+      disabled: isDisabled,
+      tabIndex: isFocused ? 0 : -1,
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled,
+      "aria-label": day.date.toLocaleDateString(),
+      onClick: () => onClick?.(day.date),
+      onMouseEnter: () => onMouseEnter?.(day.date),
+      onMouseLeave,
+      "data-date": day.date.toISOString().split("T")[0],
+      children: renderDay ? renderDay(day) : day.dayOfMonth
+    }
+  ) });
+}
+var DEFAULT_DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function CalendarGrid({
+  month,
+  weekStartsOn = 0,
+  dayNames,
+  showWeekNumbers = false,
+  showOutsideDays = true,
+  isSelected,
+  isDisabled,
+  isHighlighted,
+  isRangeStart,
+  isRangeEnd,
+  isInRange,
+  isInPreviewRange,
+  focusedDate,
+  onDayClick,
+  onDayMouseEnter,
+  onDayMouseLeave,
+  renderDay,
+  onKeyDown,
+  className
+}) {
+  const names = dayNames ?? reorderDayNames(DEFAULT_DAY_NAMES, weekStartsOn);
+  const isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: `brdp-grid ${className ?? ""}`,
+      role: "grid",
+      "aria-label": month.label,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "brdp-grid__weekdays", children: [
+          showWeekNumbers && /* @__PURE__ */ jsx("th", { className: "brdp-week-number brdp-week-number--header", "aria-label": "Week number", children: "#" }),
+          names.map((name, i) => /* @__PURE__ */ jsx("th", { className: "brdp-grid__weekday", abbr: name, scope: "col", children: name }, i))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: month.weeks.map((week, wi) => /* @__PURE__ */ jsxs("tr", { className: "brdp-grid__week", children: [
+          showWeekNumbers && /* @__PURE__ */ jsx("td", { className: "brdp-week-number", "aria-label": `Week ${week.weekNumber}`, children: week.weekNumber }),
+          week.days.map((day, di) => /* @__PURE__ */ jsx(
+            CalendarDay,
+            {
+              day,
+              isSelected: isSelected?.(day.date) ?? false,
+              isDisabled: isDisabled?.(day.date) ?? false,
+              isHighlighted: isHighlighted?.(day.date) ?? false,
+              isRangeStart: isRangeStart?.(day.date) ?? false,
+              isRangeEnd: isRangeEnd?.(day.date) ?? false,
+              isInRange: isInRange?.(day.date) ?? false,
+              isInPreviewRange: isInPreviewRange?.(day.date) ?? false,
+              isFocused: focusedDate ? isSameDay2(day.date, focusedDate) : false,
+              onClick: onDayClick,
+              onMouseEnter: onDayMouseEnter,
+              onMouseLeave: onDayMouseLeave,
+              renderDay,
+              showOutsideDays
+            },
+            di
+          ))
+        ] }, wi)) })
+      ]
+    }
+  );
+}
+function reorderDayNames(names, weekStartsOn) {
+  return [...names.slice(weekStartsOn), ...names.slice(0, weekStartsOn)];
+}
+function LiveRegion({ message }) {
+  const [announced, setAnnounced] = useState("");
+  useEffect(() => {
+    if (message) {
+      setAnnounced("");
+      const timer = setTimeout(() => setAnnounced(message), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [message]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: 0
+      },
+      children: announced
+    }
+  );
+}
+function Calendar({
+  months,
+  viewingYear,
+  viewingMonth,
+  weekStartsOn = 0,
+  dayNames,
+  showWeekNumbers = false,
+  showOutsideDays = true,
+  focusedDate,
+  onPrevMonth,
+  onNextMonth,
+  onLabelClick,
+  onDayClick,
+  onDayMouseEnter,
+  onDayMouseLeave,
+  onKeyDown,
+  isSelected,
+  isDisabled,
+  isHighlighted,
+  isRangeStart,
+  isRangeEnd,
+  isInRange,
+  isInPreviewRange,
+  renderDay,
+  renderFooter,
+  className,
+  dir,
+  onMonthSelect,
+  onYearSelect,
+  minDate,
+  maxDate
+}) {
+  const totalMonths = months.length;
+  return /* @__PURE__ */ jsxs("div", { className: `brdp-calendar ${className ?? ""}`, dir, children: [
+    /* @__PURE__ */ jsx(LiveRegion, { message: months[0]?.label ?? "" }),
+    /* @__PURE__ */ jsx("div", { className: "brdp-calendar__months", children: months.map((month, i) => /* @__PURE__ */ jsxs("div", { className: "brdp-calendar__month", children: [
+      /* @__PURE__ */ jsx(
+        CalendarHeader,
+        {
+          label: month.label,
+          onPrevMonth,
+          onNextMonth,
+          onLabelClick,
+          showPrev: i === 0,
+          showNext: i === totalMonths - 1,
+          viewingMonth: month.month,
+          viewingYear: month.year,
+          onMonthChange: onMonthSelect ?? void 0,
+          onYearChange: onYearSelect ?? void 0,
+          minDate,
+          maxDate
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CalendarGrid,
+        {
+          month,
+          weekStartsOn,
+          dayNames,
+          showWeekNumbers,
+          showOutsideDays,
+          isSelected,
+          isDisabled,
+          isHighlighted,
+          isRangeStart,
+          isRangeEnd,
+          isInRange,
+          isInPreviewRange,
+          focusedDate,
+          onDayClick,
+          onDayMouseEnter,
+          onDayMouseLeave,
+          renderDay,
+          onKeyDown
+        }
+      )
+    ] }, `${month.year}-${month.month}`)) }),
+    renderFooter && /* @__PURE__ */ jsx("div", { className: "brdp-footer", children: renderFooter() })
+  ] });
+}
+function Portal({ children, container, enabled = true }) {
+  const { portalTarget } = usePortal({ enabled: enabled && !container });
+  const target = container ?? portalTarget;
+  if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (!target) return null;
+  return createPortal(children, target);
+}
+function Popover({
+  children,
+  anchorRef,
+  isOpen,
+  onClose,
+  portal = false,
+  portalContainer,
+  className,
+  style,
+  ...ariaProps
+}) {
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({});
+  useEffect(() => {
+    if (!isOpen || !anchorRef.current) return;
+    const updatePosition = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      if (portal) {
+        const rect = anchor.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const placeAbove = spaceBelow < 320 && rect.top > spaceBelow;
+        setPosition({
+          position: "fixed",
+          left: rect.left,
+          ...placeAbove ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
+          zIndex: "var(--brdp-z-portal, 1100)"
+        });
+      } else {
+        setPosition({
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          marginTop: 4,
+          zIndex: "var(--brdp-z-popover, 1000)"
+        });
+      }
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, portal, anchorRef]);
+  if (!isOpen) return null;
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popoverRef,
+      className: `brdp-popover ${className ?? ""}`,
+      style: { ...position, ...style },
+      ...ariaProps,
+      children
+    }
+  );
+  if (portal) {
+    return /* @__PURE__ */ jsx(Portal, { container: portalContainer, enabled: true, children: content });
+  }
+  return content;
+}
+
+// src/components/shared/sizeStyles.ts
+var sizeTokens = {
+  sm: {
+    "--brdp-cell-size": "32px",
+    "--brdp-input-height": "32px",
+    "--brdp-header-height": "36px",
+    "--brdp-font-size": "12px",
+    "--brdp-font-size-sm": "10px",
+    "--brdp-spacing-sm": "6px",
+    "--brdp-spacing-md": "8px"
+  },
+  md: {},
+  lg: {
+    "--brdp-cell-size": "48px",
+    "--brdp-input-height": "48px",
+    "--brdp-header-height": "56px",
+    "--brdp-font-size": "16px",
+    "--brdp-font-size-sm": "14px",
+    "--brdp-spacing-sm": "10px",
+    "--brdp-spacing-md": "16px"
+  }
+};
+function getSizeStyles(size) {
+  if (!size || size === "md") return {};
+  return sizeTokens[size];
+}
+var DatePicker = forwardRef(
+  function DatePicker2(props, ref) {
+    const {
+      className,
+      style,
+      size,
+      renderDay,
+      renderFooter,
+      portal = false,
+      portalContainer,
+      dir,
+      showOutsideDays = true,
+      showWeekNumbers = false,
+      dayNames,
+      inputProps: extraInputProps,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      onBlur,
+      onFocus,
+      ...pickerOptions
+    } = props;
+    const picker = useDatePicker(pickerOptions);
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    useClickOutside([containerRef], () => {
+      if (picker.isOpen) picker.close();
+    }, picker.isOpen);
+    const focusedDate = picker.focusedDate ?? picker.selectedDate ?? /* @__PURE__ */ new Date();
+    const { handleKeyDown } = useKeyboardNav({
+      focusedDate,
+      onFocusChange: (date) => {
+        picker.setFocusedDate(date);
+        picker.goToDate(date);
+      },
+      onSelect: (date) => picker.selectDate(date),
+      onClose: () => picker.close(),
+      weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+      minDate: pickerOptions.minDate,
+      maxDate: pickerOptions.maxDate,
+      disabled: pickerOptions.disabled
+    });
+    const defaultInputProps = picker.getInputProps();
+    const popoverProps = picker.getPopoverProps();
+    const sizeStyles = getSizeStyles(size);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: `brdp-root ${className ?? ""}`,
+        style: { ...sizeStyles, ...style },
+        dir: dir ?? picker.locale.dir,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...defaultInputProps,
+              ...extraInputProps,
+              ref: (node) => {
+                inputRef.current = node;
+                if (typeof ref === "function") ref(node);
+                else if (ref) ref.current = node;
+              },
+              id,
+              className: `brdp-input ${extraInputProps?.className ?? ""}`,
+              "aria-label": ariaLabel ?? defaultInputProps["aria-label"],
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby,
+              onBlur: (e) => {
+                defaultInputProps.onBlur?.();
+                onBlur?.(e);
+              },
+              onFocus: (e) => {
+                defaultInputProps.onFocus?.();
+                onFocus?.(e);
+              }
+            }
+          ),
+          pickerOptions.name && /* @__PURE__ */ jsx("input", { ...picker.getHiddenInputProps() }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              anchorRef: containerRef,
+              isOpen: picker.isOpen,
+              onClose: picker.close,
+              portal,
+              portalContainer,
+              ...popoverProps,
+              children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  months: picker.months,
+                  viewingYear: picker.viewingYear,
+                  viewingMonth: picker.viewingMonth,
+                  weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+                  dayNames,
+                  showWeekNumbers,
+                  showOutsideDays,
+                  focusedDate: picker.focusedDate,
+                  onPrevMonth: picker.goToPrevMonth,
+                  onNextMonth: picker.goToNextMonth,
+                  onMonthSelect: (m) => picker.goToMonth(m),
+                  onYearSelect: (y) => picker.goToYear(y),
+                  minDate: pickerOptions.minDate,
+                  maxDate: pickerOptions.maxDate,
+                  onDayClick: (date) => picker.selectDate(date),
+                  onKeyDown: handleKeyDown,
+                  isSelected: picker.isSelected,
+                  isDisabled: picker.isDateDisabled,
+                  isHighlighted: picker.isDateHighlighted,
+                  renderDay,
+                  renderFooter: renderFooter ?? (picker.clearable ? () => /* @__PURE__ */ jsxs("div", { className: "brdp-footer", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "brdp-footer__btn",
+                        onClick: () => picker.goToToday(),
+                        children: picker.locale.labels.today
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "brdp-footer__btn",
+                        onClick: () => picker.clearDate(),
+                        children: picker.locale.labels.clear
+                      }
+                    )
+                  ] }) : void 0),
+                  dir: dir ?? picker.locale.dir
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function RangePicker(props) {
+  const {
+    className,
+    style,
+    size,
+    compact = false,
+    showPresets = false,
+    presetsPosition = "left",
+    renderDay,
+    portal = false,
+    portalContainer,
+    dir,
+    showOutsideDays = true,
+    showWeekNumbers = false,
+    dayNames,
+    ...pickerOptions
+  } = props;
+  if (compact) {
+    pickerOptions.numberOfMonths = 1;
+  }
+  const picker = useRangePicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const focusedDate = picker.focusedDate ?? picker.range.from ?? /* @__PURE__ */ new Date();
+  const { handleKeyDown } = useKeyboardNav({
+    focusedDate,
+    onFocusChange: (date) => {
+      picker.setFocusedDate(date);
+      picker.goToDate(date);
+    },
+    onSelect: (date) => picker.handleDayClick(date),
+    onClose: () => picker.close(),
+    weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+    minDate: pickerOptions.minDate,
+    maxDate: pickerOptions.maxDate,
+    disabled: pickerOptions.disabled
+  });
+  const startInputProps = picker.getStartInputProps();
+  const endInputProps = picker.getEndInputProps();
+  const popoverProps = picker.getPopoverProps();
+  const sizeStyles = getSizeStyles(size);
+  const presetsPanel = showPresets && picker.presets.length > 0 && /* @__PURE__ */ jsx("div", { className: `brdp-presets ${compact ? "brdp-presets--bottom" : ""}`, children: picker.presets.map((preset, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...picker.getPresetButtonProps(preset),
+      className: `brdp-presets__item ${picker.activePresetIndex === i ? "brdp-presets__item--active" : ""}`,
+      children: preset.label
+    },
+    i
+  )) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--range ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      dir: dir ?? picker.locale.dir,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "brdp-range-input", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...startInputProps,
+              className: "brdp-input brdp-range-input__start"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "brdp-range-input__separator", children: picker.separator }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...endInputProps,
+              className: "brdp-input brdp-range-input__end"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsxs("div", { className: "brdp-range-popover", style: compact ? { flexDirection: "column" } : void 0, children: [
+              !compact && presetsPosition === "left" && presetsPanel,
+              /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  months: picker.months,
+                  viewingYear: picker.viewingYear,
+                  viewingMonth: picker.viewingMonth,
+                  weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+                  dayNames,
+                  showWeekNumbers,
+                  showOutsideDays,
+                  focusedDate: picker.focusedDate,
+                  onPrevMonth: picker.goToPrevMonth,
+                  onNextMonth: picker.goToNextMonth,
+                  onMonthSelect: (m) => picker.goToMonth(m),
+                  onYearSelect: (y) => picker.goToYear(y),
+                  minDate: pickerOptions.minDate,
+                  maxDate: pickerOptions.maxDate,
+                  onDayClick: (date) => picker.handleDayClick(date),
+                  onDayMouseEnter: (date) => picker.setHoveredDate(date),
+                  onDayMouseLeave: () => picker.setHoveredDate(null),
+                  onKeyDown: handleKeyDown,
+                  isSelected: picker.isSelected,
+                  isDisabled: picker.isDateDisabled,
+                  isHighlighted: picker.isDateHighlighted,
+                  isRangeStart: picker.isRangeStart,
+                  isRangeEnd: picker.isRangeEnd,
+                  isInRange: picker.isInRange,
+                  isInPreviewRange: picker.isInPreviewRange,
+                  renderDay,
+                  dir: dir ?? picker.locale.dir
+                }
+              ),
+              !compact && presetsPosition === "right" && presetsPanel,
+              compact && presetsPanel
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function TimePicker(props) {
+  const {
+    className,
+    style,
+    size,
+    portal = false,
+    portalContainer,
+    disabled = false,
+    clearable = false,
+    ...pickerOptions
+  } = props;
+  const picker = useTimePicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const inputProps = picker.getInputProps();
+  const sizeStyles = getSizeStyles(size);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--time ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            className: "brdp-input brdp-input--time",
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen && !disabled,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            role: "listbox",
+            "aria-label": "Select time",
+            children: /* @__PURE__ */ jsxs("div", { className: "brdp-time", children: [
+              /* @__PURE__ */ jsx(
+                TimeColumn,
+                {
+                  values: picker.availableHours,
+                  activeValue: picker.hours,
+                  onSelect: (v) => picker.setHours(v),
+                  label: "Hours",
+                  pad: picker.format === "24h",
+                  isOpen: picker.isOpen && !disabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TimeColumn,
+                {
+                  values: picker.availableMinutes,
+                  activeValue: picker.minutes,
+                  onSelect: (v) => picker.setMinutes(v),
+                  label: "Minutes",
+                  pad: true,
+                  isOpen: picker.isOpen && !disabled
+                }
+              ),
+              picker.showSeconds && /* @__PURE__ */ jsx(
+                TimeColumn,
+                {
+                  values: picker.availableSeconds,
+                  activeValue: picker.seconds,
+                  onSelect: (v) => picker.setSeconds(v),
+                  label: "Seconds",
+                  pad: true,
+                  isOpen: picker.isOpen && !disabled
+                }
+              ),
+              picker.format === "12h" && /* @__PURE__ */ jsx("div", { className: "brdp-time__column", role: "listbox", "aria-label": "AM/PM", children: ["AM", "PM"].map((m) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `brdp-time__option ${picker.meridiem === m ? "brdp-time__option--active" : ""}`,
+                  role: "option",
+                  "aria-selected": picker.meridiem === m,
+                  onClick: () => picker.setMeridiem(m),
+                  children: m
+                },
+                m
+              )) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function TimeColumn({
+  values,
+  activeValue,
+  onSelect,
+  label,
+  pad = false,
+  isOpen = false
+}) {
+  const activeRef = useRef(null);
+  const scrollToActive = useCallback(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(scrollToActive, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, scrollToActive]);
+  useEffect(() => {
+    scrollToActive();
+  }, [activeValue, scrollToActive]);
+  return /* @__PURE__ */ jsx("div", { className: "brdp-time__column", role: "listbox", "aria-label": label, children: values.map((v) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: activeValue === v ? activeRef : void 0,
+      type: "button",
+      className: `brdp-time__option ${activeValue === v ? "brdp-time__option--active" : ""}`,
+      role: "option",
+      "aria-selected": activeValue === v,
+      onClick: () => onSelect(v),
+      children: pad ? String(v).padStart(2, "0") : v
+    },
+    v
+  )) });
+}
+function DateTimePicker(props) {
+  const {
+    className,
+    style,
+    size,
+    renderDay,
+    portal = false,
+    portalContainer,
+    dir,
+    showOutsideDays = true,
+    dayNames,
+    ...pickerOptions
+  } = props;
+  const picker = useDateTimePicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const focusedDate = picker.focusedDate ?? picker.selectedDate ?? /* @__PURE__ */ new Date();
+  const { handleKeyDown } = useKeyboardNav({
+    focusedDate,
+    onFocusChange: (date) => {
+      picker.setFocusedDate(date);
+      picker.goToDate(date);
+    },
+    onSelect: (date) => picker.selectDate(date),
+    onClose: () => picker.close(),
+    weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+    minDate: pickerOptions.minDate,
+    maxDate: pickerOptions.maxDate,
+    disabled: pickerOptions.disabled
+  });
+  const inputProps = picker.getInputProps();
+  const popoverProps = picker.getPopoverProps();
+  const sizeStyles = getSizeStyles(size);
+  const hours = generateHours(picker.timeFormat);
+  const minutes = generateMinutes(picker.minuteStep);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--datetime ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      dir: dir ?? picker.locale.dir,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            value: picker.formattedValue,
+            className: "brdp-input"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsxs("div", { className: "brdp-datetime", children: [
+              /* @__PURE__ */ jsxs("div", { className: "brdp-datetime__tabs", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `brdp-datetime__tab ${picker.activeTab === "date" ? "brdp-datetime__tab--active" : ""}`,
+                    onClick: () => picker.setActiveTab("date"),
+                    children: picker.locale.labels.startDate.replace("Start ", "")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `brdp-datetime__tab ${picker.activeTab === "time" ? "brdp-datetime__tab--active" : ""}`,
+                    onClick: () => picker.setActiveTab("time"),
+                    children: picker.locale.labels.time
+                  }
+                )
+              ] }),
+              picker.activeTab === "date" && /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  months: picker.months,
+                  viewingYear: picker.viewingYear,
+                  viewingMonth: picker.viewingMonth,
+                  weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+                  dayNames,
+                  showOutsideDays,
+                  focusedDate: picker.focusedDate,
+                  onPrevMonth: picker.goToPrevMonth,
+                  onNextMonth: picker.goToNextMonth,
+                  onMonthSelect: (m) => picker.goToMonth(m),
+                  onYearSelect: (y) => picker.goToYear(y),
+                  minDate: pickerOptions.minDate,
+                  maxDate: pickerOptions.maxDate,
+                  onDayClick: (date) => {
+                    picker.selectDate(date);
+                    picker.setActiveTab("time");
+                  },
+                  onKeyDown: handleKeyDown,
+                  isSelected: picker.isSelected,
+                  isDisabled: picker.isDateDisabled,
+                  isHighlighted: picker.isDateHighlighted,
+                  renderDay,
+                  dir: dir ?? picker.locale.dir
+                }
+              ),
+              picker.activeTab === "time" && /* @__PURE__ */ jsxs("div", { className: "brdp-time", children: [
+                /* @__PURE__ */ jsx("div", { className: "brdp-time__column", role: "listbox", "aria-label": "Hours", children: hours.map((h) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `brdp-time__option ${picker.hours === h ? "brdp-time__option--active" : ""}`,
+                    role: "option",
+                    "aria-selected": picker.hours === h,
+                    onClick: () => picker.setHours(h),
+                    children: picker.timeFormat === "24h" ? String(h).padStart(2, "0") : h
+                  },
+                  h
+                )) }),
+                /* @__PURE__ */ jsx("div", { className: "brdp-time__column", role: "listbox", "aria-label": "Minutes", children: minutes.map((m) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `brdp-time__option ${picker.minutes === m ? "brdp-time__option--active" : ""}`,
+                    role: "option",
+                    "aria-selected": picker.minutes === m,
+                    onClick: () => picker.setMinutes(m),
+                    children: String(m).padStart(2, "0")
+                  },
+                  m
+                )) }),
+                picker.timeFormat === "12h" && /* @__PURE__ */ jsx("div", { className: "brdp-time__column", role: "listbox", "aria-label": "AM/PM", children: ["AM", "PM"].map((m) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `brdp-time__option ${picker.meridiem === m ? "brdp-time__option--active" : ""}`,
+                    role: "option",
+                    "aria-selected": picker.meridiem === m,
+                    onClick: () => picker.setMeridiem(m),
+                    children: m
+                  },
+                  m
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "brdp-footer", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "brdp-footer__btn brdp-footer__btn--apply",
+                  onClick: () => picker.close(),
+                  children: picker.locale.labels.apply
+                }
+              ) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function MonthPicker(props) {
+  const {
+    className,
+    style,
+    size,
+    placeholder,
+    portal = false,
+    portalContainer,
+    clearable = false,
+    ...pickerOptions
+  } = props;
+  const picker = useMonthPicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const inputProps = picker.getInputProps();
+  const sizeStyles = getSizeStyles(size);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--month ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            className: "brdp-input",
+            placeholder
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            role: "dialog",
+            "aria-modal": true,
+            "aria-label": "Select month",
+            children: /* @__PURE__ */ jsxs("div", { className: "brdp-month-picker", children: [
+              /* @__PURE__ */ jsxs("div", { className: "brdp-header", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "brdp-header__nav-btn",
+                    onClick: picker.goToPrevYear,
+                    "aria-label": picker.locale.labels.previousYear,
+                    children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "brdp-header__label", children: picker.viewingYear }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "brdp-header__nav-btn",
+                    onClick: picker.goToNextYear,
+                    "aria-label": picker.locale.labels.nextYear,
+                    children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "brdp-month-grid", role: "grid", children: picker.monthGrid.map((item) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ...picker.getMonthButtonProps(item.month),
+                  className: `brdp-month-grid__cell ${item.isSelected ? "brdp-month-grid__cell--selected" : ""} ${item.isDisabled ? "brdp-month-grid__cell--disabled" : ""}`,
+                  children: item.label
+                },
+                item.month
+              )) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function YearPicker(props) {
+  const {
+    className,
+    style,
+    size,
+    placeholder,
+    portal = false,
+    portalContainer,
+    ...pickerOptions
+  } = props;
+  const picker = useYearPicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const inputProps = picker.getInputProps();
+  const sizeStyles = getSizeStyles(size);
+  const lastYear = picker.years[picker.years.length - 1]?.year ?? 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--year ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            className: "brdp-input",
+            placeholder: placeholder ?? "Select year"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            role: "dialog",
+            "aria-modal": true,
+            "aria-label": "Select year",
+            children: /* @__PURE__ */ jsxs("div", { className: "brdp-year-picker", children: [
+              /* @__PURE__ */ jsxs("div", { className: "brdp-header", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "brdp-header__nav-btn",
+                    onClick: picker.goToPrevDecade,
+                    "aria-label": "Previous years",
+                    children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "brdp-header__label", children: [
+                  picker.decadeStart,
+                  " \u2013 ",
+                  lastYear
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "brdp-header__nav-btn",
+                    onClick: picker.goToNextDecade,
+                    "aria-label": "Next years",
+                    children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "brdp-year-grid", role: "grid", children: picker.years.map((item) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ...picker.getYearButtonProps(item.year),
+                  className: `brdp-year-grid__cell ${item.isSelected ? "brdp-year-grid__cell--selected" : ""} ${item.isCurrentYear ? "brdp-year-grid__cell--current" : ""} ${item.isDisabled ? "brdp-year-grid__cell--disabled" : ""}`,
+                  children: item.year
+                },
+                item.year
+              )) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function WeekPicker(props) {
+  const {
+    className,
+    style,
+    size,
+    placeholder,
+    portal = false,
+    portalContainer,
+    dir,
+    showOutsideDays = true,
+    dayNames,
+    ...pickerOptions
+  } = props;
+  const picker = useWeekPicker(pickerOptions);
+  const containerRef = useRef(null);
+  useClickOutside([containerRef], () => {
+    if (picker.isOpen) picker.close();
+  }, picker.isOpen);
+  const focusedDate = picker.focusedDate ?? picker.selectedWeek?.start ?? /* @__PURE__ */ new Date();
+  const { handleKeyDown } = useKeyboardNav({
+    focusedDate,
+    onFocusChange: (date) => {
+      picker.setFocusedDate(date);
+      picker.goToDate(date);
+    },
+    onSelect: (date) => picker.selectWeek(date),
+    onClose: () => picker.close(),
+    weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+    minDate: pickerOptions.minDate,
+    maxDate: pickerOptions.maxDate,
+    disabled: pickerOptions.disabled
+  });
+  const inputProps = picker.getInputProps();
+  const sizeStyles = getSizeStyles(size);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `brdp-root brdp-root--week ${className ?? ""}`,
+      style: { ...sizeStyles, ...style },
+      dir: dir ?? picker.locale.dir,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            className: "brdp-input",
+            placeholder: placeholder ?? "Select week"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            anchorRef: containerRef,
+            isOpen: picker.isOpen,
+            onClose: picker.close,
+            portal,
+            portalContainer,
+            role: "dialog",
+            "aria-modal": true,
+            "aria-label": "Select week",
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                months: picker.months,
+                viewingYear: picker.viewingYear,
+                viewingMonth: picker.viewingMonth,
+                weekStartsOn: pickerOptions.weekStartsOn ?? picker.locale.weekStartsOn,
+                dayNames,
+                showWeekNumbers: true,
+                showOutsideDays,
+                focusedDate: picker.focusedDate,
+                onPrevMonth: picker.goToPrevMonth,
+                onNextMonth: picker.goToNextMonth,
+                onMonthSelect: (m) => picker.goToMonth(m),
+                onYearSelect: (y) => picker.goToYear(y),
+                minDate: pickerOptions.minDate,
+                maxDate: pickerOptions.maxDate,
+                onDayClick: (date) => {
+                  picker.selectWeek(date);
+                  picker.close();
+                },
+                onKeyDown: handleKeyDown,
+                isSelected: (date) => picker.isInSelectedWeek(date),
+                isDisabled: picker.isDateDisabled,
+                isHighlighted: picker.isDateHighlighted,
+                dir: dir ?? picker.locale.dir
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var hiddenStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
+function VisuallyHidden({ children }) {
+  return /* @__PURE__ */ jsx("span", { style: hiddenStyle, children });
+}
+
+export { Calendar, CalendarDay, CalendarGrid, CalendarHeader, DatePicker, DateTimePicker, LiveRegion, MonthPicker, Popover, Portal, RangePicker, TimePicker, VisuallyHidden, WeekPicker, YearPicker, getSizeStyles };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map