@epilot/zenith-react 0.1.0-next.0

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

@@ -0,0 +1,636 @@
+import { jsxs as p, jsx as n, Fragment as he } from "react/jsx-runtime";
+import * as d from "react";
+import { createElement as A } 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 j, accentA3 as Ze, accent3 as Xe, semAccentSolidHover as _, fontWeightSemibold as Y, semAccentContrast as U, semAccentSolid 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 = (F) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "16px",
+    viewBox: "0 -960 960 960",
+    width: "16px",
+    fill: "currentColor",
+    ...F,
+    children: /* @__PURE__ */ n("path", { d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" })
+  }
+), st = (F) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "16px",
+    viewBox: "0 -960 960 960",
+    width: "16px",
+    fill: "currentColor",
+    ...F,
+    children: /* @__PURE__ */ n("path", { d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" })
+  }
+), it = $e({
+  root: {
+    width: "100%"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: H
+  },
+  buttonSpacer: {
+    width: "1.75rem",
+    height: "1.75rem"
+  },
+  headerCenter: {
+    display: "flex",
+    alignItems: "center",
+    ...l.gap(be)
+  },
+  headerBtn: {
+    fontWeight: Y,
+    fontSize: X,
+    lineHeight: Z,
+    color: j,
+    backgroundColor: Ue,
+    ":hover": {
+      backgroundColor: ue
+    },
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    ...l.padding("0.25rem", H),
+    ...l.borderRadius(R),
+    ...l.border("0"),
+    outlineStyle: "none"
+  },
+  monthHeaderBtn: {
+    textTransform: "capitalize"
+  },
+  decadeLabel: {
+    fontWeight: Y,
+    fontSize: X,
+    lineHeight: Z,
+    color: j,
+    ...l.padding("0.25rem", H)
+  },
+  grid: {
+    display: "grid",
+    justifyItems: "center",
+    ...l.gap("0.125rem"),
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+  },
+  gridWithWeeks: {
+    gridTemplateColumns: "auto repeat(7, minmax(0, 1fr))"
+  },
+  gridRange: {
+    rowGap: be,
+    columnGap: "0"
+  },
+  weekLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: pe,
+    lineHeight: fe,
+    fontWeight: ye,
+    color: me,
+    height: "1.75rem",
+    width: "2rem"
+  },
+  weekNumber: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: pe,
+    lineHeight: fe,
+    fontWeight: ye,
+    color: me,
+    height: "2rem",
+    width: "2rem"
+  },
+  cellPlaceholder: {
+    height: "2rem",
+    width: "2rem"
+  },
+  dayBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: X,
+    lineHeight: Z,
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    height: "2rem",
+    width: "2rem",
+    ...l.border("0"),
+    outlineStyle: "none"
+  },
+  dayBtnSingle: {
+    ...l.borderRadius(R)
+  },
+  dayBtnTransparent: {
+    backgroundColor: "transparent"
+  },
+  dayBtnHover: {
+    ":hover": {
+      backgroundColor: ue
+    }
+  },
+  dayBtnToday: {
+    color: ge,
+    textDecorationLine: "underline",
+    textUnderlineOffset: "4px",
+    textDecorationThickness: "1.5px",
+    textDecorationColor: ge
+  },
+  dayBtnSelected: {
+    fontWeight: Y,
+    backgroundColor: V,
+    color: U,
+    ":hover": {
+      backgroundColor: _
+    }
+  },
+  dayBtnOutOfMonth: {
+    color: _e
+  },
+  dayBtnInMonth: {
+    color: j
+  },
+  dayBtnDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  // Range styles
+  dayBtnRangeSingleDay: {
+    ...l.borderRadius(R),
+    backgroundColor: V,
+    color: U,
+    fontWeight: Y,
+    ":hover": {
+      backgroundColor: _
+    }
+  },
+  dayBtnRangeStart: {
+    borderTopLeftRadius: R,
+    borderBottomLeftRadius: R,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    backgroundColor: V,
+    color: U,
+    fontWeight: Y,
+    ":hover": {
+      backgroundColor: _
+    }
+  },
+  dayBtnRangeEnd: {
+    borderTopRightRadius: R,
+    borderBottomRightRadius: R,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    backgroundColor: V,
+    color: U,
+    fontWeight: Y,
+    ":hover": {
+      backgroundColor: _
+    }
+  },
+  dayBtnRangeMiddle: {
+    ...l.borderRadius(0),
+    backgroundColor: Xe,
+    color: j
+  },
+  dayBtnRangeMiddlePreview: {
+    ...l.borderRadius(0),
+    backgroundColor: Ze,
+    color: j
+  },
+  todayContainer: {
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: H
+  },
+  monthsYearsGrid: {
+    display: "grid",
+    ...l.gap(H),
+    ...l.padding(H, 0)
+  },
+  monthsGridCols: {
+    gridTemplateColumns: "repeat(3, 1fr)"
+  },
+  yearsGridCols: {
+    gridTemplateColumns: "repeat(2, 1fr)"
+  },
+  monthYearBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: X,
+    lineHeight: Z,
+    ...l.borderRadius(R),
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    cursor: "pointer",
+    height: "2.25rem",
+    ...l.border("0"),
+    outlineStyle: "none"
+  },
+  monthBtnCapitalize: {
+    textTransform: "capitalize"
+  }
+}), bt = d.forwardRef(
+  function({
+    value: o,
+    onChange: I,
+    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(
+      (t) => {
+        O ? O(typeof t == "function" ? t(M) : t) : Te(t);
+      },
+      [O, M]
+    ), We = Ve(N), de = qe(M, N), Ae = 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), je = 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]), Fe = 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]), Ie = d.useCallback(() => {
+      const t = new Date(L);
+      o ? t.setHours(o.getHours(), o.getMinutes(), 0, 0) : t.setHours(0, 0, 0, 0);
+      const a = ke(
+        t,
+        k,
+        u
+      );
+      h(L), I(a), b == null || b();
+    }, [
+      I,
+      b,
+      o,
+      k,
+      u,
+      L,
+      h
+    ]), Ge = d.useCallback(
+      (t) => {
+        if (Be(t, k, u)) return;
+        if (J) {
+          J(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(
+          a,
+          k,
+          u
+        );
+        I(r), b == null || b();
+      },
+      [
+        I,
+        b,
+        J,
+        o,
+        k,
+        u
+      ]
+    ), Oe = d.useCallback(
+      (t) => {
+        h((a) => new Date(a.getFullYear(), t, 1)), E("days");
+      },
+      [h]
+    ), Ee = d.useCallback(
+      (t) => {
+        h((a) => new Date(t, a.getMonth(), 1)), E("months");
+      },
+      [h]
+    ), Pe = d.useCallback(() => {
+      E("months");
+    }, []), se = d.useCallback(() => {
+      E("years");
+    }, []);
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: Ye,
+        className: g(e.root, He),
+        "data-slot": "calendar",
+        [s]: "calendar",
+        onMouseLeave: G ? () => G(null) : void 0,
+        children: [
+          /* @__PURE__ */ p("div", { className: e.header, children: [
+            Ne ? /* @__PURE__ */ n(
+              te,
+              {
+                "aria-label": Re,
+                onClick: je,
+                size: "icon",
+                variant: "tertiary",
+                children: /* @__PURE__ */ n(lt, {})
+              }
+            ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer }),
+            /* @__PURE__ */ p("div", { className: e.headerCenter, children: [
+              i === "days" && /* @__PURE__ */ p(he, { children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: g(
+                      e.headerBtn,
+                      e.monthHeaderBtn
+                    ),
+                    onClick: Pe,
+                    type: "button",
+                    children: et(M, N)
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: e.headerBtn,
+                    onClick: se,
+                    type: "button",
+                    children: S
+                  }
+                )
+              ] }),
+              i === "months" && /* @__PURE__ */ n(
+                "button",
+                {
+                  className: e.headerBtn,
+                  onClick: se,
+                  type: "button",
+                  children: S
+                }
+              ),
+              i === "years" && /* @__PURE__ */ n("span", { className: e.decadeLabel, children: `${K} – ${K + 9}` })
+            ] }),
+            De ? /* @__PURE__ */ n(
+              te,
+              {
+                "aria-label": Me,
+                onClick: Fe,
+                size: "icon",
+                variant: "tertiary",
+                children: /* @__PURE__ */ n(st, {})
+              }
+            ) : /* @__PURE__ */ n("div", { className: e.buttonSpacer })
+          ] }),
+          /* @__PURE__ */ p("div", { children: [
+            i === "days" && /* @__PURE__ */ p(he, { children: [
+              /* @__PURE__ */ p(
+                "div",
+                {
+                  className: g(
+                    e.grid,
+                    x && e.gridRange,
+                    q && e.gridWithWeeks
+                  ),
+                  "data-slot": "calendar-grid",
+                  [s]: "calendar-grid",
+                  children: [
+                    q && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: e.weekLabel,
+                        "data-slot": "calendar-week-label",
+                        [s]: "calendar-week-label",
+                        children: tt(N)
+                      }
+                    ),
+                    We.map((t) => /* @__PURE__ */ A(
+                      "div",
+                      {
+                        className: e.weekLabel,
+                        "data-slot": "calendar-weekday",
+                        [s]: "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__ */ A(
+                        "div",
+                        {
+                          className: e.weekNumber,
+                          "data-slot": "calendar-week-number",
+                          [s]: "calendar-week-number",
+                          "data-week": we(t),
+                          key: `wk-${a}`
+                        },
+                        we(t)
+                      ) : r ? /* @__PURE__ */ A(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: e.cellPlaceholder,
+                          "data-slot": "calendar-week-number-placeholder",
+                          [s]: "calendar-week-number-placeholder",
+                          key: `wk-${a}`
+                        }
+                      ) : null, y = Ce(t, M);
+                      if (oe && !y)
+                        return /* @__PURE__ */ p(d.Fragment, { children: [
+                          m,
+                          /* @__PURE__ */ n(
+                            "div",
+                            {
+                              "aria-hidden": "true",
+                              className: e.cellPlaceholder,
+                              "data-slot": "calendar-day-placeholder",
+                              [s]: "calendar-day-placeholder"
+                            }
+                          )
+                        ] }, a);
+                      const B = Be(
+                        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
+                        );
+                        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(
+                        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,
+                        /* @__PURE__ */ n(
+                          "button",
+                          {
+                            "aria-disabled": B,
+                            "aria-pressed": C || f,
+                            className: g(
+                              e.dayBtn,
+                              ee
+                            ),
+                            "data-in-range": v || void 0,
+                            "data-selected": C || f,
+                            "data-slot": "calendar-day",
+                            [s]: "calendar-day",
+                            "data-today": P,
+                            disabled: B,
+                            onClick: () => Ge(t),
+                            onMouseEnter: G ? () => G(t) : void 0,
+                            type: "button",
+                            children: t.getDate()
+                          }
+                        )
+                      ] }, a);
+                    })
+                  ]
+                }
+              ),
+              Se && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: e.todayContainer,
+                  "data-slot": "calendar-today",
+                  [s]: "calendar-today",
+                  children: /* @__PURE__ */ n(
+                    te,
+                    {
+                      onClick: Ie,
+                      size: "xs",
+                      variant: "tertiary",
+                      children: ve
+                    }
+                  )
+                }
+              )
+            ] }),
+            i === "months" && /* @__PURE__ */ n(
+              "div",
+              {
+                className: g(
+                  e.monthsYearsGrid,
+                  e.monthsGridCols
+                ),
+                "data-slot": "calendar-months",
+                [s]: "calendar-months",
+                children: Ae.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__ */ A(
+                    "button",
+                    {
+                      className: g(
+                        e.monthYearBtn,
+                        e.monthBtnCapitalize,
+                        !r && !c && e.dayBtnTransparent,
+                        !r && e.dayBtnHover,
+                        c && !r && e.dayBtnToday,
+                        m && e.dayBtnDisabled,
+                        r && e.dayBtnSelected,
+                        !r && !m && e.dayBtnInMonth
+                      ),
+                      "data-selected": r,
+                      "data-slot": "calendar-month",
+                      [s]: "calendar-month",
+                      disabled: m,
+                      key: a,
+                      onClick: () => Oe(a),
+                      type: "button"
+                    },
+                    t
+                  );
+                })
+              }
+            ),
+            i === "years" && /* @__PURE__ */ n(
+              "div",
+              {
+                className: g(
+                  e.monthsYearsGrid,
+                  e.yearsGridCols
+                ),
+                "data-slot": "calendar-years",
+                [s]: "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__ */ A(
+                    "button",
+                    {
+                      className: g(
+                        e.monthYearBtn,
+                        !c && !m && e.dayBtnTransparent,
+                        !c && e.dayBtnHover,
+                        m && !c && e.dayBtnToday,
+                        y && e.dayBtnDisabled,
+                        c && e.dayBtnSelected,
+                        !c && !y && e.dayBtnInMonth
+                      ),
+                      "data-selected": c,
+                      "data-slot": "calendar-year",
+                      [s]: "calendar-year",
+                      disabled: y,
+                      key: r,
+                      onClick: () => Ee(r),
+                      type: "button"
+                    },
+                    r
+                  );
+                })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  bt as Calendar
+};
+//# sourceMappingURL=calendar.js.map