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

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

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

@@ -0,0 +1,124 @@
+import { DateRangePickerContext as rt } from "./date-range-picker.context.js";
+import { PRESET_OPTIONS as ot } from "../../constants/presets/presets.js";
+import { calculatePresetRange as w } from "../../utils/presets/presets.js";
+import { getDisplayedMonths as nt } from "../../utils/displayed-months/displayed-months.js";
+import { canNavigateToNextMonth as q, canNavigateToPrevMonth as z } from "../../utils/disabled-dates/disabled-dates.js";
+import { useCallback as o, useMemo as a, useState as Y } from "react";
+import { jsx as at } from "react/jsx-runtime";
+var Mt = ({ children: A, defaultRange: l, defaultTime: B, defaultPreset: p = "custom", presets: g = ot, timeFormat: G = "24", showTime: H = !0, name: J, disabled: K = !1, animationDuration: O = 500, blockedDays: Q = [], blockedMonths: U = [], minDate: u, maxDate: i, hideDisabledNavigation: W = !1, showOutsideDays: X = !1, navigationMode: Z = "together", numberOfMonths: T = 2, dateDisplayFormat: $ = "long", revealCalendarOnCustom: C = !1, onRangeChange: c, onDateChange: v, onPresetChange: S }) => {
+  const [M, x] = Y(() => l || w(p, g)), [s, tt] = Y(() => B ?? {}), [y, D] = Y(p), [r, n] = Y(() => {
+    const t = l || w(p, g), e = t?.from ?? t?.to ?? /* @__PURE__ */ new Date();
+    return nt(e, i, T);
+  }), L = r[T - 1], k = o((t) => {
+    x(t), D("custom"), c?.({
+      ...t,
+      ...s
+    }), v?.(t);
+  }, [
+    s,
+    c,
+    v
+  ]), d = o((t) => {
+    tt(t), c?.({
+      ...M,
+      ...t
+    });
+  }, [M, c]), E = o((t) => {
+    D(t);
+    const e = w(t, g);
+    S?.(t, e), !(!e.from && !e.to) && (x(e), c?.({
+      ...e,
+      ...s
+    }), v?.(e));
+  }, [
+    g,
+    s,
+    c,
+    v,
+    S
+  ]), f = a(() => z(r[0], u), [r, u]), N = a(() => q(L, i), [L, i]), R = o(() => {
+    f && n(([t, e]) => [new Date(t.getFullYear(), t.getMonth() - 1, 1), new Date(e.getFullYear(), e.getMonth() - 1, 1)]);
+  }, [f]), V = o(() => {
+    N && n(([t, e]) => [new Date(t.getFullYear(), t.getMonth() + 1, 1), new Date(e.getFullYear(), e.getMonth() + 1, 1)]);
+  }, [N]), m = a(() => z(r[0], u), [r, u]), h = a(() => {
+    const t = r[0], e = r[1];
+    return new Date(t.getFullYear(), t.getMonth() + 1, 1).getTime() < e.getTime();
+  }, [r]), P = a(() => {
+    const t = r[0], e = r[1];
+    return new Date(e.getFullYear(), e.getMonth() - 1, 1).getTime() > t.getTime();
+  }, [r]), F = a(() => q(r[1], i), [r, i]), j = o(() => {
+    m && n(([t, e]) => [new Date(t.getFullYear(), t.getMonth() - 1, 1), e]);
+  }, [m]), I = o(() => {
+    h && n(([t, e]) => [new Date(t.getFullYear(), t.getMonth() + 1, 1), e]);
+  }, [h]), _ = o(() => {
+    P && n(([t, e]) => [t, new Date(e.getFullYear(), e.getMonth() - 1, 1)]);
+  }, [P]), b = o(() => {
+    F && n(([t, e]) => [t, new Date(e.getFullYear(), e.getMonth() + 1, 1)]);
+  }, [F]), et = a(() => ({
+    range: M,
+    time: s,
+    preset: y,
+    displayedMonths: r,
+    canNavigatePrev: f,
+    canNavigateNext: N,
+    canLeftNavigatePrev: m,
+    canLeftNavigateNext: h,
+    canRightNavigatePrev: P,
+    canRightNavigateNext: F,
+    setRange: k,
+    setTime: d,
+    setPreset: E,
+    navigatePrevMonth: R,
+    navigateNextMonth: V,
+    navigateLeftPrev: j,
+    navigateLeftNext: I,
+    navigateRightPrev: _,
+    navigateRightNext: b,
+    setDisplayedMonths: n
+  }), [
+    M,
+    s,
+    y,
+    r,
+    f,
+    N,
+    m,
+    h,
+    P,
+    F,
+    k,
+    d,
+    E,
+    R,
+    V,
+    j,
+    I,
+    _,
+    b
+  ]);
+  return /* @__PURE__ */ at(rt.Provider, {
+    value: {
+      ...et,
+      presets: g,
+      timeFormat: G,
+      showTime: H,
+      name: J,
+      disabled: K,
+      animationDuration: O,
+      blockedDays: Q,
+      blockedMonths: U,
+      minDate: u,
+      maxDate: i,
+      hideDisabledNavigation: W,
+      revealCalendarOnCustom: C,
+      showOutsideDays: X,
+      navigationMode: Z,
+      numberOfMonths: T,
+      dateDisplayFormat: $
+    },
+    children: A
+  });
+};
+export {
+  Mt as DateRangePickerProvider
+};

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

@@ -0,0 +1,8 @@
+import { DateRangePickerContext as r } from "./date-range-picker/date-range-picker.context.js";
+import { useDateRangePicker as t } from "./date-range-picker/date-range-picker.hook.js";
+import { DateRangePickerProvider as a } from "./date-range-picker/date-range-picker.provider.js";
+export {
+  r as DateRangePickerContext,
+  a as DateRangePickerProvider,
+  t as useDateRangePicker
+};

package/dist/components/DateRangePicker/utils/disabled-dates/disabled-dates.js

@@ -0,0 +1,31 @@
+var n = (e) => {
+  const t = new Date(e);
+  return t.setHours(0, 0, 0, 0), t;
+}, l = (e, t) => {
+  const r = n(e);
+  return t.some((a) => n(a).getTime() === r.getTime());
+}, u = (e, t) => {
+  const r = e.getFullYear(), a = e.getMonth();
+  return t.some((o) => o.year === r && o.month === a);
+}, i = (e, t) => t ? n(e) < n(t) : !1, c = (e, t) => t ? n(e) > n(t) : !1, f = (e, t) => {
+  const { blockedDays: r, blockedMonths: a, minDate: o, maxDate: s } = t;
+  return !(l(e, r) || u(e, a) || i(e, o) || c(e, s));
+}, h = (e) => {
+  const { blockedDays: t, blockedMonths: r, minDate: a, maxDate: o } = e;
+  if (!(t.length === 0 && r.length === 0 && !a && !o))
+    return (s) => !f(s, e);
+}, v = (e, t) => {
+  if (!t) return !0;
+  const r = new Date(e.getFullYear(), e.getMonth() - 1, 1), a = new Date(r.getFullYear(), r.getMonth() + 1, 0);
+  return n(a) >= n(t);
+}, D = (e, t) => {
+  if (!t) return !0;
+  const r = new Date(e.getFullYear(), e.getMonth() + 1, 1);
+  return n(r) <= n(t);
+};
+export {
+  D as canNavigateToNextMonth,
+  v as canNavigateToPrevMonth,
+  h as createDisabledMatcher,
+  f as isDateSelectable
+};

package/dist/components/DateRangePicker/utils/displayed-months/displayed-months.js

@@ -0,0 +1,12 @@
+var r = (t) => new Date(t.getFullYear(), t.getMonth(), 1), a = (t, e) => new Date(t.getFullYear(), t.getMonth() + e, 1), s = (t, e, l = 2) => {
+  let n = a(r(t), l - 1);
+  if (e) {
+    const h = r(e);
+    n > h && (n = h);
+  }
+  const o = a(n, 1 - l);
+  return [o, a(o, 1)];
+};
+export {
+  s as getDisplayedMonths
+};

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

@@ -0,0 +1,26 @@
+import { PRESET_OPTIONS as e } from "../constants/presets/presets.js";
+import { calculatePresetRange as r } from "./presets/presets.js";
+import { getDisplayedMonths as o } from "./displayed-months/displayed-months.js";
+import { hidesRightPanel as n } from "./right-panel/right-panel.js";
+import { autoFormatDateInput as g, combineDateAndTime as s, formatDateToDisplayString as D, formatDateToString as T, formatTimeToString as l, getMonthName as S, isValidTimeString as f, parseDateString as c, parseDisplayDateString as h, parseTimeString as d } from "./validation/validation.js";
+import { canNavigateToNextMonth as N, canNavigateToPrevMonth as P, createDisabledMatcher as b, isDateSelectable as u } from "./disabled-dates/disabled-dates.js";
+export {
+  e as PRESET_OPTIONS,
+  g as autoFormatDateInput,
+  r as calculatePresetRange,
+  N as canNavigateToNextMonth,
+  P as canNavigateToPrevMonth,
+  s as combineDateAndTime,
+  b as createDisabledMatcher,
+  D as formatDateToDisplayString,
+  T as formatDateToString,
+  l as formatTimeToString,
+  o as getDisplayedMonths,
+  S as getMonthName,
+  n as hidesRightPanel,
+  u as isDateSelectable,
+  f as isValidTimeString,
+  c as parseDateString,
+  h as parseDisplayDateString,
+  d as parseTimeString
+};

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

@@ -0,0 +1,5 @@
+import { PRESET_OPTIONS as o } from "../../constants/presets/presets.js";
+var n = (e, r = o, a = /* @__PURE__ */ new Date()) => r.find(({ value: t }) => t === e)?.resolve(a) ?? {};
+export {
+  n as calculatePresetRange
+};

package/dist/components/DateRangePicker/utils/right-panel/right-panel.js

@@ -0,0 +1,9 @@
+import { calculatePresetRange as n } from "../presets/presets.js";
+var t = (e, r, a) => {
+  if (!a) return !1;
+  const o = n(e, r);
+  return e === null || !!o.from || !!o.to;
+};
+export {
+  t as hidesRightPanel
+};

package/dist/components/DateRangePicker/utils/validation/validation.js

@@ -0,0 +1,67 @@
+var p = (t, n) => {
+  if (!t) return "";
+  const e = new Date(t);
+  return n && e.setHours(n.getHours(), n.getMinutes(), n.getSeconds()), e.toISOString();
+}, c = (t, n) => {
+  const e = t.length < n.length;
+  let r = t.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
+  return r = r.slice(0, 10), e || (/^\d{2}$/.test(r) || /^\d{2}\/\d{2}$/.test(r)) && (r = r + "/"), r;
+}, g = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], l = (t, n = "24") => {
+  if (!t) return !0;
+  const [e, r] = t.split(":").map(Number);
+  return isNaN(e) || isNaN(r) ? !1 : n === "24" ? e >= 0 && e <= 23 && r >= 0 && r <= 59 : e >= 1 && e <= 12 && r >= 0 && r <= 59;
+}, S = (t, n = "24", e) => {
+  if (!t || !l(t, n)) return;
+  const [r, s] = t.split(":").map(Number), a = /* @__PURE__ */ new Date();
+  let u = r;
+  return n === "12" && e && (e === "PM" && r !== 12 ? u = r + 12 : e === "AM" && r === 12 && (u = 0)), a.setHours(u, s, 0, 0), a;
+}, N = (t, n = "24") => {
+  if (!t) return "";
+  const e = t.getHours(), r = t.getMinutes();
+  if (n === "24") return `${e.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  const s = e >= 12 ? "PM" : "AM";
+  return `${(e % 12 || 12).toString().padStart(2, "0")}:${r.toString().padStart(2, "0")} ${s}`;
+}, m = (t) => t ? `${t.getDate()} ${g[t.getMonth()]} ${t.getFullYear()}` : "", D = (t) => t ? `${(t.getMonth() + 1).toString().padStart(2, "0")}/${t.getDate().toString().padStart(2, "0")}/${t.getFullYear()}` : "", h = (t) => {
+  if (!t) return;
+  const n = t.trim().split(" ");
+  if (n.length !== 3) return;
+  const [e, r, s] = n, a = parseInt(e, 10), u = parseInt(s, 10), o = g.findIndex((f) => f.toLowerCase() === r.toLowerCase());
+  if (isNaN(a) || isNaN(u) || o === -1 || a < 1 || a > 31 || u < 1900 || u > 2100) return;
+  const i = new Date(u, o, a);
+  if (!(i.getMonth() !== o || i.getDate() !== a || i.getFullYear() !== u))
+    return i;
+}, M = (t) => {
+  if (!t) return;
+  const n = t.split("/");
+  if (n.length !== 3) return;
+  const [e, r, s] = n.map(Number);
+  if (isNaN(e) || isNaN(r) || isNaN(s) || e < 1 || e > 12 || r < 1 || r > 31 || s < 1900 || s > 2100) return;
+  const a = new Date(s, e - 1, r);
+  if (!(a.getMonth() !== e - 1 || a.getDate() !== r || a.getFullYear() !== s))
+    return a;
+}, v = (t) => g[t] || "";
+export {
+  c as autoFormatDateInput,
+  p as combineDateAndTime,
+  m as formatDateToDisplayString,
+  D as formatDateToString,
+  N as formatTimeToString,
+  v as getMonthName,
+  l as isValidTimeString,
+  M as parseDateString,
+  h as parseDisplayDateString,
+  S as parseTimeString
+};