@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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

@@ -0,0 +1,108 @@
+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;
+    return t && n === "left" ? e = [T, x] : t && n === "right" ? e = [I, h] : e = [h, T], B(Math.max(...e.map(J)));
+  }, [
+    t,
+    n,
+    h,
+    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 = 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);
+        }
+      }
+    }
+  }, [
+    u,
+    r,
+    t,
+    C
+  ]), R(() => {
+    t && !s && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
+      i(!0);
+    }));
+  }, [
+    t,
+    s,
+    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(() => {
+            requestAnimationFrame(() => {
+              S(!0);
+            });
+          });
+        });
+      }, W);
+      return () => clearTimeout(e);
+    }
+  }, [
+    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: f,
+    isAnimating: t,
+    enableTransition: k,
+    animateTransform: s,
+    calendarHeight: w,
+    carouselTotalWidth: L,
+    monthsToRender: [
+      G,
+      I,
+      h,
+      T,
+      x,
+      P
+    ],
+    handlePrevMonth: N,
+    handleNextMonth: X,
+    getTransform: $
+  };
+};
+export {
+  y as useTogetherCarousel
+};

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

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

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

@@ -0,0 +1,64 @@
+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: 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 {
+  q as DateTimeInputs
+};

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

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

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

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

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

@@ -0,0 +1,45 @@
+import { t as I } from "../../../../../../Input-GBMxM3Z7.js";
+import { t as r } from "../../../../../../utils-DHuiYnx1.js";
+import { Typography as n } from "../../../../../Typography/Typography.js";
+import { TimePicker as g } from "../../../../../TimePicker/TimePicker.js";
+import { dateInputWrapperVariants as S, dateTimeGroupVariants as V, inputLabelVariants as o, timeInputWrapperVariants as W } from "../../DateTimeInputs.variants.js";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var y = ({ dateValue: l, timeValue: m, error: u, disabled: p, showTime: e, timeFormat: d = "24", labelDate: c = "Start date", labelTime: f = "Time", ariaLabelDate: s = "Start date", onDateChange: h, onDateFocus: b, onDateBlur: v, onTimeChange: x, classNames: t }) => /* @__PURE__ */ i("div", {
+  className: r(V(), !e && "w-auto flex-1", t?.group),
+  children: [/* @__PURE__ */ i("div", {
+    className: r(S(), !e && "w-full flex-1", t?.dateWrapper),
+    children: [/* @__PURE__ */ a(n, {
+      component: "label",
+      className: r(o(), t?.label),
+      children: c
+    }), /* @__PURE__ */ a(I, {
+      value: l,
+      onChange: h,
+      onFocus: b,
+      onBlur: v,
+      error: u,
+      disabled: p,
+      className: r(t?.input),
+      "aria-label": s
+    })]
+  }), e && /* @__PURE__ */ i("div", {
+    className: r(W(), t?.timeWrapper),
+    children: [/* @__PURE__ */ a(n, {
+      component: "label",
+      className: r(o(), t?.label),
+      children: f
+    }), /* @__PURE__ */ a(g, {
+      mode: "input",
+      showList: !0,
+      format: d,
+      time: m,
+      onChange: x,
+      disabled: p,
+      name: "start time"
+    })]
+  })]
+});
+y.displayName = "StartInputFields";
+export {
+  y 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,181 @@
+import { useDateRangePicker as $ } from "../../../contexts/date-range-picker.hook.js";
+import { isDateSelectable as C } from "../../../utils/disabled-dates.js";
+import { autoFormatDateInput as B, combineDateAndTime as j, formatDateToDisplayString as T, formatDateToString as P, parseDateString as i, parseDisplayDateString as g } from "../../../utils/validation.js";
+import { useCallback as f, useEffect as q, useMemo as k, useRef as z, useState as R } from "react";
+var et = ({ errorInvalidDate: E, errorDateNotAvailable: V, errorStartAfterEnd: F, errorEndBeforeStart: b }) => {
+  const { range: t, time: u, timeFormat: G, showTime: J, name: K, disabled: L, blockedDays: w, blockedMonths: x, minDate: H, maxDate: M, setRange: n, setTime: y } = $(), c = k(() => ({
+    blockedDays: w,
+    blockedMonths: x,
+    minDate: H,
+    maxDate: M
+  }), [
+    w,
+    x,
+    H,
+    M
+  ]), v = z(!1), h = z(!1), [o, D] = R(() => T(t.from)), [s, p] = R(() => T(t.to)), [O, m] = R(), [Q, l] = R();
+  q(() => {
+    v.current || D(T(t.from));
+  }, [t.from]), q(() => {
+    h.current || p(T(t.to));
+  }, [t.to]);
+  const U = f(() => {
+    if (v.current = !0, m(void 0), t.from) D(P(t.from));
+    else {
+      const e = i(o) || g(o);
+      e && D(P(e));
+    }
+  }, [t.from, o]), W = f((e) => {
+    const d = e.target.value, r = B(d, o);
+    D(r), m(void 0);
+    const a = i(r);
+    if (a && C(a, c)) {
+      const S = t.to || i(s) || g(s);
+      if (S && a > S) return;
+      n({
+        ...t,
+        from: a
+      });
+    }
+  }, [
+    o,
+    s,
+    t,
+    n,
+    c
+  ]), X = f((e) => {
+    const d = e.currentTarget.value.trim();
+    if (d === "") {
+      v.current = !1, m(void 0), D(""), n({
+        ...t,
+        from: void 0
+      });
+      return;
+    }
+    const r = i(d);
+    if (!r) {
+      m(E);
+      return;
+    }
+    if (!C(r, c)) {
+      m(V);
+      return;
+    }
+    const a = i(s) || g(s);
+    if (a && r > a) {
+      m(F), h.current = !0, n({
+        from: void 0,
+        to: void 0
+      });
+      return;
+    }
+    v.current = !1, m(void 0), n({
+      ...t,
+      from: r
+    }), D(T(r));
+  }, [
+    t,
+    n,
+    c,
+    E,
+    V,
+    F,
+    s
+  ]), Y = f(() => {
+    if (h.current = !0, l(void 0), t.to) p(P(t.to));
+    else {
+      const e = i(s) || g(s);
+      e && p(P(e));
+    }
+  }, [t.to, s]), Z = f((e) => {
+    const d = e.target.value, r = B(d, s);
+    p(r), l(void 0);
+    const a = i(r);
+    if (a && C(a, c)) {
+      const S = t.from || i(o) || g(o);
+      if (S && a < S) return;
+      n({
+        ...t,
+        to: a
+      });
+    }
+  }, [
+    s,
+    o,
+    t,
+    n,
+    c
+  ]), _ = f((e) => {
+    const d = e.currentTarget.value.trim();
+    if (d === "") {
+      h.current = !1, l(void 0), p(""), n({
+        ...t,
+        to: void 0
+      });
+      return;
+    }
+    const r = i(d);
+    if (!r) {
+      l(E);
+      return;
+    }
+    if (!C(r, c)) {
+      l(V);
+      return;
+    }
+    const a = i(o) || g(o);
+    if (a && r < a) {
+      l(b), v.current = !0, n({
+        from: void 0,
+        to: void 0
+      });
+      return;
+    }
+    h.current = !1, l(void 0), n({
+      ...t,
+      to: r
+    }), p(T(r));
+  }, [
+    t,
+    n,
+    c,
+    E,
+    V,
+    b,
+    o
+  ]);
+  return {
+    timeFormat: G,
+    showTime: J,
+    name: K,
+    disabled: L,
+    time: u,
+    startDateValue: o,
+    startDateError: O,
+    handleStartDateFocus: U,
+    handleStartDateChange: W,
+    handleStartDateBlur: X,
+    handleStartTimeChange: f((e) => {
+      y({
+        ...u,
+        startTime: e
+      });
+    }, [u, y]),
+    endDateValue: s,
+    endDateError: Q,
+    handleEndDateFocus: Y,
+    handleEndDateChange: Z,
+    handleEndDateBlur: _,
+    handleEndTimeChange: f((e) => {
+      y({
+        ...u,
+        endTime: e
+      });
+    }, [u, y]),
+    startHiddenValue: k(() => j(t.from, u.startTime), [t.from, u.startTime]),
+    endHiddenValue: k(() => j(t.to, u.endTime), [t.to, u.endTime])
+  };
+};
+export {
+  et as useDateTimeInputs
+};

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.js

@@ -0,0 +1,47 @@
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { Typography as f } from "../../../Typography/Typography.js";
+import { RadioGroup as h } from "../../../RadioGroup/RadioGroup.js";
+import { useDateRangePicker as x } from "../../contexts/date-range-picker.hook.js";
+import { PRESET_OPTIONS as y } from "../../constants/presets.js";
+import { presetPanelVariants as g, presetTitleVariants as k } from "./PresetPanel.variants.js";
+import { useCallback as v, useMemo as T } from "react";
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+var E = {
+  today: "today",
+  "current-month": "currentMonth",
+  custom: "custom",
+  "last-7-days": "last7Days",
+  "last-2-weeks": "last2Weeks"
+}, R = ({ className: l, labelTimePeriod: m = "Time period", ariaLabelTimePeriod: p = "Time period options", presetLabels: r, classNames: t }) => {
+  const { preset: c, setPreset: o, disabled: s } = x(), d = v((e) => {
+    o(e);
+  }, [o]), u = T(() => y.map((e) => {
+    const n = E[e.value], P = n && r?.[n];
+    return {
+      value: e.value,
+      label: P || e.label,
+      disabled: s
+    };
+  }), [s, r]);
+  return /* @__PURE__ */ b("div", {
+    className: a(g({ className: l }), t?.root),
+    children: [/* @__PURE__ */ i(f, {
+      component: "span",
+      className: a(k(), t?.title),
+      "aria-label": p,
+      children: m
+    }), /* @__PURE__ */ i(h, {
+      name: "date-range-preset",
+      options: u,
+      value: c,
+      onValueChange: d,
+      direction: "col",
+      wrapperClassName: a("gap-4 pl-2", t?.radioGroup),
+      className: a("text-sm", "text-zinc-700", "dark:text-zinc-300", "[&_span]:text-zinc-700", "dark:[&_span]:text-zinc-300")
+    })]
+  });
+};
+R.displayName = "DateRangePickerPresetPanel";
+export {
+  R as PresetPanel
+};

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

@@ -0,0 +1,24 @@
+import { t as e } from "../../../../dist-DtEbXv47.js";
+var a = e([
+  "flex",
+  "flex-col",
+  "gap-6",
+  "p-4",
+  "pr-8",
+  "bg-slate-100",
+  "rounded-lg",
+  "dark:bg-metal-600/25",
+  "min-w-40"
+]), r = e([
+  "text-xs",
+  "font-medium",
+  "uppercase",
+  "text-slate-700",
+  "dark:text-metal-300",
+  "tracking-[0.25px]",
+  "leading-4"
+]);
+export {
+  a as presetPanelVariants,
+  r as presetTitleVariants
+};

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

@@ -0,0 +1,8 @@
+import { PresetPanel as e } from "./PresetPanel/PresetPanel.js";
+import { DateTimeInputs as o } from "./DateTimeInputs/DateTimeInputs.js";
+import { CalendarPanel as a } from "./CalendarPanel/CalendarPanel.js";
+export {
+  a as CalendarPanel,
+  o as DateTimeInputs,
+  e as PresetPanel
+};

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

@@ -0,0 +1,4 @@
+import { PRESET_OPTIONS as r } from "./presets.js";
+export {
+  r as PRESET_OPTIONS
+};

package/dist/components/DateRangePicker/constants/presets.js

@@ -0,0 +1,25 @@
+var a = [
+  {
+    value: "today",
+    label: "Today"
+  },
+  {
+    value: "current-month",
+    label: "Current month"
+  },
+  {
+    value: "custom",
+    label: "Custom"
+  },
+  {
+    value: "last-7-days",
+    label: "Last 7 days"
+  },
+  {
+    value: "last-2-weeks",
+    label: "Last 2 weeks"
+  }
+];
+export {
+  a as PRESET_OPTIONS
+};

package/dist/components/DateRangePicker/contexts/date-range-picker.context.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+var r = e(null);
+export {
+  r as DateRangePickerContext
+};

package/dist/components/DateRangePicker/contexts/date-range-picker.hook.js

@@ -0,0 +1,10 @@
+import { DateRangePickerContext as r } from "./date-range-picker.context.js";
+import { useContext as t } from "react";
+var a = () => {
+  const e = t(r);
+  if (!e) throw new Error("useDateRangePicker must be used within a DateRangePickerProvider");
+  return e;
+};
+export {
+  a as useDateRangePicker
+};