@dododog/ui 0.14.1 → 0.16.0

package/dist/chunk-CPBDDGRX.mjs

@@ -0,0 +1,572 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function startOfDay(d) {
+  const r = new Date(d);
+  r.setHours(0, 0, 0, 0);
+  return r;
+}
+function addMonths(d, n) {
+  const year = d.getFullYear();
+  const month = d.getMonth() + n;
+  const lastDayOfTargetMonth = new Date(year, month + 1, 0).getDate();
+  const r = new Date(d);
+  r.setFullYear(year, month, Math.min(d.getDate(), lastDayOfTargetMonth));
+  return r;
+}
+function addDays(d, n) {
+  const r = startOfDay(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+function startOfWeek(d) {
+  const r = startOfDay(d);
+  r.setDate(r.getDate() - (r.getDay() + 6) % 7);
+  return r;
+}
+function firstDayOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isBefore(a, b) {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+function isAfter(a, b) {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+var MONTH_NAMES = [
+  "janvier",
+  "f\xE9vrier",
+  "mars",
+  "avril",
+  "mai",
+  "juin",
+  "juillet",
+  "ao\xFBt",
+  "septembre",
+  "octobre",
+  "novembre",
+  "d\xE9cembre"
+];
+var SHORT_MONTHS = [
+  "janv.",
+  "f\xE9vr.",
+  "mars",
+  "avr.",
+  "mai",
+  "juin",
+  "juil.",
+  "ao\xFBt",
+  "sept.",
+  "oct.",
+  "nov.",
+  "d\xE9c."
+];
+var WEEK_DAYS = ["lu", "ma", "me", "je", "ve", "sa", "di"];
+var WEEK_DAY_NAMES = [
+  "lundi",
+  "mardi",
+  "mercredi",
+  "jeudi",
+  "vendredi",
+  "samedi",
+  "dimanche"
+];
+var DIALOG_TITLE = "S\xE9lectionnez vos dates";
+function formatMonthYear(d) {
+  return `${MONTH_NAMES[d.getMonth()]} ${d.getFullYear()}`;
+}
+function formatShortDate(d) {
+  return `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`;
+}
+function formatFullDate(d) {
+  return `${d.getDate()} ${MONTH_NAMES[d.getMonth()]} ${d.getFullYear()}`;
+}
+function dayKey(d) {
+  return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+}
+function getCalendarDays(month) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const dayOfWeek = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(start.getDate() - dayOfWeek);
+  const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
+  const dayOfWeekEnd = (last.getDay() + 6) % 7;
+  const end = new Date(last);
+  end.setDate(end.getDate() + (6 - dayOfWeekEnd));
+  const days = [];
+  const cursor = new Date(start);
+  while (cursor <= end) {
+    days.push(new Date(cursor));
+    cursor.setDate(cursor.getDate() + 1);
+  }
+  return days;
+}
+function toWeeks(days) {
+  const weeks = [];
+  for (let index = 0; index < days.length; index += 7) {
+    weeks.push(days.slice(index, index + 7));
+  }
+  return weeks;
+}
+function describeRange(checkIn, checkOut) {
+  if (checkIn && checkOut) {
+    return `Arriv\xE9e le ${formatFullDate(checkIn)}, d\xE9part le ${formatFullDate(checkOut)}.`;
+  }
+  if (checkIn) {
+    return `Arriv\xE9e le ${formatFullDate(checkIn)}. S\xE9lectionnez la date de d\xE9part.`;
+  }
+  if (checkOut) {
+    return `D\xE9part le ${formatFullDate(checkOut)}. S\xE9lectionnez la date d'arriv\xE9e.`;
+  }
+  return "Aucune date s\xE9lectionn\xE9e.";
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function getFocusableElements(panel) {
+  return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (element) => element.getAttribute("tabindex") !== "-1" && !element.closest("[hidden], [aria-hidden='true']")
+  );
+}
+function DatePickerInput({
+  label,
+  value,
+  placeholder = "Quand ?",
+  isActive,
+  onClick,
+  onClear,
+  showClear = false,
+  isOpen
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex-1 px-4 py-2 border-b md:border-b-0 md:border-r border-gray-200 transition-all text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen ?? isActive,
+        className: "flex-1 appearance-none bg-transparent text-left cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-gray-500 mb-0.5", children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "block text-base font-medium text-primary whitespace-nowrap",
+                isActive && value && "underline decoration-secondary decoration-2 underline-offset-4"
+              ),
+              children: value ? formatShortDate(value) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: placeholder })
+            }
+          )
+        ]
+      }
+    ),
+    showClear && value && isActive && onClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Effacer la date : ${label}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          onClear();
+        },
+        className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
+        children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-400", "aria-hidden": "true", focusable: "false", children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+        ] })
+      }
+    )
+  ] }) });
+}
+var DateRangePicker = React.forwardRef(
+  ({
+    checkIn,
+    checkOut,
+    onCheckInChange,
+    onCheckOutChange,
+    isOpen,
+    onClose,
+    position = "center",
+    minWidth = 800
+  }, forwardedRef) => {
+    const [calendarMonth, setCalendarMonth] = React.useState(() => checkIn || /* @__PURE__ */ new Date());
+    const [activeDateField, setActiveDateField] = React.useState("arrival");
+    const [isMobile, setIsMobile] = React.useState(false);
+    const [isNarrow, setIsNarrow] = React.useState(false);
+    const [focusedDate, setFocusedDate] = React.useState(() => startOfDay(checkIn || /* @__PURE__ */ new Date()));
+    const internalRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const pendingFocusRef = React.useRef(false);
+    const titleId = React.useId();
+    const setRefs = React.useCallback(
+      (node) => {
+        internalRef.current = node;
+        panelRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React.useEffect(() => {
+      const mq = window.matchMedia("(max-width: 767px)");
+      setIsMobile(mq.matches);
+      const handler = (e) => setIsMobile(e.matches);
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }, []);
+    React.useEffect(() => {
+      const checkNarrow = () => setIsNarrow(window.innerWidth < minWidth + 64);
+      checkNarrow();
+      window.addEventListener("resize", checkNarrow);
+      return () => window.removeEventListener("resize", checkNarrow);
+    }, [minWidth]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      return () => {
+        if (trigger && trigger.isConnected) trigger.focus();
+      };
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (isOpen) {
+        setActiveDateField("arrival");
+        if (checkIn) setCalendarMonth(checkIn);
+        setFocusedDate(startOfDay(checkIn || /* @__PURE__ */ new Date()));
+        pendingFocusRef.current = true;
+      }
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (isOpen && isMobile) {
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = "";
+        };
+      }
+    }, [isOpen, isMobile]);
+    React.useEffect(() => {
+      if (isMobile || !isOpen) return;
+      const handleClickOutside = (event) => {
+        if (internalRef.current && !internalRef.current.contains(event.target)) {
+          onClose();
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, onClose, isMobile]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const handleKeyDown = (event) => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onClose();
+          return;
+        }
+        if (event.key !== "Tab") return;
+        const focusable = getFocusableElements(panel);
+        const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        if (focusable.length === 0) {
+          event.preventDefault();
+          panel.focus();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (!active || !panel.contains(active)) {
+          event.preventDefault();
+          (event.shiftKey ? last : first).focus();
+          return;
+        }
+        if (event.shiftKey && active === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && active === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+    const isDateDisabled = (date) => {
+      const today = startOfDay(/* @__PURE__ */ new Date());
+      return isBefore(date, today);
+    };
+    const singleMonth = isMobile || isNarrow;
+    const visibleMonths = singleMonth ? [calendarMonth] : [calendarMonth, addMonths(calendarMonth, 1)];
+    const isDateVisible = (date) => visibleMonths.some((month) => isSameMonth(date, month));
+    const firstSelectableVisibleDay = () => {
+      for (const month of visibleMonths) {
+        for (const day of getCalendarDays(month)) {
+          if (isSameMonth(day, month) && !isDateDisabled(day)) return day;
+        }
+      }
+      return firstDayOfMonth(calendarMonth);
+    };
+    const activeFocusDate = isDateVisible(focusedDate) && !isDateDisabled(focusedDate) ? focusedDate : firstSelectableVisibleDay();
+    React.useEffect(() => {
+      if (!isOpen || !pendingFocusRef.current) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const target = panel.querySelector('[role="gridcell"][tabindex="0"]');
+      if (target) {
+        target.focus();
+        pendingFocusRef.current = false;
+      }
+    }, [isOpen, focusedDate, calendarMonth, isMobile, isNarrow]);
+    const moveFocusTo = (target) => {
+      const next = startOfDay(target);
+      if (isDateDisabled(next)) return;
+      setFocusedDate(next);
+      pendingFocusRef.current = true;
+      if (!isDateVisible(next)) setCalendarMonth(firstDayOfMonth(next));
+    };
+    const handleDayKeyDown = (event, day) => {
+      let target = null;
+      switch (event.key) {
+        case "ArrowLeft":
+          target = addDays(day, -1);
+          break;
+        case "ArrowRight":
+          target = addDays(day, 1);
+          break;
+        case "ArrowUp":
+          target = addDays(day, -7);
+          break;
+        case "ArrowDown":
+          target = addDays(day, 7);
+          break;
+        case "Home":
+          target = startOfWeek(day);
+          break;
+        case "End":
+          target = addDays(startOfWeek(day), 6);
+          break;
+        case "PageUp":
+          target = addMonths(day, -1);
+          break;
+        case "PageDown":
+          target = addMonths(day, 1);
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      moveFocusTo(target);
+    };
+    const handleDateClick = (date) => {
+      setFocusedDate(startOfDay(date));
+      if (activeDateField === "arrival") {
+        onCheckInChange(date);
+        if (checkOut && isBefore(checkOut, date)) onCheckOutChange(null);
+        setActiveDateField("departure");
+      } else {
+        if (checkIn && isBefore(date, checkIn)) {
+          onCheckInChange(date);
+          onCheckOutChange(null);
+          setActiveDateField("departure");
+        } else {
+          onCheckOutChange(date);
+          if (isMobile) onClose();
+        }
+      }
+    };
+    const clearDates = () => {
+      onCheckInChange(null);
+      onCheckOutChange(null);
+      setActiveDateField("arrival");
+    };
+    const isDateInRange = (date) => {
+      if (!checkIn || !checkOut) return false;
+      return isAfter(date, checkIn) && isBefore(date, checkOut);
+    };
+    const renderMonth = (monthDate, compact = false) => {
+      const weeks = toWeeks(getCalendarDays(monthDate));
+      const monthLabel = formatMonthYear(monthDate);
+      return /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        !compact && /* @__PURE__ */ jsx("h3", { className: "text-center font-semibold text-2xl text-primary mb-6 capitalize", children: monthLabel }),
+        /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": monthLabel, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              className: cn("grid grid-cols-7", compact ? "mb-2" : "mb-3"),
+              children: /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: WEEK_DAYS.map((day, dayIndex) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "columnheader",
+                  "aria-label": WEEK_DAY_NAMES[dayIndex],
+                  className: cn(
+                    "text-center font-medium text-gray-500 py-2",
+                    compact ? "text-xs" : "text-base"
+                  ),
+                  children: day
+                },
+                day
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "grid grid-cols-7", children: weeks.map((week) => /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: week.map((day) => {
+            const isCurrentMonth = isSameMonth(day, monthDate);
+            const isSelected = Boolean(
+              checkIn && isSameDay(day, checkIn) || checkOut && isSameDay(day, checkOut)
+            );
+            const isStart = checkIn && isSameDay(day, checkIn);
+            const isEnd = checkOut && isSameDay(day, checkOut);
+            const inRange = isDateInRange(day) && isCurrentMonth;
+            const disabled = isDateDisabled(day) || !isCurrentMonth;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "gridcell",
+                "aria-label": formatFullDate(day),
+                "aria-selected": isSelected,
+                tabIndex: isCurrentMonth && isSameDay(day, activeFocusDate) ? 0 : -1,
+                onClick: () => !disabled && handleDateClick(day),
+                onKeyDown: (event) => handleDayKeyDown(event, day),
+                disabled,
+                className: cn(
+                  "relative font-medium transition-all",
+                  compact ? "h-10 text-sm" : "h-12 text-base",
+                  !isCurrentMonth && "text-gray-300",
+                  disabled && isCurrentMonth && "text-gray-300 cursor-not-allowed",
+                  inRange && "bg-orange-100",
+                  isSelected && "bg-secondary text-white z-10",
+                  isStart && checkOut && "rounded-l-lg",
+                  isEnd && checkIn && "rounded-r-lg",
+                  isSelected && (!checkOut || !checkIn) && "rounded-lg",
+                  isSelected && checkIn && checkOut && isSameDay(checkIn, checkOut) && "rounded-lg",
+                  !disabled && !isSelected && !inRange && isCurrentMonth && "text-primary hover:bg-gray-100 hover:rounded-lg"
+                ),
+                children: isCurrentMonth && day.getDate()
+              },
+              dayKey(day)
+            );
+          }) }, dayKey(week[0]))) })
+        ] })
+      ] });
+    };
+    if (!isOpen) return null;
+    const liveRegion = /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: describeRange(checkIn, checkOut) });
+    if (isMobile) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setRefs,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          className: "fixed inset-0 z-[60] bg-white flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100", children: [
+              /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-heading font-bold text-lg text-primary", children: DIALOG_TITLE }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": "Fermer", className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", "aria-hidden": "true", focusable: "false", children: [
+                /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+              ] }) })
+            ] }),
+            liveRegion,
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 px-4 py-3 border-b border-gray-100", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveDateField("arrival"),
+                  "aria-pressed": activeDateField === "arrival",
+                  className: cn(
+                    "flex-1 px-3 py-2 rounded-xl text-left transition-all",
+                    activeDateField === "arrival" ? "ring-2 ring-secondary bg-secondary/5" : "bg-gray-100"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-gray-500", children: "Arriv\xE9e" }),
+                    /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold text-primary", children: checkIn ? `${checkIn.getDate()} ${SHORT_MONTHS[checkIn.getMonth()]} ${checkIn.getFullYear()}` : "S\xE9lectionner" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveDateField("departure"),
+                  "aria-pressed": activeDateField === "departure",
+                  className: cn(
+                    "flex-1 px-3 py-2 rounded-xl text-left transition-all",
+                    activeDateField === "departure" ? "ring-2 ring-secondary bg-secondary/5" : "bg-gray-100"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-gray-500", children: "D\xE9part" }),
+                    /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold text-primary", children: checkOut ? `${checkOut.getDate()} ${SHORT_MONTHS[checkOut.getMonth()]} ${checkOut.getFullYear()}` : "S\xE9lectionner" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), "aria-label": "Mois pr\xE9c\xE9dent", className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg text-primary capitalize", children: formatMonthYear(calendarMonth) }),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), "aria-label": "Mois suivant", className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
+              ] }),
+              renderMonth(calendarMonth, true)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-100 px-4 py-3 flex items-center justify-between bg-white", children: [
+              checkIn || checkOut ? /* @__PURE__ */ jsx("button", { type: "button", onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer" }) : /* @__PURE__ */ jsx("div", {}),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "px-6 py-2.5 bg-secondary text-white rounded-xl font-semibold text-sm hover:bg-secondary-dark transition-colors", children: "Valider" })
+            ] })
+          ]
+        }
+      );
+    }
+    const positionClasses = {
+      left: "left-0",
+      center: "left-1/2 -translate-x-1/2",
+      right: "right-0"
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRefs,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        className: cn(
+          "absolute top-full mt-2 bg-white rounded-3xl shadow-2xl border z-[60] p-8 pb-10",
+          positionClasses[position]
+        ),
+        style: singleMonth ? { width: "100%", maxWidth: "400px" } : { minWidth: `${minWidth}px` },
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, className: "sr-only", children: DIALOG_TITLE }),
+          liveRegion,
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCalendarMonth(addMonths(calendarMonth, -1)), "aria-label": "Mois pr\xE9c\xE9dent", className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
+            singleMonth && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg text-primary capitalize", children: formatMonthYear(calendarMonth) }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCalendarMonth(addMonths(calendarMonth, 1)), "aria-label": "Mois suivant", className: "p-2 hover:bg-gray-100 rounded-full transition-colors", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-600", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: singleMonth ? "" : "flex gap-12", children: [
+            renderMonth(calendarMonth, singleMonth),
+            !singleMonth && renderMonth(addMonths(calendarMonth, 1))
+          ] }),
+          (checkIn || checkOut) && /* @__PURE__ */ jsx("div", { className: "text-right mt-4 pt-4 border-t border-gray-100", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: clearDates, className: "text-sm text-primary underline hover:text-secondary transition-colors", children: "Effacer les dates" }) })
+        ]
+      }
+    );
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DatePickerInput, DateRangePicker };