virtual-ui-lib 1.0.9 → 1.0.11

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Alert: () => Alert,
+  AnimatedButton: () => AnimatedButton,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
@@ -171,27 +172,22 @@ var Input = ({
 // src/components/Badge/Badge.jsx
 var import_react4 = __toESM(require("react"));
 var Badge = ({
-  text = "Badge",
-  bg = "#111",
-  color = "white",
-  radius = "12px",
-  padding = "4px 10px",
-  size = "12px"
+  text = "NEW",
+  color = "#ffffff",
+  bgColor = "#2563eb",
+  radius = "12px"
 }) => {
-  return /* @__PURE__ */ import_react4.default.createElement(
-    "span",
-    {
-      style: {
-        background: bg,
-        color,
-        padding,
-        borderRadius: radius,
-        fontSize: size,
-        display: "inline-block"
-      }
-    },
-    text
-  );
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: {
+    background: bgColor,
+    color,
+    borderRadius: radius,
+    padding: "8px 12px",
+    fontSize: "14px",
+    fontWeight: "600",
+    display: "inline-block",
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    fontFamily: "system-ui, sans-serif"
+  } }, text);
 };
 
 // src/components/Alert/Alert.jsx
@@ -335,9 +331,61 @@ var ProgressBar = ({
     position: "relative"
   } }, /* @__PURE__ */ import_react9.default.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
 };
+
+// src/components/AnimatedButton/AnimatedButton.jsx
+var import_react10 = __toESM(require("react"));
+var AnimatedButton = ({
+  text = "Click Me",
+  gradient = "linear-gradient(45deg, #2563eb, #7c3aed)",
+  color = "white",
+  size = "md",
+  width = "auto",
+  radius = "12px",
+  shadow = "0 4px 14px rgba(0, 0, 0, 0.2)",
+  loading = false,
+  onClick
+}) => {
+  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
+  const handleMouseEnter = (e) => {
+    e.target.style.transform = "scale(1.05)";
+  };
+  const handleMouseLeave = (e) => {
+    e.target.style.transform = "scale(1)";
+  };
+  return /* @__PURE__ */ import_react10.default.createElement(
+    "button",
+    {
+      onClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      disabled: loading,
+      style: {
+        background: gradient,
+        color,
+        padding: sizes[size],
+        width,
+        border: "none",
+        borderRadius: radius,
+        boxShadow: shadow,
+        cursor: loading ? "not-allowed" : "pointer",
+        fontWeight: "600",
+        fontSize: "15px",
+        transition: "transform 0.3s, box-shadow 0.3s",
+        fontFamily: "system-ui, sans-serif",
+        opacity: loading ? 0.6 : 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px"
+      }
+    },
+    loading ? "Loading..." : text
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  AnimatedButton,
   Avatar,
   Badge,
   Button,

package/dist/index.mjs

@@ -128,27 +128,22 @@ var Input = ({
 // src/components/Badge/Badge.jsx
 import React4 from "react";
 var Badge = ({
-  text = "Badge",
-  bg = "#111",
-  color = "white",
-  radius = "12px",
-  padding = "4px 10px",
-  size = "12px"
+  text = "NEW",
+  color = "#ffffff",
+  bgColor = "#2563eb",
+  radius = "12px"
 }) => {
-  return /* @__PURE__ */ React4.createElement(
-    "span",
-    {
-      style: {
-        background: bg,
-        color,
-        padding,
-        borderRadius: radius,
-        fontSize: size,
-        display: "inline-block"
-      }
-    },
-    text
-  );
+  return /* @__PURE__ */ React4.createElement("div", { style: {
+    background: bgColor,
+    color,
+    borderRadius: radius,
+    padding: "8px 12px",
+    fontSize: "14px",
+    fontWeight: "600",
+    display: "inline-block",
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    fontFamily: "system-ui, sans-serif"
+  } }, text);
 };
 
 // src/components/Alert/Alert.jsx
@@ -292,8 +287,60 @@ var ProgressBar = ({
     position: "relative"
   } }, /* @__PURE__ */ React9.createElement("span", { style: { color: textColor, fontWeight: "600", fontSize: "14px" } }, label, ": ", progress, "%")));
 };
+
+// src/components/AnimatedButton/AnimatedButton.jsx
+import React10 from "react";
+var AnimatedButton = ({
+  text = "Click Me",
+  gradient = "linear-gradient(45deg, #2563eb, #7c3aed)",
+  color = "white",
+  size = "md",
+  width = "auto",
+  radius = "12px",
+  shadow = "0 4px 14px rgba(0, 0, 0, 0.2)",
+  loading = false,
+  onClick
+}) => {
+  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
+  const handleMouseEnter = (e) => {
+    e.target.style.transform = "scale(1.05)";
+  };
+  const handleMouseLeave = (e) => {
+    e.target.style.transform = "scale(1)";
+  };
+  return /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      disabled: loading,
+      style: {
+        background: gradient,
+        color,
+        padding: sizes[size],
+        width,
+        border: "none",
+        borderRadius: radius,
+        boxShadow: shadow,
+        cursor: loading ? "not-allowed" : "pointer",
+        fontWeight: "600",
+        fontSize: "15px",
+        transition: "transform 0.3s, box-shadow 0.3s",
+        fontFamily: "system-ui, sans-serif",
+        opacity: loading ? 0.6 : 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px"
+      }
+    },
+    loading ? "Loading..." : text
+  );
+};
 export {
   Alert,
+  AnimatedButton,
   Avatar,
   Badge,
   Button,

package/package.json

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