import { jsx as n } from "react/jsx-runtime";
import { getDefaultClassNames as v, DayPicker as g } from "react-day-picker";
import x from "../calendar-day-button/CalendarDayButton.js";
import w from "../calendar-dropdown/CalendarDropdown.js";
import s from "../../../button/Button.js";
import { c as e } from "../../../../index-BtlgVD4m.js";
const C = ({
  className: l,
  classNames: i,
  showOutsideDays: u = !0,
  captionLayout: c = "label",
  formatters: m,
  components: p,
  // Extract locale so we can use it in formatMonthDropdown for correct localised month names
  locale: o,
  ...b
}) => {
  const t = v(), d = "flex justify-center items-center border border-[var(--base-input)] rounded-[var(--border-radius-md)] text-[var(--base-foreground)] hover:bg-[var(--base-accent)] h-7 w-7 bg-transparent hover:opacity-100 aria-disabled:opacity-50 p-0 select-none cursor-pointer";
  return /* @__PURE__ */ n(
    g,
    {
      showOutsideDays: u,
      locale: o,
      className: e(
        "border rounded-md border-[var(--base-border)] shadow-md",
        "p-[var(--spacing-3)]",
        "bg-[var(--base-background)]",
        "group/calendar",
        "[--cell-size:--spacing(8)]",
        "[[data-slot=card-content]_&]:bg-transparent",
        "[[data-slot=popover-content]_&]:bg-transparent",
        "rtl:**:[.rdp-button_next>svg]:rotate-180",
        "rtl:**:[.rdp-button_previous>svg]:rotate-180",
        l
      ),
      captionLayout: c,
      formatters: {
        // Use locale.code (BCP 47 tag e.g. 'de', 'en-US') so month names match
        // the locale prop (e.g. locale={de} → "Jan" becomes "Jan.", "Feb" → "Feb." in German).
        // Falls back to 'default' (browser locale) when no locale is provided.
        formatMonthDropdown: (r) => r.toLocaleString((o == null ? void 0 : o.code) ?? "default", { month: "short" }),
        ...m
      },
      classNames: {
        root: e("w-fit", t.root),
        months: e("flex gap-4 flex-col md:flex-row relative", t.months),
        month: e("flex flex-col w-full gap-4", t.month),
        // The nav is absolutely positioned and spans the full header width (inset-x-0).
        // Without pointer-events-none the nav's transparent middle area intercepts clicks
        // on the month/year dropdowns sitting underneath it in the caption row.
        nav: e("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between pointer-events-none", t.nav),
        // Restore pointer events only for the actual prev/next nav buttons.
        button_previous: e(d, "pointer-events-auto", t.button_previous),
        button_next: e(d, "pointer-events-auto", t.button_next),
        month_caption: e("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", t.month_caption),
        // Horizontal flex container that holds both the month and year CalendarDropdown components
        dropdowns: e("w-full flex items-start justify-center h-(--cell-size) gap-[var(--spacing-1-5)]", t.dropdowns),
        // dropdown_root wraps our CalendarDropdown — keep it as a plain passthrough container
        dropdown_root: e("relative", t.dropdown_root),
        // dropdown class targets the native <select> — unused since we override Dropdown component
        dropdown: e(t.dropdown),
        caption_label: e("select-none font-medium text-sm", t.caption_label),
        table: "w-full border-collapse",
        weekdays: e("flex", t.weekdays),
        weekday: e("text-[var(--base-muted-foreground)] rounded-md flex-1 font-normal text-[0.8rem] select-none", t.weekday),
        week: e("flex w-full mt-2", t.week),
        week_number_header: e("select-none w-(--cell-size)", t.week_number_header),
        week_number: e("text-[0.8rem] select-none text-[var(--base-muted-foreground)]", t.week_number),
        day: e(
          "relative w-full h-full p-0 text-center group/day aspect-square select-none",
          "[&:first-child[data-selected=true]_button]:rounded-l-md",
          "[&:last-child[data-selected=true]_button]:rounded-r-md",
          t.day
        ),
        range_start: e("rounded-l-md bg-[var(--base-accent)]", t.range_start),
        range_middle: e("rounded-none", t.range_middle),
        range_end: e("rounded-r-md bg-[var(--base-accent)]", t.range_end),
        today: e(
          "bg-[var(--base-accent)] text-[var(--base-accent-foreground)] rounded-md data-[selected=true]:rounded-none",
          t.today
        ),
        outside: e(
          "opacity-30",
          "text-[var(--base-muted-foreground)]",
          "aria-selected:bg-[var(--base-accent)]/50",
          "aria-selected:text-[var(--base-accent-foreground)]",
          t.outside
        ),
        disabled: e("text-[var(--base-muted-foreground)] opacity-50", t.disabled),
        hidden: e("invisible", t.hidden),
        // Allow consumers to override individual class names
        ...i
      },
      components: {
        Root: ({ className: r, rootRef: a, ...f }) => /* @__PURE__ */ n("div", { "data-slot": "calendar", ref: a, className: e(r), ...f }),
        NextMonthButton: ({ ...r }) => /* @__PURE__ */ n(s, { variant: "outline", icon: "ChevronRight", size: "iconXs", ...r }),
        PreviousMonthButton: ({ ...r }) => /* @__PURE__ */ n(s, { variant: "outline", icon: "ChevronLeft", size: "iconXs", ...r }),
        DayButton: (r) => /* @__PURE__ */ n(x, { ...r }),
        WeekNumber: ({ children: r, ...a }) => /* @__PURE__ */ n("td", { ...a, children: /* @__PURE__ */ n("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: r }) }),
        // Replace the native <select> with our styled Select component for month/year dropdowns
        Dropdown: (r) => /* @__PURE__ */ n(w, { ...r }),
        ...p
      },
      ...b
    }
  );
};
export {
  C as default
};
//# sourceMappingURL=BaseCalendar.js.map
