@konstructio/ui 0.1.2-alpha.98 → 0.1.3

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

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

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

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

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

@@ -1,4 +1,4 @@
-import "../../../../../constants-CLe3ZLC_.js";
+import "../../../../../constants-q2QnJrOb.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);

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

@@ -1,64 +1,70 @@
-import { t as L } from "../../../../utils-COaoD3PI.js";
+import { t as w } from "../../../../utils-DnIJruo0.js";
+import { useDateRangePicker as H } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { EndInputFields as P } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as R } from "./components/StartInputFields/StartInputFields.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
+import { useDateTimeInputs as q } from "./hooks/useDateTimeInputs.js";
+import { Fragment as M, jsx as e, jsxs as u } from "react/jsx-runtime";
+var O = ({ autoComplete: r, className: s, labelStartDate: D = "Start date", labelEndDate: h = "End date", labelTime: d = "Time", requiredDates: i = !1, ariaLabelStartDate: p = "Start date", ariaLabelEndDate: c = "End date", errorInvalidDate: g = "Invalid date", errorDateNotAvailable: T = "Date is not available", classNames: a }) => {
+  const { numberOfMonths: f } = H(), { timeFormat: o, showTime: t, name: n, disabled: l, time: m, startDateValue: E, startDateError: V, handleStartDateFocus: F, handleStartDateChange: C, handleStartDateBlur: I, handleStartTimeChange: S, endDateValue: b, endDateError: v, handleEndDateFocus: y, handleEndDateChange: B, handleEndDateBlur: L, handleEndTimeChange: k, startHiddenValue: x, endHiddenValue: j } = q({
+    errorInvalidDate: g,
+    errorDateNotAvailable: T
   });
-  return /* @__PURE__ */ l("div", {
-    className: L($({ className: m }), a?.root),
+  return /* @__PURE__ */ u("div", {
+    className: w($({
+      layout: f === 2 ? "row" : t ? "stacked" : "compact",
+      className: s
+    }), 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,
+      /* @__PURE__ */ e(R, {
+        autoComplete: r,
+        dateValue: E,
+        timeValue: m.startTime,
+        error: V,
+        disabled: l,
+        showTime: t,
+        timeFormat: o,
+        labelDate: D,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: p,
+        onDateChange: C,
+        onDateFocus: F,
+        onDateBlur: I,
+        onTimeChange: S,
         classNames: a
       }),
-      /* @__PURE__ */ e(k, {
-        dateValue: S,
-        timeValue: o.endTime,
-        error: I,
-        disabled: i,
-        showTime: d,
-        timeFormat: r,
-        labelDate: s,
-        labelTime: n,
-        ariaLabelDate: h,
+      /* @__PURE__ */ e(P, {
+        autoComplete: r,
+        dateValue: b,
+        timeValue: m.endTime,
+        error: v,
+        disabled: l,
+        showTime: t,
+        timeFormat: o,
+        labelDate: h,
+        labelTime: d,
+        required: i,
+        ariaLabelDate: c,
         onDateChange: B,
-        onDateFocus: v,
-        onDateBlur: x,
-        onTimeChange: y,
+        onDateFocus: y,
+        onDateBlur: L,
+        onTimeChange: k,
         classNames: a
       }),
-      t && /* @__PURE__ */ l(R, { children: [/* @__PURE__ */ e("input", {
+      n && /* @__PURE__ */ u(M, { children: [/* @__PURE__ */ e("input", {
         type: "hidden",
-        name: `${t}-start`,
-        value: j
+        name: `${n}-start`,
+        value: x
       }), /* @__PURE__ */ e("input", {
         type: "hidden",
-        name: `${t}-end`,
-        value: H
+        name: `${n}-end`,
+        value: j
       })] })
     ]
   });
 };
-q.displayName = "DateRangePickerDateTimeInputs";
+O.displayName = "DateRangePickerDateTimeInputs";
 export {
-  q as DateTimeInputs
+  O as DateTimeInputs
 };

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

@@ -1,20 +1,34 @@
-import { t as a } from "../../../../dist-Bcn6lMQe.js";
-var t = a([
-  "flex",
-  "gap-8",
-  "w-full",
-  "px-1"
-]), r = a([
+import { t as a } from "../../../../dist-B9GE4SXf.js";
+var e = a(["flex"], {
+  variants: { layout: {
+    row: [
+      "gap-8",
+      "w-full",
+      "px-1"
+    ],
+    compact: [
+      "gap-2",
+      "w-66.5",
+      "px-3"
+    ],
+    stacked: [
+      "flex-col",
+      "gap-4",
+      "w-66.5"
+    ]
+  } },
+  defaultVariants: { layout: "row" }
+}), r = a([
   "flex",
   "gap-2",
   "items-center",
   "w-66.5"
-]), p = a([
+]), l = a([
   "flex",
   "flex-col",
   "gap-2",
   "w-38"
-]), l = a([
+]), p = a([
   "flex",
   "flex-col",
   "gap-2",
@@ -25,11 +39,12 @@ var t = a([
   "text-slate-500",
   "dark:text-metal-400",
   "leading-5"
-]);
+]), n = a(["ml-1", "text-red-500"]);
 export {
-  p as dateInputWrapperVariants,
+  l as dateInputWrapperVariants,
   r as dateTimeGroupVariants,
-  t as dateTimeInputsVariants,
+  e as dateTimeInputsVariants,
   i as inputLabelVariants,
-  l as timeInputWrapperVariants
+  n as inputRequiredMarkVariants,
+  p as timeInputWrapperVariants
 };