@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

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-O2bqyJKW.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-O2bqyJKW.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
+};

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

@@ -0,0 +1,81 @@
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { ArrowRightIcon as D } from "../../../../assets/icons/components/ArrowRight.js";
+import { CheckIcon as T } from "../../../../assets/icons/components/Check.js";
+import { Typography as E } from "../../../Typography/Typography.js";
+import { RadioGroup as I } from "../../../RadioGroup/RadioGroup.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"
+}, 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(E, {
+      component: "span",
+      className: r(F(), e?.title),
+      "aria-label": C,
+      children: f
+    }), /* @__PURE__ */ i(I, {
+      name: "date-range-preset",
+      options: k,
+      value: t,
+      onValueChange: b,
+      direction: "col",
+      wrapperClassName: r("gap-1", e?.radioGroup)
+    })]
+  });
+};
+B.displayName = "DateRangePickerPresetPanel";
+export {
+  B as PresetPanel
+};

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

@@ -0,0 +1,90 @@
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var t = e([
+  "flex",
+  "flex-col",
+  "gap-2.5",
+  "pt-4",
+  "pb-3.5",
+  "px-2.5",
+  "border-r",
+  "transition-colors",
+  "w-[206px]"
+], {
+  variants: { divided: {
+    true: ["border-slate-200", "dark:border-metal-700"],
+    false: ["border-transparent"]
+  } },
+  defaultVariants: { divided: !0 }
+}), r = e([
+  "px-3.5",
+  "text-xs",
+  "font-medium",
+  "uppercase",
+  "text-slate-700",
+  "dark:text-metal-300",
+  "tracking-[0.25px]",
+  "leading-4"
+]), s = e([
+  "group",
+  "relative",
+  "flex",
+  "w-full",
+  "items-center",
+  "px-3.5",
+  "py-2",
+  "rounded-sm",
+  "[&>div]:flex-1"
+], {
+  variants: {
+    disabled: {
+      true: [],
+      false: ["hover:bg-slate-100", "dark:hover:bg-metal-600/40"]
+    },
+    active: {
+      true: ["bg-slate-100", "dark:bg-metal-600/40"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    disabled: !1,
+    active: !1
+  }
+}), l = e([
+  "shrink-0",
+  "transition-transform",
+  "duration-300"
+], {
+  variants: { expanded: {
+    true: ["rotate-180", "text-aurora-500"],
+    false: [
+      "text-slate-400",
+      "dark:text-metal-400",
+      "group-hover:text-aurora-500"
+    ]
+  } },
+  defaultVariants: { expanded: !1 }
+}), i = e([
+  "flex",
+  "w-full",
+  "items-center",
+  "justify-between",
+  "gap-2"
+]), o = e([
+  "mt-4",
+  "before:content-['']",
+  "before:absolute",
+  "before:-left-2.5",
+  "before:-right-2.5",
+  "before:-top-2.5",
+  "before:h-px",
+  "before:bg-slate-200",
+  "dark:before:bg-metal-700"
+]);
+export {
+  l as presetChevronVariants,
+  i as presetOptionLabelVariants,
+  s as presetOptionVariants,
+  t as presetPanelVariants,
+  o as presetSeparatorVariants,
+  r as presetTitleVariants
+};

package/dist/components/DateRangePicker/components/RightPanel/RightPanel.js

@@ -0,0 +1,37 @@
+import { t as d } from "../../../../utils-DnIJruo0.js";
+import { useDateRangePicker as l } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { hidesRightPanel as h } from "../../utils/right-panel/right-panel.js";
+import { jsx as e } from "react/jsx-runtime";
+import { AnimatePresence as p, motion as c } from "motion/react";
+var i = {
+  width: 0,
+  height: 0,
+  opacity: 0
+}, g = {
+  width: "auto",
+  height: "auto",
+  opacity: 1
+}, u = ({ children: a, className: t }) => {
+  const { animationDuration: n, preset: r, presets: o, revealCalendarOnCustom: s } = l(), m = h(r, o, s);
+  return /* @__PURE__ */ e(p, {
+    initial: !1,
+    children: !m && /* @__PURE__ */ e(c.div, {
+      className: "overflow-hidden",
+      initial: i,
+      animate: g,
+      exit: i,
+      transition: {
+        duration: n / 1e3,
+        ease: "easeInOut"
+      },
+      children: /* @__PURE__ */ e("div", {
+        className: d(t, "w-max"),
+        children: a
+      })
+    }, "right-panel")
+  });
+};
+u.displayName = "DateRangePickerRightPanel";
+export {
+  u as RightPanel
+};

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

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

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

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

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

@@ -0,0 +1,42 @@
+var a = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), r = (e) => (s) => {
+  const l = a(s), t = new Date(l);
+  return t.setDate(t.getDate() - (e - 1)), {
+    from: t,
+    to: l
+  };
+}, o = [
+  {
+    value: "today",
+    label: "Today",
+    resolve: (e) => ({
+      from: a(e),
+      to: a(e)
+    })
+  },
+  {
+    value: "current-month",
+    label: "Current month",
+    resolve: (e) => ({
+      from: new Date(e.getFullYear(), e.getMonth(), 1),
+      to: new Date(e.getFullYear(), e.getMonth() + 1, 0)
+    })
+  },
+  {
+    value: "custom",
+    label: "Custom",
+    resolve: () => ({})
+  },
+  {
+    value: "last-7-days",
+    label: "Last 7 days",
+    resolve: r(7)
+  },
+  {
+    value: "last-2-weeks",
+    label: "Last 2 weeks",
+    resolve: r(14)
+  }
+];
+export {
+  o as PRESET_OPTIONS
+};

package/dist/components/DateRangePicker/contexts/date-range-picker/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/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
+};