react-fill-calendar 0.2.2 → 0.2.4

package/dist/index.css

@@ -0,0 +1 @@
+@keyframes rainbow-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rainbow-spin{animation:rainbow-spin 4s linear infinite}.today-cell-btn{border-color:transparent}.today-cell-btn:hover{border-color:var(--border-fill-color)}.hover-border-var{border-color:var(--border-color, transparent)}.hover-border-var:hover{border-color:var(--hover-border-color)}.fc-calendar{display:inline-flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px}.fc-main-border{border:1px solid;box-shadow:0 1px 2px #0000000d}.fc-legend{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;gap:4px}.fc-legend-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.fc-legend-indicator{display:flex;align-items:center;gap:4px;font-weight:600}.fc-color-box{position:relative;width:16px;height:16px;box-sizing:border-box}.fc-rainbow{position:absolute;inset:0;border-radius:50%;z-index:0}.fc-color-inner{position:absolute;inset:2px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;z-index:1}.fc-base-button{width:16px;height:16px;border:2px solid transparent;box-sizing:border-box;border-radius:50%;background-clip:padding-box}.fc-rounded-square{border-radius:6px}.fc-rounded-circle{border-radius:9999px}.fc-legend-completed{display:flex;align-items:center;gap:4px;font-weight:600}.fc-legend-completed .fc-base-button{width:16px;height:16px}.fc-rows{display:flex;flex-direction:column;gap:4px}.fc-row{display:flex;gap:4px}.fc-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center}.fc-tooltip-text{position:absolute;z-index:50;white-space:nowrap;background:#202020f2;color:#fff;padding:6px 8px;border-radius:6px;font-size:.75rem;line-height:1;transform-origin:center;opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease,visibility .12s;pointer-events:none}.fc-tooltip:hover .fc-tooltip-text{opacity:1;visibility:visible;pointer-events:auto}.fc-tooltip-top .fc-tooltip-text{bottom:100%;left:50%;transform:translate(-50%,-6px) scale(.95)}.fc-tooltip-top:hover .fc-tooltip-text{transform:translate(-50%,-8px) scale(1)}.fc-tooltip-bottom .fc-tooltip-text{top:100%;left:50%;transform:translate(-50%,6px) scale(.95)}.fc-tooltip-bottom:hover .fc-tooltip-text{transform:translate(-50%,8px) scale(1)}.fc-tooltip-left .fc-tooltip-text{right:100%;top:50%;transform:translate(-6px,-50%) scale(.95)}.fc-tooltip-left:hover .fc-tooltip-text{transform:translate(-8px,-50%) scale(1)}.fc-tooltip-right .fc-tooltip-text{left:100%;top:50%;transform:translate(6px,-50%) scale(.95)}.fc-tooltip-right:hover .fc-tooltip-text{transform:translate(8px,-50%) scale(1)}.fc-tooltip-text:after{content:"";position:absolute;width:8px;height:8px;background:#202020f2;transform:rotate(45deg)}.fc-tooltip-top .fc-tooltip-text:after{left:50%;bottom:-4px;transform:translate(-50%) rotate(45deg)}.fc-tooltip-bottom .fc-tooltip-text:after{left:50%;top:-4px;transform:translate(-50%) rotate(45deg)}.fc-tooltip-left .fc-tooltip-text:after{right:-4px;top:50%;transform:translateY(-50%) rotate(45deg)}.fc-tooltip-right .fc-tooltip-text:after{left:-4px;top:50%;transform:translateY(-50%) rotate(45deg)}.fc-day-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:2px solid var(--border-color, transparent);transition:transform .15s ease,border-color .15s ease;background:transparent}.fc-day-button:hover{transform:scale(1.5)}.fc-cursor-pointer{cursor:pointer}.fc-full{width:100%;height:100%}.fc-today-wrap{position:relative;width:16px;height:16px;box-sizing:border-box}.fc-today-inner{position:absolute;display:flex;align-items:center;height:16px;width:16px;justify-content:center;box-sizing:border-box;z-index:1}.fc-today-wrap .fc-rainbow{z-index:0;border-radius:50%}.fc-today-wrap .fc-today-inner{z-index:1}.fc-today-inner .fc-day-button{width:100%;height:100%;border:2px solid transparent;border-radius:50%;box-sizing:border-box;background-clip:padding-box}.fc-day-button,.fc-today-inner,.fc-color-inner{box-sizing:border-box}

package/dist/index.js

@@ -0,0 +1,456 @@
+import re, { useMemo as B } from "react";
+var M = { exports: {} }, D = {};
+var H;
+function te() {
+  if (H) return D;
+  H = 1;
+  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.fragment");
+  function p(E, f, u) {
+    var d = null;
+    if (u !== void 0 && (d = "" + u), f.key !== void 0 && (d = "" + f.key), "key" in f) {
+      u = {};
+      for (var R in f)
+        R !== "key" && (u[R] = f[R]);
+    } else u = f;
+    return f = u.ref, {
+      $$typeof: l,
+      type: E,
+      key: d,
+      ref: f !== void 0 ? f : null,
+      props: u
+    };
+  }
+  return D.Fragment = g, D.jsx = p, D.jsxs = p, D;
+}
+var Y = {};
+var Z;
+function ne() {
+  return Z || (Z = 1, process.env.NODE_ENV !== "production" && (function() {
+    function l(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === T ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case A:
+          return "Fragment";
+        case P:
+          return "Profiler";
+        case v:
+          return "StrictMode";
+        case y:
+          return "Suspense";
+        case _:
+          return "SuspenseList";
+        case m:
+          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 I:
+            return e.displayName || "Context";
+          case C:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case i:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case n:
+            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
+          case c:
+            r = e._payload, e = e._init;
+            try {
+              return l(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function g(e) {
+      return "" + e;
+    }
+    function p(e) {
+      try {
+        g(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var o = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), g(e);
+      }
+    }
+    function E(e) {
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === c)
+        return "<...>";
+      try {
+        var r = l(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function f() {
+      var e = b.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (F.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function R(e, r) {
+      function o() {
+        z || (z = !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
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function S() {
+      var e = l(this.type);
+      return J[e] || (J[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 k(e, r, o, a, L, U) {
+      var s = o.ref;
+      return e = {
+        $$typeof: j,
+        type: e,
+        key: r,
+        props: o,
+        _owner: a
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: S
+      }) : 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: L
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function w(e, r, o, a, L, U) {
+      var s = r.children;
+      if (s !== void 0)
+        if (a)
+          if (K(s)) {
+            for (a = 0; a < s.length; a++)
+              h(s[a]);
+            Object.freeze && Object.freeze(s);
+          } 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(s);
+      if (F.call(r, "key")) {
+        s = l(e);
+        var $ = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        a = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", X[s + a] || ($ = 0 < $.length ? "{" + $.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} />`,
+          a,
+          s,
+          $,
+          s
+        ), X[s + a] = !0);
+      }
+      if (s = null, o !== void 0 && (p(o), s = "" + o), d(r) && (p(r.key), s = "" + r.key), "key" in r) {
+        o = {};
+        for (var W in r)
+          W !== "key" && (o[W] = r[W]);
+      } else o = r;
+      return s && R(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), k(
+        e,
+        s,
+        o,
+        f(),
+        L,
+        U
+      );
+    }
+    function h(e) {
+      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === c && (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 === j;
+    }
+    var x = re, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), O = /* @__PURE__ */ Symbol.for("react.portal"), A = /* @__PURE__ */ Symbol.for("react.fragment"), v = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), C = /* @__PURE__ */ Symbol.for("react.consumer"), I = /* @__PURE__ */ Symbol.for("react.context"), i = /* @__PURE__ */ Symbol.for("react.forward_ref"), y = /* @__PURE__ */ Symbol.for("react.suspense"), _ = /* @__PURE__ */ Symbol.for("react.suspense_list"), n = /* @__PURE__ */ Symbol.for("react.memo"), c = /* @__PURE__ */ Symbol.for("react.lazy"), m = /* @__PURE__ */ Symbol.for("react.activity"), T = /* @__PURE__ */ Symbol.for("react.client.reference"), b = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, K = Array.isArray, q = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    x = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var z, J = {}, V = x.react_stack_bottom_frame.bind(
+      x,
+      u
+    )(), G = q(E(u)), X = {};
+    Y.Fragment = A, Y.jsx = function(e, r, o) {
+      var a = 1e4 > b.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        o,
+        !1,
+        a ? Error("react-stack-top-frame") : V,
+        a ? q(E(e)) : G
+      );
+    }, Y.jsxs = function(e, r, o) {
+      var a = 1e4 > b.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        o,
+        !0,
+        a ? Error("react-stack-top-frame") : V,
+        a ? q(E(e)) : G
+      );
+    };
+  })()), Y;
+}
+var Q;
+function oe() {
+  return Q || (Q = 1, process.env.NODE_ENV === "production" ? M.exports = te() : M.exports = ne()), M.exports;
+}
+var t = oe();
+const ae = ({
+  fillingColor: l,
+  borderfillColor: g,
+  hoverborderColor: p,
+  cellBorderColor: E,
+  cellColor: f,
+  day: u,
+  isSelected: d = !1,
+  cellShape: R,
+  href: S
+}) => {
+  const k = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }), w = R === "square" ? "fc-rounded-square" : "fc-rounded-circle", h = u === k, N = `fc-day-button ${w} ${!h && !d && p ? "hover-border-var" : ""}`, x = !!(S && d), j = (v = "", P) => /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      type: "button",
+      className: `${N} ${v} ${x ? "fc-cursor-pointer" : ""}`,
+      style: P
+    }
+  ), O = (v) => x ? /* @__PURE__ */ t.jsx("a", { href: S, className: "contents", children: v }) : v;
+  if (h) {
+    const v = /* @__PURE__ */ t.jsxs("div", { className: "fc-today-wrap", children: [
+      /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: "rainbow-spin fc-rainbow",
+          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: "50%"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx("div", { className: "fc-color-inner", children: /* @__PURE__ */ t.jsx("div", { className: `fc-today-inner ${w}`, children: j("today-cell-btn fc-full", {
+        "--border-fill-color": d ? g : E,
+        backgroundColor: d ? l : f
+      }) }) })
+    ] });
+    return O(v);
+  }
+  return O(j("w-4 h-4", d && !h ? {
+    backgroundColor: l,
+    borderColor: g,
+    "--hover-border-color": p
+  } : h ? void 0 : {
+    backgroundColor: f,
+    "--border-color": E,
+    "--hover-border-color": p
+  }));
+}, se = ({
+  fillingColor: l = "#50C878",
+  borderfillColor: g = "#27592D",
+  hoverborderColor: p = "#FFCCCB",
+  cellBorderColor: E = "#808080",
+  cellColor: f = "#ADADAD",
+  legend: u = !0,
+  mainBorder: d = !0,
+  borderColor: R = "#708090",
+  textColor: S = "#708090",
+  selectedDates: k = [],
+  title: w = "Calendar",
+  cellShape: h = "circle",
+  column: N = 15,
+  legendColumn: x = !1
+}) => {
+  const j = /* @__PURE__ */ new Date(), { selectedSet: O, hrefMap: A } = B(() => {
+    const i = (n) => {
+      if (!n) return "";
+      if (typeof n == "string") {
+        const c = n.split("-");
+        if (c.length === 3) {
+          const m = c[0], T = String(Number(c[1])).padStart(2, "0"), b = String(Number(c[2])).padStart(2, "0");
+          return `${m}-${T}-${b}`;
+        }
+        return n;
+      }
+      return typeof n == "object" && n.day ? i(n.day) : "";
+    }, y = /* @__PURE__ */ new Set(), _ = /* @__PURE__ */ new Map();
+    for (const n of k || []) {
+      const c = n && typeof n == "object" && n.day ? i(n.day) : i(n);
+      c && (y.add(c), n && typeof n == "object" && n.href && _.set(c, n.href));
+    }
+    return { selectedSet: y, hrefMap: _ };
+  }, [k]), v = B(() => {
+    const i = j.getFullYear(), y = j.getMonth(), _ = new Date(i, y - 1, 1), n = new Date(i, y + 2, 0), c = [], m = new Date(_);
+    for (; m <= n; ) {
+      const T = `${m.getFullYear()}-${String(m.getMonth() + 1).padStart(2, "0")}-${String(
+        m.getDate()
+      ).padStart(2, "0")}`, b = O.has(T), F = A.get(T);
+      c.push({
+        key: T,
+        isSelected: b,
+        href: F,
+        // keep a Date copy in case you want to use it later
+        dateObj: new Date(m)
+      }), m.setDate(m.getDate() + 1);
+    }
+    return c;
+  }, [k, j]), P = [], C = N;
+  for (let i = 0; i < v.length; i += C)
+    P.push(v.slice(i, i + C));
+  const I = h === "square" ? "fc-rounded-square" : "fc-rounded-circle";
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: `fc-calendar ${d ? "fc-main-border" : ""}`,
+      style: {
+        borderColor: d ? R : void 0,
+        color: S
+      },
+      children: [
+        u && /* @__PURE__ */ t.jsxs("div", { className: `fc-legend ${x ? "fc-legend-col" : ""}`, children: [
+          /* @__PURE__ */ t.jsx("strong", { children: w }),
+          /* @__PURE__ */ t.jsxs("div", { className: "fc-legend", children: [
+            /* @__PURE__ */ t.jsxs("div", { className: "fc-legend-indicator", children: [
+              /* @__PURE__ */ t.jsxs("div", { className: "fc-color-box", children: [
+                /* @__PURE__ */ t.jsx(
+                  "div",
+                  {
+                    className: "rainbow-spin fc-rainbow",
+                    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: "50%"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx("div", { className: "fc-color-inner", children: /* @__PURE__ */ t.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "fc-base-button",
+                    style: {
+                      "--border-fill-color": g,
+                      backgroundColor: f
+                    }
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ t.jsx("span", { children: "Today" })
+            ] }),
+            /* @__PURE__ */ t.jsxs("div", { className: "fc-legend-completed", children: [
+              /* @__PURE__ */ t.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `fc-base-button ${I}`,
+                  style: {
+                    backgroundColor: l,
+                    borderColor: g
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx("span", { children: "Completed" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx("div", { className: "fc-rows", children: P.map((i, y) => /* @__PURE__ */ t.jsx("div", { className: "fc-row", children: i.map((_, n) => {
+          const c = _.dateObj.toLocaleDateString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric"
+          }), m = n < 3, T = n >= C - 3;
+          let b = "fc-tooltip-top";
+          return m ? b = "fc-tooltip-right" : T ? b = "fc-tooltip-left" : y === 0 && (b = "fc-tooltip-bottom"), /* @__PURE__ */ t.jsxs("div", { className: `fc-tooltip ${b}`, children: [
+            /* @__PURE__ */ t.jsx(
+              ae,
+              {
+                fillingColor: l,
+                borderfillColor: g,
+                hoverborderColor: p,
+                cellBorderColor: E,
+                cellColor: f,
+                isSelected: _.isSelected,
+                day: c,
+                href: _.href,
+                cellShape: h
+              }
+            ),
+            /* @__PURE__ */ t.jsx("div", { className: "fc-tooltip-text", role: "tooltip", children: c })
+          ] }, _.key);
+        }) }, y)) })
+      ]
+    }
+  );
+}, fe = (l) => /* @__PURE__ */ t.jsx(se, { ...l });
+export {
+  se as Calendar,
+  fe as default
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(k,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(k=typeof globalThis<"u"?globalThis:k||self,S(k.FillCalendar={},k.React))})(this,(function(k,S){"use strict";var L={exports:{}},Y={};var V;function re(){if(V)return Y;V=1;var l=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function p(h,f,u){var d=null;if(u!==void 0&&(d=""+u),f.key!==void 0&&(d=""+f.key),"key"in f){u={};for(var R in f)R!=="key"&&(u[R]=f[R])}else u=f;return f=u.ref,{$$typeof:l,type:h,key:d,ref:f!==void 0?f:null,props:u}}return Y.Fragment=g,Y.jsx=p,Y.jsxs=p,Y}var F={};var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case D:return"Profiler";case v:return"StrictMode";case E:return"Suspense";case _:return"SuspenseList";case m: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 P:return"Portal";case W:return e.displayName||"Context";case M:return(e._context.displayName||"Context")+".Consumer";case i:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case n:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case c:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function g(e){return""+e}function p(e){try{g(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),g(e)}}function h(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===c)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function f(){var e=b.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function d(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function o(){H||(H=!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))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function O(){var e=l(this.type);return Z[e]||(Z[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 w(e,r,o,a,U,z){var s=o.ref;return e={$$typeof:j,type:e,key:r,props:o,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):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:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,o,a,U,z){var s=r.children;if(s!==void 0)if(a)if(se(s)){for(a=0;a<s.length;a++)y(s[a]);Object.freeze&&Object.freeze(s)}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 y(s);if(I.call(r,"key")){s=l(e);var $=Object.keys(r).filter(function(ce){return ce!=="key"});a=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",ee[s+a]||($=0<$.length?"{"+$.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} />`,a,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(p(o),s=""+o),d(r)&&(p(r.key),s=""+r.key),"key"in r){o={};for(var J in r)J!=="key"&&(o[J]=r[J])}else o=r;return s&&R(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,s,o,f(),U,z)}function y(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===c&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var x=S,j=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),W=Symbol.for("react.context"),i=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),n=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),m=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),b=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,se=Array.isArray,q=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=x.react_stack_bottom_frame.bind(x,u)(),K=q(h(u)),ee={};F.Fragment=C,F.jsx=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!1,a?Error("react-stack-top-frame"):Q,a?q(h(e)):K)},F.jsxs=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!0,a?Error("react-stack-top-frame"):Q,a?q(h(e)):K)}})()),F}var X;function ne(){return X||(X=1,process.env.NODE_ENV==="production"?L.exports=re():L.exports=te()),L.exports}var t=ne();const oe=({fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,day:u,isSelected:d=!1,cellShape:R,href:O})=>{const w=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),N=R==="square"?"fc-rounded-square":"fc-rounded-circle",y=u===w,A=`fc-day-button ${N} ${!y&&!d&&p?"hover-border-var":""}`,x=!!(O&&d),j=(v="",D)=>t.jsx("button",{type:"button",className:`${A} ${v} ${x?"fc-cursor-pointer":""}`,style:D}),P=v=>x?t.jsx("a",{href:O,className:"contents",children:v}):v;if(y){const v=t.jsxs("div",{className:"fc-today-wrap",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",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:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("div",{className:`fc-today-inner ${N}`,children:j("today-cell-btn fc-full",{"--border-fill-color":d?g:h,backgroundColor:d?l:f})})})]});return P(v)}return P(j("w-4 h-4",d&&!y?{backgroundColor:l,borderColor:g,"--hover-border-color":p}:y?void 0:{backgroundColor:f,"--border-color":h,"--hover-border-color":p}))},B=({fillingColor:l="#50C878",borderfillColor:g="#27592D",hoverborderColor:p="#FFCCCB",cellBorderColor:h="#808080",cellColor:f="#ADADAD",legend:u=!0,mainBorder:d=!0,borderColor:R="#708090",textColor:O="#708090",selectedDates:w=[],title:N="Calendar",cellShape:y="circle",column:A=15,legendColumn:x=!1})=>{const j=new Date,{selectedSet:P,hrefMap:C}=S.useMemo(()=>{const i=n=>{if(!n)return"";if(typeof n=="string"){const c=n.split("-");if(c.length===3){const m=c[0],T=String(Number(c[1])).padStart(2,"0"),b=String(Number(c[2])).padStart(2,"0");return`${m}-${T}-${b}`}return n}return typeof n=="object"&&n.day?i(n.day):""},E=new Set,_=new Map;for(const n of w||[]){const c=n&&typeof n=="object"&&n.day?i(n.day):i(n);c&&(E.add(c),n&&typeof n=="object"&&n.href&&_.set(c,n.href))}return{selectedSet:E,hrefMap:_}},[w]),v=S.useMemo(()=>{const i=j.getFullYear(),E=j.getMonth(),_=new Date(i,E-1,1),n=new Date(i,E+2,0),c=[],m=new Date(_);for(;m<=n;){const T=`${m.getFullYear()}-${String(m.getMonth()+1).padStart(2,"0")}-${String(m.getDate()).padStart(2,"0")}`,b=P.has(T),I=C.get(T);c.push({key:T,isSelected:b,href:I,dateObj:new Date(m)}),m.setDate(m.getDate()+1)}return c},[w,j]),D=[],M=A;for(let i=0;i<v.length;i+=M)D.push(v.slice(i,i+M));const W=y==="square"?"fc-rounded-square":"fc-rounded-circle";return t.jsxs("div",{className:`fc-calendar ${d?"fc-main-border":""}`,style:{borderColor:d?R:void 0,color:O},children:[u&&t.jsxs("div",{className:`fc-legend ${x?"fc-legend-col":""}`,children:[t.jsx("strong",{children:N}),t.jsxs("div",{className:"fc-legend",children:[t.jsxs("div",{className:"fc-legend-indicator",children:[t.jsxs("div",{className:"fc-color-box",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",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:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("button",{type:"button",className:"fc-base-button",style:{"--border-fill-color":g,backgroundColor:f}})})]}),t.jsx("span",{children:"Today"})]}),t.jsxs("div",{className:"fc-legend-completed",children:[t.jsx("button",{type:"button",className:`fc-base-button ${W}`,style:{backgroundColor:l,borderColor:g}}),t.jsx("span",{children:"Completed"})]})]})]}),t.jsx("div",{className:"fc-rows",children:D.map((i,E)=>t.jsx("div",{className:"fc-row",children:i.map((_,n)=>{const c=_.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),m=n<3,T=n>=M-3;let b="fc-tooltip-top";return m?b="fc-tooltip-right":T?b="fc-tooltip-left":E===0&&(b="fc-tooltip-bottom"),t.jsxs("div",{className:`fc-tooltip ${b}`,children:[t.jsx(oe,{fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,isSelected:_.isSelected,day:c,href:_.href,cellShape:y}),t.jsx("div",{className:"fc-tooltip-text",role:"tooltip",children:c})]},_.key)})},E))})]})},ae=l=>t.jsx(B,{...l});k.Calendar=B,k.default=ae,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,52 +1,48 @@
-{
-  "name": "react-fill-calendar",
-  "version": "0.2.2",
-  "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",
-  "types": "index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "index.d.ts"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "react",
-    "calendar",
-    "components"
-  ],
-  "author": "Robert Foley",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=17.0.0 <20.0.0",
-    "react-dom": ">=17.0.0 <20.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/apmanager001/react-fill-calendar"
-  },
-  "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"
-  }
-}
+{
+  "name": "react-fill-calendar",
+  "version": "0.2.4",
+  "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",
+  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "calendar",
+    "components"
+  ],
+  "author": "Robert Foley",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0 <20.0.0",
+    "react-dom": ">=17.0.0 <20.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apmanager001/react-fill-calendar"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "react": ">=17.0.0 <20.0.0",
+    "react-dom": ">=17.0.0 <20.0.0",
+    "vite": "^7.3.1"
+  }
+}

package/readme.md

@@ -3,17 +3,17 @@
 
 # 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.
+A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with plain CSS.
 
 ---
 
 ## 🚀 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  
+- Pass in an array of dates to automatically fill or highlight them
+- Transparent background
+- Built with React
+- Easily styled with plain CSS
+- Ideal for dashboards, planners, journals, and scheduling tools
 - Added hrefs to selected dates by passing href key shown in example
 
 ---
@@ -31,14 +31,13 @@ A lightweight, customizable React calendar component that automatically fills an
     </div>
 </div>
 
-
-``` 
+```
     import Calendar from 'react-fill-calendar'
 
     const Calendar = () => {
     return (
         <div>
-            <Calendar 
+            <Calendar
                 fillingColor = "#50C878",
                 borderfillColor = "#27592D",
                 hoverborderColor = "#FFCCCB",
@@ -57,35 +56,100 @@ A lightweight, customizable React calendar component that automatically fills an
                         day: '2026-1-15',
                     },
                 ],
-                title = "Calendar"
-            />
-        </div>
-    )
-    }
+                ## 📦 Installation
+
+                `npm install react-fill-calendar`
+
+                ### Usage
+
+                This package ships an accompanying CSS file that you should import in your app. Two recommended patterns:
+
+                - For Tailwind projects (important: import the library CSS after your Tailwind output so the library's rules are not overridden):
+
+                    In your main stylesheet (after Tailwind directives):
+
+                    ```css
+                    @tailwind base;
+                    @tailwind components;
+                    @tailwind utilities;
+
+                    /* import the component CSS after Tailwind so it takes precedence */
+                    @import 'react-fill-calendar/dist/calendar.css';
+                    ```
+
+                    Or in your JS entry after your Tailwind import:
+
+                    ```js
+                    import './main.css'; // contains Tailwind
+                    import 'react-fill-calendar/dist/calendar.css';
+                    import App from './App';
+                    ```
+
+                - For non-Tailwind projects:
+
+                    ```js
+                    import 'react-fill-calendar/dist/calendar.css';
+                    import Calendar from 'react-fill-calendar';
+
+                    export default function App() {
+                        return <Calendar />;
+                    }
+                    ```
+
+                Notes:
+                - The CSS is namespaced under the `.fc-` prefix and rooted at `.fc-calendar` to reduce collisions with utility frameworks like Tailwind.
+                - If you prefer to import source CSS directly, you can import `src/comp/calendar.css` and `src/comp/dayCell.css`, but publishing `dist/calendar.css` is the recommended, stable approach.
+
+                ### Example
+
+                <div style="display: flex; gap: 20px; justify-content: center;">
+                        <div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar.png?raw=true" width="300" alt='image of component'/>
+                        </div>
+                        <div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar2.png?raw=true" width="300" alt='image of component'/>
+                        </div>
+                </div>
+
+                ``` 
+                import Calendar from 'react-fill-calendar'
+
+                const Example = () => {
+                    return (
+                        <div>
+                            <Calendar 
+                                fillingColor="#50C878"
+                                borderfillColor="#27592D"
+                                hoverborderColor="#FFCCCB"
+                                cellBorderColor="#808080"
+                                cellColor="#ADADAD"
+                                legend={true}
+                                mainBorder={true}
+                                borderColor="#708090"
+                                textColor="#708090"
+                                selectedDates={[{ day: '2026-01-13', href: '/habit/1234565' }, { day: '2026-01-15' }]}
+                                title="Calendar"
+                            />
+                        </div>
+                    )
+                }
 
     export default Calendar
 ```
 
-
-
-
-
-
 ## Props
 
-| Prop              | Type       | Required | Default     | Options               | 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 the calendar. |
-| `borderColor`      | `string`   | No       | `"#708090"` | —                      | Changes color of the calendar border. |
-| `text color`      | `string`   | No       | `"#708090"` | —                      | Changes color of text in legend. |
-| `selectedDates`      | `array`   | No       | `[]` | —                      | Array of dates passed to fill in the cooresponding cell. Currently it requires an object for each day with "day" as the key as shown in example. The format of the day should be yyyy-mm-dd as a string |
-| `cellShape`        | `string`   | No       | `"square"`  | `"square"`, `"circle"` | Shape of each calendar cell. |
-| `column`        | `number`   | No       | `15`  | — | Number of cells in each row |
-| `legendColumn`        | `boolean`   | No       | `false`  | — | Changes orientation of legend from row to column |
-| `legend`           | `boolean`  | No       | `true`      | —                      | Toggles the display of the legend explaining filled vs. unfilled dates. |
+| Prop               | Type      | Required | Default      | Options                | 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 the calendar.                                                                                                                                                             |
+| `borderColor`      | `string`  | No       | `"#708090"`  | —                      | Changes color of the calendar border.                                                                                                                                                                   |
+| `text color`       | `string`  | No       | `"#708090"`  | —                      | Changes color of text in legend.                                                                                                                                                                        |
+| `selectedDates`    | `array`   | No       | `[]`         | —                      | Array of dates passed to fill in the cooresponding cell. Currently it requires an object for each day with "day" as the key as shown in example. The format of the day should be yyyy-mm-dd as a string |
+| `cellShape`        | `string`  | No       | `"square"`   | `"square"`, `"circle"` | Shape of each calendar cell.                                                                                                                                                                            |
+| `column`           | `number`  | No       | `15`         | —                      | Number of cells in each row                                                                                                                                                                             |
+| `legendColumn`     | `boolean` | No       | `false`      | —                      | Changes orientation of legend from row to column                                                                                                                                                        |
+| `legend`           | `boolean` | No       | `true`       | —                      | Toggles the display of the legend explaining filled vs. unfilled dates.                                                                                                                                 |