virtual-ui-lib 1.0.24 → 1.0.26

package/dist/index.js

@@ -40,7 +40,9 @@ __export(index_exports, {
   ImageUploadPreview: () => ImageUploadPreview,
   Loader: () => Loader,
   Navbar: () => Navbar,
-  OTPInput: () => OTPInput
+  OTPInput: () => OTPInput,
+  RatingStars: () => RatingStars,
+  UserAvatar: () => UserAvatar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -721,6 +723,109 @@ var OTPInput = ({
     }
   )));
 };
+
+// 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" })
+  )));
+};
+
+// src/components/UserAvatar/UserAvatar.jsx
+var import_react14 = __toESM(require("react"));
+var UserAvatar = ({
+  size = "50px",
+  src = "",
+  initials = "AB",
+  online = false,
+  busy = false,
+  showStatus = true,
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  statusColor = "#22c55e",
+  borderColor = "#7c3aed"
+}) => {
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        backgroundColor: bgColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s",
+        cursor: "pointer",
+        overflow: "hidden",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      }
+    },
+    src ? /* @__PURE__ */ import_react14.default.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      backgroundColor: busy ? "#fbbf24" : online ? statusColor : "#9ca3af",
+      border: "2px solid " + borderColor
+    } })
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -734,5 +839,7 @@ var OTPInput = ({
   ImageUploadPreview,
   Loader,
   Navbar,
-  OTPInput
+  OTPInput,
+  RatingStars,
+  UserAvatar
 });

package/dist/index.mjs

@@ -675,6 +675,109 @@ var OTPInput = ({
     }
   )));
 };
+
+// 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" })
+  )));
+};
+
+// src/components/UserAvatar/UserAvatar.jsx
+import React14 from "react";
+var UserAvatar = ({
+  size = "50px",
+  src = "",
+  initials = "AB",
+  online = false,
+  busy = false,
+  showStatus = true,
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  statusColor = "#22c55e",
+  borderColor = "#7c3aed"
+}) => {
+  return /* @__PURE__ */ React14.createElement(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        backgroundColor: bgColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s",
+        cursor: "pointer",
+        overflow: "hidden",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      }
+    },
+    src ? /* @__PURE__ */ React14.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ React14.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ React14.createElement("span", { style: {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      backgroundColor: busy ? "#fbbf24" : online ? statusColor : "#9ca3af",
+      border: "2px solid " + borderColor
+    } })
+  );
+};
 export {
   AlertBanner,
   Button,
@@ -687,5 +790,7 @@ export {
   ImageUploadPreview,
   Loader,
   Navbar,
-  OTPInput
+  OTPInput,
+  RatingStars,
+  UserAvatar
 };

package/package.json

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