virtual-ui-lib 1.0.34 → 1.0.36

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AlertBanner: () => AlertBanner,
+  AnimatedNavbar: () => AnimatedNavbar,
   AnimatedProgressBar: () => AnimatedProgressBar,
   Button: () => Button,
   Card: () => Card,
@@ -48,6 +49,7 @@ __export(index_exports, {
   OTPInput: () => OTPInput,
   Rating: () => Rating,
   RatingStars: () => RatingStars,
+  StatCard: () => StatCard,
   UserAvatar: () => UserAvatar,
   WishlistButton: () => WishlistButton
 });
@@ -1076,9 +1078,100 @@ var Rating = ({
     );
   }));
 };
+
+// src/components/AnimatedNavbar/AnimatedNavbar.jsx
+var import_react22 = __toESM(require("react"));
+var AnimatedNavbar = ({
+  logo = "https://via.placeholder.com/100",
+  links = [{ text: "Home", href: "#" }, { text: "About", href: "#" }, { text: "Services", href: "#" }, { text: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  textColor = "#f1f5f9",
+  accentColor = "#7c3aed",
+  radius = "8px"
+}) => {
+  const [isOpen, setIsOpen] = import_react22.default.useState(false);
+  return /* @__PURE__ */ import_react22.default.createElement("nav", { style: {
+    background: bgColor,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "10px 20px",
+    borderRadius: radius,
+    position: "relative",
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    transition: "background 0.3s"
+  } }, /* @__PURE__ */ import_react22.default.createElement("img", { src: logo, alt: "Logo", style: { width: "100px" } }), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "15px" } }, /* @__PURE__ */ import_react22.default.createElement("button", { onClick: () => setIsOpen(!isOpen), style: {
+    background: accentColor,
+    color: textColor,
+    border: "none",
+    borderRadius: radius,
+    padding: "8px 16px",
+    fontWeight: "600",
+    transition: "background 0.3s"
+  } }, "Menu")), isOpen && /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    position: "absolute",
+    top: "100%",
+    right: "0",
+    background: bgColor,
+    borderRadius: radius,
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    zIndex: 10,
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    padding: "10px"
+  } }, links.map((link) => /* @__PURE__ */ import_react22.default.createElement("a", { key: link.text, href: link.href, style: {
+    color: textColor,
+    textDecoration: "none",
+    padding: "8px 12px",
+    borderRadius: radius,
+    transition: "background 0.3s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = accentColor, onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, link.text))));
+};
+
+// src/components/StatCard/StatCard.jsx
+var import_react23 = __toESM(require("react"));
+var StatCard = ({
+  title = "Total Sales",
+  value = 1e3,
+  change = 5,
+  bg = "#0f172a",
+  accent = "#0f766e",
+  negativeAccent = "#dc2626",
+  radius = "16px"
+}) => {
+  const [count, setCount] = (0, import_react23.useState)(0);
+  (0, import_react23.useEffect)(() => {
+    let start = 0;
+    const end = value;
+    const duration = 2;
+    const increment = end / (duration * 60);
+    const timer = setInterval(() => {
+      start += increment;
+      if (start >= end) {
+        clearInterval(timer);
+        setCount(end);
+      } else {
+        setCount(Math.floor(start));
+      }
+    }, 1e3 / 60);
+    return () => clearInterval(timer);
+  }, [value]);
+  return /* @__PURE__ */ import_react23.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "280px", fontFamily: "system-ui, sans-serif", color: "#f1f5f9", position: "relative", boxShadow: "0 10px 30px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ import_react23.default.createElement("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react23.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700", margin: "0 0 8px" } }, count), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+    background: change >= 0 ? accent : negativeAccent,
+    color: "white",
+    padding: "4px 8px",
+    borderRadius: "12px",
+    fontSize: "12px",
+    position: "absolute",
+    top: "24px",
+    right: "24px"
+  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", height: "20", viewBox: "0 0 100 20", style: { marginTop: "10px" } }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "0,15 20,10 40,12 60,5 80,8 100,0", stroke: accent, fill: "none", strokeWidth: "2" })));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
+  AnimatedNavbar,
   AnimatedProgressBar,
   Button,
   Card,
@@ -1097,6 +1190,7 @@ var Rating = ({
   OTPInput,
   Rating,
   RatingStars,
+  StatCard,
   UserAvatar,
   WishlistButton
 });

package/dist/index.mjs

@@ -1021,8 +1021,99 @@ var Rating = ({
     );
   }));
 };
+
+// src/components/AnimatedNavbar/AnimatedNavbar.jsx
+import React22 from "react";
+var AnimatedNavbar = ({
+  logo = "https://via.placeholder.com/100",
+  links = [{ text: "Home", href: "#" }, { text: "About", href: "#" }, { text: "Services", href: "#" }, { text: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  textColor = "#f1f5f9",
+  accentColor = "#7c3aed",
+  radius = "8px"
+}) => {
+  const [isOpen, setIsOpen] = React22.useState(false);
+  return /* @__PURE__ */ React22.createElement("nav", { style: {
+    background: bgColor,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "10px 20px",
+    borderRadius: radius,
+    position: "relative",
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    transition: "background 0.3s"
+  } }, /* @__PURE__ */ React22.createElement("img", { src: logo, alt: "Logo", style: { width: "100px" } }), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "15px" } }, /* @__PURE__ */ React22.createElement("button", { onClick: () => setIsOpen(!isOpen), style: {
+    background: accentColor,
+    color: textColor,
+    border: "none",
+    borderRadius: radius,
+    padding: "8px 16px",
+    fontWeight: "600",
+    transition: "background 0.3s"
+  } }, "Menu")), isOpen && /* @__PURE__ */ React22.createElement("div", { style: {
+    position: "absolute",
+    top: "100%",
+    right: "0",
+    background: bgColor,
+    borderRadius: radius,
+    boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
+    zIndex: 10,
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    padding: "10px"
+  } }, links.map((link) => /* @__PURE__ */ React22.createElement("a", { key: link.text, href: link.href, style: {
+    color: textColor,
+    textDecoration: "none",
+    padding: "8px 12px",
+    borderRadius: radius,
+    transition: "background 0.3s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = accentColor, onMouseLeave: (e) => e.currentTarget.style.background = "transparent" }, link.text))));
+};
+
+// src/components/StatCard/StatCard.jsx
+import React23, { useEffect as useEffect7, useState as useState15 } from "react";
+var StatCard = ({
+  title = "Total Sales",
+  value = 1e3,
+  change = 5,
+  bg = "#0f172a",
+  accent = "#0f766e",
+  negativeAccent = "#dc2626",
+  radius = "16px"
+}) => {
+  const [count, setCount] = useState15(0);
+  useEffect7(() => {
+    let start = 0;
+    const end = value;
+    const duration = 2;
+    const increment = end / (duration * 60);
+    const timer = setInterval(() => {
+      start += increment;
+      if (start >= end) {
+        clearInterval(timer);
+        setCount(end);
+      } else {
+        setCount(Math.floor(start));
+      }
+    }, 1e3 / 60);
+    return () => clearInterval(timer);
+  }, [value]);
+  return /* @__PURE__ */ React23.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "280px", fontFamily: "system-ui, sans-serif", color: "#f1f5f9", position: "relative", boxShadow: "0 10px 30px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ React23.createElement("h3", { style: { margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React23.createElement("div", { style: { fontSize: "40px", fontWeight: "700", margin: "0 0 8px" } }, count), /* @__PURE__ */ React23.createElement("span", { style: {
+    background: change >= 0 ? accent : negativeAccent,
+    color: "white",
+    padding: "4px 8px",
+    borderRadius: "12px",
+    fontSize: "12px",
+    position: "absolute",
+    top: "24px",
+    right: "24px"
+  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React23.createElement("svg", { width: "100%", height: "20", viewBox: "0 0 100 20", style: { marginTop: "10px" } }, /* @__PURE__ */ React23.createElement("polyline", { points: "0,15 20,10 40,12 60,5 80,8 100,0", stroke: accent, fill: "none", strokeWidth: "2" })));
+};
 export {
   AlertBanner,
+  AnimatedNavbar,
   AnimatedProgressBar,
   Button,
   Card,
@@ -1041,6 +1132,7 @@ export {
   OTPInput,
   Rating,
   RatingStars,
+  StatCard,
   UserAvatar,
   WishlistButton
 };

package/package.json

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