@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.js

@@ -1,53 +1,60 @@
-import { jsx as x, jsxs as $ } from "react/jsx-runtime";
-import { c as k } from "../../../../../../compiler-runtime-DA41awpA.js";
-import { cn as C } from "../../../../../../utils/index.js";
-import { calendarMonthTitleVariants as P } from "../../CalendarPanel.variants.js";
-import { createDayPickerClassNames as S, SINGLE_MONTH_WIDTH as _ } from "../../constants/index.js";
-import { getMonthName as j } from "../../../../utils/validation.js";
-import { D as v } from "../../../../../../DayPicker-CaeUXRCF.js";
-const O = (n) => `${j(n.getMonth())} ${n.getFullYear()}`, w = (n) => {
-  const e = k.c(28), {
-    month: t,
-    range: s,
-    onRangeSelect: N,
-    disabled: T,
-    disabledMatcher: D,
-    showOutsideDays: g,
-    classNames: m
-  } = n, M = m?.dayPicker;
-  let c;
-  e[0] !== M ? (c = S(M), e[0] = M, e[1] = c) : c = e[1];
-  const y = c;
-  let f;
-  e[2] !== t ? (f = t.getFullYear(), e[2] = t, e[3] = f) : f = e[3];
-  let d;
-  e[4] !== t ? (d = t.getMonth(), e[4] = t, e[5] = d) : d = e[5];
-  const u = `${f}-${d}`;
-  let h;
-  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = {
-    width: _
-  }, e[6] = h) : h = e[6];
-  let l;
-  e[7] !== m?.monthTitle ? (l = C(P(), "flex-1 text-center", m?.monthTitle), e[7] = m?.monthTitle, e[8] = l) : l = e[8];
-  let o;
-  e[9] !== t ? (o = O(t), e[9] = t, e[10] = o) : o = e[10];
-  let a;
-  e[11] !== l || e[12] !== o ? (a = /* @__PURE__ */ x("div", { className: "flex items-center justify-center mb-8 h-6", children: /* @__PURE__ */ x("span", { className: l, children: o }) }), e[11] = l, e[12] = o, e[13] = a) : a = e[13];
-  let r;
-  e[14] !== s.from || e[15] !== s.to ? (r = {
-    from: s.from,
-    to: s.to
-  }, e[14] = s.from, e[15] = s.to, e[16] = r) : r = e[16];
-  const b = D || T;
-  let i;
-  e[17] !== y || e[18] !== t || e[19] !== N || e[20] !== g || e[21] !== r || e[22] !== b ? (i = /* @__PURE__ */ x(v, { mode: "range", selected: r, onSelect: N, month: t, numberOfMonths: 1, disabled: b, hideNavigation: !0, animate: !1, showOutsideDays: g, classNames: y }), e[17] = y, e[18] = t, e[19] = N, e[20] = g, e[21] = r, e[22] = b, e[23] = i) : i = e[23];
-  let p;
-  return e[24] !== i || e[25] !== u || e[26] !== a ? (p = /* @__PURE__ */ $("div", { style: h, children: [
-    a,
-    i
-  ] }, u), e[24] = i, e[25] = u, e[26] = a, e[27] = p) : p = e[27], p;
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { cn as d } from "../../../../../../utils/index.js";
+import { calendarMonthTitleVariants as f } from "../../CalendarPanel.variants.js";
+import { createDayPickerClassNames as h, SINGLE_MONTH_WIDTH as p } from "../../constants/index.js";
+import { getMonthName as M } from "../../../../utils/validation.js";
+import { D as y } from "../../../../../../DayPicker-CaeUXRCF.js";
+const N = (e) => `${M(e.getMonth())} ${e.getFullYear()}`, g = ({
+  month: e,
+  range: a,
+  onRangeSelect: o,
+  disabled: i,
+  disabledMatcher: n,
+  showOutsideDays: m,
+  classNames: t
+}) => {
+  const s = c(
+    () => h(t?.dayPicker),
+    [t?.dayPicker]
+  );
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      style: { width: p },
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-center mb-8 h-6", children: /* @__PURE__ */ r(
+          "span",
+          {
+            className: d(
+              f(),
+              "flex-1 text-center",
+              t?.monthTitle
+            ),
+            children: N(e)
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          y,
+          {
+            mode: "range",
+            selected: { from: a.from, to: a.to },
+            onSelect: o,
+            month: e,
+            numberOfMonths: 1,
+            disabled: n || i,
+            hideNavigation: !0,
+            animate: !1,
+            showOutsideDays: m,
+            classNames: s
+          }
+        )
+      ]
+    },
+    `${e.getFullYear()}-${e.getMonth()}`
+  );
 };
-w.displayName = "CalendarMonth";
+g.displayName = "CalendarMonth";
 export {
-  w as CalendarMonth
+  g as CalendarMonth
 };

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -51,61 +51,256 @@ const at = ({
     rightPrevMonth: Q,
     getLeftTransform: U,
     getRightTransform: X
-  } = nt(f), l = Y((p) => {
-    p && v({
-      from: p.from,
-      to: p.to
-    });
-  }, [v]), N = k(() => t?.dayPicker, [t?.dayPicker]), m = k(() => ({
-    monthTitle: t?.monthTitle,
-    dayPicker: N
-  }), [t?.monthTitle, N]);
-  return /* @__PURE__ */ n("div", { className: a(O({
-    className: b
-  }), t?.root), children: /* @__PURE__ */ s("div", { className: a(Z(), "relative", t?.gridContainer), style: {
-    width: x
-  }, children: [
-    /* @__PURE__ */ n(tt, { className: t?.divider }),
-    /* @__PURE__ */ s(et.div, { className: "flex gap-8", role: "application", "aria-label": T, initial: !1, animate: {
-      height: W
-    }, transition: {
-      duration: f.animationDuration / 1e3,
-      ease: [0.25, 0.1, 0.25, 1]
-    }, children: [
-      /* @__PURE__ */ s("div", { style: {
-        width: c
-      }, className: "relative overflow-hidden", children: [
-        /* @__PURE__ */ n(g, { direction: "prev", onClick: D, disabled: e, isAnimating: u, canNavigate: A, hideWhenDisabled: h, className: a("absolute left-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton), disabledClassName: t?.navButtonDisabled, ariaLabel: B, size: "small" }),
-        /* @__PURE__ */ n(g, { direction: "next", onClick: M, disabled: e, isAnimating: u, canNavigate: L, hideWhenDisabled: h, className: a("absolute right-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton), disabledClassName: t?.navButtonDisabled, ariaLabel: R, size: "small" }),
-        /* @__PURE__ */ s("div", { ref: V, className: a("flex", H && G && "konstruct-drp-carousel-transition"), style: {
-          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
-          width: 3 * c,
-          transform: U(),
-          willChange: "transform"
-        }, children: [
-          /* @__PURE__ */ n(d, { month: E, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m }),
-          /* @__PURE__ */ n(d, { month: _, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m }),
-          /* @__PURE__ */ n(d, { month: $, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m })
-        ] })
-      ] }),
-      /* @__PURE__ */ s("div", { style: {
-        width: c
-      }, className: "relative overflow-hidden", children: [
-        /* @__PURE__ */ n(g, { direction: "prev", onClick: P, disabled: e, isAnimating: C, canNavigate: I, hideWhenDisabled: h, className: a("absolute left-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton), disabledClassName: t?.navButtonDisabled, ariaLabel: w, size: "small" }),
-        /* @__PURE__ */ n(g, { direction: "next", onClick: y, disabled: e, isAnimating: C, canNavigate: S, hideWhenDisabled: h, className: a("absolute right-0 top-0 z-10 p-1", "bg-white dark:bg-metal-800", t?.navButton), disabledClassName: t?.navButtonDisabled, ariaLabel: z, size: "small" }),
-        /* @__PURE__ */ s("div", { ref: F, className: a("flex", j && q && "konstruct-drp-carousel-transition"), style: {
-          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
-          width: 3 * c,
-          transform: X(),
-          willChange: "transform"
-        }, children: [
-          /* @__PURE__ */ n(d, { month: Q, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m }),
-          /* @__PURE__ */ n(d, { month: J, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m }),
-          /* @__PURE__ */ n(d, { month: K, range: i, onRangeSelect: l, disabled: e, disabledMatcher: o, showOutsideDays: r, classNames: m })
-        ] })
-      ] })
-    ] })
-  ] }) });
+  } = nt(f), l = Y(
+    (p) => {
+      p && v({
+        from: p.from,
+        to: p.to
+      });
+    },
+    [v]
+  ), N = k(
+    () => t?.dayPicker,
+    [t?.dayPicker]
+  ), m = k(
+    () => ({
+      monthTitle: t?.monthTitle,
+      dayPicker: N
+    }),
+    [t?.monthTitle, N]
+  );
+  return /* @__PURE__ */ n("div", { className: a(O({ className: b }), t?.root), children: /* @__PURE__ */ s(
+    "div",
+    {
+      className: a(
+        Z(),
+        "relative",
+        t?.gridContainer
+      ),
+      style: { width: x },
+      children: [
+        /* @__PURE__ */ n(tt, { className: t?.divider }),
+        /* @__PURE__ */ s(
+          et.div,
+          {
+            className: "flex gap-8",
+            role: "application",
+            "aria-label": T,
+            initial: !1,
+            animate: { height: W },
+            transition: {
+              duration: f.animationDuration / 1e3,
+              ease: [0.25, 0.1, 0.25, 1]
+            },
+            children: [
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  style: { width: c },
+                  className: "relative overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "prev",
+                        onClick: D,
+                        disabled: e,
+                        isAnimating: u,
+                        canNavigate: A,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute left-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: B,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "next",
+                        onClick: M,
+                        disabled: e,
+                        isAnimating: u,
+                        canNavigate: L,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute right-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: R,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "div",
+                      {
+                        ref: V,
+                        className: a(
+                          "flex",
+                          H && G && "konstruct-drp-carousel-transition"
+                        ),
+                        style: {
+                          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                          width: 3 * c,
+                          transform: U(),
+                          willChange: "transform"
+                        },
+                        children: [
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: E,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: _,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: $,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  style: { width: c },
+                  className: "relative overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "prev",
+                        onClick: P,
+                        disabled: e,
+                        isAnimating: C,
+                        canNavigate: I,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute left-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: w,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      g,
+                      {
+                        direction: "next",
+                        onClick: y,
+                        disabled: e,
+                        isAnimating: C,
+                        canNavigate: S,
+                        hideWhenDisabled: h,
+                        className: a(
+                          "absolute right-0 top-0 z-10 p-1",
+                          "bg-white dark:bg-metal-800",
+                          t?.navButton
+                        ),
+                        disabledClassName: t?.navButtonDisabled,
+                        ariaLabel: z,
+                        size: "small"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "div",
+                      {
+                        ref: F,
+                        className: a(
+                          "flex",
+                          j && q && "konstruct-drp-carousel-transition"
+                        ),
+                        style: {
+                          "--konstruct-drp-animation-duration": `${f.animationDuration}ms`,
+                          width: 3 * c,
+                          transform: X(),
+                          willChange: "transform"
+                        },
+                        children: [
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: Q,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: J,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            d,
+                            {
+                              month: K,
+                              range: i,
+                              onRangeSelect: l,
+                              disabled: e,
+                              disabledMatcher: o,
+                              showOutsideDays: r,
+                              classNames: m
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 };
 at.displayName = "IndependentModeCalendar";
 export {

package/dist/components/DateRangePicker/components/CalendarPanel/components/NavigationButton/NavigationButton.js

@@ -1,37 +1,41 @@
-import { jsx as N } from "react/jsx-runtime";
-import { c as y } from "../../../../../../compiler-runtime-DA41awpA.js";
-import { cn as g } from "../../../../../../utils/index.js";
-import { calendarNavButtonDisabledVariants as A, calendarNavButtonVariants as H } from "../../CalendarPanel.variants.js";
-import { C as L } from "../../../../../../chevron-left-BHBf-gQY.js";
-import { C as R } from "../../../../../../chevron-right-DvXGOiS_.js";
-const V = (C) => {
-  const t = y.c(16), {
-    direction: B,
-    onClick: l,
-    disabled: f,
-    isAnimating: u,
-    canNavigate: v,
-    hideWhenDisabled: b,
-    className: r,
-    disabledClassName: s,
-    ariaLabel: d,
-    size: h
-  } = C, D = f === void 0 ? !1 : f, x = u === void 0 ? !1 : u, p = v === void 0 ? !0 : v, z = b === void 0 ? !1 : b, w = h === void 0 ? "medium" : h, i = D || x || !p;
-  if (z && !p)
+import { jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../../../../../../utils/index.js";
+import { calendarNavButtonDisabledVariants as h, calendarNavButtonVariants as b } from "../../CalendarPanel.variants.js";
+import { C as v } from "../../../../../../chevron-left-BHBf-gQY.js";
+import { C as N } from "../../../../../../chevron-right-DvXGOiS_.js";
+const B = ({
+  direction: n,
+  onClick: r,
+  disabled: s = !1,
+  isAnimating: i = !1,
+  canNavigate: t = !0,
+  hideWhenDisabled: l = !1,
+  className: m,
+  disabledClassName: d,
+  ariaLabel: u,
+  size: c = "medium"
+}) => {
+  const o = s || i || !t;
+  if (l && !t)
     return null;
-  const c = B === "prev" ? L : R, m = w === "small" ? "w-4 h-4" : "w-5 h-5";
-  let e;
-  if (t[0] !== r || t[1] !== s || t[2] !== i) {
-    let n;
-    t[4] !== s || t[5] !== i ? (n = i && g(A(), s), t[4] = s, t[5] = i, t[6] = n) : n = t[6], e = g(H(), r, n), t[0] = r, t[1] = s, t[2] = i, t[3] = e;
-  } else
-    e = t[3];
-  let a;
-  t[7] !== c || t[8] !== m ? (a = /* @__PURE__ */ N(c, { className: m }), t[7] = c, t[8] = m, t[9] = a) : a = t[9];
-  let o;
-  return t[10] !== d || t[11] !== i || t[12] !== l || t[13] !== e || t[14] !== a ? (o = /* @__PURE__ */ N("button", { type: "button", onClick: l, disabled: i, className: e, "aria-label": d, children: a }), t[10] = d, t[11] = i, t[12] = l, t[13] = e, t[14] = a, t[15] = o) : o = t[15], o;
+  const f = n === "prev" ? v : N, p = c === "small" ? "w-4 h-4" : "w-5 h-5";
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      disabled: o,
+      className: e(
+        b(),
+        m,
+        o && e(h(), d)
+      ),
+      "aria-label": u,
+      children: /* @__PURE__ */ a(f, { className: p })
+    }
+  );
 };
-V.displayName = "NavigationButton";
+B.displayName = "NavigationButton";
 export {
-  V as NavigationButton
+  B as NavigationButton
 };

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -35,35 +35,100 @@ const S = ({
     handlePrevMonth: N,
     handleNextMonth: B,
     getTransform: P
-  } = H(n), w = z((t) => {
-    t && o({
-      from: t.from,
-      to: t.to
-    });
-  }, [o]), $ = L(() => a?.dayPicker, [a?.dayPicker]);
-  return /* @__PURE__ */ e("div", { className: i(A({
-    className: s
-  }), a?.root), children: /* @__PURE__ */ W("div", { className: i(V(), "overflow-hidden relative justify-start!", a?.gridContainer), style: {
-    width: h
-  }, children: [
-    /* @__PURE__ */ e(m, { direction: "prev", onClick: N, disabled: r, isAnimating: d, canNavigate: C, hideWhenDisabled: l, className: i("absolute left-0 top-3 z-10", a?.navButton), disabledClassName: a?.navButtonDisabled, ariaLabel: f }),
-    /* @__PURE__ */ e(m, { direction: "next", onClick: B, disabled: r, isAnimating: d, canNavigate: b, hideWhenDisabled: l, className: i("absolute right-0 top-3 z-10", a?.navButton), disabledClassName: a?.navButtonDisabled, ariaLabel: u }),
-    /* @__PURE__ */ e(F, { className: a?.divider }),
-    /* @__PURE__ */ e(R.div, { ref: k, className: i("flex gap-8", T && y && "konstruct-drp-carousel-transition"), role: "application", "aria-label": c, initial: !1, animate: {
-      height: x
-    }, transition: {
-      duration: n.animationDuration / 1e3,
-      ease: [0.25, 0.1, 0.25, 1]
-    }, style: {
-      "--konstruct-drp-animation-duration": `${n.animationDuration}ms`,
-      width: D,
-      transform: P(),
-      willChange: "transform"
-    }, children: M.map((t, j) => /* @__PURE__ */ e(G, { month: t, range: p, onRangeSelect: w, disabled: r, disabledMatcher: v, showOutsideDays: g, classNames: {
-      monthTitle: a?.monthTitle,
-      dayPicker: $
-    } }, `${t.getFullYear()}-${t.getMonth()}-${j}`)) })
-  ] }) });
+  } = H(n), w = z(
+    (t) => {
+      t && o({
+        from: t.from,
+        to: t.to
+      });
+    },
+    [o]
+  ), $ = L(
+    () => a?.dayPicker,
+    [a?.dayPicker]
+  );
+  return /* @__PURE__ */ e("div", { className: i(A({ className: s }), a?.root), children: /* @__PURE__ */ W(
+    "div",
+    {
+      className: i(
+        V(),
+        "overflow-hidden relative justify-start!",
+        a?.gridContainer
+      ),
+      style: { width: h },
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            direction: "prev",
+            onClick: N,
+            disabled: r,
+            isAnimating: d,
+            canNavigate: C,
+            hideWhenDisabled: l,
+            className: i("absolute left-0 top-3 z-10", a?.navButton),
+            disabledClassName: a?.navButtonDisabled,
+            ariaLabel: f
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            direction: "next",
+            onClick: B,
+            disabled: r,
+            isAnimating: d,
+            canNavigate: b,
+            hideWhenDisabled: l,
+            className: i("absolute right-0 top-3 z-10", a?.navButton),
+            disabledClassName: a?.navButtonDisabled,
+            ariaLabel: u
+          }
+        ),
+        /* @__PURE__ */ e(F, { className: a?.divider }),
+        /* @__PURE__ */ e(
+          R.div,
+          {
+            ref: k,
+            className: i(
+              "flex gap-8",
+              T && y && "konstruct-drp-carousel-transition"
+            ),
+            role: "application",
+            "aria-label": c,
+            initial: !1,
+            animate: { height: x },
+            transition: {
+              duration: n.animationDuration / 1e3,
+              ease: [0.25, 0.1, 0.25, 1]
+            },
+            style: {
+              "--konstruct-drp-animation-duration": `${n.animationDuration}ms`,
+              width: D,
+              transform: P(),
+              willChange: "transform"
+            },
+            children: M.map((t, j) => /* @__PURE__ */ e(
+              G,
+              {
+                month: t,
+                range: p,
+                onRangeSelect: w,
+                disabled: r,
+                disabledMatcher: v,
+                showOutsideDays: g,
+                classNames: {
+                  monthTitle: a?.monthTitle,
+                  dayPicker: $
+                }
+              },
+              `${t.getFullYear()}-${t.getMonth()}-${j}`
+            ))
+          }
+        )
+      ]
+    }
+  ) });
 };
 S.displayName = "TogetherModeCalendar";
 export {