virtual-ui-lib 1.0.32 → 1.0.34

package/dist/index.js

@@ -42,9 +42,11 @@ __export(index_exports, {
   GridLayout: () => GridLayout,
   ImageUploadPreview: () => ImageUploadPreview,
   Loader: () => Loader,
+  LoadingSkeleton: () => LoadingSkeleton,
   MultiStepProgress: () => MultiStepProgress,
   Navbar: () => Navbar,
   OTPInput: () => OTPInput,
+  Rating: () => Rating,
   RatingStars: () => RatingStars,
   UserAvatar: () => UserAvatar,
   WishlistButton: () => WishlistButton
@@ -999,6 +1001,81 @@ var DateRangePicker = ({
     fontSize: "14px"
   } }, date.getDate()))));
 };
+
+// src/components/LoadingSkeleton/LoadingSkeleton.jsx
+var import_react20 = __toESM(require("react"));
+var LoadingSkeleton = ({
+  type = "card",
+  width = "300px",
+  height = "200px",
+  bg = "#334155",
+  shimmerColor = "#7c3aed",
+  radius = "12px",
+  speed = "1.5s"
+}) => {
+  const shimmer = {
+    background: `linear-gradient(90deg, ${shimmerColor} 25%, rgba(255, 255, 255, 0.2) 50%, ${shimmerColor} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: `shimmer ${speed} infinite`
+  };
+  return /* @__PURE__ */ import_react20.default.createElement("div", { style: { width, height, borderRadius: radius, position: "relative", overflow: "hidden", background: bg } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { width: "100%", height: "100%", ...shimmer } }), /* @__PURE__ */ import_react20.default.createElement("style", null, `@keyframes shimmer { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }`));
+};
+
+// src/components/Rating/Rating.jsx
+var import_react21 = __toESM(require("react"));
+var Rating = ({
+  value = 3.5,
+  count = 5,
+  size = 24,
+  activeColor = "#fbbf24",
+  inactiveColor = "#374151",
+  spacing = 4,
+  onSelect
+}) => {
+  const [hoverValue, setHoverValue] = (0, import_react21.useState)(null);
+  const [selectedValue, setSelectedValue] = (0, import_react21.useState)(value);
+  const handleClick = (val) => {
+    setSelectedValue(val);
+    if (onSelect) onSelect(val);
+  };
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", gap: spacing } }, [...Array(count)].map((_, i) => {
+    const starValue = i + 1;
+    const isActive = hoverValue ? hoverValue >= starValue : selectedValue >= starValue;
+    const isHalf = hoverValue === null && selectedValue + 0.5 >= starValue && selectedValue < starValue;
+    return /* @__PURE__ */ import_react21.default.createElement(
+      "div",
+      {
+        key: i,
+        style: { position: "relative", cursor: "pointer" },
+        onClick: () => handleClick(starValue),
+        onMouseEnter: () => setHoverValue(starValue),
+        onMouseLeave: () => setHoverValue(null)
+      },
+      /* @__PURE__ */ import_react21.default.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: isActive ? activeColor : inactiveColor,
+          width: size,
+          height: size
+        },
+        /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+      ),
+      isHalf && /* @__PURE__ */ import_react21.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, width: size / 2, height: size, overflow: "hidden" } }, /* @__PURE__ */ import_react21.default.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: activeColor,
+          width: size,
+          height: size
+        },
+        /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+      ))
+    );
+  }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -1014,9 +1091,11 @@ var DateRangePicker = ({
   GridLayout,
   ImageUploadPreview,
   Loader,
+  LoadingSkeleton,
   MultiStepProgress,
   Navbar,
   OTPInput,
+  Rating,
   RatingStars,
   UserAvatar,
   WishlistButton

package/dist/index.mjs

@@ -946,6 +946,81 @@ var DateRangePicker = ({
     fontSize: "14px"
   } }, date.getDate()))));
 };
+
+// src/components/LoadingSkeleton/LoadingSkeleton.jsx
+import React20 from "react";
+var LoadingSkeleton = ({
+  type = "card",
+  width = "300px",
+  height = "200px",
+  bg = "#334155",
+  shimmerColor = "#7c3aed",
+  radius = "12px",
+  speed = "1.5s"
+}) => {
+  const shimmer = {
+    background: `linear-gradient(90deg, ${shimmerColor} 25%, rgba(255, 255, 255, 0.2) 50%, ${shimmerColor} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: `shimmer ${speed} infinite`
+  };
+  return /* @__PURE__ */ React20.createElement("div", { style: { width, height, borderRadius: radius, position: "relative", overflow: "hidden", background: bg } }, /* @__PURE__ */ React20.createElement("div", { style: { width: "100%", height: "100%", ...shimmer } }), /* @__PURE__ */ React20.createElement("style", null, `@keyframes shimmer { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }`));
+};
+
+// src/components/Rating/Rating.jsx
+import React21, { useState as useState14 } from "react";
+var Rating = ({
+  value = 3.5,
+  count = 5,
+  size = 24,
+  activeColor = "#fbbf24",
+  inactiveColor = "#374151",
+  spacing = 4,
+  onSelect
+}) => {
+  const [hoverValue, setHoverValue] = useState14(null);
+  const [selectedValue, setSelectedValue] = useState14(value);
+  const handleClick = (val) => {
+    setSelectedValue(val);
+    if (onSelect) onSelect(val);
+  };
+  return /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", gap: spacing } }, [...Array(count)].map((_, i) => {
+    const starValue = i + 1;
+    const isActive = hoverValue ? hoverValue >= starValue : selectedValue >= starValue;
+    const isHalf = hoverValue === null && selectedValue + 0.5 >= starValue && selectedValue < starValue;
+    return /* @__PURE__ */ React21.createElement(
+      "div",
+      {
+        key: i,
+        style: { position: "relative", cursor: "pointer" },
+        onClick: () => handleClick(starValue),
+        onMouseEnter: () => setHoverValue(starValue),
+        onMouseLeave: () => setHoverValue(null)
+      },
+      /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: isActive ? activeColor : inactiveColor,
+          width: size,
+          height: size
+        },
+        /* @__PURE__ */ React21.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+      ),
+      isHalf && /* @__PURE__ */ React21.createElement("div", { style: { position: "absolute", top: 0, left: 0, width: size / 2, height: size, overflow: "hidden" } }, /* @__PURE__ */ React21.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: activeColor,
+          width: size,
+          height: size
+        },
+        /* @__PURE__ */ React21.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+      ))
+    );
+  }));
+};
 export {
   AlertBanner,
   AnimatedProgressBar,
@@ -960,9 +1035,11 @@ export {
   GridLayout,
   ImageUploadPreview,
   Loader,
+  LoadingSkeleton,
   MultiStepProgress,
   Navbar,
   OTPInput,
+  Rating,
   RatingStars,
   UserAvatar,
   WishlistButton

package/package.json

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