virtual-ui-lib 1.0.77 → 1.0.79

package/dist/index.js

@@ -32,6 +32,8 @@ __export(index_exports, {
   AnimatedForm: () => AnimatedForm,
   AvatarCard: () => AvatarCard,
   BackgoundImageSlider: () => BackgoundImageSlider,
+  Button: () => Button,
+  Card: () => Card,
   Charts: () => Charts,
   ColorPicker: () => ColorPicker,
   EcommerceCard: () => EcommerceCard,
@@ -3781,11 +3783,171 @@ var ReviewCard = ({
   };
   return /* @__PURE__ */ import_react22.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react22.default.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ import_react22.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
 };
+
+// src/components/Card/Card.jsx
+var import_react23 = __toESM(require("react"));
+var Card = ({
+  title = "Performance",
+  description = "Real-time metrics with live dashboard updates every second.",
+  icon = "\u26A1",
+  tag = "Active",
+  onClick
+}) => {
+  const [hovered, setHovered] = (0, import_react23.useState)(false);
+  return /* @__PURE__ */ import_react23.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick,
+      style: {
+        background: "#ffffff",
+        border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
+        borderRadius: "12px",
+        padding: "1.25rem",
+        transition: "border-color 0.2s, transform 0.2s",
+        transform: hovered ? "translateY(-2px)" : "translateY(0)",
+        cursor: onClick ? "pointer" : "default",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: "sans-serif",
+        width: "260px"
+      }
+    },
+    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: "3px",
+      background: "#1D9E75",
+      borderRadius: "12px 12px 0 0"
+    } }),
+    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+      width: 40,
+      height: 40,
+      borderRadius: 8,
+      background: "#E1F5EE",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 18,
+      marginBottom: 14
+    } }, icon),
+    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
+    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
+    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderTop: "0.5px solid #0000001a",
+      paddingTop: 12
+    } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      padding: "3px 9px",
+      borderRadius: 20,
+      background: "#E1F5EE",
+      color: "#0F6E56"
+    } }, tag), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+      fontSize: 14,
+      color: "#999",
+      display: "inline-block",
+      transition: "transform 0.2s",
+      transform: hovered ? "translateX(3px)" : "translateX(0)"
+    } }, "\u2192"))
+  );
+};
+
+// src/components/Button/Button.jsx
+var import_react24 = __toESM(require("react"));
+var Button = ({
+  text = "Click Me",
+  variant = "gradient",
+  // primary | outline | ghost | gradient
+  size = "md",
+  // sm | md | lg
+  icon,
+  loading = false,
+  disabled = false,
+  onClick
+}) => {
+  const [hovered, setHovered] = (0, import_react24.useState)(false);
+  const variants = {
+    primary: {
+      background: "#2563eb",
+      color: "#fff",
+      border: "none"
+    },
+    outline: {
+      background: "transparent",
+      color: "#2563eb",
+      border: "1px solid #2563eb"
+    },
+    ghost: {
+      background: "transparent",
+      color: "#111",
+      border: "none"
+    },
+    gradient: {
+      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
+      color: "#fff",
+      border: "none"
+    }
+  };
+  const sizes = {
+    sm: { padding: "6px 12px", fontSize: "12px" },
+    md: { padding: "10px 18px", fontSize: "14px" },
+    lg: { padding: "14px 24px", fontSize: "16px" }
+  };
+  return /* @__PURE__ */ import_react24.default.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        ...variants[variant],
+        ...sizes[size],
+        borderRadius: "10px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontWeight: 600,
+        fontFamily: "sans-serif",
+        // 🔥 Animation
+        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
+        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
+        transition: "all 0.2s ease",
+        opacity: disabled ? 0.6 : 1,
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react24.default.createElement(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "rgba(255,255,255,0.2)",
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    loading ? /* @__PURE__ */ import_react24.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, icon && /* @__PURE__ */ import_react24.default.createElement("span", null, icon), /* @__PURE__ */ import_react24.default.createElement("span", null, text))
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedForm,
   AvatarCard,
   BackgoundImageSlider,
+  Button,
+  Card,
   Charts,
   ColorPicker,
   EcommerceCard,

package/dist/index.mjs

@@ -3725,10 +3725,170 @@ var ReviewCard = ({
   };
   return /* @__PURE__ */ React22.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ React22.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ React22.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ React22.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
 };
+
+// src/components/Card/Card.jsx
+import React23, { useState as useState20 } from "react";
+var Card = ({
+  title = "Performance",
+  description = "Real-time metrics with live dashboard updates every second.",
+  icon = "\u26A1",
+  tag = "Active",
+  onClick
+}) => {
+  const [hovered, setHovered] = useState20(false);
+  return /* @__PURE__ */ React23.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick,
+      style: {
+        background: "#ffffff",
+        border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
+        borderRadius: "12px",
+        padding: "1.25rem",
+        transition: "border-color 0.2s, transform 0.2s",
+        transform: hovered ? "translateY(-2px)" : "translateY(0)",
+        cursor: onClick ? "pointer" : "default",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: "sans-serif",
+        width: "260px"
+      }
+    },
+    /* @__PURE__ */ React23.createElement("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: "3px",
+      background: "#1D9E75",
+      borderRadius: "12px 12px 0 0"
+    } }),
+    /* @__PURE__ */ React23.createElement("div", { style: {
+      width: 40,
+      height: 40,
+      borderRadius: 8,
+      background: "#E1F5EE",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 18,
+      marginBottom: 14
+    } }, icon),
+    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
+    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
+    /* @__PURE__ */ React23.createElement("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderTop: "0.5px solid #0000001a",
+      paddingTop: 12
+    } }, /* @__PURE__ */ React23.createElement("span", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      padding: "3px 9px",
+      borderRadius: 20,
+      background: "#E1F5EE",
+      color: "#0F6E56"
+    } }, tag), /* @__PURE__ */ React23.createElement("span", { style: {
+      fontSize: 14,
+      color: "#999",
+      display: "inline-block",
+      transition: "transform 0.2s",
+      transform: hovered ? "translateX(3px)" : "translateX(0)"
+    } }, "\u2192"))
+  );
+};
+
+// src/components/Button/Button.jsx
+import React24, { useState as useState21 } from "react";
+var Button = ({
+  text = "Click Me",
+  variant = "gradient",
+  // primary | outline | ghost | gradient
+  size = "md",
+  // sm | md | lg
+  icon,
+  loading = false,
+  disabled = false,
+  onClick
+}) => {
+  const [hovered, setHovered] = useState21(false);
+  const variants = {
+    primary: {
+      background: "#2563eb",
+      color: "#fff",
+      border: "none"
+    },
+    outline: {
+      background: "transparent",
+      color: "#2563eb",
+      border: "1px solid #2563eb"
+    },
+    ghost: {
+      background: "transparent",
+      color: "#111",
+      border: "none"
+    },
+    gradient: {
+      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
+      color: "#fff",
+      border: "none"
+    }
+  };
+  const sizes = {
+    sm: { padding: "6px 12px", fontSize: "12px" },
+    md: { padding: "10px 18px", fontSize: "14px" },
+    lg: { padding: "14px 24px", fontSize: "16px" }
+  };
+  return /* @__PURE__ */ React24.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        ...variants[variant],
+        ...sizes[size],
+        borderRadius: "10px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontWeight: 600,
+        fontFamily: "sans-serif",
+        // 🔥 Animation
+        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
+        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
+        transition: "all 0.2s ease",
+        opacity: disabled ? 0.6 : 1,
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React24.createElement(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "rgba(255,255,255,0.2)",
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    loading ? /* @__PURE__ */ React24.createElement("span", null, "Loading...") : /* @__PURE__ */ React24.createElement(React24.Fragment, null, icon && /* @__PURE__ */ React24.createElement("span", null, icon), /* @__PURE__ */ React24.createElement("span", null, text))
+  );
+};
 export {
   AnimatedForm,
   AvatarCard,
   BackgoundImageSlider,
+  Button,
+  Card,
   Charts,
   ColorPicker,
   EcommerceCard,

package/package.json

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