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

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useIndependentCarousel.js

@@ -1,142 +1,144 @@
-import { useState as f, useRef as F, useEffect as m, useMemo as U, useCallback as k } from "react";
-import { MS_PER_MONTH as W, SINGLE_MONTH_WIDTH as I } from "../constants/index.js";
-import { getNextMonth as h, getPrevMonth as g, getWeeksInMonth as w, calculateCalendarHeight as V } from "../utils/index.js";
-const y = ({
-  displayedMonths: a,
-  animationDuration: R,
-  navigationMode: M
-}) => {
-  const [o, b] = f(
-    a[0]
-  ), [i, C] = f(null), [n, S] = f(!1), [u, L] = f(!1), [O, N] = f(!0), X = F(null), d = F(!0), [l, E] = f(
-    a[1]
-  ), [s, H] = f(null), [r, D] = f(!1), [c, q] = f(!1), [$, P] = f(!0), G = F(null), _ = F(!0);
-  m(() => {
-    if (M === "independent") {
-      if (d.current) {
-        d.current = !1;
+import { r as k } from "../../../../../constants-D96yCePL.js";
+import { calculateCalendarHeight as p, getNextMonth as m, getPrevMonth as h, getWeeksInMonth as w } from "../utils/index.js";
+import { useCallback as O, useEffect as g, useMemo as z, useRef as I, useState as s } from "react";
+var U = ({ displayedMonths: u, animationDuration: M, navigationMode: F }) => {
+  const [o, b] = s(u[0]), [i, x] = s(null), [r, C] = s(!1), [a, L] = s(!1), [W, S] = s(!0), T = I(null), N = I(!0), [l, E] = s(u[1]), [f, D] = s(null), [n, P] = s(!1), [c, H] = s(!1), [X, _] = s(!0), A = I(null), d = I(!0);
+  g(() => {
+    if (F === "independent") {
+      if (N.current) {
+        N.current = !1;
         return;
       }
-      if (!n) {
-        const e = o.getTime(), t = a[0].getTime();
+      if (!r) {
+        const e = o.getTime(), t = u[0].getTime();
         if (e !== t) {
-          const T = t - e, A = Math.round(T / W);
-          if (Math.abs(A) === 1) {
-            const x = A > 0 ? "left" : "right";
-            C(x), S(!0), L(!1);
-          } else
-            b(a[0]);
+          const q = t - e, R = Math.round(q / k);
+          Math.abs(R) === 1 ? (x(R > 0 ? "left" : "right"), C(!0), L(!1)) : b(u[0]);
         }
       }
     }
-  }, [a, o, n, M]), m(() => {
-    if (M === "independent") {
-      if (_.current) {
-        _.current = !1;
+  }, [
+    u,
+    o,
+    r,
+    F
+  ]), g(() => {
+    if (F === "independent") {
+      if (d.current) {
+        d.current = !1;
         return;
       }
-      if (!r) {
-        const e = l.getTime(), t = a[1].getTime();
+      if (!n) {
+        const e = l.getTime(), t = u[1].getTime();
         if (e !== t) {
-          const T = t - e, A = Math.round(T / W);
-          if (Math.abs(A) === 1) {
-            const x = A > 0 ? "left" : "right";
-            H(x), D(!0), q(!1);
-          } else
-            E(a[1]);
+          const q = t - e, R = Math.round(q / k);
+          Math.abs(R) === 1 ? (D(R > 0 ? "left" : "right"), P(!0), H(!1)) : E(u[1]);
         }
       }
     }
-  }, [a, l, r, M]), m(() => {
-    n && !u && i && requestAnimationFrame(() => {
+  }, [
+    u,
+    l,
+    n,
+    F
+  ]), g(() => {
+    r && !a && i && (T.current && T.current.offsetHeight, requestAnimationFrame(() => {
       L(!0);
-    });
-  }, [n, u, i]), m(() => {
-    r && !c && s && requestAnimationFrame(() => {
-      q(!0);
-    });
-  }, [r, c, s]), m(() => {
-    if (n && u) {
+    }));
+  }, [
+    r,
+    a,
+    i
+  ]), g(() => {
+    n && !c && f && (A.current && A.current.offsetHeight, requestAnimationFrame(() => {
+      H(!0);
+    }));
+  }, [
+    n,
+    c,
+    f
+  ]), g(() => {
+    if (r && a) {
       const e = setTimeout(() => {
-        N(!1), requestAnimationFrame(() => {
-          b((t) => i === "left" ? h(t) : g(t)), S(!1), C(null), L(!1), requestAnimationFrame(() => {
+        S(!1), requestAnimationFrame(() => {
+          T.current && T.current.offsetHeight, b((t) => i === "left" ? m(t) : h(t)), C(!1), x(null), L(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              N(!0);
+              S(!0);
             });
           });
         });
-      }, R);
+      }, M);
       return () => clearTimeout(e);
     }
   }, [
-    n,
-    u,
-    R,
+    r,
+    a,
+    M,
     i
-  ]), m(() => {
-    if (r && c) {
+  ]), g(() => {
+    if (n && c) {
       const e = setTimeout(() => {
-        P(!1), requestAnimationFrame(() => {
-          E((t) => s === "left" ? h(t) : g(t)), D(!1), H(null), q(!1), requestAnimationFrame(() => {
+        _(!1), requestAnimationFrame(() => {
+          A.current && A.current.offsetHeight, E((t) => f === "left" ? m(t) : h(t)), P(!1), D(null), H(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              P(!0);
+              _(!0);
             });
           });
         });
-      }, R);
+      }, M);
       return () => clearTimeout(e);
     }
   }, [
-    r,
+    n,
     c,
-    R,
-    s
+    M,
+    f
   ]);
-  const j = U(() => {
+  const $ = z(() => {
     let e = o, t = l;
-    n && i === "left" ? e = h(o) : n && i === "right" && (e = g(o)), r && s === "left" ? t = h(l) : r && s === "right" && (t = g(l));
-    const T = Math.max(
-      w(e),
-      w(t)
-    );
-    return V(T);
+    return r && i === "left" ? e = m(o) : r && i === "right" && (e = h(o)), n && f === "left" ? t = m(l) : n && f === "right" && (t = h(l)), p(Math.max(w(e), w(t)));
   }, [
     o,
     l,
-    n,
     r,
+    n,
     i,
-    s
-  ]), p = k(() => {
-    let e = -I;
-    return n && u && (i === "left" ? e = -2 * I : i === "right" && (e = 0)), `translateX(${e}px)`;
-  }, [n, u, i]), z = k(() => {
-    let e = -I;
-    return r && c && (s === "left" ? e = -2 * I : s === "right" && (e = 0)), `translateX(${e}px)`;
-  }, [r, c, s]), B = g(o), J = h(o), K = g(l), Q = h(l);
+    f
+  ]), G = O(() => {
+    let e = -259;
+    return r && a && (i === "left" ? e = -2 * 259 : i === "right" && (e = 0)), `translateX(${e}px)`;
+  }, [
+    r,
+    a,
+    i
+  ]), j = O(() => {
+    let e = -259;
+    return n && c && (f === "left" ? e = -2 * 259 : f === "right" && (e = 0)), `translateX(${e}px)`;
+  }, [
+    n,
+    c,
+    f
+  ]);
   return {
-    // Left month
     leftInternalMonth: o,
-    leftPrevMonth: B,
-    leftNextMonth: J,
-    leftCarouselRef: X,
-    isLeftAnimating: n,
-    enableLeftTransition: O,
-    leftAnimateTransform: u,
-    getLeftTransform: p,
-    // Right month
+    leftPrevMonth: h(o),
+    leftNextMonth: m(o),
+    leftCarouselRef: T,
+    isLeftAnimating: r,
+    enableLeftTransition: W,
+    leftAnimateTransform: a,
+    getLeftTransform: G,
     rightInternalMonth: l,
-    rightPrevMonth: K,
-    rightNextMonth: Q,
-    rightCarouselRef: G,
-    isRightAnimating: r,
-    enableRightTransition: $,
+    rightPrevMonth: h(l),
+    rightNextMonth: m(l),
+    rightCarouselRef: A,
+    isRightAnimating: n,
+    enableRightTransition: X,
     rightAnimateTransform: c,
-    getRightTransform: z,
-    // Shared
-    calendarHeight: j
+    getRightTransform: j,
+    calendarHeight: $
   };
 };
 export {
-  y as useIndependentCarousel
+  U as useIndependentCarousel
 };

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.js

@@ -1,93 +1,108 @@
-import { useState as f, useRef as b, useMemo as K, useEffect as I, useCallback as R } from "react";
-import { MS_PER_MONTH as Q, SINGLE_MONTH_WIDTH as W, GAP_WIDTH as d } from "../constants/index.js";
-import { getPrevMonth as M, getNextMonth as g, getWeeksInMonth as U, calculateCalendarHeight as V } from "../utils/index.js";
-const tt = ({
-  displayedMonths: l,
-  animationDuration: F,
-  disabled: c,
-  canNavigatePrev: _,
-  canNavigateNext: q,
-  navigationMode: C,
-  navigatePrevMonth: D,
-  navigateNextMonth: E
-}) => {
-  const [n, u] = f(null), [t, a] = f(!1), [o, i] = f(!1), [G, S] = f(!0), [s, k] = f(l), P = b(null), p = b(!0), A = W + d, w = M(M(s[0])), x = M(s[0]), m = s[0], h = s[1], H = g(s[1]), L = g(g(s[1])), N = K(() => {
+import { r as z } from "../../../../../constants-D96yCePL.js";
+import { calculateCalendarHeight as B, getNextMonth as g, getPrevMonth as A, getWeeksInMonth as J } from "../utils/index.js";
+import { useCallback as F, useEffect as R, useMemo as K, useRef as b, useState as l } from "react";
+var y = ({ displayedMonths: u, animationDuration: W, disabled: c, canNavigatePrev: _, canNavigateNext: q, navigationMode: C, navigatePrevMonth: D, navigateNextMonth: E }) => {
+  const [n, a] = l(null), [t, m] = l(!1), [s, i] = l(!1), [k, S] = l(!0), [r, d] = l(u), f = b(null), p = b(!0), H = 291, G = A(A(r[0])), I = A(r[0]), h = r[0], T = r[1], x = g(r[1]), P = g(g(r[1])), w = K(() => {
     let e;
-    t && n === "left" ? e = [h, H] : t && n === "right" ? e = [x, m] : e = [m, h];
-    const r = Math.max(...e.map(U));
-    return V(r);
+    return t && n === "left" ? e = [T, x] : t && n === "right" ? e = [I, h] : e = [h, T], B(Math.max(...e.map(J)));
   }, [
     t,
     n,
-    m,
     h,
-    H,
-    x
-  ]), X = 6 * W + 5 * d, T = -2 * (W + d);
-  I(() => {
+    T,
+    x,
+    I
+  ]), L = 6 * 259 + 160, M = -2 * 291;
+  R(() => {
     if (C !== "independent") {
       if (p.current) {
         p.current = !1;
         return;
       }
       if (!t) {
-        const e = s[0].getTime(), r = l[0].getTime();
-        if (e !== r) {
-          const B = r - e, O = Math.round(B / Q);
-          if (Math.abs(O) === 1) {
-            const J = O > 0 ? "left" : "right";
-            u(J), a(!0), i(!1);
-          } else
-            k(l);
+        const e = r[0].getTime(), o = u[0].getTime();
+        if (e !== o) {
+          const j = o - e, O = Math.round(j / z);
+          Math.abs(O) === 1 ? (a(O > 0 ? "left" : "right"), m(!0), i(!1)) : d(u);
         }
       }
     }
-  }, [l, s, t, C]), I(() => {
-    t && !o && n && requestAnimationFrame(() => {
+  }, [
+    u,
+    r,
+    t,
+    C
+  ]), R(() => {
+    t && !s && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
       i(!0);
-    });
-  }, [t, o, n]), I(() => {
-    if (t && o) {
+    }));
+  }, [
+    t,
+    s,
+    n
+  ]), R(() => {
+    if (t && s) {
       const e = setTimeout(() => {
         S(!1), requestAnimationFrame(() => {
-          k((r) => n === "left" ? [r[1], g(r[1])] : [M(r[0]), r[0]]), a(!1), u(null), i(!1), requestAnimationFrame(() => {
+          f.current && f.current.offsetHeight, d((o) => n === "left" ? [o[1], g(o[1])] : [A(o[0]), o[0]]), m(!1), a(null), i(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               S(!0);
             });
           });
         });
-      }, F);
+      }, W);
       return () => clearTimeout(e);
     }
-  }, [t, o, F, n]);
-  const $ = R(() => {
-    t || c || !_ || (u("right"), a(!0), i(!1), D());
-  }, [t, c, _, D]), j = R(() => {
-    t || c || !q || (u("left"), a(!0), i(!1), E());
-  }, [t, c, q, E]), z = R(() => {
-    let e = T;
-    return t && o && (n === "left" ? e = T - A : n === "right" && (e = T + A)), `translateX(${e}px)`;
-  }, [T, t, o, n, A]);
+  }, [
+    t,
+    s,
+    W,
+    n
+  ]);
+  const N = F(() => {
+    t || c || !_ || (a("right"), m(!0), i(!1), D());
+  }, [
+    t,
+    c,
+    _,
+    D
+  ]), X = F(() => {
+    t || c || !q || (a("left"), m(!0), i(!1), E());
+  }, [
+    t,
+    c,
+    q,
+    E
+  ]), $ = F(() => {
+    let e = M;
+    return t && s && (n === "left" ? e = M - H : n === "right" && (e = M + H)), `translateX(${e}px)`;
+  }, [
+    M,
+    t,
+    s,
+    n,
+    H
+  ]);
   return {
-    carouselRef: P,
+    carouselRef: f,
     isAnimating: t,
-    enableTransition: G,
-    animateTransform: o,
-    calendarHeight: N,
-    carouselTotalWidth: X,
+    enableTransition: k,
+    animateTransform: s,
+    calendarHeight: w,
+    carouselTotalWidth: L,
     monthsToRender: [
-      w,
-      x,
-      m,
+      G,
+      I,
       h,
-      H,
-      L
+      T,
+      x,
+      P
     ],
-    handlePrevMonth: $,
-    handleNextMonth: j,
-    getTransform: z
+    handlePrevMonth: N,
+    handleNextMonth: X,
+    getTransform: $
   };
 };
 export {
-  tt as useTogetherCarousel
+  y as useTogetherCarousel
 };

package/dist/components/DateRangePicker/components/CalendarPanel/utils/index.js

@@ -1,11 +1,11 @@
-import { MONTH_HEADER_HEIGHT as l, WEEKDAY_HEADER_HEIGHT as g, WEEK_ROW_HEIGHT as D } from "../constants/index.js";
-const h = (t) => {
-  const e = t.getFullYear(), n = t.getMonth(), o = new Date(e, n, 1), a = new Date(e, n + 1, 0), s = o.getDay(), r = a.getDate(), c = s + r;
-  return Math.ceil(c / 7);
-}, H = (t) => l + g + t * D, M = (t) => new Date(t.getFullYear(), t.getMonth() - 1, 1), u = (t) => new Date(t.getFullYear(), t.getMonth() + 1, 1);
+import "../../../../../constants-D96yCePL.js";
+var E = (t) => {
+  const e = t.getFullYear(), a = t.getMonth(), n = new Date(e, a, 1), r = new Date(e, a + 1, 0), o = n.getDay() + r.getDate();
+  return Math.ceil(o / 7);
+}, H = (t) => 84 + t * 38, h = (t) => new Date(t.getFullYear(), t.getMonth() - 1, 1), c = (t) => new Date(t.getFullYear(), t.getMonth() + 1, 1);
 export {
   H as calculateCalendarHeight,
-  u as getNextMonth,
-  M as getPrevMonth,
-  h as getWeeksInMonth
+  c as getNextMonth,
+  h as getPrevMonth,
+  E as getWeeksInMonth
 };

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.js

@@ -1,105 +1,62 @@
-import { jsxs as l, jsx as e, Fragment as L } from "react/jsx-runtime";
-import { cn as $ } from "../../../../utils/index.js";
-import { dateTimeInputsVariants as k } from "./DateTimeInputs.variants.js";
-import { useDateTimeInputs as w } from "./hooks/useDateTimeInputs.js";
-import { StartInputFields as P } from "./components/StartInputFields/StartInputFields.js";
-import { EndInputFields as R } from "./components/EndInputFields/EndInputFields.js";
-const q = ({
-  className: m,
-  labelStartDate: u = "Start date",
-  labelEndDate: s = "End date",
-  labelTime: n = "Time",
-  ariaLabelStartDate: D = "Start date",
-  ariaLabelEndDate: h = "End date",
-  errorInvalidDate: p = "Invalid date",
-  errorDateNotAvailable: T = "Date is not available",
-  errorStartAfterEnd: g = "Start date must be before end date",
-  errorEndBeforeStart: E = "End date must be after start date",
-  classNames: a
-}) => {
-  const {
-    timeFormat: r,
-    showTime: d,
-    name: t,
-    disabled: i,
-    time: o,
-    startDateValue: c,
-    startDateError: V,
-    handleStartDateFocus: b,
-    handleStartDateChange: f,
-    handleStartDateBlur: C,
-    handleStartTimeChange: F,
-    endDateValue: S,
-    endDateError: I,
-    handleEndDateFocus: v,
-    handleEndDateChange: B,
-    handleEndDateBlur: x,
-    handleEndTimeChange: y,
-    startHiddenValue: j,
-    endHiddenValue: H
-  } = w({
+import { t as L } from "../../../../utils-DHuiYnx1.js";
+import { dateTimeInputsVariants as $ } from "./DateTimeInputs.variants.js";
+import { EndInputFields as k } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as w } from "./components/StartInputFields/StartInputFields.js";
+import { useDateTimeInputs as P } from "./hooks/useDateTimeInputs.js";
+import { Fragment as R, jsx as e, jsxs as l } from "react/jsx-runtime";
+var q = ({ className: m, labelStartDate: u = "Start date", labelEndDate: s = "End date", labelTime: n = "Time", ariaLabelStartDate: D = "Start date", ariaLabelEndDate: h = "End date", errorInvalidDate: p = "Invalid date", errorDateNotAvailable: T = "Date is not available", errorStartAfterEnd: g = "Start date must be before end date", errorEndBeforeStart: E = "End date must be after start date", classNames: a }) => {
+  const { timeFormat: r, showTime: d, name: t, disabled: i, time: o, startDateValue: V, startDateError: b, handleStartDateFocus: c, handleStartDateChange: f, handleStartDateBlur: C, handleStartTimeChange: F, endDateValue: S, endDateError: I, handleEndDateFocus: v, handleEndDateChange: B, handleEndDateBlur: x, handleEndTimeChange: y, startHiddenValue: j, endHiddenValue: H } = P({
     errorInvalidDate: p,
     errorDateNotAvailable: T,
     errorStartAfterEnd: g,
     errorEndBeforeStart: E
   });
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: $(k({ className: m }), a?.root),
-      children: [
-        /* @__PURE__ */ e(
-          P,
-          {
-            dateValue: c,
-            timeValue: o.startTime,
-            error: V,
-            disabled: i,
-            showTime: d,
-            timeFormat: r,
-            labelDate: u,
-            labelTime: n,
-            ariaLabelDate: D,
-            onDateChange: f,
-            onDateFocus: b,
-            onDateBlur: C,
-            onTimeChange: F,
-            classNames: a
-          }
-        ),
-        /* @__PURE__ */ e(
-          R,
-          {
-            dateValue: S,
-            timeValue: o.endTime,
-            error: I,
-            disabled: i,
-            showTime: d,
-            timeFormat: r,
-            labelDate: s,
-            labelTime: n,
-            ariaLabelDate: h,
-            onDateChange: B,
-            onDateFocus: v,
-            onDateBlur: x,
-            onTimeChange: y,
-            classNames: a
-          }
-        ),
-        t && /* @__PURE__ */ l(L, { children: [
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "hidden",
-              name: `${t}-start`,
-              value: j
-            }
-          ),
-          /* @__PURE__ */ e("input", { type: "hidden", name: `${t}-end`, value: H })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ l("div", {
+    className: L($({ className: m }), a?.root),
+    children: [
+      /* @__PURE__ */ e(w, {
+        dateValue: V,
+        timeValue: o.startTime,
+        error: b,
+        disabled: i,
+        showTime: d,
+        timeFormat: r,
+        labelDate: u,
+        labelTime: n,
+        ariaLabelDate: D,
+        onDateChange: f,
+        onDateFocus: c,
+        onDateBlur: C,
+        onTimeChange: F,
+        classNames: a
+      }),
+      /* @__PURE__ */ e(k, {
+        dateValue: S,
+        timeValue: o.endTime,
+        error: I,
+        disabled: i,
+        showTime: d,
+        timeFormat: r,
+        labelDate: s,
+        labelTime: n,
+        ariaLabelDate: h,
+        onDateChange: B,
+        onDateFocus: v,
+        onDateBlur: x,
+        onTimeChange: y,
+        classNames: a
+      }),
+      t && /* @__PURE__ */ l(R, { children: [/* @__PURE__ */ e("input", {
+        type: "hidden",
+        name: `${t}-start`,
+        value: j
+      }), /* @__PURE__ */ e("input", {
+        type: "hidden",
+        name: `${t}-end`,
+        value: H
+      })] })
+    ]
+  });
 };
 q.displayName = "DateRangePickerDateTimeInputs";
 export {

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.js

@@ -1,20 +1,25 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "w-full", "px-1"]), n = t([
+import { t as a } from "../../../../dist-DtEbXv47.js";
+var t = a([
+  "flex",
+  "gap-8",
+  "w-full",
+  "px-1"
+]), r = a([
   "flex",
   "gap-2",
   "items-center",
   "w-66.5"
-]), p = t([
+]), p = a([
   "flex",
   "flex-col",
   "gap-2",
   "w-38"
-]), l = t([
+]), l = a([
   "flex",
   "flex-col",
   "gap-2",
   "flex-1"
-]), r = t([
+]), i = a([
   "text-sm",
   "font-medium",
   "text-slate-500",
@@ -23,8 +28,8 @@ const a = t(["flex", "gap-8", "w-full", "px-1"]), n = t([
 ]);
 export {
   p as dateInputWrapperVariants,
-  n as dateTimeGroupVariants,
-  a as dateTimeInputsVariants,
-  r as inputLabelVariants,
+  r as dateTimeGroupVariants,
+  t as dateTimeInputsVariants,
+  i as inputLabelVariants,
   l as timeInputWrapperVariants
 };