virtual-ui-lib 1.0.23 → 1.0.25

package/dist/index.js

@@ -39,7 +39,9 @@ __export(index_exports, {
   GridLayout: () => GridLayout,
   ImageUploadPreview: () => ImageUploadPreview,
   Loader: () => Loader,
-  Navbar: () => Navbar
+  Navbar: () => Navbar,
+  OTPInput: () => OTPInput,
+  RatingStars: () => RatingStars
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -647,6 +649,121 @@ var Loader = ({
       `)
   );
 };
+
+// src/components/OTPInput/OTPInput.jsx
+var import_react12 = __toESM(require("react"));
+var OTPInput = ({
+  length = 4,
+  bg = "#0f172a",
+  borderColorDefault = "#4b5563",
+  borderColorFocus = "#2563eb",
+  borderColorError = "#e11d48",
+  borderColorSuccess = "#059669",
+  color = "#f1f5f9",
+  radius = "8px",
+  onChange,
+  error = false,
+  success = false
+}) => {
+  const [otp, setOtp] = (0, import_react12.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react12.useRef)(Array(length).fill().map(() => import_react12.default.createRef()));
+  (0, import_react12.useEffect)(() => {
+    inputRefs.current[0].current.focus();
+  }, []);
+  const handleChange = (index, value) => {
+    if (/[^0-9]/.test(value)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    onChange(newOtp.join(""));
+    if (value && index < length - 1) {
+      inputRefs.current[index + 1].current.focus();
+    }
+  };
+  const handleKeyDown = (index, event) => {
+    if (event.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1].current.focus();
+    }
+  };
+  const handlePaste = (event) => {
+    const pastedData = event.clipboardData.getData("text").split("").slice(0, length);
+    const newOtp = pastedData.map((char, index) => char.match(/\d/) ? char : "");
+    setOtp(newOtp);
+    newOtp.forEach((_, index) => {
+      if (inputRefs.current[index]) {
+        inputRefs.current[index].current.focus();
+      }
+    });
+    onChange(newOtp.join(""));
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ import_react12.default.createElement(
+    "input",
+    {
+      key: index,
+      ref: inputRefs.current[index],
+      value,
+      onChange: (e) => handleChange(index, e.target.value),
+      onKeyDown: (event) => handleKeyDown(index, event),
+      style: {
+        width: "40px",
+        height: "50px",
+        borderRadius: radius,
+        border: `2px solid ${error ? borderColorError : success ? borderColorSuccess : index === otp.findIndex((v) => v !== "") ? borderColorFocus : borderColorDefault}`,
+        background: bg,
+        color,
+        fontSize: "20px",
+        textAlign: "center",
+        outline: "none",
+        transition: "border-color 0.3s ease, transform 0.2s ease",
+        transform: `scale(${index === otp.findIndex((v) => v !== "") ? 1.05 : 1})`
+      },
+      autoFocus: index === 0
+    }
+  )));
+};
+
+// src/components/RatingStars/RatingStars.jsx
+var import_react13 = __toESM(require("react"));
+var RatingStars = ({
+  totalStars = 5,
+  selectedColor = "#ffc107",
+  defaultColor = "#e4e5e9",
+  size = "24px",
+  onSelect
+}) => {
+  const [hovered, setHovered] = (0, import_react13.useState)(0);
+  const [selected, setSelected] = (0, import_react13.useState)(0);
+  const handleMouseEnter = (index) => {
+    setHovered(index + 1);
+  };
+  const handleMouseLeave = () => {
+    setHovered(0);
+  };
+  const handleClick = (index) => {
+    setSelected(index + 1);
+    if (onSelect) onSelect(index + 1);
+  };
+  return /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      key: index,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: index < (hovered || selected) ? selectedColor : defaultColor,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      onMouseEnter: () => handleMouseEnter(index),
+      onMouseLeave: handleMouseLeave,
+      onClick: () => handleClick(index),
+      style: { transition: "color 0.2s ease" }
+    },
+    /* @__PURE__ */ import_react13.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2" })
+  )));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -659,5 +776,7 @@ var Loader = ({
   GridLayout,
   ImageUploadPreview,
   Loader,
-  Navbar
+  Navbar,
+  OTPInput,
+  RatingStars
 });

package/dist/index.mjs

@@ -602,6 +602,121 @@ var Loader = ({
       `)
   );
 };
+
+// src/components/OTPInput/OTPInput.jsx
+import React12, { useEffect as useEffect6, useRef as useRef2, useState as useState9 } from "react";
+var OTPInput = ({
+  length = 4,
+  bg = "#0f172a",
+  borderColorDefault = "#4b5563",
+  borderColorFocus = "#2563eb",
+  borderColorError = "#e11d48",
+  borderColorSuccess = "#059669",
+  color = "#f1f5f9",
+  radius = "8px",
+  onChange,
+  error = false,
+  success = false
+}) => {
+  const [otp, setOtp] = useState9(Array(length).fill(""));
+  const inputRefs = useRef2(Array(length).fill().map(() => React12.createRef()));
+  useEffect6(() => {
+    inputRefs.current[0].current.focus();
+  }, []);
+  const handleChange = (index, value) => {
+    if (/[^0-9]/.test(value)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    onChange(newOtp.join(""));
+    if (value && index < length - 1) {
+      inputRefs.current[index + 1].current.focus();
+    }
+  };
+  const handleKeyDown = (index, event) => {
+    if (event.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1].current.focus();
+    }
+  };
+  const handlePaste = (event) => {
+    const pastedData = event.clipboardData.getData("text").split("").slice(0, length);
+    const newOtp = pastedData.map((char, index) => char.match(/\d/) ? char : "");
+    setOtp(newOtp);
+    newOtp.forEach((_, index) => {
+      if (inputRefs.current[index]) {
+        inputRefs.current[index].current.focus();
+      }
+    });
+    onChange(newOtp.join(""));
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      key: index,
+      ref: inputRefs.current[index],
+      value,
+      onChange: (e) => handleChange(index, e.target.value),
+      onKeyDown: (event) => handleKeyDown(index, event),
+      style: {
+        width: "40px",
+        height: "50px",
+        borderRadius: radius,
+        border: `2px solid ${error ? borderColorError : success ? borderColorSuccess : index === otp.findIndex((v) => v !== "") ? borderColorFocus : borderColorDefault}`,
+        background: bg,
+        color,
+        fontSize: "20px",
+        textAlign: "center",
+        outline: "none",
+        transition: "border-color 0.3s ease, transform 0.2s ease",
+        transform: `scale(${index === otp.findIndex((v) => v !== "") ? 1.05 : 1})`
+      },
+      autoFocus: index === 0
+    }
+  )));
+};
+
+// src/components/RatingStars/RatingStars.jsx
+import React13, { useState as useState10 } from "react";
+var RatingStars = ({
+  totalStars = 5,
+  selectedColor = "#ffc107",
+  defaultColor = "#e4e5e9",
+  size = "24px",
+  onSelect
+}) => {
+  const [hovered, setHovered] = useState10(0);
+  const [selected, setSelected] = useState10(0);
+  const handleMouseEnter = (index) => {
+    setHovered(index + 1);
+  };
+  const handleMouseLeave = () => {
+    setHovered(0);
+  };
+  const handleClick = (index) => {
+    setSelected(index + 1);
+    if (onSelect) onSelect(index + 1);
+  };
+  return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ React13.createElement(
+    "svg",
+    {
+      key: index,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: index < (hovered || selected) ? selectedColor : defaultColor,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      onMouseEnter: () => handleMouseEnter(index),
+      onMouseLeave: handleMouseLeave,
+      onClick: () => handleClick(index),
+      style: { transition: "color 0.2s ease" }
+    },
+    /* @__PURE__ */ React13.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2" })
+  )));
+};
 export {
   AlertBanner,
   Button,
@@ -613,5 +728,7 @@ export {
   GridLayout,
   ImageUploadPreview,
   Loader,
-  Navbar
+  Navbar,
+  OTPInput,
+  RatingStars
 };

package/package.json

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