@nofinite/nui 1.1.1 → 2.0.1

package/dist/components/daterangepicker/DateRangePicker.js

@@ -1,313 +1,354 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import { useState as c, useRef as K, useEffect as E, useMemo as T, useCallback as Ce } from "react";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useState as m, useRef as T, useCallback as v, useEffect as U, useLayoutEffect as Te, useMemo as V } from "react";
 /* empty css                    */
-import { onClickOutside as Fe } from "../../utils/onclickoutside/onClickOutside.js";
-import { restoreFocus as Se } from "../../utils/restorefocus/restoreFocus.js";
-import { Portal as Re } from "../../utils/portal/portal.js";
-const re = (o) => o < 10 ? `0${o}` : `${o}`, w = (o) => `${o.getFullYear()}-${re(o.getMonth() + 1)}-${re(o.getDate())}`;
-function x(o) {
-  if (!o) return null;
-  const [v, b, L] = o.split("-").map(Number), Y = new Date(v, b - 1, L);
-  return Number.isNaN(Y.getTime()) ? null : Y;
+import { onClickOutside as Pe } from "../../utils/onclickoutside/onClickOutside.js";
+import { restoreFocus as je } from "../../utils/restorefocus/restoreFocus.js";
+import { cn as C } from "../../utils/cn/cn.js";
+import { Portal as Be } from "../../utils/portal/portal.js";
+const ge = (i) => i < 10 ? `0${i}` : `${i}`, E = (i) => `${i.getFullYear()}-${ge(i.getMonth() + 1)}-${ge(i.getDate())}`;
+function P(i) {
+  if (!i) return null;
+  const [R, F, z] = i.split("-").map(Number), j = new Date(R, F - 1, z);
+  return Number.isNaN(j.getTime()) ? null : j;
 }
-const oe = (o) => o || null, P = (o) => new Date(o.getFullYear(), o.getMonth(), 1), I = (o, v) => new Date(o.getFullYear(), o.getMonth() + v, 1), se = (o) => new Date(o.getFullYear(), o.getMonth() + 1, 0).getDate();
-function Oe({
-  value: o,
-  defaultValue: v,
-  onChange: b,
-  minDate: L,
-  maxDate: Y,
-  placeholder: ae = "Pick range",
+const me = (i) => i || null, W = (i) => new Date(i.getFullYear(), i.getMonth(), 1), _ = (i, R) => new Date(i.getFullYear(), i.getMonth() + R, 1), he = (i) => new Date(i.getFullYear(), i.getMonth() + 1, 0).getDate();
+function He({
+  value: i,
+  defaultValue: R,
+  onChange: F,
+  minDate: z,
+  maxDate: j,
+  placeholder: pe = "Pick range",
   locale: y = "en-US",
-  id: le,
-  className: ie = "",
-  nameFrom: V,
-  nameTo: z
+  id: we,
+  className: ve,
+  nameFrom: Z,
+  nameTo: ee,
+  disabled: De = !1,
+  formatDisplay: te
 }) {
-  const C = o !== void 0, [ce, B] = c(v), i = C ? o || {} : ce || {}, p = x(i.from), h = x(i.to), de = P(p ?? h ?? /* @__PURE__ */ new Date()), [s, D] = c(de), [d, f] = c(!1), [q, m] = c(!1), [O, G] = c("from"), F = K(null), H = K(null), J = K({}), S = x(L), R = x(Y), Q = (e) => !!(S && e < S || R && e > R), [N, W] = c(null), [k, _] = c(null), [A, X] = c(!1), ue = (e) => {
-    if (!A || !N || !k) return !1;
-    const t = e.getTime(), n = N.getTime(), r = k.getTime();
+  const B = i !== void 0, [ye, ne] = m(R), c = B ? i || {} : ye || {}, g = P(c.from), h = P(c.to), ke = W(g ?? h ?? /* @__PURE__ */ new Date()), [s, k] = m(ke), [p, A] = m(!1), [b, N] = m(!1), [X, M] = m("from"), $ = T(null), O = T(null), re = T({}), H = T(null), K = T(null), x = P(z), Y = P(j), oe = v((e) => !!(x && e < x || Y && e > Y), [x, Y]), [u, ae] = m(null), [d, q] = m(null), [I, ie] = m(!1), be = v((e) => {
+    if (!I || !u || !d) return !1;
+    const t = e.getTime(), n = u.getTime(), r = d.getTime();
     return t >= Math.min(n, r) && t <= Math.max(n, r);
-  };
-  E(() => {
-    if (d)
-      return Fe(H, () => {
-        f(!1), m(!1);
-      });
-  }, [d]), E(() => {
-    if (!d) return;
-    const e = F.current;
-    return () => Se(e);
-  }, [d]);
-  const [j, fe] = c(null);
-  E(() => {
-    if (!d || !F.current) return;
-    const e = F.current.getBoundingClientRect();
-    fe({ top: e.bottom + 8, left: e.left });
-  }, [d, s]);
-  const M = T(() => {
-    const t = P(s).getDay(), n = se(s), r = [];
-    for (let l = 0; l < t; l++) r.push(null);
-    for (let l = 1; l <= n; l++) r.push(l);
+  }, [I, u, d]);
+  U(() => p ? Pe([O, $], () => {
+    A(!1), N(!1);
+  }) : void 0, [p]), U(() => {
+    if (!p) return;
+    const e = $.current, t = setTimeout(() => {
+      K.current && !b && K.current.focus();
+    }, 10);
+    return () => {
+      clearTimeout(t), je(e);
+    };
+  }, [p, b]);
+  const [se, Ne] = m({ top: -9999, left: -9999 }), L = v(() => {
+    if (!$.current || !O.current) return;
+    const e = $.current.getBoundingClientRect(), t = O.current.getBoundingClientRect(), n = window.scrollY, r = window.scrollX;
+    let a = e.bottom + n + 8, l = e.left + r;
+    const w = 16, Q = document.documentElement.clientWidth - t.width - w;
+    l > Q + r && (l = e.right + r - t.width, l < w + r && (l = w + r)), e.bottom + t.height + 8 > document.documentElement.clientHeight - w && (a = e.top + n - t.height - 8, a < w + n && (a = w + n)), Ne({ top: a, left: l });
+  }, []);
+  Te(() => {
+    if (p)
+      return L(), window.addEventListener("resize", L), window.addEventListener("scroll", L, !0), () => {
+        window.removeEventListener("resize", L), window.removeEventListener("scroll", L, !0);
+      };
+  }, [p, L]), U(() => {
+    b && H.current && H.current.scrollIntoView({ block: "center", behavior: "smooth" });
+  }, [b]);
+  const D = V(() => {
+    const t = W(s).getDay(), n = he(s), r = [];
+    for (let a = 0; a < t; a++) r.push(null);
+    for (let a = 1; a <= n; a++) r.push(a);
     for (; r.length % 7 !== 0; ) r.push(null);
     return r;
-  }, [s]), me = T(
+  }, [s]), Me = V(
     () => Array.from({ length: 7 }).map(
-      (e, t) => new Date(2020, 5, 7 + t).toLocaleDateString(y, {
-        weekday: "short"
-      })
+      (e, t) => new Date(2020, 5, 7 + t).toLocaleDateString(y, { weekday: "short" })
     ),
     [y]
-  ), ge = s.getFullYear(), Z = 100, ee = ge - Z, pe = T(
-    () => Array.from({ length: Z * 2 + 1 }).map((e, t) => ee + t),
-    [ee]
-  ), he = T(
+  ), xe = s.getFullYear(), le = 100, ce = xe - le, Ye = V(
+    () => Array.from({ length: le * 2 + 1 }).map((e, t) => ce + t),
+    [ce]
+  ), Le = V(
     () => Array.from({ length: 12 }).map(
       (e, t) => new Date(2020, t, 1).toLocaleDateString(y, { month: "short" })
     ),
     [y]
-  ), De = (e, t) => {
-    const n = new Date(e, t, 1), r = new Date(e, t, se(n));
-    return !!(S && r < S || R && n > R);
-  }, we = (e, t) => {
-    if (!e && !t) return { from: void 0, to: void 0 };
-    if (!e) return { from: void 0, to: t ? w(t) : void 0 };
-    if (!t) return { from: w(e), to: void 0 };
-    const n = e.getTime(), r = t.getTime();
-    return n <= r ? { from: w(e), to: w(t) } : { from: w(t), to: w(e) };
-  }, U = Ce(
-    (e, t) => {
-      const n = we(e, t);
-      C || B(n), b?.(n);
-    },
-    [b, C]
-  ), te = (e) => {
+  ), Ce = v((e, t) => {
+    const n = new Date(e, t, 1), r = new Date(e, t, he(n));
+    return !!(x && r < x || Y && n > Y);
+  }, [x, Y]), Ee = (e, t) => !e && !t ? { from: void 0, to: void 0 } : e ? t ? e.getTime() <= t.getTime() ? { from: E(e), to: E(t) } : { from: E(t), to: E(e) } : { from: E(e), to: void 0 } : { from: void 0, to: t ? E(t) : void 0 }, G = v((e, t) => {
+    const n = Ee(e, t);
+    B || ne(n), F?.(n);
+  }, [F, B]), ue = (e) => {
     const t = new Date(s.getFullYear(), s.getMonth(), e);
-    if (Q(t)) return;
-    let n = p, r = h;
-    O === "from" ? (n = t, r && t > r && (r = null)) : (r = t, n && t < n && (n = t, r = null)), U(oe(n), oe(r)), n && r && (f(!1), m(!1));
+    if (oe(t)) return;
+    let n = g, r = h;
+    X === "from" ? (n = t, r && t > r && (r = null), M("to")) : (r = t, n && t < n && (n = t, r = null)), G(me(n), me(r));
   };
-  E(() => {
+  U(() => {
     const e = () => {
-      if (A) {
-        if (X(!1), N && k) {
-          const t = N, n = k, r = t <= n ? t : n, l = t <= n ? n : t;
-          U(r, l), f(!1), m(!1);
+      if (I) {
+        if (ie(!1), u && d && u.getTime() !== d.getTime()) {
+          const t = u <= d ? u : d, n = u <= d ? d : u;
+          G(t, n), M("from");
         }
-        W(null), _(null);
+        ae(null), q(null);
       }
     };
     return window.addEventListener("mouseup", e), () => window.removeEventListener("mouseup", e);
-  }, [A, N, k, U]);
-  const ve = (e) => !p || !h ? !1 : e > p && e < h, be = (e) => p && e.getTime() === p.getTime(), ye = (e) => h && e.getTime() === h.getTime(), Ne = (e) => {
-    if (e < 0 || e >= M.length) return;
-    const t = M[e];
+  }, [I, u, d, G]);
+  const Re = v((e) => !g || !h ? !1 : e > g && e < h, [g, h]), Fe = v(
+    (e) => g && e.getTime() === g.getTime(),
+    [g]
+  ), Ae = v(
+    (e) => h && e.getTime() === h.getTime(),
+    [h]
+  ), J = (e) => {
+    if (e < 0 || e >= D.length) return;
+    const t = D[e];
     if (!t) return;
     const n = `${s.getFullYear()}-${s.getMonth()}-${t}`;
-    J.current[n]?.focus();
-  }, ke = (e, t) => {
-    const n = M.findIndex((g) => g === t);
+    re.current[n]?.focus();
+  }, $e = (e) => {
+    if (e.target === K.current && ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+      e.preventDefault();
+      const t = g || /* @__PURE__ */ new Date(), n = t.getMonth() === s.getMonth() && t.getFullYear() === s.getFullYear() ? t.getDate() : 1, r = D.findIndex((a) => a === n);
+      if (r !== -1)
+        J(r);
+      else {
+        const a = D.findIndex((l) => l !== null);
+        a !== -1 && J(a);
+      }
+    }
+  }, Ie = (e, t) => {
+    const n = D.findIndex((l) => l === t);
     if (n === -1) return;
     const r = 7;
-    let l = null;
+    let a = null;
     switch (e.key) {
       case "ArrowRight":
-        l = n + 1;
+        a = n + 1;
         break;
       case "ArrowLeft":
-        l = n - 1;
+        a = n - 1;
         break;
       case "ArrowDown":
-        l = n + r;
+        a = n + r;
         break;
       case "ArrowUp":
-        l = n - r;
+        a = n - r;
         break;
       case "Enter":
       case " ":
-        e.preventDefault(), te(t);
+        e.preventDefault(), ue(t);
         return;
       case "PageUp":
-        D((g) => I(g, -1));
+        k((l) => _(l, -1));
         return;
       case "PageDown":
-        D((g) => I(g, 1));
+        k((l) => _(l, 1));
         return;
       case "Escape":
-        f(!1);
+        A(!1);
         return;
       default:
         return;
     }
-    e.preventDefault(), l != null && M[l] != null && Ne(l);
-  }, Me = () => !i.from && !i.to ? ae : i.from && !i.to ? `${i.from} → ` : !i.from && i.to ? ` → ${i.to}` : `${i.from} → ${i.to}`;
-  return /* @__PURE__ */ u("div", { className: `ui-daterange-picker ${ie}`, children: [
-    V && /* @__PURE__ */ a("input", { type: "hidden", name: V, value: i.from ?? "" }),
-    z && /* @__PURE__ */ a("input", { type: "hidden", name: z, value: i.to ?? "" }),
-    /* @__PURE__ */ a(
+    e.preventDefault(), a != null && D[a] != null && J(a);
+  }, de = (e) => {
+    if (!e) return null;
+    const t = P(e);
+    return t ? te ? te(t) : new Intl.DateTimeFormat(y, { year: "numeric", month: "short", day: "numeric" }).format(t) : null;
+  }, Se = () => {
+    if (!c.from && !c.to) return pe;
+    const e = de(c.from), t = de(c.to);
+    return e && !t ? `${e} → ` : !e && t ? ` → ${t}` : `${e} → ${t}`;
+  };
+  return /* @__PURE__ */ f("div", { className: C("nui-daterange-root", ve), children: [
+    Z && /* @__PURE__ */ o("input", { type: "hidden", name: Z, value: c.from ?? "" }),
+    ee && /* @__PURE__ */ o("input", { type: "hidden", name: ee, value: c.to ?? "" }),
+    /* @__PURE__ */ f(
       "button",
       {
-        id: le,
-        ref: F,
+        id: we,
+        ref: $,
         type: "button",
-        className: "drp-trigger",
+        disabled: De,
+        className: "nui-daterange-trigger",
         "aria-haspopup": "dialog",
-        "aria-expanded": d,
+        "aria-expanded": p,
         onClick: () => {
-          f((e) => !e), m(!1);
+          A((e) => !e), N(!1), !c.from && !c.to && M("from");
         },
-        children: Me()
+        children: [
+          /* @__PURE__ */ o("span", { className: !c.from && !c.to ? "nui-daterange-placeholder" : "", children: Se() }),
+          /* @__PURE__ */ f("svg", { className: "nui-daterange-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ o("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+            /* @__PURE__ */ o("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+            /* @__PURE__ */ o("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+            /* @__PURE__ */ o("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+          ] })
+        ]
       }
     ),
-    /* @__PURE__ */ u("div", { className: "drp-actions", children: [
-      /* @__PURE__ */ a(
-        "button",
-        {
-          className: `drp-part ${O === "from" ? "active" : ""}`,
-          onClick: () => G("from"),
-          children: "From"
-        }
-      ),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          className: `drp-part ${O === "to" ? "active" : ""}`,
-          onClick: () => G("to"),
-          children: "To"
-        }
-      )
-    ] }),
-    d && j && /* @__PURE__ */ a(Re, { children: /* @__PURE__ */ a(
+    p && /* @__PURE__ */ o(Be, { children: /* @__PURE__ */ o(
       "div",
       {
-        ref: H,
-        className: "drp-popover",
-        style: { position: "fixed", top: j.top, left: j.left },
-        children: /* @__PURE__ */ u("div", { className: "drp-panel", children: [
-          /* @__PURE__ */ u("div", { className: "drp-header", children: [
-            /* @__PURE__ */ a(
+        ref: O,
+        className: "nui-daterange-popover",
+        style: { position: "absolute", top: se.top, left: se.left },
+        children: /* @__PURE__ */ f("div", { className: "nui-daterange-panel", children: [
+          /* @__PURE__ */ f("div", { className: "nui-daterange-actions", children: [
+            /* @__PURE__ */ o(
               "button",
               {
-                className: "drp-arrow",
-                onClick: () => D((e) => I(e, -1)),
-                children: "‹"
+                className: C("nui-daterange-part", X === "from" && "active"),
+                onClick: () => M("from"),
+                children: "Start Date"
               }
             ),
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ o(
               "button",
               {
-                className: "drp-title",
-                onClick: () => m((e) => !e),
+                disabled: !c.from,
+                className: C("nui-daterange-part", X === "to" && "active"),
+                onClick: () => M("to"),
+                children: "End Date"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ f("div", { className: "nui-daterange-header", children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                className: "nui-daterange-arrow",
+                onClick: () => k((e) => _(e, -1)),
+                "aria-label": "Previous Month",
+                children: /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" }) })
+              }
+            ),
+            /* @__PURE__ */ f(
+              "button",
+              {
+                className: "nui-daterange-ym-toggle",
+                onClick: () => N((e) => !e),
                 children: [
-                  s.toLocaleDateString(y, {
-                    month: "long"
-                  }),
+                  s.toLocaleDateString(y, { month: "long" }),
                   " ",
                   s.getFullYear()
                 ]
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ o(
               "button",
               {
-                className: "drp-arrow",
-                onClick: () => D((e) => I(e, 1)),
-                children: "›"
+                className: "nui-daterange-arrow",
+                onClick: () => k((e) => _(e, 1)),
+                "aria-label": "Next Month",
+                children: /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" }) })
               }
             )
           ] }),
-          q && /* @__PURE__ */ u("div", { className: "drp-ym", children: [
-            /* @__PURE__ */ a("div", { className: "drp-year-grid", children: pe.map((e) => /* @__PURE__ */ a(
-              "button",
-              {
-                className: `drp-year ${e === s.getFullYear() ? "selected" : ""}`,
-                onClick: () => D(
-                  P(new Date(e, s.getMonth(), 1))
-                ),
-                children: e
-              },
-              e
-            )) }),
-            /* @__PURE__ */ a("div", { className: "drp-month-grid", children: he.map((e, t) => {
-              const n = De(
-                s.getFullYear(),
-                t
-              );
-              return /* @__PURE__ */ a(
+          b && /* @__PURE__ */ f("div", { className: "nui-daterange-ym-panel", children: [
+            /* @__PURE__ */ o("div", { className: "nui-daterange-year-grid", children: Ye.map((e) => {
+              const t = e === s.getFullYear();
+              return /* @__PURE__ */ o(
                 "button",
                 {
-                  className: `drp-month ${n ? "disabled" : ""} ${t === s.getMonth() ? "selected" : ""}`,
-                  disabled: n ? !0 : void 0,
-                  onClick: () => !n && D(
-                    P(
-                      new Date(s.getFullYear(), t, 1)
-                    )
-                  ),
+                  ref: t ? H : null,
+                  className: C("nui-daterange-year", t && "selected"),
+                  onClick: () => k(W(new Date(e, s.getMonth(), 1))),
                   children: e
                 },
-                t
-              );
-            }) })
-          ] }),
-          !q && /* @__PURE__ */ u("div", { className: "drp-calendar", children: [
-            /* @__PURE__ */ a("div", { className: "drp-weekdays", children: me.map((e, t) => /* @__PURE__ */ a("div", { className: "drp-weekday", children: e }, t)) }),
-            /* @__PURE__ */ a("div", { className: "drp-days", children: M.map((e, t) => {
-              if (e === null)
-                return /* @__PURE__ */ a("div", { className: "drp-day-empty" }, t);
-              const n = new Date(
-                s.getFullYear(),
-                s.getMonth(),
                 e
-              ), r = Q(n), l = be(n), g = ye(n), $e = ve(n), Ye = ue(n), ne = `${s.getFullYear()}-${s.getMonth()}-${e}`;
-              return /* @__PURE__ */ a(
+              );
+            }) }),
+            /* @__PURE__ */ o("div", { className: "nui-daterange-month-grid", children: Le.map((e, t) => {
+              const n = Ce(s.getFullYear(), t), r = t === s.getMonth();
+              return /* @__PURE__ */ o(
                 "button",
                 {
-                  ref: ($) => {
-                    J.current[ne] = $;
-                  },
-                  disabled: r ? !0 : void 0,
-                  className: [
-                    "drp-day",
-                    l ? "start" : "",
-                    g ? "end" : "",
-                    $e ? "between" : "",
-                    Ye ? "dragging" : "",
-                    r ? "disabled" : ""
-                  ].join(" "),
-                  onClick: () => !r && te(e),
-                  onKeyDown: ($) => ke($, e),
-                  onMouseDown: ($) => {
-                    r || ($.preventDefault(), W(n), _(n), X(!0));
-                  },
-                  onMouseEnter: () => {
-                    !A || r || _(n);
+                  className: C("nui-daterange-month", n && "disabled", r && "selected"),
+                  disabled: n ? !0 : void 0,
+                  onClick: () => {
+                    n || (k(W(new Date(s.getFullYear(), t, 1))), N(!1));
                   },
                   children: e
                 },
-                ne
+                t
               );
             }) })
           ] }),
-          /* @__PURE__ */ u("div", { className: "drp-footer", children: [
-            /* @__PURE__ */ a(
+          !b && /* @__PURE__ */ f(
+            "div",
+            {
+              className: "nui-daterange-calendar",
+              role: "grid",
+              ref: K,
+              tabIndex: -1,
+              onKeyDown: $e,
+              style: { outline: "none" },
+              children: [
+                /* @__PURE__ */ o("div", { className: "nui-daterange-weekdays", role: "row", children: Me.map((e, t) => /* @__PURE__ */ o("div", { className: "nui-daterange-weekday", role: "columnheader", children: e }, t)) }),
+                /* @__PURE__ */ o("div", { className: "nui-daterange-days", role: "rowgroup", children: D.map((e, t) => {
+                  if (e === null) return /* @__PURE__ */ o("div", { className: "nui-daterange-empty", role: "gridcell" }, t);
+                  const n = new Date(s.getFullYear(), s.getMonth(), e), r = oe(n), a = Fe(n), l = Ae(n), w = Re(n), Q = be(n), fe = `${s.getFullYear()}-${s.getMonth()}-${e}`;
+                  return /* @__PURE__ */ o(
+                    "button",
+                    {
+                      role: "gridcell",
+                      ref: (S) => {
+                        re.current[fe] = S;
+                      },
+                      disabled: r ? !0 : void 0,
+                      className: C(
+                        "nui-daterange-day",
+                        a && "start",
+                        l && "end",
+                        w && "between",
+                        Q && "dragging",
+                        r && "disabled"
+                      ),
+                      onClick: () => !r && ue(e),
+                      onKeyDown: (S) => Ie(S, e),
+                      onMouseDown: (S) => {
+                        r || (S.preventDefault(), ae(n), q(n), ie(!0));
+                      },
+                      onMouseEnter: () => {
+                        !I || r || q(n);
+                      },
+                      children: e
+                    },
+                    fe
+                  );
+                }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ f("div", { className: "nui-daterange-footer", children: [
+            /* @__PURE__ */ o(
               "button",
               {
-                className: "drp-clear",
+                className: "nui-daterange-clear",
                 onClick: () => {
                   const e = { from: void 0, to: void 0 };
-                  C || B(e), b?.(e), f(!1), m(!1);
+                  B || ne(e), F?.(e), M("from"), A(!1), N(!1);
                 },
                 children: "Clear"
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ o(
               "button",
               {
-                className: "drp-close",
+                className: "nui-daterange-close",
                 onClick: () => {
-                  f(!1), m(!1);
+                  A(!1), N(!1);
                 },
-                children: "Close"
+                children: "Apply"
               }
             )
           ] })
@@ -317,6 +358,6 @@ function Oe({
   ] });
 }
 export {
-  Oe as DateRangePicker
+  He as DateRangePicker
 };
 //# sourceMappingURL=DateRangePicker.js.map