virtual-ui-lib 1.0.14 → 1.0.15

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AlertBanner: () => AlertBanner,
-  Button: () => Button
+  Button: () => Button,
+  Card: () => Card
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -130,8 +131,79 @@ var Button = ({
     loading ? "Loading..." : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, iconLeft, text, iconRight))
   );
 };
+
+// src/components/Card/Card.jsx
+var import_react3 = __toESM(require("react"));
+var Card = ({
+  image = "https://via.placeholder.com/300x200",
+  title = "Card Title",
+  description = "This is a description of the card content. It should be concise and informative.",
+  onClick,
+  loading = false,
+  disabled = false,
+  bg = "#f9fafb",
+  textColor = "#0f172a",
+  hoverBg = "#e5e7eb",
+  radius = "12px",
+  shadow = "0 4px 14px rgba(0,0,0,0.1)",
+  hoverShadow = "0 8px 28px rgba(0,0,0,0.2)",
+  transition = "transform 0.3s, box-shadow 0.3s"
+}) => {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: {
+        background: bg,
+        borderRadius: radius,
+        boxShadow: shadow,
+        padding: "16px",
+        transition,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        position: "relative",
+        overflow: "hidden"
+      },
+      onClick: disabled ? null : onClick,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.boxShadow = hoverShadow;
+        e.currentTarget.style.transform = "translateY(-4px)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.boxShadow = shadow;
+        e.currentTarget.style.transform = "translateY(0)";
+      }
+    },
+    loading ? /* @__PURE__ */ import_react3.default.createElement("div", { style: {
+      background: "#e0e0e0",
+      height: "200px",
+      borderRadius: radius,
+      marginBottom: "12px"
+    } }) : /* @__PURE__ */ import_react3.default.createElement("img", { src: image, alt: title, style: { width: "100%", borderRadius: radius } }),
+    /* @__PURE__ */ import_react3.default.createElement("h3", { style: { margin: "12px 0 4px", fontSize: "16px", color: textColor } }, title),
+    /* @__PURE__ */ import_react3.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#374151" } }, description),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        style: {
+          padding: "10px 16px",
+          background: "#2563eb",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontWeight: "600",
+          transition: "background 0.3s"
+        },
+        onClick,
+        disabled
+      },
+      "Action"
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
-  Button
+  Button,
+  Card
 });

package/dist/index.mjs

@@ -94,7 +94,78 @@ var Button = ({
     loading ? "Loading..." : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(React2.Fragment, null, iconLeft, text, iconRight))
   );
 };
+
+// src/components/Card/Card.jsx
+import React3 from "react";
+var Card = ({
+  image = "https://via.placeholder.com/300x200",
+  title = "Card Title",
+  description = "This is a description of the card content. It should be concise and informative.",
+  onClick,
+  loading = false,
+  disabled = false,
+  bg = "#f9fafb",
+  textColor = "#0f172a",
+  hoverBg = "#e5e7eb",
+  radius = "12px",
+  shadow = "0 4px 14px rgba(0,0,0,0.1)",
+  hoverShadow = "0 8px 28px rgba(0,0,0,0.2)",
+  transition = "transform 0.3s, box-shadow 0.3s"
+}) => {
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: {
+        background: bg,
+        borderRadius: radius,
+        boxShadow: shadow,
+        padding: "16px",
+        transition,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        position: "relative",
+        overflow: "hidden"
+      },
+      onClick: disabled ? null : onClick,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.boxShadow = hoverShadow;
+        e.currentTarget.style.transform = "translateY(-4px)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.boxShadow = shadow;
+        e.currentTarget.style.transform = "translateY(0)";
+      }
+    },
+    loading ? /* @__PURE__ */ React3.createElement("div", { style: {
+      background: "#e0e0e0",
+      height: "200px",
+      borderRadius: radius,
+      marginBottom: "12px"
+    } }) : /* @__PURE__ */ React3.createElement("img", { src: image, alt: title, style: { width: "100%", borderRadius: radius } }),
+    /* @__PURE__ */ React3.createElement("h3", { style: { margin: "12px 0 4px", fontSize: "16px", color: textColor } }, title),
+    /* @__PURE__ */ React3.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#374151" } }, description),
+    /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        style: {
+          padding: "10px 16px",
+          background: "#2563eb",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontWeight: "600",
+          transition: "background 0.3s"
+        },
+        onClick,
+        disabled
+      },
+      "Action"
+    )
+  );
+};
 export {
   AlertBanner,
-  Button
+  Button,
+  Card
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",