virtual-ui-lib 1.0.5 → 1.0.10

package/dist/index.js

@@ -30,12 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Alert: () => Alert,
+  AnimatedButton: () => AnimatedButton,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
   Input: () => Input,
   Modal: () => Modal,
+  ProgressBar: () => ProgressBar,
   Spinner: () => Spinner
 });
 module.exports = __toCommonJS(index_exports);
@@ -311,14 +313,90 @@ var Modal = ({
     )
   );
 };
+
+// src/components/ProgressBar/ProgressBar.jsx
+var import_react9 = __toESM(require("react"));
+var ProgressBar = ({
+  progress = 50,
+  height = "20px",
+  bgColor = "#2563eb",
+  trackColor = "#d1d5db",
+  radius = "10px",
+  label = "Progress",
+  textColor = "#ffffff"
+}) => {
+  return /* @__PURE__ */ import_react9.default.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+    width: progress + "%",
+    height,
+    background: bgColor,
+    borderRadius: radius,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    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,
   Card,
   Input,
   Modal,
+  ProgressBar,
   Spinner
 });

package/dist/index.mjs

@@ -269,13 +269,89 @@ var Modal = ({
     )
   );
 };
+
+// src/components/ProgressBar/ProgressBar.jsx
+import React9 from "react";
+var ProgressBar = ({
+  progress = 50,
+  height = "20px",
+  bgColor = "#2563eb",
+  trackColor = "#d1d5db",
+  radius = "10px",
+  label = "Progress",
+  textColor = "#ffffff"
+}) => {
+  return /* @__PURE__ */ React9.createElement("div", { style: { width: "100%", background: trackColor, borderRadius: radius, overflow: "hidden" } }, /* @__PURE__ */ React9.createElement("div", { style: {
+    width: progress + "%",
+    height,
+    background: bgColor,
+    borderRadius: radius,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    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,
   Card,
   Input,
   Modal,
+  ProgressBar,
   Spinner
 };

package/package.json

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