virtual-ui-lib 1.0.53 → 1.0.55

package/dist/index.js

@@ -36,13 +36,13 @@ __export(index_exports, {
   FileUpload: () => FileUpload,
   Loader: () => Loader,
   LoadingSpinner: () => LoadingSpinner,
+  NotificationToast: () => NotificationToast,
   OtpInput: () => OtpInput,
   ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
   SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
-  Statscard: () => void 0,
   Tabs: () => Tabs,
   TextArea: () => TextArea,
   ToastNotification: () => ToastNotification
@@ -698,6 +698,126 @@ var Tabs = ({
     tab.label
   ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
 };
+
+// src/components/NotificationToast/NotificationToast.jsx
+var import_react17 = __toESM(require("react"));
+var NotificationToast = ({
+  title = "New Message",
+  message = "You have a new notification from the team.",
+  type = "success",
+  duration = 3e3,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "14px",
+  showProgress = true
+}) => {
+  const [visible, setVisible] = (0, import_react17.useState)(true);
+  const [progress, setProgress] = (0, import_react17.useState)(100);
+  const typeColors = {
+    success: "#10b981",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#3b82f6"
+  };
+  const typeIcons = {
+    success: "M5 13l4 4L19 7",
+    error: "M6 18L18 6M6 6l12 12",
+    warning: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
+    info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
+  };
+  const color = typeColors[type] || accent;
+  (0, import_react17.useEffect)(() => {
+    if (!showProgress) return;
+    const step = 100 / (duration / 50);
+    const timer = setInterval(() => {
+      setProgress((p) => {
+        if (p <= 0) {
+          clearInterval(timer);
+          setVisible(false);
+          return 0;
+        }
+        return p - step;
+      });
+    }, 50);
+    return () => clearInterval(timer);
+  }, [duration, showProgress]);
+  if (!visible) return null;
+  return /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "16px 18px",
+    width: "320px",
+    color: "white",
+    fontFamily: "system-ui, sans-serif",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+    border: `1px solid rgba(255,255,255,0.08)`,
+    position: "relative",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    width: 36,
+    height: 36,
+    borderRadius: "10px",
+    flexShrink: 0,
+    background: `${color}22`,
+    border: `1px solid ${color}44`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } }, /* @__PURE__ */ import_react17.default.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ import_react17.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
+  )), /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react17.default.createElement(
+    "button",
+    {
+      onClick: () => setVisible(false),
+      style: {
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        color: "rgba(255,255,255,0.3)",
+        padding: "2px",
+        flexShrink: 0,
+        lineHeight: 1
+      }
+    },
+    /* @__PURE__ */ import_react17.default.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ import_react17.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+    )
+  )), showProgress && /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "3px",
+    background: "rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    height: "100%",
+    width: `${progress}%`,
+    background: color,
+    transition: "width 0.05s linear",
+    borderRadius: "0 2px 2px 0"
+  } })));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -707,13 +827,13 @@ var Tabs = ({
   FileUpload,
   Loader,
   LoadingSpinner,
+  NotificationToast,
   OtpInput,
   ResponsiveNavbar,
   SearchBar,
   SkeletonLoader,
   SmartButton,
   StatCard,
-  Statscard,
   Tabs,
   TextArea,
   ToastNotification

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ToastNotification/ToastNotification.jsx
-import React2, { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 var ToastNotification = ({
   type = "success",
   title = "Success",
@@ -48,7 +48,7 @@ var ToastNotification = ({
     }
     return { background: bg, icon };
   };
-  return /* @__PURE__ */ React2.createElement("div", { style: {
+  return /* @__PURE__ */ React.createElement("div", { style: {
     position: "fixed",
     bottom: "20px",
     right: "20px",
@@ -62,7 +62,7 @@ var ToastNotification = ({
     boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
     fontFamily: "system-ui, sans-serif",
     zIndex: 9999
-  } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React2.createElement("div", { style: {
+  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: {
     width: "24px",
     height: "24px",
     borderRadius: "50%",
@@ -71,20 +71,20 @@ var ToastNotification = ({
     alignItems: "center",
     justifyContent: "center",
     marginRight: "8px"
-  } }, /* @__PURE__ */ React2.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ React2.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ React2.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ React2.createElement("button", { onClick: onClose, style: {
+  } }, /* @__PURE__ */ React.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ React.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ React.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ React.createElement("button", { onClick: onClose, style: {
     background: "transparent",
     color: "white",
     border: "none",
     cursor: "pointer",
     fontSize: "14px",
     fontWeight: "600"
-  } }, "Close"), /* @__PURE__ */ React2.createElement("div", { style: {
+  } }, "Close"), /* @__PURE__ */ React.createElement("div", { style: {
     height: "4px",
     background: "rgba(255, 255, 255, 0.3)",
     borderRadius: "8px",
     overflow: "hidden",
     marginTop: "12px"
-  } }, /* @__PURE__ */ React2.createElement("div", { style: {
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
     width: progress + "%",
     height: "100%",
     background: "white",
@@ -93,7 +93,7 @@ var ToastNotification = ({
 };
 
 // src/components/StatCard/StatCard.jsx
-import React3, { useEffect as useEffect2, useState as useState2 } from "react";
+import React2, { useEffect as useEffect2, useState as useState2 } from "react";
 var StatCard = ({
   title = "Revenue",
   metric = 1200,
@@ -116,7 +116,7 @@ var StatCard = ({
     }, 30);
     return () => clearInterval(interval);
   }, [metric]);
-  return /* @__PURE__ */ React3.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ React3.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ React3.createElement("span", { style: {
+  return /* @__PURE__ */ React2.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ React2.createElement("span", { style: {
     display: "inline-block",
     padding: "5px 12px",
     borderRadius: "10px",
@@ -124,11 +124,11 @@ var StatCard = ({
     color: "white",
     fontSize: "14px",
     margin: "10px 0"
-  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React3.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
+  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React2.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
 };
 
 // src/components/OtpInput/OtpInput.jsx
-import React4, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import React3, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
 var OtpInput = ({
   length = 6,
   boxSize = "48px",
@@ -167,7 +167,7 @@ var OtpInput = ({
   useEffect3(() => {
     inputsRef.current[0].focus();
   }, []);
-  return /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React3.createElement(
     "input",
     {
       key: index,
@@ -195,11 +195,11 @@ var OtpInput = ({
         outline: "none"
       }
     }
-  )), otp.join("").length === length && /* @__PURE__ */ React4.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
+  )), otp.join("").length === length && /* @__PURE__ */ React3.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
 };
 
 // src/components/CodeBlock/CodeBlock.jsx
-import React5, { useState as useState4 } from "react";
+import React4, { useState as useState4 } from "react";
 var CodeBlock = ({
   code = "const hello = 'Hello, world!';\nconsole.log(hello);",
   language = "JavaScript",
@@ -218,13 +218,13 @@ var CodeBlock = ({
     });
   };
   const formatCode = () => {
-    return code.split("\n").map((line, index) => /* @__PURE__ */ React5.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React5.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
+    return code.split("\n").map((line, index) => /* @__PURE__ */ React4.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React4.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React4.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
   };
-  return /* @__PURE__ */ React5.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React5.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React5.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React5.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React5.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
+  return /* @__PURE__ */ React4.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React4.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React4.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React4.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React4.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
 };
 
 // src/components/SmartButton/SmartButton.jsx
-import React6 from "react";
+import React5 from "react";
 var SmartButton = ({
   buttonText = "Submit",
   isLoading = false,
@@ -241,7 +241,7 @@ var SmartButton = ({
 }) => {
   const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
   const cursorStyle = isDisabled ? "not-allowed" : "pointer";
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React5.createElement(
     "button",
     {
       onClick: !isDisabled && !isLoading ? onClick : () => {
@@ -265,12 +265,12 @@ var SmartButton = ({
         e.currentTarget.style.background = bgColor;
       }
     },
-    isLoading ? /* @__PURE__ */ React6.createElement("span", null, "Loading...") : /* @__PURE__ */ React6.createElement(React6.Fragment, null, icon && /* @__PURE__ */ React6.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
+    isLoading ? /* @__PURE__ */ React5.createElement("span", null, "Loading...") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, icon && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
   );
 };
 
 // src/components/CustomInputField/CustomInputField.jsx
-import React7, { useState as useState5 } from "react";
+import React6, { useState as useState5 } from "react";
 var CustomInputField = ({
   label = "Label",
   placeholder = "Enter text...",
@@ -286,7 +286,7 @@ var CustomInputField = ({
   }
 }) => {
   const [isFocused, setIsFocused] = useState5(false);
-  return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React6.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React6.createElement(
     "input",
     {
       type: "text",
@@ -305,11 +305,11 @@ var CustomInputField = ({
         width: "100%"
       }
     }
-  ), errorMessage && /* @__PURE__ */ React7.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React7.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
+  ), errorMessage && /* @__PURE__ */ React6.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React6.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
 };
 
 // src/components/TextArea/TextArea.jsx
-import React8, { useState as useState6 } from "react";
+import React7, { useState as useState6 } from "react";
 var TextArea = ({
   label = "Label",
   placeholder = "Type here...",
@@ -328,7 +328,7 @@ var TextArea = ({
     setCurrentValue(e.target.value);
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ React8.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React8.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
     "textarea",
     {
       value: currentValue,
@@ -347,11 +347,11 @@ var TextArea = ({
         transition: "border-color 0.3s"
       }
     }
-  ), /* @__PURE__ */ React8.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
+  ), /* @__PURE__ */ React7.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
 };
 
 // src/components/SearchBar/SearchBar.jsx
-import React9, { useState as useState7 } from "react";
+import React8, { useState as useState7 } from "react";
 var SearchBar = ({
   placeholder = "Search...",
   bg = "#1e293b",
@@ -373,7 +373,7 @@ var SearchBar = ({
     setQuery("");
     onClear();
   };
-  return /* @__PURE__ */ React9.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React8.createElement(
     "input",
     {
       value: query,
@@ -390,7 +390,7 @@ var SearchBar = ({
         outline: "none"
       }
     }
-  ), query && /* @__PURE__ */ React9.createElement("button", { onClick: handleClear, style: {
+  ), query && /* @__PURE__ */ React8.createElement("button", { onClick: handleClear, style: {
     position: "absolute",
     right: "10px",
     top: "50%",
@@ -399,12 +399,12 @@ var SearchBar = ({
     color: accent,
     border: "none",
     cursor: "pointer"
-  } }, "Clear"), loading && /* @__PURE__ */ React9.createElement("div", { style: {
+  } }, "Clear"), loading && /* @__PURE__ */ React8.createElement("div", { style: {
     position: "absolute",
     left: "10px",
     top: "50%",
     transform: "translateY(-50%)"
-  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React9.createElement("ul", { style: {
+  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React8.createElement("ul", { style: {
     listStyleType: "none",
     margin: 0,
     padding: "10px",
@@ -415,7 +415,7 @@ var SearchBar = ({
     width: "100%",
     maxHeight: "200px",
     overflowY: "auto"
-  } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React9.createElement("li", { key: index, style: {
+  } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React8.createElement("li", { key: index, style: {
     padding: "8px",
     color: textColor,
     cursor: "pointer",
@@ -427,13 +427,13 @@ var SearchBar = ({
 };
 
 // src/components/LoadingSpinner/LoadingSpinner.jsx
-import React10 from "react";
+import React9 from "react";
 var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
-  return /* @__PURE__ */ React10.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
+  return /* @__PURE__ */ React9.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
 };
 
 // src/components/SkeletonLoader/SkeletonLoader.jsx
-import React11 from "react";
+import React10 from "react";
 var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
   const shimmerStyle = {
     background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
@@ -441,7 +441,7 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
     animation: "shimmer 1.5s infinite",
     borderRadius: radius
   };
-  return /* @__PURE__ */ React11.createElement("div", { style: { padding } }, /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React11.createElement("style", null, `@keyframes shimmer {
+  return /* @__PURE__ */ React10.createElement("div", { style: { padding } }, /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React10.createElement("style", null, `@keyframes shimmer {
           0% {
             background-position: 200% 0;
           }
@@ -452,7 +452,7 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
 };
 
 // src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
-import React12, { useState as useState8 } from "react";
+import React11, { useState as useState8 } from "react";
 var ResponsiveNavbar = ({
   logo = "Logo",
   navItems = [],
@@ -474,7 +474,7 @@ var ResponsiveNavbar = ({
     setSearchValue(e.target.value);
     onSearchChange(e.target.value);
   };
-  return /* @__PURE__ */ React12.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React12.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React12.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(
     "input",
     {
       type: "text",
@@ -483,11 +483,11 @@ var ResponsiveNavbar = ({
       onChange: handleSearchChange,
       style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
     }
-  ), /* @__PURE__ */ React12.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React12.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React12.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React12.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
+  ), /* @__PURE__ */ React11.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React11.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
 };
 
 // src/components/FileUpload/FileUpload.jsx
-import React13, { useState as useState9 } from "react";
+import React12, { useState as useState9 } from "react";
 var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
 } }) => {
   const [file, setFile] = useState9(null);
@@ -525,7 +525,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
     setFile(null);
     setProgress(0);
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       onDrop: handleDrop,
@@ -541,7 +541,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
         cursor: "pointer"
       }
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(
       "input",
       {
         id: "fileInput",
@@ -550,7 +550,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
         onChange: handleFileChange
       }
     ),
-    file ? /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("p", null, file.name), /* @__PURE__ */ React13.createElement(
+    file ? /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", null, file.name), /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: handleRemove,
@@ -564,18 +564,18 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
         }
       },
       "Remove"
-    ), /* @__PURE__ */ React13.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React13.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React13.createElement("p", null, placeholder)
+    ), /* @__PURE__ */ React12.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React12.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React12.createElement("p", null, placeholder)
   );
 };
 
 // src/components/Loader/Loader.jsx
-import React14 from "react";
+import React13 from "react";
 var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
-  return /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React14.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
+  return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React13.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
 };
 
 // src/components/Avatar/Avatar.jsx
-import React15 from "react";
+import React14 from "react";
 var Avatar = ({
   image = "https://i.pravatar.cc/150?img=32",
   alt = "User Avatar",
@@ -584,7 +584,7 @@ var Avatar = ({
   borderWidth = "4px",
   radius = "50%"
 }) => {
-  return /* @__PURE__ */ React15.createElement("div", { style: {
+  return /* @__PURE__ */ React14.createElement("div", { style: {
     width: size,
     height: size,
     borderRadius: radius,
@@ -594,7 +594,7 @@ var Avatar = ({
     alignItems: "center",
     justifyContent: "center",
     background: "#f3f4f6"
-  } }, /* @__PURE__ */ React15.createElement("img", { src: image, alt, style: {
+  } }, /* @__PURE__ */ React14.createElement("img", { src: image, alt, style: {
     width: "100%",
     height: "100%",
     objectFit: "cover"
@@ -602,7 +602,7 @@ var Avatar = ({
 };
 
 // src/components/DividerLine/DividerLine.jsx
-import React16 from "react";
+import React15 from "react";
 var DividerLine = ({
   text = "Section",
   textColor = "#f1f5f9",
@@ -611,11 +611,11 @@ var DividerLine = ({
   thickness = "2px",
   borderRadius = "4px"
 }) => {
-  return /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React16.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
+  return /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React15.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
 };
 
 // src/components/Tabs/Tabs.jsx
-import React17, { useState as useState10 } from "react";
+import React16, { useState as useState10 } from "react";
 var Tabs = ({
   tabs = [
     { label: "Tab 1", content: "Content for Tab 1" },
@@ -628,7 +628,7 @@ var Tabs = ({
   radius = "8px"
 }) => {
   const [activeTab, setActiveTab] = useState10(0);
-  return /* @__PURE__ */ React17.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
     "button",
     {
       key: index,
@@ -645,9 +645,128 @@ var Tabs = ({
       }
     },
     tab.label
-  ))), /* @__PURE__ */ React17.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React17.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React17.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
+  ))), /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React16.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React16.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
+};
+
+// src/components/NotificationToast/NotificationToast.jsx
+import React17, { useState as useState11, useEffect as useEffect4 } from "react";
+var NotificationToast = ({
+  title = "New Message",
+  message = "You have a new notification from the team.",
+  type = "success",
+  duration = 3e3,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "14px",
+  showProgress = true
+}) => {
+  const [visible, setVisible] = useState11(true);
+  const [progress, setProgress] = useState11(100);
+  const typeColors = {
+    success: "#10b981",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#3b82f6"
+  };
+  const typeIcons = {
+    success: "M5 13l4 4L19 7",
+    error: "M6 18L18 6M6 6l12 12",
+    warning: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
+    info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
+  };
+  const color = typeColors[type] || accent;
+  useEffect4(() => {
+    if (!showProgress) return;
+    const step = 100 / (duration / 50);
+    const timer = setInterval(() => {
+      setProgress((p) => {
+        if (p <= 0) {
+          clearInterval(timer);
+          setVisible(false);
+          return 0;
+        }
+        return p - step;
+      });
+    }, 50);
+    return () => clearInterval(timer);
+  }, [duration, showProgress]);
+  if (!visible) return null;
+  return /* @__PURE__ */ React17.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "16px 18px",
+    width: "320px",
+    color: "white",
+    fontFamily: "system-ui, sans-serif",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+    border: `1px solid rgba(255,255,255,0.08)`,
+    position: "relative",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ React17.createElement("div", { style: {
+    width: 36,
+    height: 36,
+    borderRadius: "10px",
+    flexShrink: 0,
+    background: `${color}22`,
+    border: `1px solid ${color}44`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } }, /* @__PURE__ */ React17.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React17.createElement("path", { d: typeIcons[type] || typeIcons.info })
+  )), /* @__PURE__ */ React17.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React17.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ React17.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      onClick: () => setVisible(false),
+      style: {
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        color: "rgba(255,255,255,0.3)",
+        padding: "2px",
+        flexShrink: 0,
+        lineHeight: 1
+      }
+    },
+    /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React17.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+    )
+  )), showProgress && /* @__PURE__ */ React17.createElement("div", { style: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "3px",
+    background: "rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ React17.createElement("div", { style: {
+    height: "100%",
+    width: `${progress}%`,
+    background: color,
+    transition: "width 0.05s linear",
+    borderRadius: "0 2px 2px 0"
+  } })));
 };
-var export_Statscard = void 0;
 export {
   Avatar,
   CodeBlock,
@@ -656,13 +775,13 @@ export {
   FileUpload,
   Loader,
   LoadingSpinner,
+  NotificationToast,
   OtpInput,
   ResponsiveNavbar,
   SearchBar,
   SkeletonLoader,
   SmartButton,
   StatCard,
-  export_Statscard as Statscard,
   Tabs,
   TextArea,
   ToastNotification

package/package.json

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