@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/date-time-picker/calendar.js

@@ -1,13 +1,14 @@
-import { jsxs as p, jsx as n, Fragment as he } from "react/jsx-runtime";
+import { jsxs as b, jsx as n, Fragment as ue } from "react/jsx-runtime";
 import * as d from "react";
-import { createElement as j } from "react";
-import { mergeClasses as g, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1";
-import { Button as te } from "../button/button.js";
-import { makeZenithStyles as $e } from "../../styles/make-styles.js";
-import { leadingSm as Z, textSm as X, spacingElement2 as H, grayA12 as F, accentA3 as Ze, accent3 as Xe, accentSolidHover as _, fontWeightSemibold as Y, accentContrast as U, accentSolid as V, radiusMd as R, grayA8 as _e, accentA11 as ge, grayA4 as ue, grayA11 as me, fontWeightMedium as ye, leadingXs as fe, textXs as pe, spacingElement1 as be, grayA3 as Ue } from "../../tokens/index.js";
-import { getWeekDays as Ve, getCalendarDays as qe, getMonthNames as Je, goToPreviousMonth as Ke, goToNextMonth as Qe, adjustTimeIfPast as ke, isDateDisabled as Be, formatMonth as et, getWeekLabel as tt, isDayInCurrentMonth as Ce, getWeekNumber as we, isDaySelected as at, isDayToday as nt, isDateInRange as rt, normalizeRange as ot, getDecadeStart as dt } from "./date-time-picker-utils.js";
-import { isSameDay as ae } from "../../vendor/.bun/date-fns@4.1.0/vendor/date-fns/isSameDay.js";
-const lt = (I) => /* @__PURE__ */ n(
+import { createElement as F } from "react";
+import { mergeClasses as u, SLOT_ATTR as i, shorthands as l } from "@epilot/zenith-runtime/v1";
+import { Button as ae } from "../button/button.js";
+import { makeZenithStyles as Xe } from "../../styles/make-styles.js";
+import { nativeControl as ne, boxModel as s } from "../../styles/host-reset.js";
+import { leadingSm as X, textSm as _, spacingElement2 as Y, grayA12 as I, accentA3 as _e, accent3 as Ue, accentSolidHover as U, fontWeightSemibold as L, accentContrast as V, accentSolid as q, radiusMd as R, grayA8 as Ve, accentA11 as me, grayA4 as ye, grayA11 as fe, fontWeightMedium as pe, leadingXs as be, textXs as ke, spacingElement1 as Be, grayA3 as qe } from "../../tokens/index.js";
+import { getWeekDays as Je, getCalendarDays as Ke, getMonthNames as Qe, goToPreviousMonth as et, goToNextMonth as tt, adjustTimeIfPast as Ce, isDateDisabled as we, formatMonth as at, getWeekLabel as nt, isDayInCurrentMonth as Me, getWeekNumber as Re, isDaySelected as rt, isDayToday as ot, isDateInRange as dt, normalizeRange as lt, getDecadeStart as st } from "./date-time-picker-utils.js";
+import { isSameDay as re } from "../../vendor/.bun/date-fns@4.1.0/vendor/date-fns/isSameDay.js";
+const it = (A) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -15,10 +16,10 @@ const lt = (I) => /* @__PURE__ */ n(
     viewBox: "0 -960 960 960",
     width: "16px",
     fill: "currentColor",
-    ...I,
+    ...A,
     children: /* @__PURE__ */ n("path", { d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" })
   }
-), st = (I) => /* @__PURE__ */ n(
+), ct = (A) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -26,41 +27,44 @@ const lt = (I) => /* @__PURE__ */ n(
     viewBox: "0 -960 960 960",
     width: "16px",
     fill: "currentColor",
-    ...I,
+    ...A,
     children: /* @__PURE__ */ n("path", { d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" })
   }
-), it = $e({
+), ht = Xe({
   root: {
+    ...s,
     width: "100%"
   },
   header: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    marginBottom: H
+    marginBottom: Y
   },
   buttonSpacer: {
+    ...s,
     width: "1.75rem",
     height: "1.75rem"
   },
   headerCenter: {
     display: "flex",
     alignItems: "center",
-    ...l.gap(be)
+    ...l.gap(Be)
   },
   headerBtn: {
-    fontWeight: Y,
-    fontSize: X,
-    lineHeight: Z,
-    color: F,
-    backgroundColor: Ue,
+    ...ne,
+    fontWeight: L,
+    fontSize: _,
+    lineHeight: X,
+    color: I,
+    backgroundColor: qe,
     ":hover": {
-      backgroundColor: ue
+      backgroundColor: ye
     },
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
     cursor: "pointer",
-    ...l.padding("0.25rem", H),
+    ...l.padding("0.25rem", Y),
     ...l.borderRadius(R),
     ...l.border("0"),
     outlineStyle: "none"
@@ -69,11 +73,12 @@ const lt = (I) => /* @__PURE__ */ n(
     textTransform: "capitalize"
   },
   decadeLabel: {
-    fontWeight: Y,
-    fontSize: X,
-    lineHeight: Z,
-    color: F,
-    ...l.padding("0.25rem", H)
+    ...s,
+    fontWeight: L,
+    fontSize: _,
+    lineHeight: X,
+    color: I,
+    ...l.padding("0.25rem", Y)
   },
   grid: {
     display: "grid",
@@ -85,41 +90,45 @@ const lt = (I) => /* @__PURE__ */ n(
     gridTemplateColumns: "auto repeat(7, minmax(0, 1fr))"
   },
   gridRange: {
-    rowGap: be,
+    rowGap: Be,
     columnGap: "0"
   },
   weekLabel: {
+    ...s,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: pe,
-    lineHeight: fe,
-    fontWeight: ye,
-    color: me,
+    fontSize: ke,
+    lineHeight: be,
+    fontWeight: pe,
+    color: fe,
     height: "1.75rem",
     width: "2rem"
   },
   weekNumber: {
+    ...s,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: pe,
-    lineHeight: fe,
-    fontWeight: ye,
-    color: me,
+    fontSize: ke,
+    lineHeight: be,
+    fontWeight: pe,
+    color: fe,
     height: "2rem",
     width: "2rem"
   },
   cellPlaceholder: {
+    ...s,
     height: "2rem",
     width: "2rem"
   },
   dayBtn: {
+    ...ne,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: X,
-    lineHeight: Z,
+    fontSize: _,
+    lineHeight: X,
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
     cursor: "pointer",
@@ -129,6 +138,7 @@ const lt = (I) => /* @__PURE__ */ n(
     outlineStyle: "none"
   },
   dayBtnSingle: {
+    ...s,
     ...l.borderRadius(R)
   },
   dayBtnTransparent: {
@@ -136,29 +146,29 @@ const lt = (I) => /* @__PURE__ */ n(
   },
   dayBtnHover: {
     ":hover": {
-      backgroundColor: ue
+      backgroundColor: ye
     }
   },
   dayBtnToday: {
-    color: ge,
+    color: me,
     textDecorationLine: "underline",
     textUnderlineOffset: "4px",
     textDecorationThickness: "1.5px",
-    textDecorationColor: ge
+    textDecorationColor: me
   },
   dayBtnSelected: {
-    fontWeight: Y,
-    backgroundColor: V,
-    color: U,
+    fontWeight: L,
+    backgroundColor: q,
+    color: V,
     ":hover": {
-      backgroundColor: _
+      backgroundColor: U
     }
   },
   dayBtnOutOfMonth: {
-    color: _e
+    color: Ve
   },
   dayBtnInMonth: {
-    color: F
+    color: I
   },
   dayBtnDisabled: {
     opacity: 0.5,
@@ -166,57 +176,64 @@ const lt = (I) => /* @__PURE__ */ n(
   },
   // Range styles
   dayBtnRangeSingleDay: {
+    ...s,
     ...l.borderRadius(R),
-    backgroundColor: V,
-    color: U,
-    fontWeight: Y,
+    backgroundColor: q,
+    color: V,
+    fontWeight: L,
     ":hover": {
-      backgroundColor: _
+      backgroundColor: U
     }
   },
   dayBtnRangeStart: {
+    ...s,
     borderTopLeftRadius: R,
     borderBottomLeftRadius: R,
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
-    backgroundColor: V,
-    color: U,
-    fontWeight: Y,
+    backgroundColor: q,
+    color: V,
+    fontWeight: L,
     ":hover": {
-      backgroundColor: _
+      backgroundColor: U
     }
   },
   dayBtnRangeEnd: {
+    ...s,
     borderTopRightRadius: R,
     borderBottomRightRadius: R,
     borderTopLeftRadius: 0,
     borderBottomLeftRadius: 0,
-    backgroundColor: V,
-    color: U,
-    fontWeight: Y,
+    backgroundColor: q,
+    color: V,
+    fontWeight: L,
     ":hover": {
-      backgroundColor: _
+      backgroundColor: U
     }
   },
   dayBtnRangeMiddle: {
+    ...s,
     ...l.borderRadius(0),
-    backgroundColor: Xe,
-    color: F
+    backgroundColor: Ue,
+    color: I
   },
   dayBtnRangeMiddlePreview: {
+    ...s,
     ...l.borderRadius(0),
-    backgroundColor: Ze,
-    color: F
+    backgroundColor: _e,
+    color: I
   },
   todayContainer: {
+    ...s,
     display: "flex",
     justifyContent: "center",
-    paddingTop: H
+    paddingTop: Y
   },
   monthsYearsGrid: {
+    ...s,
     display: "grid",
-    ...l.gap(H),
-    ...l.padding(H, 0)
+    ...l.gap(Y),
+    ...l.padding(Y, 0)
   },
   monthsGridCols: {
     gridTemplateColumns: "repeat(3, 1fr)"
@@ -225,11 +242,12 @@ const lt = (I) => /* @__PURE__ */ n(
     gridTemplateColumns: "repeat(2, 1fr)"
   },
   monthYearBtn: {
+    ...ne,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: X,
-    lineHeight: Z,
+    fontSize: _,
+    lineHeight: X,
     ...l.borderRadius(R),
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
@@ -241,289 +259,289 @@ const lt = (I) => /* @__PURE__ */ n(
   monthBtnCapitalize: {
     textTransform: "capitalize"
   }
-}), bt = d.forwardRef(
+}), Ct = d.forwardRef(
   function({
     value: o,
-    onChange: A,
-    onDateSelect: b,
-    disablePast: k = !1,
-    locale: N = "de",
-    previousMonthLabel: Re = "Previous month",
-    nextMonthLabel: Me = "Next month",
-    showTodayButton: Se = !1,
-    todayLabel: ve = "Today",
-    currentTimeInTimezone: u,
-    showWeekNumbers: q = !1,
-    rangeStart: D,
-    rangeEnd: ne,
-    hoveredDate: re,
-    onDayHover: G,
-    onDayClick: J,
-    showPreviousButton: Ne = !0,
-    showNextButton: De = !0,
-    controlledViewDate: xe,
-    onViewDateChange: O,
-    hideOutOfMonthDays: oe = !1,
-    className: He
-  }, Ye) {
-    const e = it(), [Le, Te] = d.useState(
-      () => o || u || /* @__PURE__ */ new Date()
-    ), [i, E] = d.useState("days"), x = D !== void 0, M = xe || Le, h = d.useCallback(
+    onChange: G,
+    onDateSelect: k,
+    disablePast: B = !1,
+    locale: D = "de",
+    previousMonthLabel: Se = "Previous month",
+    nextMonthLabel: ve = "Next month",
+    showTodayButton: Ne = !1,
+    todayLabel: De = "Today",
+    currentTimeInTimezone: m,
+    showWeekNumbers: J = !1,
+    rangeStart: x,
+    rangeEnd: oe,
+    hoveredDate: de,
+    onDayHover: O,
+    onDayClick: K,
+    showPreviousButton: xe = !0,
+    showNextButton: He = !0,
+    controlledViewDate: Ye,
+    onViewDateChange: E,
+    hideOutOfMonthDays: le = !1,
+    className: Le
+  }, Te) {
+    const e = ht(), [We, je] = d.useState(
+      () => o || m || /* @__PURE__ */ new Date()
+    ), [c, P] = d.useState("days"), H = x !== void 0, S = Ye || We, g = d.useCallback(
       (t) => {
-        O ? O(typeof t == "function" ? t(M) : t) : Te(t);
+        E ? E(typeof t == "function" ? t(S) : t) : je(t);
       },
-      [O, M]
-    ), We = Ve(N), de = qe(M, N), je = d.useMemo(() => Je(N), [N]), L = d.useMemo(
-      () => u || /* @__PURE__ */ new Date(),
-      [u]
-    ), T = L.getFullYear(), le = L.getMonth(), S = M.getFullYear(), K = dt(S), Fe = d.useCallback(() => {
-      h((t) => i === "days" ? Ke(t) : i === "months" ? new Date(t.getFullYear() - 1, t.getMonth(), 1) : new Date(t.getFullYear() - 10, t.getMonth(), 1));
-    }, [i, h]), Ie = d.useCallback(() => {
-      h((t) => i === "days" ? Qe(t) : i === "months" ? new Date(t.getFullYear() + 1, t.getMonth(), 1) : new Date(t.getFullYear() + 10, t.getMonth(), 1));
-    }, [i, h]), Ae = d.useCallback(() => {
-      const t = new Date(L);
+      [E, S]
+    ), Fe = Je(D), se = Ke(S, D), Ie = d.useMemo(() => Qe(D), [D]), T = d.useMemo(
+      () => m || /* @__PURE__ */ new Date(),
+      [m]
+    ), W = T.getFullYear(), ie = T.getMonth(), v = S.getFullYear(), Q = st(v), Ae = d.useCallback(() => {
+      g((t) => c === "days" ? et(t) : c === "months" ? new Date(t.getFullYear() - 1, t.getMonth(), 1) : new Date(t.getFullYear() - 10, t.getMonth(), 1));
+    }, [c, g]), Ge = d.useCallback(() => {
+      g((t) => c === "days" ? tt(t) : c === "months" ? new Date(t.getFullYear() + 1, t.getMonth(), 1) : new Date(t.getFullYear() + 10, t.getMonth(), 1));
+    }, [c, g]), Oe = d.useCallback(() => {
+      const t = new Date(T);
       o ? t.setHours(o.getHours(), o.getMinutes(), 0, 0) : t.setHours(0, 0, 0, 0);
-      const a = ke(
+      const a = Ce(
         t,
-        k,
-        u
+        B,
+        m
       );
-      h(L), A(a), b == null || b();
+      g(T), G(a), k == null || k();
     }, [
-      A,
-      b,
-      o,
+      G,
       k,
-      u,
-      L,
-      h
-    ]), Ge = d.useCallback(
+      o,
+      B,
+      m,
+      T,
+      g
+    ]), Ee = d.useCallback(
       (t) => {
-        if (Be(t, k, u)) return;
-        if (J) {
-          J(t);
+        if (we(t, B, m)) return;
+        if (K) {
+          K(t);
           return;
         }
         const a = new Date(t);
         o ? a.setHours(o.getHours(), o.getMinutes(), 0, 0) : a.setHours(0, 0, 0, 0);
-        const r = ke(
+        const r = Ce(
           a,
-          k,
-          u
+          B,
+          m
         );
-        A(r), b == null || b();
+        G(r), k == null || k();
       },
       [
-        A,
-        b,
-        J,
-        o,
+        G,
         k,
-        u
+        K,
+        o,
+        B,
+        m
       ]
-    ), Oe = d.useCallback(
+    ), Pe = d.useCallback(
       (t) => {
-        h((a) => new Date(a.getFullYear(), t, 1)), E("days");
+        g((a) => new Date(a.getFullYear(), t, 1)), P("days");
       },
-      [h]
-    ), Ee = d.useCallback(
+      [g]
+    ), ze = d.useCallback(
       (t) => {
-        h((a) => new Date(t, a.getMonth(), 1)), E("months");
+        g((a) => new Date(t, a.getMonth(), 1)), P("months");
       },
-      [h]
-    ), Pe = d.useCallback(() => {
-      E("months");
-    }, []), se = d.useCallback(() => {
-      E("years");
+      [g]
+    ), $e = d.useCallback(() => {
+      P("months");
+    }, []), ce = d.useCallback(() => {
+      P("years");
     }, []);
-    return /* @__PURE__ */ p(
+    return /* @__PURE__ */ b(
       "div",
       {
-        ref: Ye,
-        className: g(e.root, He),
+        ref: Te,
+        className: u(e.root, Le),
         "data-slot": "calendar",
-        [s]: "calendar",
-        onMouseLeave: G ? () => G(null) : void 0,
+        [i]: "calendar",
+        onMouseLeave: O ? () => O(null) : void 0,
         children: [
-          /* @__PURE__ */ p("div", { className: e.header, children: [
-            Ne ? /* @__PURE__ */ n(
-              te,
+          /* @__PURE__ */ b("div", { className: e.header, children: [
+            xe ? /* @__PURE__ */ n(
+              ae,
               {
-                "aria-label": Re,
-                onClick: Fe,
+                "aria-label": Se,
+                onClick: Ae,
                 size: "icon",
                 variant: "tertiary",
-                children: /* @__PURE__ */ n(lt, {})
+                children: /* @__PURE__ */ n(it, {})
               }
             ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer }),
-            /* @__PURE__ */ p("div", { className: e.headerCenter, children: [
-              i === "days" && /* @__PURE__ */ p(he, { children: [
+            /* @__PURE__ */ b("div", { className: e.headerCenter, children: [
+              c === "days" && /* @__PURE__ */ b(ue, { children: [
                 /* @__PURE__ */ n(
                   "button",
                   {
-                    className: g(
+                    className: u(
                       e.headerBtn,
                       e.monthHeaderBtn
                     ),
-                    onClick: Pe,
+                    onClick: $e,
                     type: "button",
-                    children: et(M, N)
+                    children: at(S, D)
                   }
                 ),
                 /* @__PURE__ */ n(
                   "button",
                   {
                     className: e.headerBtn,
-                    onClick: se,
+                    onClick: ce,
                     type: "button",
-                    children: S
+                    children: v
                   }
                 )
               ] }),
-              i === "months" && /* @__PURE__ */ n(
+              c === "months" && /* @__PURE__ */ n(
                 "button",
                 {
                   className: e.headerBtn,
-                  onClick: se,
+                  onClick: ce,
                   type: "button",
-                  children: S
+                  children: v
                 }
               ),
-              i === "years" && /* @__PURE__ */ n("span", { className: e.decadeLabel, children: `${K} – ${K + 9}` })
+              c === "years" && /* @__PURE__ */ n("span", { className: e.decadeLabel, children: `${Q} – ${Q + 9}` })
             ] }),
-            De ? /* @__PURE__ */ n(
-              te,
+            He ? /* @__PURE__ */ n(
+              ae,
               {
-                "aria-label": Me,
-                onClick: Ie,
+                "aria-label": ve,
+                onClick: Ge,
                 size: "icon",
                 variant: "tertiary",
-                children: /* @__PURE__ */ n(st, {})
+                children: /* @__PURE__ */ n(ct, {})
               }
             ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer })
           ] }),
-          /* @__PURE__ */ p("div", { children: [
-            i === "days" && /* @__PURE__ */ p(he, { children: [
-              /* @__PURE__ */ p(
+          /* @__PURE__ */ b("div", { children: [
+            c === "days" && /* @__PURE__ */ b(ue, { children: [
+              /* @__PURE__ */ b(
                 "div",
                 {
-                  className: g(
+                  className: u(
                     e.grid,
-                    x && e.gridRange,
-                    q && e.gridWithWeeks
+                    H && e.gridRange,
+                    J && e.gridWithWeeks
                   ),
                   "data-slot": "calendar-grid",
-                  [s]: "calendar-grid",
+                  [i]: "calendar-grid",
                   children: [
-                    q && /* @__PURE__ */ n(
+                    J && /* @__PURE__ */ n(
                       "div",
                       {
                         className: e.weekLabel,
                         "data-slot": "calendar-week-label",
-                        [s]: "calendar-week-label",
-                        children: tt(N)
+                        [i]: "calendar-week-label",
+                        children: nt(D)
                       }
                     ),
-                    We.map((t) => /* @__PURE__ */ j(
+                    Fe.map((t) => /* @__PURE__ */ F(
                       "div",
                       {
                         className: e.weekLabel,
                         "data-slot": "calendar-weekday",
-                        [s]: "calendar-weekday",
+                        [i]: "calendar-weekday",
                         key: t
                       },
                       t
                     )),
-                    de.map((t, a) => {
-                      const r = q && a % 7 === 0, c = oe && r && de.slice(a, a + 7).every(($) => !Ce($, M)), m = r && !c ? /* @__PURE__ */ j(
+                    se.map((t, a) => {
+                      const r = J && a % 7 === 0, h = le && r && se.slice(a, a + 7).every((Z) => !Me(Z, S)), y = r && !h ? /* @__PURE__ */ F(
                         "div",
                         {
                           className: e.weekNumber,
                           "data-slot": "calendar-week-number",
-                          [s]: "calendar-week-number",
-                          "data-week": we(t),
+                          [i]: "calendar-week-number",
+                          "data-week": Re(t),
                           key: `wk-${a}`
                         },
-                        we(t)
-                      ) : r ? /* @__PURE__ */ j(
+                        Re(t)
+                      ) : r ? /* @__PURE__ */ F(
                         "div",
                         {
                           "aria-hidden": "true",
                           className: e.cellPlaceholder,
                           "data-slot": "calendar-week-number-placeholder",
-                          [s]: "calendar-week-number-placeholder",
+                          [i]: "calendar-week-number-placeholder",
                           key: `wk-${a}`
                         }
-                      ) : null, y = Ce(t, M);
-                      if (oe && !y)
-                        return /* @__PURE__ */ p(d.Fragment, { children: [
-                          m,
+                      ) : null, f = Me(t, S);
+                      if (le && !f)
+                        return /* @__PURE__ */ b(d.Fragment, { children: [
+                          y,
                           /* @__PURE__ */ n(
                             "div",
                             {
                               "aria-hidden": "true",
                               className: e.cellPlaceholder,
                               "data-slot": "calendar-day-placeholder",
-                              [s]: "calendar-day-placeholder"
+                              [i]: "calendar-day-placeholder"
                             }
                           )
                         ] }, a);
-                      const B = Be(
+                      const C = we(
                         t,
-                        k,
-                        u
-                      ), C = !x && o !== null && at(t, o), P = nt(t), Q = ne || re || null, ie = x && D && Q, ze = ie ? rt(t, D, Q) : !1;
-                      let w = !1, W = !1, z = !1;
-                      if (ie) {
-                        const $ = ot(
-                          D,
-                          Q
+                        B,
+                        m
+                      ), w = !H && o !== null && rt(t, o), z = ot(t), ee = oe || de || null, he = H && x && ee, Ze = he ? dt(t, x, ee) : !1;
+                      let M = !1, j = !1, $ = !1;
+                      if (he) {
+                        const Z = lt(
+                          x,
+                          ee
                         );
-                        w = ae(t, $.start), W = ae(t, $.end), z = w && W;
-                      } else x && D && (w = ae(t, D), z = w);
-                      const f = w || W, v = ze && !w && !W, ce = x && !ne && !!re;
-                      let ee = null;
-                      return x ? ee = g(
-                        z && f && e.dayBtnRangeSingleDay,
-                        w && !z && e.dayBtnRangeStart,
-                        W && !w && e.dayBtnRangeEnd,
-                        v && !ce && e.dayBtnRangeMiddle,
-                        v && ce && e.dayBtnRangeMiddlePreview,
-                        !f && !v && e.dayBtnSingle,
-                        !f && !v && e.dayBtnTransparent,
-                        !f && !v && e.dayBtnHover,
-                        P && !f && !v && e.dayBtnToday,
-                        B && e.dayBtnDisabled,
-                        !y && !B && !f && e.dayBtnOutOfMonth,
-                        y && !f && !B && e.dayBtnInMonth
-                      ) : ee = g(
+                        M = re(t, Z.start), j = re(t, Z.end), $ = M && j;
+                      } else H && x && (M = re(t, x), $ = M);
+                      const p = M || j, N = Ze && !M && !j, ge = H && !oe && !!de;
+                      let te = null;
+                      return H ? te = u(
+                        $ && p && e.dayBtnRangeSingleDay,
+                        M && !$ && e.dayBtnRangeStart,
+                        j && !M && e.dayBtnRangeEnd,
+                        N && !ge && e.dayBtnRangeMiddle,
+                        N && ge && e.dayBtnRangeMiddlePreview,
+                        !p && !N && e.dayBtnSingle,
+                        !p && !N && e.dayBtnTransparent,
+                        !p && !N && e.dayBtnHover,
+                        z && !p && !N && e.dayBtnToday,
+                        C && e.dayBtnDisabled,
+                        !f && !C && !p && e.dayBtnOutOfMonth,
+                        f && !p && !C && e.dayBtnInMonth
+                      ) : te = u(
                         e.dayBtnSingle,
-                        !C && !P && e.dayBtnTransparent,
-                        !C && e.dayBtnHover,
-                        P && !C && e.dayBtnToday,
-                        B && e.dayBtnDisabled,
-                        !y && !B && !C && e.dayBtnOutOfMonth,
-                        C && e.dayBtnSelected,
-                        y && !C && !B && e.dayBtnInMonth
-                      ), /* @__PURE__ */ p(d.Fragment, { children: [
-                        m,
+                        !w && !z && e.dayBtnTransparent,
+                        !w && e.dayBtnHover,
+                        z && !w && e.dayBtnToday,
+                        C && e.dayBtnDisabled,
+                        !f && !C && !w && e.dayBtnOutOfMonth,
+                        w && e.dayBtnSelected,
+                        f && !w && !C && e.dayBtnInMonth
+                      ), /* @__PURE__ */ b(d.Fragment, { children: [
+                        y,
                         /* @__PURE__ */ n(
                           "button",
                           {
-                            "aria-disabled": B,
-                            "aria-pressed": C || f,
-                            className: g(
+                            "aria-disabled": C,
+                            "aria-pressed": w || p,
+                            className: u(
                               e.dayBtn,
-                              ee
+                              te
                             ),
-                            "data-in-range": v || void 0,
-                            "data-selected": C || f,
+                            "data-in-range": N || void 0,
+                            "data-selected": w || p,
                             "data-slot": "calendar-day",
-                            [s]: "calendar-day",
-                            "data-today": P,
-                            disabled: B,
-                            onClick: () => Ge(t),
-                            onMouseEnter: G ? () => G(t) : void 0,
+                            [i]: "calendar-day",
+                            "data-today": z,
+                            disabled: C,
+                            onClick: () => Ee(t),
+                            onMouseEnter: O ? () => O(t) : void 0,
                             type: "button",
                             children: t.getDate()
                           }
@@ -533,54 +551,54 @@ const lt = (I) => /* @__PURE__ */ n(
                   ]
                 }
               ),
-              Se && /* @__PURE__ */ n(
+              Ne && /* @__PURE__ */ n(
                 "div",
                 {
                   className: e.todayContainer,
                   "data-slot": "calendar-today",
-                  [s]: "calendar-today",
+                  [i]: "calendar-today",
                   children: /* @__PURE__ */ n(
-                    te,
+                    ae,
                     {
-                      onClick: Ae,
+                      onClick: Oe,
                       size: "xs",
                       variant: "tertiary",
-                      children: ve
+                      children: De
                     }
                   )
                 }
               )
             ] }),
-            i === "months" && /* @__PURE__ */ n(
+            c === "months" && /* @__PURE__ */ n(
               "div",
               {
-                className: g(
+                className: u(
                   e.monthsYearsGrid,
                   e.monthsGridCols
                 ),
                 "data-slot": "calendar-months",
-                [s]: "calendar-months",
-                children: je.map((t, a) => {
-                  const r = o !== null && S === o.getFullYear() && a === o.getMonth(), c = S === T && a === le, m = k && (S < T || S === T && a < le);
-                  return /* @__PURE__ */ j(
+                [i]: "calendar-months",
+                children: Ie.map((t, a) => {
+                  const r = o !== null && v === o.getFullYear() && a === o.getMonth(), h = v === W && a === ie, y = B && (v < W || v === W && a < ie);
+                  return /* @__PURE__ */ F(
                     "button",
                     {
-                      className: g(
+                      className: u(
                         e.monthYearBtn,
                         e.monthBtnCapitalize,
-                        !r && !c && e.dayBtnTransparent,
+                        !r && !h && e.dayBtnTransparent,
                         !r && e.dayBtnHover,
-                        c && !r && e.dayBtnToday,
-                        m && e.dayBtnDisabled,
+                        h && !r && e.dayBtnToday,
+                        y && e.dayBtnDisabled,
                         r && e.dayBtnSelected,
-                        !r && !m && e.dayBtnInMonth
+                        !r && !y && e.dayBtnInMonth
                       ),
                       "data-selected": r,
                       "data-slot": "calendar-month",
-                      [s]: "calendar-month",
-                      disabled: m,
+                      [i]: "calendar-month",
+                      disabled: y,
                       key: a,
-                      onClick: () => Oe(a),
+                      onClick: () => Pe(a),
                       type: "button"
                     },
                     t
@@ -588,35 +606,35 @@ const lt = (I) => /* @__PURE__ */ n(
                 })
               }
             ),
-            i === "years" && /* @__PURE__ */ n(
+            c === "years" && /* @__PURE__ */ n(
               "div",
               {
-                className: g(
+                className: u(
                   e.monthsYearsGrid,
                   e.yearsGridCols
                 ),
                 "data-slot": "calendar-years",
-                [s]: "calendar-years",
+                [i]: "calendar-years",
                 children: Array.from({ length: 10 }, (t, a) => {
-                  const r = K + a, c = o !== null && r === o.getFullYear(), m = r === T, y = k && r < T;
-                  return /* @__PURE__ */ j(
+                  const r = Q + a, h = o !== null && r === o.getFullYear(), y = r === W, f = B && r < W;
+                  return /* @__PURE__ */ F(
                     "button",
                     {
-                      className: g(
+                      className: u(
                         e.monthYearBtn,
-                        !c && !m && e.dayBtnTransparent,
-                        !c && e.dayBtnHover,
-                        m && !c && e.dayBtnToday,
-                        y && e.dayBtnDisabled,
-                        c && e.dayBtnSelected,
-                        !c && !y && e.dayBtnInMonth
+                        !h && !y && e.dayBtnTransparent,
+                        !h && e.dayBtnHover,
+                        y && !h && e.dayBtnToday,
+                        f && e.dayBtnDisabled,
+                        h && e.dayBtnSelected,
+                        !h && !f && e.dayBtnInMonth
                       ),
-                      "data-selected": c,
+                      "data-selected": h,
                       "data-slot": "calendar-year",
-                      [s]: "calendar-year",
-                      disabled: y,
+                      [i]: "calendar-year",
+                      disabled: f,
                       key: r,
-                      onClick: () => Ee(r),
+                      onClick: () => ze(r),
                       type: "button"
                     },
                     r
@@ -631,6 +649,6 @@ const lt = (I) => /* @__PURE__ */ n(
   }
 );
 export {
-  bt as Calendar
+  Ct as Calendar
 };
 //# sourceMappingURL=calendar.js.map