react-smart-date-compare 1.0.0

package/dist/react-smart-date-compare.es.js

@@ -0,0 +1,935 @@
+import Re, { useMemo as De, useState as D, useEffect as G, useRef as ve } from "react";
+import { createPortal as Te } from "react-dom";
+import { differenceInCalendarDays as Ee, subDays as U, subYears as ye, startOfMonth as ae, endOfMonth as ue, startOfWeek as se, endOfWeek as fe, eachDayOfInterval as Pe, format as Z, isBefore as K, startOfDay as B, isAfter as be, isSameDay as Q, isSameMonth as Me, startOfToday as Ce, endOfToday as Oe, startOfYear as Ne, subMonths as de, addMonths as ge } from "date-fns";
+var ie = { exports: {} }, re = {};
+var ke;
+function Ae() {
+  if (ke) return re;
+  ke = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
+  function a(p, l, i) {
+    var m = null;
+    if (i !== void 0 && (m = "" + i), l.key !== void 0 && (m = "" + l.key), "key" in l) {
+      i = {};
+      for (var y in l)
+        y !== "key" && (i[y] = l[y]);
+    } else i = l;
+    return l = i.ref, {
+      $$typeof: r,
+      type: p,
+      key: m,
+      ref: l !== void 0 ? l : null,
+      props: i
+    };
+  }
+  return re.Fragment = n, re.jsx = a, re.jsxs = a, re;
+}
+var ne = {};
+var we;
+function $e() {
+  return we || (we = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === H ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case W:
+          return "Fragment";
+        case g:
+          return "Profiler";
+        case $:
+          return "StrictMode";
+        case V:
+          return "Suspense";
+        case J:
+          return "SuspenseList";
+        case b:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case Y:
+            return "Portal";
+          case c:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case w:
+            var s = e.render;
+            return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case u:
+            return s = e.displayName || null, s !== null ? s : r(e.type) || "Memo";
+          case k:
+            s = e._payload, e = e._init;
+            try {
+              return r(e(s));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function a(e) {
+      try {
+        n(e);
+        var s = !1;
+      } catch {
+        s = !0;
+      }
+      if (s) {
+        s = console;
+        var o = s.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          s,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), n(e);
+      }
+    }
+    function p(e) {
+      if (e === W) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var s = r(e);
+        return s ? "<" + s + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var e = d.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (C.call(e, "key")) {
+        var s = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (s && s.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function y(e, s) {
+      function o() {
+        R || (R = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          s
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function P() {
+      var e = r(this.type);
+      return E[e] || (E[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function I(e, s, o, f, x, A) {
+      var v = o.ref;
+      return e = {
+        $$typeof: q,
+        type: e,
+        key: s,
+        props: o,
+        _owner: f
+      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: P
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: x
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function M(e, s, o, f, x, A) {
+      var v = s.children;
+      if (v !== void 0)
+        if (f)
+          if (T(v)) {
+            for (f = 0; f < v.length; f++)
+              O(v[f]);
+            Object.freeze && Object.freeze(v);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else O(v);
+      if (C.call(s, "key")) {
+        v = r(e);
+        var X = Object.keys(s).filter(function(oe) {
+          return oe !== "key";
+        });
+        f = 0 < X.length ? "{key: someKey, " + X.join(": ..., ") + ": ...}" : "{key: someKey}", F[v + f] || (X = 0 < X.length ? "{" + X.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          f,
+          v,
+          X,
+          v
+        ), F[v + f] = !0);
+      }
+      if (v = null, o !== void 0 && (a(o), v = "" + o), m(s) && (a(s.key), v = "" + s.key), "key" in s) {
+        o = {};
+        for (var ee in s)
+          ee !== "key" && (o[ee] = s[ee]);
+      } else o = s;
+      return v && y(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), I(
+        e,
+        v,
+        o,
+        l(),
+        x,
+        A
+      );
+    }
+    function O(e) {
+      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function N(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === q;
+    }
+    var _ = Re, q = /* @__PURE__ */ Symbol.for("react.transitional.element"), Y = /* @__PURE__ */ Symbol.for("react.portal"), W = /* @__PURE__ */ Symbol.for("react.fragment"), $ = /* @__PURE__ */ Symbol.for("react.strict_mode"), g = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), c = /* @__PURE__ */ Symbol.for("react.context"), w = /* @__PURE__ */ Symbol.for("react.forward_ref"), V = /* @__PURE__ */ Symbol.for("react.suspense"), J = /* @__PURE__ */ Symbol.for("react.suspense_list"), u = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), b = /* @__PURE__ */ Symbol.for("react.activity"), H = /* @__PURE__ */ Symbol.for("react.client.reference"), d = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, T = Array.isArray, j = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var R, E = {}, S = _.react_stack_bottom_frame.bind(
+      _,
+      i
+    )(), L = j(p(i)), F = {};
+    ne.Fragment = W, ne.jsx = function(e, s, o) {
+      var f = 1e4 > d.recentlyCreatedOwnerStacks++;
+      return M(
+        e,
+        s,
+        o,
+        !1,
+        f ? Error("react-stack-top-frame") : S,
+        f ? j(p(e)) : L
+      );
+    }, ne.jsxs = function(e, s, o) {
+      var f = 1e4 > d.recentlyCreatedOwnerStacks++;
+      return M(
+        e,
+        s,
+        o,
+        !0,
+        f ? Error("react-stack-top-frame") : S,
+        f ? j(p(e)) : L
+      );
+    };
+  })()), ne;
+}
+var je;
+function Le() {
+  return je || (je = 1, process.env.NODE_ENV === "production" ? ie.exports = Ae() : ie.exports = $e()), ie.exports;
+}
+var t = Le();
+const Ie = (r, n) => {
+  const a = Ee(n, r) + 1;
+  return {
+    compareStart: U(r, a),
+    compareEnd: U(n, a)
+  };
+}, We = (r, n) => {
+  const a = Ee(n, r) + 1, p = a % 7, l = p === 0 ? a : a + (7 - p);
+  return {
+    compareStart: U(r, l),
+    compareEnd: U(n, l)
+  };
+}, Ye = (r, n) => ({
+  compareStart: ye(r, 1),
+  compareEnd: ye(n, 1)
+}), ze = (r, n) => {
+  const a = ae(r), p = ue(a), l = se(a, n), i = fe(p, n);
+  return Pe({
+    start: l,
+    end: i
+  });
+};
+function ce(r, n) {
+  const a = r.replace("#", ""), p = parseInt(a.substring(0, 2), 16), l = parseInt(a.substring(2, 4), 16), i = parseInt(a.substring(4, 6), 16);
+  return `rgba(${p},${l},${i},${n})`;
+}
+const Fe = ({
+  month: r,
+  startDate: n,
+  endDate: a,
+  compareStartDate: p,
+  compareEndDate: l,
+  hoverDate: i,
+  onDateClick: m,
+  onDateHover: y,
+  selecting: P,
+  anchorDate: I,
+  selectionVariant: M = "primary",
+  primaryColor: O = "#3b82f6",
+  compareColor: N = "#f97316",
+  minDate: _,
+  maxDate: q,
+  weekStartsOn: Y = 0,
+  disabledDates: W,
+  disableFuture: $,
+  disablePast: g,
+  locale: z,
+  classNames: c
+}) => {
+  const w = De(() => ze(r, { weekStartsOn: Y }), [r, Y]), V = w.slice(0, 7), J = (u) => {
+    let k = !1;
+    if (_ && K(u, B(_)) && (k = !0), q && be(u, B(q)) && (k = !0), $ && be(u, B(/* @__PURE__ */ new Date())) && (k = !0), g && K(u, B(/* @__PURE__ */ new Date())) && (k = !0), W?.some((o) => Q(u, o)) && (k = !0), k)
+      return { className: "h-8 w-8 flex items-center justify-center text-sm text-gray-300 cursor-not-allowed pointer-events-none" };
+    if (!Me(u, r))
+      return { className: "invisible pointer-events-none h-8 w-8" };
+    const b = u.getTime(), d = ["h-8 w-8 flex items-center justify-center text-sm cursor-pointer relative z-10 transition-colors duration-75"];
+    let C = {};
+    c?.day && d.push(c.day);
+    let T = !1, j = !1, R = !1;
+    if (p && l) {
+      const o = B(p).getTime(), f = B(l).getTime(), x = Math.min(o, f), A = Math.max(o, f);
+      T = Q(u, p), j = Q(u, l), b >= x && b <= A && (R = !0);
+    }
+    let E = !1, S = !1, L = !1;
+    if (n && (E = Q(u, n)), a && (S = Q(u, a)), n && a) {
+      const o = B(n).getTime(), f = B(a).getTime();
+      b >= Math.min(o, f) && b <= Math.max(o, f) && (L = !0);
+    }
+    const F = I ?? (M === "primary" ? n : p);
+    let e = !1;
+    if (P && F && i) {
+      const o = B(F).getTime(), f = B(i).getTime();
+      b >= Math.min(o, f) && b <= Math.max(o, f) && (e = !0);
+    }
+    c?.dayInRange && L && !E && !S ? d.push(c.dayInRange) : c?.dayCompare && R && !T && !j ? d.push(c.dayCompare) : e ? M === "compare" ? C = { backgroundColor: ce(N, 0.12), color: N } : C = { backgroundColor: ce(O, 0.12), color: O } : R && !T && !j ? c?.dayCompare ? d.push(c.dayCompare) : C = { backgroundColor: ce(N, 0.12), color: N, fontWeight: 500 } : L && !E && !S ? c?.dayInRange ? d.push(c.dayInRange) : C = { backgroundColor: ce(O, 0.12), color: O } : !T && !j && !E && !S && d.push("hover:bg-gray-100 text-gray-700 rounded-full");
+    const s = P && F && i && (Q(u, F) || Q(u, i));
+    return (T || j || s && M === "compare") && (c?.dayCompare ? d.push(c.dayCompare) : C = { backgroundColor: N, color: "#fff", fontWeight: 600, boxShadow: "0 1px 4px rgba(0,0,0,0.15)" }, T && d.push("rounded-l-full"), j && d.push("rounded-r-full"), T && j && d.push("rounded-full"), s && d.push("rounded-full")), (E || S || s && M === "primary") && (c?.daySelected ? (d.push(c.daySelected), d.push("z-20")) : C = { backgroundColor: O, color: "#fff", fontWeight: 600, boxShadow: "0 1px 4px rgba(0,0,0,0.15)", zIndex: 20 }, E && d.push("rounded-l-full"), S && d.push("rounded-r-full"), E && S && d.push("rounded-full"), s && d.push("rounded-full")), { className: d.join(" "), style: Object.keys(C).length ? C : void 0 };
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: `w-64 select-none mr-2 ${c?.calendar || ""}`, children: [
+    /* @__PURE__ */ t.jsx("div", { className: "text-center text-sm font-semibold text-gray-800 mb-2 h-5 first-letter:uppercase", children: Z(r, "MMMM yyyy", { locale: z }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "grid grid-cols-7 mb-1", children: V.map((u) => /* @__PURE__ */ t.jsx("div", { className: "text-center text-[10px] text-gray-400 font-medium h-6 flex items-center justify-center uppercase tracking-wide", children: Z(u, "cccccc", { locale: z }) }, u.toString())) }),
+    /* @__PURE__ */ t.jsx("div", { className: "grid grid-cols-7 gap-y-0.5", children: w.map((u) => {
+      const { className: k, style: b } = J(u);
+      return /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: k + " text-xs",
+          style: b,
+          onClick: () => {
+            k.includes("pointer-events-none") || m(u);
+          },
+          onMouseEnter: () => y(u),
+          children: Z(u, "d")
+        },
+        u.toISOString()
+      );
+    }) })
+  ] });
+}, Se = ({ preset: r, onSelect: n, activePreset: a, primaryColor: p = "#3b82f6", classNames: l, depth: i = 0 }) => {
+  const m = r.children && r.children.length > 0, y = m ? r.children.some((_) => _.value === a) : !1, [P, I] = D(y), M = a === r.value, O = l?.presetActive ? void 0 : { backgroundColor: `${p}15`, color: p, fontWeight: 600 }, N = l?.presetActive || "";
+  return m ? /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsxs(
+      "button",
+      {
+        className: `w-full flex items-center justify-between px-3 py-2 rounded-md text-xs transition-colors cursor-pointer
+                        ${y ? N : "text-gray-600 hover:bg-gray-100"}`,
+        style: {
+          paddingLeft: `${(i + 1) * 12}px`,
+          ...y ? O : {}
+        },
+        onClick: () => I((_) => !_),
+        type: "button",
+        "aria-expanded": P,
+        children: [
+          /* @__PURE__ */ t.jsx("span", { children: r.label }),
+          /* @__PURE__ */ t.jsx(
+            "svg",
+            {
+              className: `w-3 h-3 shrink-0 ml-1 text-gray-400 transition-transform duration-200 ${P ? "rotate-90" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+            }
+          )
+        ]
+      }
+    ),
+    P && /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-0.5 mt-0.5 ml-2 pl-2 border-l border-gray-200", children: r.children.map((_) => /* @__PURE__ */ t.jsx(
+      Se,
+      {
+        preset: _,
+        onSelect: n,
+        activePreset: a,
+        primaryColor: p,
+        classNames: l,
+        depth: i + 1
+      },
+      _.value
+    )) })
+  ] }) : /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      className: `w-full text-left px-3 py-2 rounded-md text-xs transition-colors cursor-pointer
+                ${M ? N : "text-gray-600 hover:bg-gray-100"}`,
+      style: {
+        paddingLeft: i > 0 ? `${(i + 1) * 12}px` : void 0,
+        ...M ? O : {}
+      },
+      onClick: () => n(r.value),
+      type: "button",
+      children: r.label
+    }
+  );
+}, Ue = ({
+  presets: r,
+  onSelect: n,
+  activePreset: a,
+  primaryColor: p,
+  classNames: l
+}) => /* @__PURE__ */ t.jsx("aside", { className: "flex flex-col gap-0.5 p-2", children: r.map((i) => /* @__PURE__ */ t.jsx(
+  Se,
+  {
+    preset: i,
+    onSelect: n,
+    activePreset: a,
+    primaryColor: p,
+    classNames: l
+  },
+  i.value
+)) }), Ve = ({
+  enabled: r,
+  mode: n,
+  onToggle: a,
+  onModeChange: p,
+  primaryColor: l = "#3b82f6",
+  compareColor: i = "#f97316"
+}) => /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-2 text-sm text-gray-700", children: [
+  /* @__PURE__ */ t.jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out",
+        style: { backgroundColor: r ? l : "#d1d5db" },
+        onClick: () => a(!r),
+        children: [
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "sr-only",
+              checked: r,
+              onChange: (m) => a(m.target.checked)
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${r ? "translate-x-4" : "translate-x-0"}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx("span", { className: "font-medium", children: "Compare" })
+  ] }),
+  r && /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-1 mt-2 pl-2", style: { borderLeft: `2px solid ${l}40` }, children: [
+    { value: "previousPeriodMatchDay", label: "Previous period (match day of week)" },
+    { value: "previousPeriod", label: "Previous period" },
+    { value: "samePeriodLastYear", label: "Previous year" },
+    { value: "custom", label: "Custom" }
+  ].map((m) => {
+    const y = n === m.value;
+    return /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: "text-left px-3 py-2 rounded-md text-xs transition-colors cursor-pointer",
+        style: y ? { backgroundColor: `${i}15`, color: i, fontWeight: 600 } : { color: "#6b7280" },
+        onClick: () => p(m.value),
+        children: m.label
+      },
+      m.value
+    );
+  }) })
+] }), Be = (r) => {
+  const n = Ce(), a = Oe();
+  switch (r) {
+    case "today":
+      return {
+        startDate: n,
+        endDate: a
+      };
+    case "yesterday":
+      return {
+        startDate: U(n, 1),
+        endDate: U(a, 1)
+      };
+    case "last7days":
+      return {
+        startDate: U(n, 6),
+        endDate: a
+      };
+    case "thisWeekSunToday":
+      return {
+        startDate: se(n, { weekStartsOn: 0 }),
+        endDate: a
+      };
+    case "thisWeekMonToday":
+      return {
+        startDate: se(n, { weekStartsOn: 1 }),
+        endDate: a
+      };
+    case "lastWeekSunSat":
+      const l = U(se(n, { weekStartsOn: 0 }), 7);
+      return {
+        startDate: l,
+        endDate: fe(l, { weekStartsOn: 0 })
+      };
+    case "lastWeekMonSun":
+      const i = U(se(n, { weekStartsOn: 1 }), 7);
+      return {
+        startDate: i,
+        endDate: fe(i, { weekStartsOn: 1 })
+      };
+    case "last28Days":
+      return {
+        startDate: U(n, 27),
+        endDate: a
+      };
+    case "last30days":
+      return {
+        startDate: U(n, 29),
+        endDate: a
+      };
+    case "thisMonth":
+      return {
+        startDate: ae(n),
+        endDate: ue(n)
+      };
+    case "lastMonth":
+      const m = de(n, 1);
+      return {
+        startDate: ae(m),
+        endDate: ue(m)
+      };
+    case "ytd":
+      return {
+        startDate: Ne(n),
+        endDate: a
+      };
+    default:
+      return { startDate: n, endDate: a };
+  }
+}, qe = [
+  { label: "Today", value: "today" },
+  { label: "Yesterday", value: "yesterday" },
+  {
+    // Group header — no range of its own, just expands to show sub-options
+    label: "This week",
+    value: "__group_thisWeek",
+    children: [
+      { label: "Sun – Today", value: "thisWeekSunToday" },
+      { label: "Mon – Today", value: "thisWeekMonToday" }
+    ]
+  },
+  { label: "Last 7 days", value: "last7days" },
+  {
+    label: "Last week",
+    value: "__group_lastWeek",
+    children: [
+      { label: "Sun – Sat", value: "lastWeekSunSat" },
+      { label: "Mon – Sun", value: "lastWeekMonSun" }
+    ]
+  },
+  { label: "Last 28 days", value: "last28Days" },
+  { label: "Last 30 days", value: "last30days" },
+  { label: "This month", value: "thisMonth" },
+  { label: "Last month", value: "lastMonth" },
+  { label: "Year to Date", value: "ytd" },
+  { label: "Custom", value: "custom" }
+], Je = ({
+  initialRange: r,
+  initialCompareRange: n,
+  presets: a = qe,
+  onApply: p,
+  onCancel: l,
+  enableCompare: i = !1,
+  activeCompareMode: m = "previousPeriod",
+  primaryColor: y = "#3b82f6",
+  compareColor: P = "#f97316",
+  minDate: I,
+  maxDate: M,
+  weekStartsOn: O,
+  disabledDates: N,
+  disableFuture: _,
+  disablePast: q,
+  locale: Y,
+  labels: W,
+  classNames: $
+}) => {
+  const [g, z] = D(r?.startDate), [c, w] = D(r?.endDate), [V, J] = D(null), [u, k] = D(!1), [b, H] = D(i), [d, C] = D(m);
+  G(() => {
+    H(i);
+  }, [i]), G(() => {
+    C(m);
+  }, [m]);
+  const [T, j] = D("primary");
+  G(() => {
+    j(b && d === "custom" ? "compare" : "primary");
+  }, [b, d]);
+  const [R, E] = D(n?.startDate), [S, L] = D(n?.endDate), [F, e] = D(""), [s, o] = D(() => {
+    const h = r?.endDate || /* @__PURE__ */ new Date();
+    return de(ae(h), 1);
+  });
+  G(() => {
+    if (b && !u && g && c && d !== "custom") {
+      let h;
+      d === "previousPeriod" ? h = Ie(g, c) : d === "previousPeriodMatchDay" ? h = We(g, c) : d === "samePeriodLastYear" && (h = Ye(g, c)), h && (E(h.compareStart), L(h.compareEnd));
+    }
+  }, [g, c, b, d, u]);
+  const f = (h) => {
+    I && K(h, I) || M && K(M, h) || (u ? (T === "compare" ? R && K(h, R) ? (E(h), L(R)) : L(h) : g && K(h, g) ? (z(h), w(g)) : w(h), k(!1)) : (e("custom"), T === "compare" ? (E(h), L(void 0)) : (z(h), w(void 0)), k(!0)));
+  }, x = (h) => {
+    u && J(h);
+  }, A = (h) => {
+    if (h.startsWith("__group_")) return;
+    const pe = (_e, he) => {
+      for (const le of _e) {
+        if (le.value === he) return le;
+        if (le.children) {
+          const xe = pe(le.children, he);
+          if (xe) return xe;
+        }
+      }
+    }, me = pe(a, h);
+    e(h);
+    let te;
+    me?.range ? te = me.range() : te = Be(h), z(te.startDate), w(te.endDate), k(!1), j("primary"), o(de(ae(te.endDate), 1));
+  }, v = () => o(de(s, 1)), X = () => o(ge(s, 1)), ee = () => {
+    g && c && p({ startDate: g, endDate: c }, b && R && S ? { startDate: R, endDate: S } : void 0, b ? d : void 0);
+  }, oe = (h) => /* @__PURE__ */ t.jsx(
+    Fe,
+    {
+      month: h,
+      startDate: g,
+      endDate: c,
+      compareStartDate: b ? R : void 0,
+      compareEndDate: b ? S : void 0,
+      hoverDate: V,
+      onDateClick: f,
+      onDateHover: x,
+      selecting: u,
+      anchorDate: u ? T === "primary" ? g : R : void 0,
+      selectionVariant: T,
+      minDate: I,
+      maxDate: M,
+      weekStartsOn: O,
+      disabledDates: N,
+      disableFuture: _,
+      disablePast: q,
+      locale: Y,
+      classNames: $,
+      primaryColor: y,
+      compareColor: P
+    }
+  );
+  return /* @__PURE__ */ t.jsxs("div", { className: `flex bg-white h-[450px] ${$?.root || ""}`, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: `w-48 bg-gray-50/50 border-r border-gray-100 flex flex-col h-full shrink-0 ${$?.sidebar || ""}`, children: [
+      /* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-y-auto preset-scrollbar", children: /* @__PURE__ */ t.jsx(
+        Ue,
+        {
+          presets: a,
+          onSelect: A,
+          activePreset: F,
+          primaryColor: y,
+          classNames: $
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx("div", { className: "p-3 border-t border-gray-200 bg-gray-50/80 backdrop-blur-sm", children: /* @__PURE__ */ t.jsx(
+        Ve,
+        {
+          enabled: b,
+          mode: d,
+          onToggle: H,
+          onModeChange: C,
+          primaryColor: y,
+          compareColor: P
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col flex-1 h-full overflow-hidden", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "flex justify-between items-center px-4 py-2 border-b border-gray-100 shrink-0", children: [
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            className: "p-1.5 rounded-full hover:bg-gray-100 text-gray-500 hover:text-gray-900 transition-colors cursor-pointer",
+            onClick: v,
+            children: /* @__PURE__ */ t.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 19l-7-7 7-7" }) })
+          }
+        ),
+        /* @__PURE__ */ t.jsxs("div", { className: "text-xs font-medium text-gray-500 flex flex-col items-center", children: [
+          g && c ? /* @__PURE__ */ t.jsxs("span", { children: [
+            Z(g, "MMM d, yyyy", { locale: Y }),
+            " - ",
+            Z(c, "MMM d, yyyy", { locale: Y })
+          ] }) : /* @__PURE__ */ t.jsx("span", { children: W?.selectDateRange || "Select date range" }),
+          b && R && S && /* @__PURE__ */ t.jsxs("span", { className: "text-[10px] font-medium", style: { color: P }, children: [
+            W?.vs || "vs",
+            " ",
+            Z(R, "MMM d, yyyy", { locale: Y }),
+            " - ",
+            Z(S, "MMM d, yyyy", { locale: Y })
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            className: "p-1.5 rounded-full hover:bg-gray-100 text-gray-500 hover:text-gray-900 transition-colors cursor-pointer",
+            onClick: X,
+            children: /* @__PURE__ */ t.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: `flex flex-col gap-4 p-4 overflow-y-auto flex-1 items-center ${$?.container || ""}`, children: [
+        oe(s),
+        oe(ge(s, 1))
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: `px-4 py-3 border-t border-gray-100 flex items-center justify-between shrink-0 bg-white ${$?.footer || ""}`, children: [
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            className: "text-xs font-medium text-gray-500 hover:text-gray-700 underline decoration-gray-300 hover:decoration-gray-500 underline-offset-2 transition-colors cursor-pointer",
+            onClick: () => {
+              z(void 0), w(void 0), k(!1), e(""), H(!1);
+            },
+            children: W?.clear || "Reset"
+          }
+        ),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              className: `px-3 py-1.5 rounded-md border border-gray-300 bg-white text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer ${$?.buttonCancel || ""}`,
+              onClick: l,
+              children: W?.cancel || "Cancel"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              className: `px-3 py-1.5 rounded-md border border-transparent text-xs font-medium text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm cursor-pointer ${$?.buttonApply || ""}`,
+              style: { backgroundColor: y },
+              onClick: ee,
+              disabled: !g || !c,
+              children: W?.apply || "Apply"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}, Ze = ({
+  value: r,
+  defaultValue: n,
+  onChange: a,
+  onApply: p,
+  onCancel: l,
+  presets: i,
+  primaryColor: m,
+  compareColor: y,
+  enableCompare: P = !1,
+  compareMode: I = "previousPeriod",
+  className: M,
+  style: O,
+  minDate: N,
+  maxDate: _,
+  weekStartsOn: q,
+  disabledDates: Y,
+  disableFuture: W,
+  disablePast: $,
+  locale: g,
+  labels: z,
+  classNames: c
+}) => {
+  const [w, V] = D(!1), [J, u] = D(
+    r || n || { startDate: /* @__PURE__ */ new Date(), endDate: /* @__PURE__ */ new Date() }
+  ), [k, b] = D(), [H, d] = D(P), [C, T] = D(I), [j, R] = D({ top: 0, left: 0 }), E = ve(null), S = ve(null);
+  G(() => {
+    r && u(r);
+  }, [r]), G(() => {
+    d(P);
+  }, [P]), G(() => {
+    T(I);
+  }, [I]);
+  const L = () => {
+    if (!E.current) return;
+    const x = E.current.getBoundingClientRect();
+    R({
+      top: x.bottom + window.scrollY + 4,
+      left: x.left + window.scrollX
+    });
+  }, F = () => {
+    w || L(), V((x) => !x);
+  };
+  G(() => {
+    if (!w) return;
+    const x = () => L();
+    return window.addEventListener("scroll", x, !0), window.addEventListener("resize", x), () => {
+      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x);
+    };
+  }, [w]), G(() => {
+    if (!w) return;
+    const x = (A) => {
+      const v = A.target;
+      E.current?.contains(v) || S.current?.contains(v) || (V(!1), l?.());
+    };
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
+  }, [w, l]);
+  const e = (x, A, v) => {
+    u(x), b(A), d(!!A), v && T(v), V(!1), a?.({
+      startDate: x.startDate,
+      endDate: x.endDate,
+      compareStartDate: A?.startDate,
+      compareEndDate: A?.endDate
+    }), p?.(x, A);
+  }, s = () => {
+    V(!1), l?.();
+  }, o = (x) => Z(x, "MMM d, yyyy", { locale: g }), f = `${o(J.startDate)} - ${o(J.endDate)}`;
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      ref: E,
+      className: `relative inline-block text-left ${M || ""} ${c?.root || ""}`,
+      style: {
+        "--sdc-primary-color": m,
+        "--sdc-compare-color": y,
+        ...O
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          "button",
+          {
+            className: `flex items-center justify-between min-w-[240px] px-3 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-sm ${c?.container || ""}`,
+            onClick: F,
+            type: "button",
+            "aria-haspopup": "dialog",
+            "aria-expanded": w,
+            children: [
+              /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 text-gray-700", children: [
+                /* @__PURE__ */ t.jsx("span", { className: "text-gray-400", children: /* @__PURE__ */ t.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) }),
+                /* @__PURE__ */ t.jsx("span", { className: "text-sm font-medium", children: f })
+              ] }),
+              k && /* @__PURE__ */ t.jsxs(
+                "span",
+                {
+                  className: `text-xs px-1.5 py-0.5 rounded ml-2 font-medium ${c?.dayCompare || ""}`,
+                  style: { color: y, backgroundColor: `${y}18` },
+                  children: [
+                    "vs ",
+                    o(k.startDate)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "svg",
+                {
+                  className: `w-4 h-4 text-gray-400 transition-transform ${w ? "rotate-180" : ""}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        w && Te(
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              ref: S,
+              style: {
+                position: "absolute",
+                top: j.top,
+                left: j.left,
+                zIndex: 99999
+              },
+              role: "dialog",
+              "aria-modal": "true",
+              children: /* @__PURE__ */ t.jsx(
+                "div",
+                {
+                  className: `bg-white ring-1 ring-black ring-opacity-5 rounded-lg shadow-2xl overflow-hidden ${c?.calendar || ""}`,
+                  style: { "--sdc-primary-color": m, "--sdc-compare-color": y },
+                  children: /* @__PURE__ */ t.jsx(
+                    Je,
+                    {
+                      initialRange: J,
+                      initialCompareRange: k,
+                      presets: i,
+                      onApply: e,
+                      onCancel: s,
+                      enableCompare: H,
+                      activeCompareMode: C,
+                      primaryColor: m,
+                      compareColor: y,
+                      minDate: N,
+                      maxDate: _,
+                      weekStartsOn: q,
+                      disabledDates: Y,
+                      disableFuture: W,
+                      disablePast: $,
+                      locale: g,
+                      labels: z,
+                      classNames: c
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  Ze as SmartDateCompare,
+  qe as defaultPresets
+};