@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.111

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

@@ -0,0 +1,138 @@
+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 (I === "independent") {
+      if (N.current) {
+        N.current = !1;
+        return;
+      }
+      if (!r) {
+        const e = f.getTime(), t = u[0].getTime();
+        if (e !== t) {
+          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,
+    f,
+    r,
+    I
+  ]), g(() => {
+    if (I === "independent") {
+      if (d.current) {
+        d.current = !1;
+        return;
+      }
+      if (!n) {
+        const e = o.getTime(), t = u[1].getTime();
+        if (e !== t) {
+          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,
+    o,
+    n,
+    I
+  ]), g(() => {
+    r && !a && s && (T.current && T.current.offsetHeight, requestAnimationFrame(() => {
+      H(!0);
+    }));
+  }, [
+    r,
+    a,
+    s
+  ]), g(() => {
+    n && !c && l && (A.current && A.current.offsetHeight, requestAnimationFrame(() => {
+      q(!0);
+    }));
+  }, [
+    n,
+    c,
+    l
+  ]), g(() => {
+    if (r && a) {
+      const e = setTimeout(() => {
+        C(!1), requestAnimationFrame(() => {
+          T.current && T.current.offsetHeight, x((t) => s === "left" ? m(t) : h(t)), b(!1), S(null), H(!1), requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              C(!0);
+            });
+          });
+        });
+      }, F);
+      return () => clearTimeout(e);
+    }
+  }, [
+    r,
+    a,
+    F,
+    s
+  ]), g(() => {
+    if (n && c) {
+      const e = setTimeout(() => {
+        _(!1), requestAnimationFrame(() => {
+          A.current && A.current.offsetHeight, E((t) => l === "left" ? m(t) : h(t)), P(!1), D(null), q(!1), requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              _(!0);
+            });
+          });
+        });
+      }, F);
+      return () => clearTimeout(e);
+    }
+  }, [
+    n,
+    c,
+    F,
+    l
+  ]);
+  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,
+    r,
+    n,
+    s,
+    l
+  ]), $ = () => {
+    let e = -259;
+    return r && a && (s === "left" ? e = -2 * 259 : s === "right" && (e = 0)), `translateX(${e}px)`;
+  }, G = () => {
+    let e = -259;
+    return n && c && (l === "left" ? e = -2 * 259 : l === "right" && (e = 0)), `translateX(${e}px)`;
+  };
+  return {
+    leftInternalMonth: f,
+    leftPrevMonth: h(f),
+    leftNextMonth: m(f),
+    leftCarouselRef: T,
+    isLeftAnimating: r,
+    enableLeftTransition: w,
+    leftAnimateTransform: a,
+    getLeftTransform: $,
+    rightInternalMonth: o,
+    rightPrevMonth: h(o),
+    rightNextMonth: m(o),
+    rightCarouselRef: A,
+    isRightAnimating: n,
+    enableRightTransition: O,
+    rightAnimateTransform: c,
+    getRightTransform: G,
+    calendarHeight: X
+  };
+};
+export {
+  Q as useIndependentCarousel
+};

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

@@ -0,0 +1,93 @@
+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);
+  }, [
+    e,
+    n,
+    h,
+    m,
+    d,
+    M,
+    F
+  ]), w = 6 * 259 + 160, x = -2 * 291;
+  return H(() => {
+    if (W !== "independent") {
+      if (_.current) {
+        _.current = !1;
+        return;
+      }
+      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);
+        }
+      }
+    }
+  }, [
+    l,
+    s,
+    e,
+    W
+  ]), H(() => {
+    e && !o && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
+      i(!0);
+    }));
+  }, [
+    e,
+    o,
+    n
+  ]), 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(() => {
+              P(!0);
+            });
+          });
+        });
+      }, I);
+      return () => clearTimeout(t);
+    }
+  }, [
+    e,
+    o,
+    I,
+    n
+  ]), {
+    carouselRef: f,
+    isAnimating: e,
+    enableTransition: C,
+    animateTransform: o,
+    calendarHeight: O,
+    carouselTotalWidth: w,
+    monthsToRender: [
+      k,
+      M,
+      h,
+      m,
+      d,
+      G
+    ],
+    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 {
+  Z as useTogetherCarousel
+};

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

@@ -0,0 +1,11 @@
+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);
+}, 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,
+  c as getNextMonth,
+  h as getPrevMonth,
+  E as getWeeksInMonth
+};

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

@@ -0,0 +1,70 @@
+import { t as w } from "../../../../utils-DnIJruo0.js";
+import { useDateRangePicker as H } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { dateTimeInputsVariants as P } from "./DateTimeInputs.variants.js";
+import { EndInputFields as R } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as $ } from "./components/StartInputFields/StartInputFields.js";
+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__ */ u("div", {
+    className: w(P({
+      layout: f === 2 ? "row" : t ? "stacked" : "compact",
+      className: s
+    }), a?.root),
+    children: [
+      /* @__PURE__ */ e($, {
+        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(R, {
+        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: y,
+        onDateBlur: L,
+        onTimeChange: k,
+        classNames: a
+      }),
+      n && /* @__PURE__ */ u(M, { children: [/* @__PURE__ */ e("input", {
+        type: "hidden",
+        name: `${n}-start`,
+        value: x
+      }), /* @__PURE__ */ e("input", {
+        type: "hidden",
+        name: `${n}-end`,
+        value: j
+      })] })
+    ]
+  });
+};
+O.displayName = "DateRangePickerDateTimeInputs";
+export {
+  O as DateTimeInputs
+};

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

@@ -0,0 +1,50 @@
+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"
+]), l = a([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-38"
+]), p = a([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "flex-1"
+]), i = a([
+  "text-sm",
+  "font-medium",
+  "text-slate-500",
+  "dark:text-metal-400",
+  "leading-5"
+]), n = a(["ml-1", "text-red-500"]);
+export {
+  l as dateInputWrapperVariants,
+  r as dateTimeGroupVariants,
+  e as dateTimeInputsVariants,
+  i as inputLabelVariants,
+  n as inputRequiredMarkVariants,
+  p as timeInputWrapperVariants
+};

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

@@ -0,0 +1,57 @@
+import { t as F } from "../../../../../../Input-2M2I_H60.js";
+import { t as e } from "../../../../../../utils-DnIJruo0.js";
+import { Typography as p } from "../../../../../Typography/Typography.js";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.js";
+import { dateInputWrapperVariants as y, dateTimeGroupVariants as C, inputLabelVariants as l, inputRequiredMarkVariants as L, timeInputWrapperVariants as N } from "../../DateTimeInputs.variants.js";
+import { useId as j } from "react";
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+var k = ({ autoComplete: m = "off", dateValue: d, timeValue: u, error: s, disabled: n, showTime: i, timeFormat: c = "24", labelDate: f = "End date", labelTime: h = "Time", required: I = !1, ariaLabelDate: b = "End date", ariaLabelTime: v = "End time", onDateChange: x, onDateFocus: E, onDateBlur: V, onTimeChange: g, classNames: r }) => {
+  const o = `${j()}-time`;
+  return /* @__PURE__ */ t("div", {
+    className: e(C(), !i && "w-auto flex-1", r?.group),
+    children: [/* @__PURE__ */ t("div", {
+      className: e(y(), !i && "w-full flex-1", r?.dateWrapper),
+      children: [/* @__PURE__ */ t(p, {
+        component: "label",
+        className: e(l(), r?.label),
+        children: [f, I && /* @__PURE__ */ a("span", {
+          "aria-hidden": !0,
+          className: e(L()),
+          children: "*"
+        })]
+      }), /* @__PURE__ */ a(F, {
+        value: d,
+        onChange: x,
+        onFocus: E,
+        onBlur: V,
+        error: s,
+        disabled: n,
+        className: e(r?.input),
+        "aria-label": b,
+        autoComplete: m
+      })]
+    }), i && /* @__PURE__ */ t("div", {
+      className: e(N(), r?.timeWrapper),
+      children: [/* @__PURE__ */ a(p, {
+        component: "label",
+        htmlFor: o,
+        className: e(l(), r?.label),
+        children: h
+      }), /* @__PURE__ */ a(W, {
+        mode: "input",
+        showList: !0,
+        format: c,
+        time: u,
+        onChange: g,
+        disabled: n,
+        ariaLabel: v,
+        id: o,
+        name: "end time"
+      })]
+    })]
+  });
+};
+k.displayName = "EndInputFields";
+export {
+  k as EndInputFields
+};

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

@@ -0,0 +1,57 @@
+import { t as F } from "../../../../../../Input-2M2I_H60.js";
+import { t } from "../../../../../../utils-DnIJruo0.js";
+import { Typography as p } from "../../../../../Typography/Typography.js";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.js";
+import { dateInputWrapperVariants as y, dateTimeGroupVariants as C, inputLabelVariants as l, inputRequiredMarkVariants as L, timeInputWrapperVariants as N } from "../../DateTimeInputs.variants.js";
+import { useId as j } from "react";
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+var k = ({ autoComplete: m = "off", dateValue: d, timeValue: u, error: s, disabled: n, showTime: i, timeFormat: c = "24", labelDate: f = "Start date", labelTime: h = "Time", required: I = !1, ariaLabelDate: b = "Start date", ariaLabelTime: v = "Start time", onDateChange: x, onDateFocus: S, onDateBlur: V, onTimeChange: g, classNames: r }) => {
+  const o = `${j()}-time`;
+  return /* @__PURE__ */ e("div", {
+    className: t(C(), !i && "w-auto flex-1", r?.group),
+    children: [/* @__PURE__ */ e("div", {
+      className: t(y(), !i && "w-full flex-1", r?.dateWrapper),
+      children: [/* @__PURE__ */ e(p, {
+        component: "label",
+        className: t(l(), r?.label),
+        children: [f, I && /* @__PURE__ */ a("span", {
+          "aria-hidden": !0,
+          className: t(L()),
+          children: "*"
+        })]
+      }), /* @__PURE__ */ a(F, {
+        value: d,
+        onChange: x,
+        onFocus: S,
+        onBlur: V,
+        error: s,
+        disabled: n,
+        className: t(r?.input),
+        "aria-label": b,
+        autoComplete: m
+      })]
+    }), i && /* @__PURE__ */ e("div", {
+      className: t(N(), r?.timeWrapper),
+      children: [/* @__PURE__ */ a(p, {
+        component: "label",
+        htmlFor: o,
+        className: t(l(), r?.label),
+        children: h
+      }), /* @__PURE__ */ a(W, {
+        mode: "input",
+        showList: !0,
+        format: c,
+        time: u,
+        onChange: g,
+        disabled: n,
+        ariaLabel: v,
+        id: o,
+        name: "start time"
+      })]
+    })]
+  });
+};
+k.displayName = "StartInputFields";
+export {
+  k as StartInputFields
+};

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

@@ -0,0 +1,6 @@
+import { EndInputFields as r } from "./EndInputFields/EndInputFields.js";
+import { StartInputFields as p } from "./StartInputFields/StartInputFields.js";
+export {
+  r as EndInputFields,
+  p as StartInputFields
+};

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

@@ -0,0 +1,4 @@
+import { useDateTimeInputs as t } from "./useDateTimeInputs.js";
+export {
+  t as useDateTimeInputs
+};

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

@@ -0,0 +1,150 @@
+import { useDateRangePicker as Y } from "../../../contexts/date-range-picker/date-range-picker.hook.js";
+import { autoFormatDateInput as F, combineDateAndTime as P, formatDateToDisplayString as Z, formatDateToString as h, parseDateString as o, parseDisplayDateString as T } from "../../../utils/validation/validation.js";
+import { isDateSelectable as V } from "../../../utils/disabled-dates/disabled-dates.js";
+import { useCallback as R, useEffect as k, useMemo as w, useRef as x, useState as y } from "react";
+var et = ({ errorInvalidDate: b, errorDateNotAvailable: C }) => {
+  const { range: t, time: s, timeFormat: B, showTime: H, name: M, disabled: I, blockedDays: j, blockedMonths: q, dateDisplayFormat: z, minDate: A, maxDate: G, setRange: d, setTime: S } = Y(), E = {
+    blockedDays: j,
+    blockedMonths: q,
+    minDate: A,
+    maxDate: G
+  }, n = z === "numeric" ? h : Z, p = x(!1), v = x(!1), [u, f] = y(() => n(t.from)), [c, m] = y(() => n(t.to)), [J, l] = y(), [K, D] = y();
+  k(() => {
+    p.current || f(n(t.from));
+  }, [t.from]), k(() => {
+    v.current || m(n(t.to));
+  }, [t.to]);
+  const L = () => {
+    if (p.current = !0, l(void 0), t.from) f(h(t.from));
+    else {
+      const a = o(u) || T(u);
+      a && f(h(a));
+    }
+  }, O = (a) => {
+    const i = a.target.value, e = F(i, u);
+    f(e), l(void 0);
+    const r = o(e);
+    if (r && V(r, E)) {
+      const g = t.to || o(c) || T(c);
+      if (g && r > g) return;
+      d({
+        ...t,
+        from: r
+      });
+    }
+  }, Q = (a) => {
+    const i = a.currentTarget.value.trim();
+    if (i === "") {
+      p.current = !1, l(void 0), f(""), d({
+        ...t,
+        from: void 0
+      });
+      return;
+    }
+    const e = o(i);
+    if (!e) {
+      l(b);
+      return;
+    }
+    if (!V(e, E)) {
+      l(C);
+      return;
+    }
+    const r = o(c) || T(c);
+    if (r && e > r) {
+      p.current = !1, v.current = !1, l(void 0), D(void 0), d({
+        ...t,
+        from: r,
+        to: e
+      }), f(n(r)), m(n(e));
+      return;
+    }
+    p.current = !1, l(void 0), d({
+      ...t,
+      from: e
+    }), f(n(e));
+  }, U = () => {
+    if (v.current = !0, D(void 0), t.to) m(h(t.to));
+    else {
+      const a = o(c) || T(c);
+      a && m(h(a));
+    }
+  }, W = (a) => {
+    const i = a.target.value, e = F(i, c);
+    m(e), D(void 0);
+    const r = o(e);
+    if (r && V(r, E)) {
+      const g = t.from || o(u) || T(u);
+      if (g && r < g) return;
+      d({
+        ...t,
+        to: r
+      });
+    }
+  }, X = (a) => {
+    const i = a.currentTarget.value.trim();
+    if (i === "") {
+      v.current = !1, D(void 0), m(""), d({
+        ...t,
+        to: void 0
+      });
+      return;
+    }
+    const e = o(i);
+    if (!e) {
+      D(b);
+      return;
+    }
+    if (!V(e, E)) {
+      D(C);
+      return;
+    }
+    const r = o(u) || T(u);
+    if (r && e < r) {
+      p.current = !1, v.current = !1, l(void 0), D(void 0), d({
+        ...t,
+        from: e,
+        to: r
+      }), f(n(e)), m(n(r));
+      return;
+    }
+    v.current = !1, D(void 0), d({
+      ...t,
+      to: e
+    }), m(n(e));
+  };
+  return {
+    timeFormat: B,
+    showTime: H,
+    name: M,
+    disabled: I,
+    time: s,
+    startDateValue: u,
+    startDateError: J,
+    handleStartDateFocus: L,
+    handleStartDateChange: O,
+    handleStartDateBlur: Q,
+    handleStartTimeChange: R((a) => {
+      S({
+        ...s,
+        startTime: a
+      });
+    }, [s, S]),
+    endDateValue: c,
+    endDateError: K,
+    handleEndDateFocus: U,
+    handleEndDateChange: W,
+    handleEndDateBlur: X,
+    handleEndTimeChange: R((a) => {
+      S({
+        ...s,
+        endTime: a
+      });
+    }, [s, S]),
+    startHiddenValue: w(() => P(t.from, s.startTime), [t.from, s.startTime]),
+    endHiddenValue: w(() => P(t.to, s.endTime), [t.to, s.endTime])
+  };
+};
+export {
+  et as useDateTimeInputs
+};