react-pop-cards 0.2.2 → 0.2.3

package/dist/components/Card.js

@@ -14,6 +14,7 @@ var _web = require("@react-spring/web");
 var _reactResponsive = require("react-responsive");
 require("../index.css");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -132,6 +133,13 @@ const Card = _ref => {
         return "grid grid-cols-5 h-full";
     }
   };
+
+  // NOTE: text color according to bg color
+  const [textColor, setTextColor] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const luminance = (0, _chromaJs.default)(bgColor).luminance();
+    luminance < 0.5 ? setTextColor('#e5e5e5') : setTextColor('#1c2531');
+  }, [bgColor]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: getDisposition(disposition)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -144,7 +152,11 @@ const Card = _ref => {
       key: key,
       className: getCardClasses(key),
       ref: parentCard
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_web.animated.div, {
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        color: textColor
+      }
+    }, /*#__PURE__*/_react.default.createElement(_web.animated.div, {
       ref: activeCard === value.title ? activeCardRef : null,
       style: animatedStyles[key],
       onClick: () => handleCardClick(value.title),
@@ -169,7 +181,7 @@ const Card = _ref => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: key,
       onClick: () => handleCardClick(value.title),
-      className: "".concat(activeCard === value.title ? "scale-105 shadow-xl" : "scale-90", " ").concat(miniCardClass, " ").concat(isRounded ? "rounded-2xl" : "rounded-none")
+      className: "bg-base-100 ".concat(activeCard === value.title ? "scale-105 shadow-xl" : "scale-90", " ").concat(miniCardClass, " ").concat(isRounded ? "rounded-2xl" : "rounded-none")
     }, /*#__PURE__*/_react.default.createElement("label", {
       className: "text-center text-xs capitalize"
     }, value.title));

package/dist/index.css

@@ -1491,6 +1491,17 @@ html {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
+.loading {
+  pointer-events: none;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  width: 1.5rem;
+  background-color: currentColor;
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 .menu li > *:not(ul):not(.menu-title):not(details):active,
 .menu li > *:not(ul):not(.menu-title):not(details).active,
 .menu li > details > summary:active {

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+interface CardDataItem {
+  title: string;
+  description: string;
+  image?: string;
+}
+
+interface CardProps {
+  data: CardDataItem[];
+  bgColor?: string;
+  disposition?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop";
+  isRounded?: boolean;
+  tension?: number;
+  friction?: number;
+}
+
+declare const Card: React.FC<CardProps>;
+
+export default Card;

package/dist/index.js

@@ -1,14 +1,5 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function get() {
-    return _Card.default;
-  }
-});
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
@@ -40,4 +31,6 @@ _client.default.createRoot(document.getElementById("root")).render( /*#__PURE__*
   tension: 120,
   friction: 10,
   bgColor: "#e5e7eb"
-})));
+})));
+
+// export { Card }

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "react-pop-cards",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "module": "dist/index.js",
     "keywords": [
         "card",
@@ -26,14 +27,16 @@
         "core-js": "^3.35.1",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-best-gradient-color-picker": "^3.0.5",
         "react-color": "^2.19.3",
         "react-dom": "^18.2.0",
         "react-responsive": "^9.0.2",
+        "chroma-js": "^2.4.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^3.5.1"
     },
     "scripts": {
-        "start": "react-scripts start",
+        "dev": "react-scripts start",
         "build": "rm -rf dist && NODE_ENV=production babel src/index.js --out-dir dist --copy-files && babel src/components/Card.js --out-dir dist/components --copy-files && postcss src/index.css -o dist/index.css",
         "build:vercel": "react-scripts build",
         "test": "react-scripts test",