virtual-ui-lib 1.0.37 → 1.0.39

package/dist/index.js

@@ -29,6 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  OtpInput: () => OtpInput,
+  StatCard: () => StatCard,
   ToastNotification: () => ToastNotification
 });
 module.exports = __toCommonJS(index_exports);
@@ -126,7 +128,115 @@ var ToastNotification = ({
     transition: "width 0.1s linear"
   } })));
 };
+
+// src/components/StatCard/StatCard.jsx
+var import_react2 = __toESM(require("react"));
+var StatCard = ({
+  title = "Revenue",
+  metric = 1200,
+  change = 15,
+  bg = "#0f172a",
+  accent = "#059669",
+  negativeAccent = "#ef4444",
+  radius = "16px"
+}) => {
+  const [count, setCount] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    let countUp = 0;
+    const interval = setInterval(() => {
+      if (countUp < metric) {
+        countUp += Math.ceil(metric / 100);
+        setCount(countUp);
+      } else {
+        clearInterval(interval);
+      }
+    }, 30);
+    return () => clearInterval(interval);
+  }, [metric]);
+  return /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+    display: "inline-block",
+    padding: "5px 12px",
+    borderRadius: "10px",
+    background: change >= 0 ? accent : negativeAccent,
+    color: "white",
+    fontSize: "14px",
+    margin: "10px 0"
+  } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react2.default.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.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
+var import_react3 = __toESM(require("react"));
+var OtpInput = ({
+  length = 6,
+  boxSize = "48px",
+  borderColor = "#7c3aed",
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  radius = "8px",
+  onComplete
+}) => {
+  const [otp, setOtp] = (0, import_react3.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react3.useRef)([]);
+  const handleChange = (index, value) => {
+    if (/\d/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      if (value !== "" && index < length - 1) {
+        inputsRef.current[index + 1].focus();
+      } else if (value === "" && index > 0) {
+        inputsRef.current[index - 1].focus();
+      }
+      if (newOtp.join("").length === length) {
+        onComplete(newOtp.join(""));
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    const pastedData = e.clipboardData.getData("text").slice(0, length).split("");
+    const newOtp = Array(length).fill("").map((_, index) => pastedData[index] || "");
+    setOtp(newOtp);
+    if (newOtp.join("").length === length) {
+      onComplete(newOtp.join(""));
+    }
+    e.preventDefault();
+  };
+  (0, import_react3.useEffect)(() => {
+    inputsRef.current[0].focus();
+  }, []);
+  return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+    "input",
+    {
+      key: index,
+      ref: (el) => inputsRef.current[index] = el,
+      type: "text",
+      maxLength: "1",
+      value,
+      onChange: (e) => handleChange(index, e.target.value),
+      onFocus: (e) => e.target.select(),
+      onKeyDown: (e) => {
+        if (e.key === "Backspace" && !value && index > 0) {
+          inputsRef.current[index - 1].focus();
+        }
+      },
+      style: {
+        width: boxSize,
+        height: boxSize,
+        fontSize: "24px",
+        textAlign: "center",
+        borderRadius: radius,
+        border: `2px solid ${borderColor}`,
+        background: bgColor,
+        color: textColor,
+        transition: "border-color 0.2s",
+        outline: "none"
+      }
+    }
+  )), otp.join("").length === length && /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  OtpInput,
+  StatCard,
   ToastNotification
 });

package/dist/index.mjs

@@ -91,6 +91,114 @@ var ToastNotification = ({
     transition: "width 0.1s linear"
   } })));
 };
+
+// src/components/StatCard/StatCard.jsx
+import React2, { useEffect as useEffect2, useState as useState2 } from "react";
+var StatCard = ({
+  title = "Revenue",
+  metric = 1200,
+  change = 15,
+  bg = "#0f172a",
+  accent = "#059669",
+  negativeAccent = "#ef4444",
+  radius = "16px"
+}) => {
+  const [count, setCount] = useState2(0);
+  useEffect2(() => {
+    let countUp = 0;
+    const interval = setInterval(() => {
+      if (countUp < metric) {
+        countUp += Math.ceil(metric / 100);
+        setCount(countUp);
+      } else {
+        clearInterval(interval);
+      }
+    }, 30);
+    return () => clearInterval(interval);
+  }, [metric]);
+  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",
+    background: change >= 0 ? accent : negativeAccent,
+    color: "white",
+    fontSize: "14px",
+    margin: "10px 0"
+  } }, 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 React3, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+var OtpInput = ({
+  length = 6,
+  boxSize = "48px",
+  borderColor = "#7c3aed",
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  radius = "8px",
+  onComplete
+}) => {
+  const [otp, setOtp] = useState3(Array(length).fill(""));
+  const inputsRef = useRef([]);
+  const handleChange = (index, value) => {
+    if (/\d/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      if (value !== "" && index < length - 1) {
+        inputsRef.current[index + 1].focus();
+      } else if (value === "" && index > 0) {
+        inputsRef.current[index - 1].focus();
+      }
+      if (newOtp.join("").length === length) {
+        onComplete(newOtp.join(""));
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    const pastedData = e.clipboardData.getData("text").slice(0, length).split("");
+    const newOtp = Array(length).fill("").map((_, index) => pastedData[index] || "");
+    setOtp(newOtp);
+    if (newOtp.join("").length === length) {
+      onComplete(newOtp.join(""));
+    }
+    e.preventDefault();
+  };
+  useEffect3(() => {
+    inputsRef.current[0].focus();
+  }, []);
+  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,
+      ref: (el) => inputsRef.current[index] = el,
+      type: "text",
+      maxLength: "1",
+      value,
+      onChange: (e) => handleChange(index, e.target.value),
+      onFocus: (e) => e.target.select(),
+      onKeyDown: (e) => {
+        if (e.key === "Backspace" && !value && index > 0) {
+          inputsRef.current[index - 1].focus();
+        }
+      },
+      style: {
+        width: boxSize,
+        height: boxSize,
+        fontSize: "24px",
+        textAlign: "center",
+        borderRadius: radius,
+        border: `2px solid ${borderColor}`,
+        background: bgColor,
+        color: textColor,
+        transition: "border-color 0.2s",
+        outline: "none"
+      }
+    }
+  )), otp.join("").length === length && /* @__PURE__ */ React3.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
+};
 export {
+  OtpInput,
+  StatCard,
   ToastNotification
 };

package/package.json

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