virtual-ui-lib 1.0.33 → 1.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +58 -0
- package/dist/index.mjs +57 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -46,6 +46,7 @@ __export(index_exports, {
|
|
|
46
46
|
MultiStepProgress: () => MultiStepProgress,
|
|
47
47
|
Navbar: () => Navbar,
|
|
48
48
|
OTPInput: () => OTPInput,
|
|
49
|
+
Rating: () => Rating,
|
|
49
50
|
RatingStars: () => RatingStars,
|
|
50
51
|
UserAvatar: () => UserAvatar,
|
|
51
52
|
WishlistButton: () => WishlistButton
|
|
@@ -1019,6 +1020,62 @@ var LoadingSkeleton = ({
|
|
|
1019
1020
|
};
|
|
1020
1021
|
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%; } }`));
|
|
1021
1022
|
};
|
|
1023
|
+
|
|
1024
|
+
// src/components/Rating/Rating.jsx
|
|
1025
|
+
var import_react21 = __toESM(require("react"));
|
|
1026
|
+
var Rating = ({
|
|
1027
|
+
value = 3.5,
|
|
1028
|
+
count = 5,
|
|
1029
|
+
size = 24,
|
|
1030
|
+
activeColor = "#fbbf24",
|
|
1031
|
+
inactiveColor = "#374151",
|
|
1032
|
+
spacing = 4,
|
|
1033
|
+
onSelect
|
|
1034
|
+
}) => {
|
|
1035
|
+
const [hoverValue, setHoverValue] = (0, import_react21.useState)(null);
|
|
1036
|
+
const [selectedValue, setSelectedValue] = (0, import_react21.useState)(value);
|
|
1037
|
+
const handleClick = (val) => {
|
|
1038
|
+
setSelectedValue(val);
|
|
1039
|
+
if (onSelect) onSelect(val);
|
|
1040
|
+
};
|
|
1041
|
+
return /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", gap: spacing } }, [...Array(count)].map((_, i) => {
|
|
1042
|
+
const starValue = i + 1;
|
|
1043
|
+
const isActive = hoverValue ? hoverValue >= starValue : selectedValue >= starValue;
|
|
1044
|
+
const isHalf = hoverValue === null && selectedValue + 0.5 >= starValue && selectedValue < starValue;
|
|
1045
|
+
return /* @__PURE__ */ import_react21.default.createElement(
|
|
1046
|
+
"div",
|
|
1047
|
+
{
|
|
1048
|
+
key: i,
|
|
1049
|
+
style: { position: "relative", cursor: "pointer" },
|
|
1050
|
+
onClick: () => handleClick(starValue),
|
|
1051
|
+
onMouseEnter: () => setHoverValue(starValue),
|
|
1052
|
+
onMouseLeave: () => setHoverValue(null)
|
|
1053
|
+
},
|
|
1054
|
+
/* @__PURE__ */ import_react21.default.createElement(
|
|
1055
|
+
"svg",
|
|
1056
|
+
{
|
|
1057
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1058
|
+
viewBox: "0 0 24 24",
|
|
1059
|
+
fill: isActive ? activeColor : inactiveColor,
|
|
1060
|
+
width: size,
|
|
1061
|
+
height: size
|
|
1062
|
+
},
|
|
1063
|
+
/* @__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" })
|
|
1064
|
+
),
|
|
1065
|
+
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(
|
|
1066
|
+
"svg",
|
|
1067
|
+
{
|
|
1068
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1069
|
+
viewBox: "0 0 24 24",
|
|
1070
|
+
fill: activeColor,
|
|
1071
|
+
width: size,
|
|
1072
|
+
height: size
|
|
1073
|
+
},
|
|
1074
|
+
/* @__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" })
|
|
1075
|
+
))
|
|
1076
|
+
);
|
|
1077
|
+
}));
|
|
1078
|
+
};
|
|
1022
1079
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1023
1080
|
0 && (module.exports = {
|
|
1024
1081
|
AlertBanner,
|
|
@@ -1038,6 +1095,7 @@ var LoadingSkeleton = ({
|
|
|
1038
1095
|
MultiStepProgress,
|
|
1039
1096
|
Navbar,
|
|
1040
1097
|
OTPInput,
|
|
1098
|
+
Rating,
|
|
1041
1099
|
RatingStars,
|
|
1042
1100
|
UserAvatar,
|
|
1043
1101
|
WishlistButton
|
package/dist/index.mjs
CHANGED
|
@@ -965,6 +965,62 @@ var LoadingSkeleton = ({
|
|
|
965
965
|
};
|
|
966
966
|
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%; } }`));
|
|
967
967
|
};
|
|
968
|
+
|
|
969
|
+
// src/components/Rating/Rating.jsx
|
|
970
|
+
import React21, { useState as useState14 } from "react";
|
|
971
|
+
var Rating = ({
|
|
972
|
+
value = 3.5,
|
|
973
|
+
count = 5,
|
|
974
|
+
size = 24,
|
|
975
|
+
activeColor = "#fbbf24",
|
|
976
|
+
inactiveColor = "#374151",
|
|
977
|
+
spacing = 4,
|
|
978
|
+
onSelect
|
|
979
|
+
}) => {
|
|
980
|
+
const [hoverValue, setHoverValue] = useState14(null);
|
|
981
|
+
const [selectedValue, setSelectedValue] = useState14(value);
|
|
982
|
+
const handleClick = (val) => {
|
|
983
|
+
setSelectedValue(val);
|
|
984
|
+
if (onSelect) onSelect(val);
|
|
985
|
+
};
|
|
986
|
+
return /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", gap: spacing } }, [...Array(count)].map((_, i) => {
|
|
987
|
+
const starValue = i + 1;
|
|
988
|
+
const isActive = hoverValue ? hoverValue >= starValue : selectedValue >= starValue;
|
|
989
|
+
const isHalf = hoverValue === null && selectedValue + 0.5 >= starValue && selectedValue < starValue;
|
|
990
|
+
return /* @__PURE__ */ React21.createElement(
|
|
991
|
+
"div",
|
|
992
|
+
{
|
|
993
|
+
key: i,
|
|
994
|
+
style: { position: "relative", cursor: "pointer" },
|
|
995
|
+
onClick: () => handleClick(starValue),
|
|
996
|
+
onMouseEnter: () => setHoverValue(starValue),
|
|
997
|
+
onMouseLeave: () => setHoverValue(null)
|
|
998
|
+
},
|
|
999
|
+
/* @__PURE__ */ React21.createElement(
|
|
1000
|
+
"svg",
|
|
1001
|
+
{
|
|
1002
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1003
|
+
viewBox: "0 0 24 24",
|
|
1004
|
+
fill: isActive ? activeColor : inactiveColor,
|
|
1005
|
+
width: size,
|
|
1006
|
+
height: size
|
|
1007
|
+
},
|
|
1008
|
+
/* @__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" })
|
|
1009
|
+
),
|
|
1010
|
+
isHalf && /* @__PURE__ */ React21.createElement("div", { style: { position: "absolute", top: 0, left: 0, width: size / 2, height: size, overflow: "hidden" } }, /* @__PURE__ */ React21.createElement(
|
|
1011
|
+
"svg",
|
|
1012
|
+
{
|
|
1013
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1014
|
+
viewBox: "0 0 24 24",
|
|
1015
|
+
fill: activeColor,
|
|
1016
|
+
width: size,
|
|
1017
|
+
height: size
|
|
1018
|
+
},
|
|
1019
|
+
/* @__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" })
|
|
1020
|
+
))
|
|
1021
|
+
);
|
|
1022
|
+
}));
|
|
1023
|
+
};
|
|
968
1024
|
export {
|
|
969
1025
|
AlertBanner,
|
|
970
1026
|
AnimatedProgressBar,
|
|
@@ -983,6 +1039,7 @@ export {
|
|
|
983
1039
|
MultiStepProgress,
|
|
984
1040
|
Navbar,
|
|
985
1041
|
OTPInput,
|
|
1042
|
+
Rating,
|
|
986
1043
|
RatingStars,
|
|
987
1044
|
UserAvatar,
|
|
988
1045
|
WishlistButton
|