@konstructio/ui 0.1.2-alpha.98 → 0.1.3

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

@@ -1,45 +1,57 @@
-import { t as I } from "../../../../../../Input-BZG7N8m1.js";
-import { t as r } from "../../../../../../utils-COaoD3PI.js";
+import { t as e } from "../../../../../../utils-DnIJruo0.js";
+import { t as F } from "../../../../../../Input-C1Js3pbF.js";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.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
+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"
+      })]
     })]
-  }), 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";
+  });
+};
+k.displayName = "EndInputFields";
 export {
-  y as EndInputFields
+  k as EndInputFields
 };

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

@@ -1,45 +1,57 @@
-import { t as I } from "../../../../../../Input-BZG7N8m1.js";
-import { t as r } from "../../../../../../utils-COaoD3PI.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
+import { t } from "../../../../../../utils-DnIJruo0.js";
+import { t as F } from "../../../../../../Input-C1Js3pbF.js";
+import { TimePicker as W } from "../../../../../TimePicker/TimePicker.js";
+import { Typography as p } from "../../../../../Typography/Typography.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"
+      })]
     })]
-  }), 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";
+  });
+};
+k.displayName = "StartInputFields";
 export {
-  y as StartInputFields
+  k as StartInputFields
 };

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

@@ -1,179 +1,148 @@
-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));
+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 U = f(() => {
-    if (v.current = !0, m(void 0), t.from) D(P(t.from));
+  const L = () => {
+    if (p.current = !0, l(void 0), t.from) f(h(t.from));
     else {
-      const e = i(o) || g(o);
-      e && D(P(e));
+      const a = o(u) || T(u);
+      a && f(h(a));
     }
-  }, [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({
+  }, 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: a
+        from: r
       });
     }
-  }, [
-    o,
-    s,
-    t,
-    n,
-    c
-  ]), X = f((e) => {
-    const d = e.currentTarget.value.trim();
-    if (d === "") {
-      v.current = !1, m(void 0), D(""), n({
+  }, Q = (a) => {
+    const i = a.currentTarget.value.trim();
+    if (i === "") {
+      p.current = !1, l(void 0), f(""), d({
         ...t,
         from: void 0
       });
       return;
     }
-    const r = i(d);
-    if (!r) {
-      m(E);
+    const e = o(i);
+    if (!e) {
+      l(b);
       return;
     }
-    if (!C(r, c)) {
-      m(V);
+    if (!V(e, E)) {
+      l(C);
       return;
     }
-    const a = i(s) || g(s);
-    if (a && r > a) {
-      m(F), h.current = !0, n({
-        from: void 0,
-        to: void 0
-      });
+    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;
     }
-    v.current = !1, m(void 0), n({
+    p.current = !1, l(void 0), d({
       ...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));
+      from: e
+    }), f(n(e));
+  }, U = () => {
+    if (v.current = !0, D(void 0), t.to) m(h(t.to));
     else {
-      const e = i(s) || g(s);
-      e && p(P(e));
+      const a = o(c) || T(c);
+      a && m(h(a));
     }
-  }, [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({
+  }, 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: a
+        to: r
       });
     }
-  }, [
-    s,
-    o,
-    t,
-    n,
-    c
-  ]), _ = f((e) => {
-    const d = e.currentTarget.value.trim();
-    if (d === "") {
-      h.current = !1, l(void 0), p(""), n({
+  }, X = (a) => {
+    const i = a.currentTarget.value.trim();
+    if (i === "") {
+      v.current = !1, D(void 0), m(""), d({
         ...t,
         to: void 0
       });
       return;
     }
-    const r = i(d);
-    if (!r) {
-      l(E);
+    const e = o(i);
+    if (!e) {
+      D(b);
       return;
     }
-    if (!C(r, c)) {
-      l(V);
+    if (!V(e, E)) {
+      D(C);
       return;
     }
-    const a = i(o) || g(o);
-    if (a && r < a) {
-      l(b), v.current = !0, n({
-        from: void 0,
-        to: void 0
-      });
+    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;
     }
-    h.current = !1, l(void 0), n({
+    v.current = !1, D(void 0), d({
       ...t,
-      to: r
-    }), p(T(r));
-  }, [
-    t,
-    n,
-    c,
-    E,
-    V,
-    b,
-    o
-  ]);
+      to: e
+    }), m(n(e));
+  };
   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
+    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
       });
-    }, [u, y]),
-    endDateValue: s,
-    endDateError: Q,
-    handleEndDateFocus: Y,
-    handleEndDateChange: Z,
-    handleEndDateBlur: _,
-    handleEndTimeChange: f((e) => {
-      y({
-        ...u,
-        endTime: e
+    }, [s, S]),
+    endDateValue: c,
+    endDateError: K,
+    handleEndDateFocus: U,
+    handleEndDateChange: W,
+    handleEndDateBlur: X,
+    handleEndTimeChange: R((a) => {
+      S({
+        ...s,
+        endTime: a
       });
-    }, [u, y]),
-    startHiddenValue: k(() => j(t.from, u.startTime), [t.from, u.startTime]),
-    endHiddenValue: k(() => j(t.to, u.endTime), [t.to, u.endTime])
+    }, [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 {

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

@@ -1,47 +1,81 @@
-import { t as a } from "../../../../utils-COaoD3PI.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 = {
+import { ArrowRightIcon as D } from "../../../../assets/icons/components/ArrowRight.js";
+import { CheckIcon as T } from "../../../../assets/icons/components/Check.js";
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { RadioGroup as E } from "../../../RadioGroup/RadioGroup.js";
+import { Typography as I } from "../../../Typography/Typography.js";
+import { useDateRangePicker as M } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { hidesRightPanel as O } from "../../utils/right-panel/right-panel.js";
+import { presetChevronVariants as A, presetOptionLabelVariants as L, presetOptionVariants as N, presetPanelVariants as j, presetSeparatorVariants as z, presetTitleVariants as F } from "./PresetPanel.variants.js";
+import { useCallback as G, useMemo as S } from "react";
+import { Fragment as _, jsx as i, jsxs as g } from "react/jsx-runtime";
+var $ = {
   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, {
+}, B = ({ className: P, labelTimePeriod: f = "Time period", ariaLabelTimePeriod: C = "Time period options", presetLabels: u, classNames: e }) => {
+  const { animationDuration: y, preset: t, presets: a, setPreset: n, disabled: l, revealCalendarOnCustom: p } = M(), x = !O(t, a, p), b = G((m) => {
+    n(m);
+  }, [n]), k = S(() => {
+    const m = /* @__PURE__ */ new Date(), d = a.length - 1, h = d >= 0 ? a[d].resolve(m) : {}, R = a.length > 1 && !h.from && !h.to ? d : -1;
+    return a.map((o, V) => {
+      const v = $[o.value], w = v && u?.[v], s = V === R, c = p && s && o.value === t;
+      return {
+        value: o.value,
+        label: /* @__PURE__ */ g(_, { children: [w || o.label, s ? /* @__PURE__ */ i(D, {
+          size: 20,
+          "aria-hidden": !0,
+          className: r(A({ expanded: c }))
+        }) : o.value === t && /* @__PURE__ */ i(T, {
+          size: 20,
+          "aria-hidden": !0,
+          className: "shrink-0 text-aurora-500"
+        })] }),
+        disabled: l,
+        className: "hidden",
+        labelTextClassName: r(L()),
+        onClick: c ? () => {
+          n(null);
+        } : void 0,
+        wrapperClassName: r(N({
+          disabled: l,
+          active: c
+        }), e?.option, s && z(), s && e?.separator)
+      };
+    });
+  }, [
+    a,
+    t,
+    l,
+    u,
+    p,
+    n,
+    e?.option,
+    e?.separator
+  ]);
+  return /* @__PURE__ */ g("div", {
+    className: r(j({
+      className: P,
+      divided: x
+    }), e?.root),
+    style: { transitionDuration: `${y}ms` },
+    children: [/* @__PURE__ */ i(I, {
       component: "span",
-      className: a(k(), t?.title),
-      "aria-label": p,
-      children: m
-    }), /* @__PURE__ */ i(h, {
+      className: r(F(), e?.title),
+      "aria-label": C,
+      children: f
+    }), /* @__PURE__ */ i(E, {
       name: "date-range-preset",
-      options: u,
-      value: c,
-      onValueChange: d,
+      options: k,
+      value: t,
+      onValueChange: b,
       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")
+      wrapperClassName: r("gap-1", e?.radioGroup)
     })]
   });
 };
-R.displayName = "DateRangePickerPresetPanel";
+B.displayName = "DateRangePickerPresetPanel";
 export {
-  R as PresetPanel
+  B as PresetPanel
 };