virtual-ui-lib 1.0.71 → 1.0.72

package/dist/index.js

@@ -44,6 +44,7 @@ __export(index_exports, {
   OTPInput: () => OTPInput,
   PageLoader: () => PageLoader,
   PricingCard: () => PricingCard,
+  RatingStars: () => RatingStars,
   Sidebar: () => Sidebar
 });
 module.exports = __toCommonJS(index_exports);
@@ -2993,6 +2994,122 @@ var ColorPicker = ({
     alignItems: "center"
   } }, /* @__PURE__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "RGBA"), /* @__PURE__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "rgba(255,255,255,0.5)" } }, alpha(color, opacity / 100))));
 };
+
+// src/components/RatingStars/RatingStars.jsx
+var import_react17 = __toESM(require("react"));
+var RatingStars = ({
+  defaultRating = 0,
+  total = 5,
+  size = 32,
+  allowHalf = true,
+  showLabel = true,
+  showCount = true,
+  reviewCount = 0,
+  readOnly = false,
+  accent = "#f59e0b",
+  bg = "#0f172a",
+  radius = "14px",
+  onChange = () => {
+  }
+}) => {
+  const [rating, setRating] = (0, import_react17.useState)(defaultRating);
+  const [hovered, setHovered] = (0, import_react17.useState)(0);
+  const labels = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
+  const halfLabels = { 0.5: "Awful", 1: "Terrible", 1.5: "Very Bad", 2: "Bad", 2.5: "Below Average", 3: "Okay", 3.5: "Above Average", 4: "Good", 4.5: "Great", 5: "Excellent" };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const active = hovered || rating;
+  const handleMouseMove = (e, i) => {
+    if (readOnly) return;
+    if (allowHalf) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const half = e.clientX - rect.left < rect.width / 2;
+      setHovered(half ? i - 0.5 : i);
+    } else {
+      setHovered(i);
+    }
+  };
+  const handleClick = (e, i) => {
+    if (readOnly) return;
+    let val;
+    if (allowHalf) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      val = e.clientX - rect.left < rect.width / 2 ? i - 0.5 : i;
+    } else {
+      val = i;
+    }
+    setRating(val);
+    onChange(val);
+  };
+  const StarIcon = ({ index }) => {
+    const fill = active >= index ? "full" : active >= index - 0.5 ? "half" : "empty";
+    const id = `half-${index}`;
+    return /* @__PURE__ */ import_react17.default.createElement(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        style: { cursor: readOnly ? "default" : "pointer", transition: "transform 0.1s", flexShrink: 0 },
+        onMouseMove: (e) => handleMouseMove(e, index),
+        onMouseLeave: () => !readOnly && setHovered(0),
+        onClick: (e) => handleClick(e, index),
+        onMouseEnter: (e) => {
+          if (!readOnly) e.currentTarget.style.transform = "scale(1.15)";
+        }
+      },
+      /* @__PURE__ */ import_react17.default.createElement("defs", null, /* @__PURE__ */ import_react17.default.createElement("linearGradient", { id }, /* @__PURE__ */ import_react17.default.createElement("stop", { offset: "50%", stopColor: accent }), /* @__PURE__ */ import_react17.default.createElement("stop", { offset: "50%", stopColor: "transparent" }))),
+      /* @__PURE__ */ import_react17.default.createElement(
+        "polygon",
+        {
+          points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26",
+          fill: fill === "full" ? accent : fill === "half" ? `url(#${id})` : "transparent",
+          stroke: fill === "empty" ? "rgba(255,255,255,0.15)" : accent,
+          strokeWidth: "1.5"
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px 22px",
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
+  } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, Array.from({ length: total }, (_, i) => /* @__PURE__ */ import_react17.default.createElement(StarIcon, { key: i + 1, index: i + 1 }))), showLabel && /* @__PURE__ */ import_react17.default.createElement("div", { style: {
+    fontSize: "14px",
+    fontWeight: "700",
+    minHeight: "20px",
+    color: active > 0 ? accent : "rgba(255,255,255,0.2)",
+    transition: "color 0.2s"
+  } }, active > 0 ? allowHalf ? halfLabels[active] : labels[Math.round(active)] : readOnly ? "Not rated" : "Rate this"), (rating > 0 || readOnly) && showCount && /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react17.default.createElement("span", { style: {
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#fff",
+    lineHeight: 1
+  } }, rating.toFixed(1)), /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", gap: "1px", marginBottom: "3px" } }, Array.from({ length: total }, (_, i) => {
+    const fill = rating >= i + 1 ? "full" : rating >= i + 0.5 ? "half" : "empty";
+    const gid = `sm-${i}`;
+    return /* @__PURE__ */ import_react17.default.createElement("svg", { key: i, width: "12", height: "12", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react17.default.createElement("defs", null, /* @__PURE__ */ import_react17.default.createElement("linearGradient", { id: gid }, /* @__PURE__ */ import_react17.default.createElement("stop", { offset: "50%", stopColor: accent }), /* @__PURE__ */ import_react17.default.createElement("stop", { offset: "50%", stopColor: "transparent" }))), /* @__PURE__ */ import_react17.default.createElement(
+      "polygon",
+      {
+        points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26",
+        fill: fill === "full" ? accent : fill === "half" ? `url(#${gid})` : "transparent",
+        stroke: fill === "empty" ? "rgba(255,255,255,0.15)" : accent,
+        strokeWidth: "1.5"
+      }
+    ));
+  })), reviewCount > 0 && /* @__PURE__ */ import_react17.default.createElement("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)" } }, reviewCount.toLocaleString(), " reviews"))), !readOnly && rating === 0 && /* @__PURE__ */ import_react17.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.2)", margin: 0 } }, allowHalf ? "Hover to rate \u2022 Half stars supported" : "Click to rate"));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarCard,
@@ -3010,5 +3127,6 @@ var ColorPicker = ({
   OTPInput,
   PageLoader,
   PricingCard,
+  RatingStars,
   Sidebar
 });

package/dist/index.mjs

@@ -2943,6 +2943,122 @@ var ColorPicker = ({
     alignItems: "center"
   } }, /* @__PURE__ */ React16.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "RGBA"), /* @__PURE__ */ React16.createElement("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "rgba(255,255,255,0.5)" } }, alpha(color, opacity / 100))));
 };
+
+// src/components/RatingStars/RatingStars.jsx
+import React17, { useState as useState15 } from "react";
+var RatingStars = ({
+  defaultRating = 0,
+  total = 5,
+  size = 32,
+  allowHalf = true,
+  showLabel = true,
+  showCount = true,
+  reviewCount = 0,
+  readOnly = false,
+  accent = "#f59e0b",
+  bg = "#0f172a",
+  radius = "14px",
+  onChange = () => {
+  }
+}) => {
+  const [rating, setRating] = useState15(defaultRating);
+  const [hovered, setHovered] = useState15(0);
+  const labels = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
+  const halfLabels = { 0.5: "Awful", 1: "Terrible", 1.5: "Very Bad", 2: "Bad", 2.5: "Below Average", 3: "Okay", 3.5: "Above Average", 4: "Good", 4.5: "Great", 5: "Excellent" };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const active = hovered || rating;
+  const handleMouseMove = (e, i) => {
+    if (readOnly) return;
+    if (allowHalf) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const half = e.clientX - rect.left < rect.width / 2;
+      setHovered(half ? i - 0.5 : i);
+    } else {
+      setHovered(i);
+    }
+  };
+  const handleClick = (e, i) => {
+    if (readOnly) return;
+    let val;
+    if (allowHalf) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      val = e.clientX - rect.left < rect.width / 2 ? i - 0.5 : i;
+    } else {
+      val = i;
+    }
+    setRating(val);
+    onChange(val);
+  };
+  const StarIcon = ({ index }) => {
+    const fill = active >= index ? "full" : active >= index - 0.5 ? "half" : "empty";
+    const id = `half-${index}`;
+    return /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        style: { cursor: readOnly ? "default" : "pointer", transition: "transform 0.1s", flexShrink: 0 },
+        onMouseMove: (e) => handleMouseMove(e, index),
+        onMouseLeave: () => !readOnly && setHovered(0),
+        onClick: (e) => handleClick(e, index),
+        onMouseEnter: (e) => {
+          if (!readOnly) e.currentTarget.style.transform = "scale(1.15)";
+        }
+      },
+      /* @__PURE__ */ React17.createElement("defs", null, /* @__PURE__ */ React17.createElement("linearGradient", { id }, /* @__PURE__ */ React17.createElement("stop", { offset: "50%", stopColor: accent }), /* @__PURE__ */ React17.createElement("stop", { offset: "50%", stopColor: "transparent" }))),
+      /* @__PURE__ */ React17.createElement(
+        "polygon",
+        {
+          points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26",
+          fill: fill === "full" ? accent : fill === "half" ? `url(#${id})` : "transparent",
+          stroke: fill === "empty" ? "rgba(255,255,255,0.15)" : accent,
+          strokeWidth: "1.5"
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ React17.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px 22px",
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
+  } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, Array.from({ length: total }, (_, i) => /* @__PURE__ */ React17.createElement(StarIcon, { key: i + 1, index: i + 1 }))), showLabel && /* @__PURE__ */ React17.createElement("div", { style: {
+    fontSize: "14px",
+    fontWeight: "700",
+    minHeight: "20px",
+    color: active > 0 ? accent : "rgba(255,255,255,0.2)",
+    transition: "color 0.2s"
+  } }, active > 0 ? allowHalf ? halfLabels[active] : labels[Math.round(active)] : readOnly ? "Not rated" : "Rate this"), (rating > 0 || readOnly) && showCount && /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React17.createElement("span", { style: {
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#fff",
+    lineHeight: 1
+  } }, rating.toFixed(1)), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: "1px", marginBottom: "3px" } }, Array.from({ length: total }, (_, i) => {
+    const fill = rating >= i + 1 ? "full" : rating >= i + 0.5 ? "half" : "empty";
+    const gid = `sm-${i}`;
+    return /* @__PURE__ */ React17.createElement("svg", { key: i, width: "12", height: "12", viewBox: "0 0 24 24" }, /* @__PURE__ */ React17.createElement("defs", null, /* @__PURE__ */ React17.createElement("linearGradient", { id: gid }, /* @__PURE__ */ React17.createElement("stop", { offset: "50%", stopColor: accent }), /* @__PURE__ */ React17.createElement("stop", { offset: "50%", stopColor: "transparent" }))), /* @__PURE__ */ React17.createElement(
+      "polygon",
+      {
+        points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26",
+        fill: fill === "full" ? accent : fill === "half" ? `url(#${gid})` : "transparent",
+        stroke: fill === "empty" ? "rgba(255,255,255,0.15)" : accent,
+        strokeWidth: "1.5"
+      }
+    ));
+  })), reviewCount > 0 && /* @__PURE__ */ React17.createElement("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)" } }, reviewCount.toLocaleString(), " reviews"))), !readOnly && rating === 0 && /* @__PURE__ */ React17.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.2)", margin: 0 } }, allowHalf ? "Hover to rate \u2022 Half stars supported" : "Click to rate"));
+};
 export {
   AvatarCard,
   BackgoundImageSlider,
@@ -2959,5 +3075,6 @@ export {
   OTPInput,
   PageLoader,
   PricingCard,
+  RatingStars,
   Sidebar
 };

package/package.json

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