react-fill-calendar 0.1.0

package/dist/index.js

@@ -0,0 +1,483 @@
+import X, { useMemo as re } from "react";
+var P = { exports: {} }, w = {};
+var V;
+function te() {
+  if (V) return w;
+  V = 1;
+  var f = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.fragment");
+  function b(p, s, i) {
+    var u = null;
+    if (i !== void 0 && (u = "" + i), s.key !== void 0 && (u = "" + s.key), "key" in s) {
+      i = {};
+      for (var x in s)
+        x !== "key" && (i[x] = s[x]);
+    } else i = s;
+    return s = i.ref, {
+      $$typeof: f,
+      type: p,
+      key: u,
+      ref: s !== void 0 ? s : null,
+      props: i
+    };
+  }
+  return w.Fragment = m, w.jsx = b, w.jsxs = b, w;
+}
+var k = {};
+var B;
+function ne() {
+  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case l:
+          return "Fragment";
+        case d:
+          return "Profiler";
+        case c:
+          return "StrictMode";
+        case O:
+          return "Suspense";
+        case D:
+          return "SuspenseList";
+        case Z:
+          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 A:
+            return "Portal";
+          case R:
+            return e.displayName || "Context";
+          case y:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case g:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case H:
+            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
+          case $:
+            r = e._payload, e = e._init;
+            try {
+              return f(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function m(e) {
+      return "" + e;
+    }
+    function b(e) {
+      try {
+        m(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), m(e);
+      }
+    }
+    function p(e) {
+      if (e === l) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === $)
+        return "<...>";
+      try {
+        var r = f(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = Y.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function u(e) {
+      if (L.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function x(e, r) {
+      function t() {
+        U || (U = !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)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function v() {
+      var e = f(this.type);
+      return W[e] || (W[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 _(e, r, t, o, C, I) {
+      var a = t.ref;
+      return e = {
+        $$typeof: T,
+        type: e,
+        key: r,
+        props: t,
+        _owner: o
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: v
+      }) : 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: C
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: I
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function S(e, r, t, o, C, I) {
+      var a = r.children;
+      if (a !== void 0)
+        if (o)
+          if (K(a)) {
+            for (o = 0; o < a.length; o++)
+              h(a[o]);
+            Object.freeze && Object.freeze(a);
+          } 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 h(a);
+      if (L.call(r, "key")) {
+        a = f(e);
+        var j = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        o = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", J[a + o] || (j = 0 < j.length ? "{" + j.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} />`,
+          o,
+          a,
+          j,
+          a
+        ), J[a + o] = !0);
+      }
+      if (a = null, t !== void 0 && (b(t), a = "" + t), u(r) && (b(r.key), a = "" + r.key), "key" in r) {
+        t = {};
+        for (var M in r)
+          M !== "key" && (t[M] = r[M]);
+      } else t = r;
+      return a && x(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), _(
+        e,
+        a,
+        t,
+        s(),
+        C,
+        I
+      );
+    }
+    function h(e) {
+      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === $ && (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 === T;
+    }
+    var E = X, T = /* @__PURE__ */ Symbol.for("react.transitional.element"), A = /* @__PURE__ */ Symbol.for("react.portal"), l = /* @__PURE__ */ Symbol.for("react.fragment"), c = /* @__PURE__ */ Symbol.for("react.strict_mode"), d = /* @__PURE__ */ Symbol.for("react.profiler"), y = /* @__PURE__ */ Symbol.for("react.consumer"), R = /* @__PURE__ */ Symbol.for("react.context"), g = /* @__PURE__ */ Symbol.for("react.forward_ref"), O = /* @__PURE__ */ Symbol.for("react.suspense"), D = /* @__PURE__ */ Symbol.for("react.suspense_list"), H = /* @__PURE__ */ Symbol.for("react.memo"), $ = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), Y = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, K = Array.isArray, F = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    E = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var U, W = {}, z = E.react_stack_bottom_frame.bind(
+      E,
+      i
+    )(), q = F(p(i)), J = {};
+    k.Fragment = l, k.jsx = function(e, r, t) {
+      var o = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !1,
+        o ? Error("react-stack-top-frame") : z,
+        o ? F(p(e)) : q
+      );
+    }, k.jsxs = function(e, r, t) {
+      var o = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !0,
+        o ? Error("react-stack-top-frame") : z,
+        o ? F(p(e)) : q
+      );
+    };
+  })()), k;
+}
+var G;
+function oe() {
+  return G || (G = 1, process.env.NODE_ENV === "production" ? P.exports = te() : P.exports = ne()), P.exports;
+}
+var n = oe();
+const ae = ({
+  fillingColor: f,
+  borderfillColor: m,
+  hoverborderColor: b,
+  cellBorderColor: p,
+  cellColor: s,
+  day: i,
+  isSelected: u = !1
+}) => {
+  const x = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }), v = i === x, _ = `
+    flex items-center justify-center
+    rounded-md border-2 transition-colors duration-150 hover:scale-150
+    ${!v && !u && b ? "hover-border-var" : ""}
+  `;
+  return v ? /* @__PURE__ */ n.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
+    /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        className: "absolute inset-0 rounded-md rainbow-spin",
+        style: {
+          background: "conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",
+          padding: "2px",
+          boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
+          borderRadius: "0.5rem"
+        }
+      }
+    ),
+    /* @__PURE__ */ n.jsx("div", { className: "relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]", children: /* @__PURE__ */ n.jsx(
+      "button",
+      {
+        type: "button",
+        className: "today-cell-btn flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150 hover:scale-150",
+        style: {
+          "--border-fill-color": u ? m : p,
+          backgroundColor: u ? f : s
+        }
+      }
+    ) })
+  ] }) : /* @__PURE__ */ n.jsx(
+    "button",
+    {
+      type: "button",
+      className: `${_} w-4 h-4`,
+      style: u && !v ? {
+        backgroundColor: f,
+        borderColor: m,
+        "--hover-border-color": b
+      } : v ? void 0 : {
+        backgroundColor: s,
+        "--border-color": p,
+        "--hover-border-color": b
+      }
+    }
+  );
+}, se = ({
+  fillingColor: f = "#50C878",
+  borderfillColor: m = "#27592D",
+  hoverborderColor: b = "#FFCCCB",
+  cellBorderColor: p = "#808080",
+  cellColor: s = "#ADADAD",
+  legend: i = !0,
+  mainBorder: u = !0,
+  borderColor: x = "#708090",
+  textColor: v = "#000000",
+  selectedDates: _ = [],
+  title: S = "Calendar"
+}) => {
+  const h = /* @__PURE__ */ new Date(), N = X.useMemo(() => {
+    const l = (c) => {
+      if (!c) return "";
+      if (typeof c == "string") {
+        const d = c.split("-");
+        if (d.length === 3) {
+          const y = d[0], R = String(Number(d[1])).padStart(2, "0"), g = String(Number(d[2])).padStart(2, "0");
+          return `${y}-${R}-${g}`;
+        }
+        return c;
+      }
+      return typeof c == "object" && c.day ? l(c.day) : "";
+    };
+    return new Set(
+      (_ || []).map((c) => l(c)).filter(Boolean)
+    );
+  }, [_]), E = re(() => {
+    const l = h.getFullYear(), c = h.getMonth(), d = new Date(l, c - 1, 1), y = new Date(l, c + 2, 0), R = [], g = new Date(d);
+    for (; g <= y; ) {
+      const O = `${g.getFullYear()}-${String(g.getMonth() + 1).padStart(2, "0")}-${String(
+        g.getDate()
+      ).padStart(2, "0")}`, D = N.has(O);
+      R.push({
+        key: O,
+        isSelected: D,
+        // keep a Date copy in case you want to use it later
+        dateObj: new Date(g)
+      }), g.setDate(g.getDate() + 1);
+    }
+    return R;
+  }, [_, h]), T = [], A = 15;
+  for (let l = 0; l < E.length; l += A)
+    T.push(E.slice(l, l + A));
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: `inline-flex flex-col gap-2 p-3 rounded-xl ${u ? "border shadow-sm" : ""} `,
+      style: {
+        borderColor: u ? x : void 0
+      },
+      children: [
+        i && /* @__PURE__ */ n.jsxs("div", { className: "flex justify-between text-sm", style: { color: v }, children: [
+          /* @__PURE__ */ n.jsx("strong", { children: S }),
+          /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [
+            /* @__PURE__ */ n.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
+              /* @__PURE__ */ n.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-md rainbow-spin",
+                  style: {
+                    background: "conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",
+                    padding: "2px",
+                    boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
+                    borderRadius: "0.5rem"
+                  }
+                }
+              ),
+              /* @__PURE__ */ n.jsx("div", { className: "relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]", children: /* @__PURE__ */ n.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150",
+                  style: {
+                    "--border-fill-color": m,
+                    backgroundColor: s
+                  }
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ n.jsx("span", { children: "Today" })
+          ] }),
+          /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [
+            /* @__PURE__ */ n.jsx(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center justify-center w-4 h-4 rounded-md border-2 border-emerald-600 transition-colors duration-150",
+                style: {
+                  backgroundColor: f,
+                  borderColor: m
+                }
+              }
+            ),
+            /* @__PURE__ */ n.jsx("span", { children: "Completed" })
+          ] })
+        ] }),
+        /* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-1", children: T.map((l, c) => /* @__PURE__ */ n.jsx("div", { className: "flex gap-1", children: l.map((d) => {
+          const y = d.dateObj.toLocaleDateString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric"
+          });
+          return /* @__PURE__ */ n.jsx(
+            "div",
+            {
+              className: "tooltip tooltip-top",
+              "data-tip": y,
+              children: /* @__PURE__ */ n.jsx(
+                ae,
+                {
+                  fillingColor: f,
+                  borderfillColor: m,
+                  hoverborderColor: b,
+                  cellBorderColor: p,
+                  cellColor: s,
+                  isSelected: d.isSelected,
+                  day: y
+                }
+              )
+            },
+            d.key
+          );
+        }) }, c)) })
+      ]
+    }
+  );
+}, ce = () => {
+  const f = [
+    {
+      day: "2026-1-31"
+    },
+    {
+      day: "2026-1-30"
+    },
+    {
+      day: "2026-1-28"
+    },
+    {
+      day: "2026-2-3"
+    }
+  ];
+  return /* @__PURE__ */ n.jsx(
+    se,
+    {
+      fillingColor: "#50C878",
+      borderfillColor: "#27592D",
+      title: "Habit Calendar",
+      hoverborderColor: "#FFCCCB",
+      cellColor: "#ADADAD",
+      cellBorderColor: "#808080",
+      legend: !0,
+      mainBorder: !0,
+      borderColor: "#708090",
+      textColor: "#708090",
+      selectedDates: f
+    }
+  );
+};
+export {
+  ce as default
+};

package/dist/index.umd.cjs

@@ -0,0 +1,10 @@
+(function(v,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("react")):typeof define=="function"&&define.amd?define(["react"],y):(v=typeof globalThis<"u"?globalThis:v||self,v.FillCalendar=y(v.React))})(this,(function(v){"use strict";var y={exports:{}},k={};var U;function H(){if(U)return k;U=1;var f=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function b(p,s,i){var u=null;if(i!==void 0&&(u=""+i),s.key!==void 0&&(u=""+s.key),"key"in s){i={};for(var x in s)x!=="key"&&(i[x]=s[x])}else i=s;return s=i.ref,{$$typeof:f,type:p,key:u,ref:s!==void 0?s:null,props:i}}return k.Fragment=m,k.jsx=b,k.jsxs=b,k}var S={};var W;function Z(){return W||(W=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case l:return"Fragment";case d:return"Profiler";case c:return"StrictMode";case P:return"Suspense";case F:return"SuspenseList";case te: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 O:return"Portal";case T:return e.displayName||"Context";case _:return(e._context.displayName||"Context")+".Consumer";case g:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case Y:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function m(e){return""+e}function b(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),m(e)}}function p(e){if(e===l)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=$.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function u(e){if(J.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function x(e,r){function n(){V||(V=!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)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function h(){var e=f(this.type);return q[e]||(q[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 E(e,r,n,o,D,M){var a=n.ref;return e={$$typeof:N,type:e,key:r,props:n,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):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:D}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,r,n,o,D,M){var a=r.children;if(a!==void 0)if(o)if(oe(a)){for(o=0;o<a.length;o++)j(a[o]);Object.freeze&&Object.freeze(a)}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 j(a);if(J.call(r,"key")){a=f(e);var w=Object.keys(r).filter(function(ae){return ae!=="key"});o=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",X[a+o]||(w=0<w.length?"{"+w.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} />`,o,a,w,a),X[a+o]=!0)}if(a=null,n!==void 0&&(b(n),a=""+n),u(r)&&(b(r.key),a=""+r.key),"key"in r){n={};for(var L in r)L!=="key"&&(n[L]=r[L])}else n=r;return a&&x(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,a,n,s(),D,M)}function j(e){C(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===Y&&(e._payload.status==="fulfilled"?C(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function C(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var R=v,N=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),l=Symbol.for("react.fragment"),c=Symbol.for("react.strict_mode"),d=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),T=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),F=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),$=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,J=Object.prototype.hasOwnProperty,oe=Array.isArray,I=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var V,q={},B=R.react_stack_bottom_frame.bind(R,i)(),G=I(p(i)),X={};S.Fragment=l,S.jsx=function(e,r,n){var o=1e4>$.recentlyCreatedOwnerStacks++;return A(e,r,n,!1,o?Error("react-stack-top-frame"):B,o?I(p(e)):G)},S.jsxs=function(e,r,n){var o=1e4>$.recentlyCreatedOwnerStacks++;return A(e,r,n,!0,o?Error("react-stack-top-frame"):B,o?I(p(e)):G)}})()),S}var z;function Q(){return z||(z=1,process.env.NODE_ENV==="production"?y.exports=H():y.exports=Z()),y.exports}var t=Q();const K=({fillingColor:f,borderfillColor:m,hoverborderColor:b,cellBorderColor:p,cellColor:s,day:i,isSelected:u=!1})=>{const x=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),h=i===x,E=`
+    flex items-center justify-center
+    rounded-md border-2 transition-colors duration-150 hover:scale-150
+    ${!h&&!u&&b?"hover-border-var":""}
+  `;return h?t.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[t.jsx("div",{className:"absolute inset-0 rounded-md rainbow-spin",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"0.5rem"}}),t.jsx("div",{className:"relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]",children:t.jsx("button",{type:"button",className:"today-cell-btn flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150 hover:scale-150",style:{"--border-fill-color":u?m:p,backgroundColor:u?f:s}})})]}):t.jsx("button",{type:"button",className:`${E} w-4 h-4`,style:u&&!h?{backgroundColor:f,borderColor:m,"--hover-border-color":b}:h?void 0:{backgroundColor:s,"--border-color":p,"--hover-border-color":b}})},ee=({fillingColor:f="#50C878",borderfillColor:m="#27592D",hoverborderColor:b="#FFCCCB",cellBorderColor:p="#808080",cellColor:s="#ADADAD",legend:i=!0,mainBorder:u=!0,borderColor:x="#708090",textColor:h="#000000",selectedDates:E=[],title:A="Calendar"})=>{const j=new Date,C=v.useMemo(()=>{const l=c=>{if(!c)return"";if(typeof c=="string"){const d=c.split("-");if(d.length===3){const _=d[0],T=String(Number(d[1])).padStart(2,"0"),g=String(Number(d[2])).padStart(2,"0");return`${_}-${T}-${g}`}return c}return typeof c=="object"&&c.day?l(c.day):""};return new Set((E||[]).map(c=>l(c)).filter(Boolean))},[E]),R=v.useMemo(()=>{const l=j.getFullYear(),c=j.getMonth(),d=new Date(l,c-1,1),_=new Date(l,c+2,0),T=[],g=new Date(d);for(;g<=_;){const P=`${g.getFullYear()}-${String(g.getMonth()+1).padStart(2,"0")}-${String(g.getDate()).padStart(2,"0")}`,F=C.has(P);T.push({key:P,isSelected:F,dateObj:new Date(g)}),g.setDate(g.getDate()+1)}return T},[E,j]),N=[],O=15;for(let l=0;l<R.length;l+=O)N.push(R.slice(l,l+O));return t.jsxs("div",{className:`inline-flex flex-col gap-2 p-3 rounded-xl ${u?"border shadow-sm":""} `,style:{borderColor:u?x:void 0},children:[i&&t.jsxs("div",{className:"flex justify-between text-sm",style:{color:h},children:[t.jsx("strong",{children:A}),t.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[t.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[t.jsx("div",{className:"absolute inset-0 rounded-md rainbow-spin",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"0.5rem"}}),t.jsx("div",{className:"relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]",children:t.jsx("button",{type:"button",className:"flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150",style:{"--border-fill-color":m,backgroundColor:s}})})]}),t.jsx("span",{children:"Today"})]}),t.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[t.jsx("button",{type:"button",className:"flex items-center justify-center w-4 h-4 rounded-md border-2 border-emerald-600 transition-colors duration-150",style:{backgroundColor:f,borderColor:m}}),t.jsx("span",{children:"Completed"})]})]}),t.jsx("div",{className:"flex flex-col gap-1",children:N.map((l,c)=>t.jsx("div",{className:"flex gap-1",children:l.map(d=>{const _=d.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"});return t.jsx("div",{className:"tooltip tooltip-top","data-tip":_,children:t.jsx(K,{fillingColor:f,borderfillColor:m,hoverborderColor:b,cellBorderColor:p,cellColor:s,isSelected:d.isSelected,day:_})},d.key)})},c))})]})};return()=>{const f=[{day:"2026-1-31"},{day:"2026-1-30"},{day:"2026-1-28"},{day:"2026-2-3"}];return t.jsx(ee,{fillingColor:"#50C878",borderfillColor:"#27592D",title:"Habit Calendar",hoverborderColor:"#FFCCCB",cellColor:"#ADADAD",cellBorderColor:"#808080",legend:!0,mainBorder:!0,borderColor:"#708090",textColor:"#708090",selectedDates:f})}}));

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-fill-calendar",
+  "version": "0.1.0",
+  "description": "Fill dates on a calendar displaying boxes for dates. Customize colors and borders. Perfect for habit tracking or event marking in React applications.",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "calendar",
+    "components"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=17.0.0 <20.0.0",
+    "react-dom": ">=17.0.0 <20.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.24",
+    "daisyui": "^5.5.16",
+    "postcss": "^8.5.6",
+    "react": ">=17.0.0 <20.0.0",
+    "react-dom": ">=17.0.0 <20.0.0",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.3.1"
+  }
+}

package/readme.md

@@ -0,0 +1,36 @@
+# React Filled Calendar
+
+A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with Tailwind and DaisyUI.
+
+---
+
+## 🚀 Features
+
+- Pass in an array of dates to automatically fill or highlight them  
+- Fully responsive layout  
+- Built with React  
+- Easily styled with TailwindCSS + DaisyUI  
+- Ideal for dashboards, planners, journals, and scheduling tools  
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-filled-calendar
+
+
+
+## Props
+
+| Prop              | Type       | Required | Default     | Description |
+|-------------------|------------|----------|-------------|-------------|
+| `fillingColor`     | `string`   | No       | `"#50C878"` | Background color used to fill selected or marked dates. |
+| `borderfillColor`  | `string`   | No       | `"#27592D"` | Border color applied to filled date cells. |
+| `title`            | `string`   | No       | `"Calendar"` | Title displayed above the calendar. |
+| `hoverborderColor` | `string`   | No       | `"#FFCCCB"` | Border color applied when hovering over a date cell. |
+| `cellColor`        | `string`   | No       | `"#ADADAD"` | Background color for unfilled date cells. |
+| `cellBorderColor`  | `string`   | No       | `"#808080"` | Border color for unfilled date cells. |
+| 'mainBorder'      |   `boolean`  |No      |  `true`      |  Removes border and shadow for calendar |
+| 'borderColor'     |  `string`    | No      |  `"#708090"`| Changes color of calendar border |   
+| `legend`           | `boolean`  | No       | `true`      | Toggles the display of the legend explaining filled vs. unfilled dates. |