pixelize-design-library 2.2.93 → 2.2.94

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.
Files changed (4) hide show
  1. package/dist/Components/Header/components/mobileMenu.js +3 -3
  2. package/dist/Components/ProductCard/ProductReview.js +13 -3
  3. package/dist/Components/ProductCard/ProductTags.js +16 -1
  4. package/package.json +1 -1
package/dist/Components/Header/components/mobileMenu.js CHANGED
@@ -26,7 +26,7 @@ var MobileMenu = function (_a) {
26
26
  : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
27
27
  react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
28
28
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
29
- item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
29
+ item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, item.badge.label)),
30
30
  react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
31
31
  react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
32
32
  react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
@@ -37,10 +37,10 @@ var MobileMenu = function (_a) {
37
37
  onClose === null || onClose === void 0 ? void 0 : onClose();
38
38
  }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
39
39
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
40
- subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
40
+ subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
41
41
  react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
42
42
  react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
43
- react_2.default.createElement(react_1.Text, { fontSize: "xs" }, subItem.label)))));
43
+ react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
44
44
  }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
45
45
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
46
46
  item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
package/dist/Components/ProductCard/ProductReview.js CHANGED
@@ -10,10 +10,20 @@ var ProductReview = function (_a) {
10
10
  var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
11
11
  var hasRating = rating !== undefined && rating !== null;
12
12
  var hasReviewCount = reviewCount !== undefined && reviewCount !== null;
13
+ // Get colors from theme
14
+ var yellow400 = (0, react_2.useToken)('colors', ['yellow.400'])[0];
15
+ // Convert rating to number and ensure it's between 0 and 5
16
+ // Calculate fill percentage: (rating / 5) * 100%
17
+ var numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
18
+ var fillPercentage = (numericRating / 6) * 100;
13
19
  return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
14
- hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
15
- react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5, color: "yellow.400", fill: "yellow.400" }),
16
- react_1.default.createElement(react_2.Text, null, rating))),
20
+ hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, bg: "teal.900", color: "white", px: 2, borderRadius: "md" },
21
+ react_1.default.createElement(react_2.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0 },
22
+ react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px" },
23
+ react_1.default.createElement(lucide_react_1.Star, { size: 14, color: "white", fill: "none", stroke: "white", strokeWidth: 1.5 })),
24
+ fillPercentage > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "".concat(fillPercentage, "%"), height: "100%", overflow: "hidden" },
25
+ react_1.default.createElement(lucide_react_1.Star, { size: 14, color: yellow400, fill: yellow400 })))),
26
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "white" }, numericRating))),
17
27
  hasRating && hasReviewCount && react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
18
28
  hasReviewCount && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
19
29
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
package/dist/Components/ProductCard/ProductTags.js CHANGED
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
+ var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
8
9
  var ProductTags = function (_a) {
9
10
  var tags = _a.tags, className = _a.className, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
10
11
  var getRows = function (tags) {
@@ -30,6 +31,20 @@ var Tag = function (_a) {
30
31
  md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
31
32
  lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
32
33
  };
33
- return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap" }, children));
34
+ var ref = react_1.default.useRef(null);
35
+ var _d = react_1.default.useState(false), truncated = _d[0], setTruncated = _d[1];
36
+ react_1.default.useEffect(function () {
37
+ var el = ref.current;
38
+ if (!el)
39
+ return;
40
+ var check = function () { return setTruncated(el.scrollWidth > el.clientWidth); };
41
+ check();
42
+ window.addEventListener('resize', check);
43
+ return function () {
44
+ window.removeEventListener('resize', check);
45
+ };
46
+ }, [children]);
47
+ var content = (react_1.default.createElement(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children));
48
+ return truncated ? (react_1.default.createElement(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom' }, content)) : (content);
34
49
  };
35
50
  exports.default = ProductTags;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.93",
3
+ "version": "2.2.94",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",