pixelize-design-library 2.1.34 → 2.1.36

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 (15) hide show
  1. package/dist/Components/Button/ButtonProps.d.ts +1 -1
  2. package/dist/Components/Header/Header.js +2 -5
  3. package/dist/Components/Header/components/desktopMenu.js +6 -4
  4. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  5. package/dist/Components/ProductCard/ProductCard.js +35 -11
  6. package/dist/Components/ProductCard/ProductCardProps.d.ts +3 -0
  7. package/dist/Components/ProductCard/ProductLabel.d.ts +3 -1
  8. package/dist/Components/ProductCard/ProductLabel.js +15 -3
  9. package/dist/Components/ProductCard/ProductPrice.d.ts +3 -2
  10. package/dist/Components/ProductCard/ProductPrice.js +57 -14
  11. package/dist/Components/ProductCard/ProductTags.d.ts +3 -1
  12. package/dist/Components/ProductCard/ProductTags.js +11 -6
  13. package/dist/Components/ProductDetails/ProductDetails.js +2 -2
  14. package/dist/Pages/productCaard.js +28 -5
  15. package/package.json +1 -1
package/dist/Components/Button/ButtonProps.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
3
3
  export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
4
4
  label?: string;
5
5
  width?: string | number;
6
- size?: "lg" | "md" | "sm" | "xs";
6
+ size?: "lg" | "md" | "sm" | "xs" | "xl";
7
7
  variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
8
8
  type?: "button" | "submit" | "reset";
9
9
  colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
package/dist/Components/Header/Header.js CHANGED
@@ -44,11 +44,8 @@ var Header = function (_a) {
44
44
  var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
45
45
  var hoverText = (_k = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _k !== void 0 ? _k : (_l = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _l === void 0 ? void 0 : _l[600];
46
46
  var isActive = function (href) { return href && active === href; };
47
- return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow,
48
- // position="sticky"
49
- // top="0"
50
- zIndex: 1000 },
51
- react_2.default.createElement(react_1.Flex, { h: 16, align: "center", mx: "auto" },
47
+ return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000 },
48
+ react_2.default.createElement(react_1.Flex, { minH: 16, align: "center", mx: "auto", justifyContent: "space-between" },
52
49
  react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
53
50
  react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText }),
54
51
  react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlot),
package/dist/Components/Header/components/desktopMenu.js CHANGED
@@ -10,23 +10,25 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
10
10
  var DesktopMenu = function (_a) {
11
11
  var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color, hoverTextColor = _a.hoverTextColor;
12
12
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
13
- return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0 }, menuItems.map(function (item) {
13
+ return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem" }, menuItems.map(function (item) {
14
14
  var _a, _b, _c, _d;
15
15
  var hasChildren = !!item.children;
16
16
  var isHovered = hoveredMenu === item.label;
17
17
  return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
18
- react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, color: color },
18
+ react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined,
19
+ // bg={isActive(item.href) ? activeBg : "transparent"}
20
+ borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
19
21
  react_2.default.createElement(react_1.VStack, { spacing: 0 },
20
22
  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" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
21
23
  react_2.default.createElement(react_1.Text, null, item.label))),
22
24
  hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
23
25
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
24
26
  react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
25
- var _a, _b, _c;
27
+ var _a, _b, _c, _d;
26
28
  return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
27
29
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
28
30
  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", alignItems: "end" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
29
- react_2.default.createElement(react_1.Text, { color: color, _hover: { color: hoverTextColor } }, subItem.label))));
31
+ react_2.default.createElement(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor } }, subItem.label))));
30
32
  })))))));
31
33
  })));
32
34
  };
package/dist/Components/ProductCard/ProductCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ProductCardProps } from './ProductCardProps';
3
- declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, batch, description, }: ProductCardProps) => React.JSX.Element;
3
+ declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, batch, description, avalabilitys, onClick, size, }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -35,17 +35,41 @@ var Button_1 = __importDefault(require("../Button/Button"));
35
35
  var ProductLabel_1 = __importDefault(require("./ProductLabel"));
36
36
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
37
37
  var ProductCard = function (_a) {
38
- var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, batch = _a.batch, description = _a.description;
39
- var _b = (0, react_1.useState)(false), hover = _b[0], setHover = _b[1];
38
+ var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
39
+ var _c = (0, react_1.useState)(false), hover = _c[0], setHover = _c[1];
40
40
  var theme = (0, useCustomTheme_1.useCustomTheme)();
41
- return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063 rem", borderRadius: "lg", overflow: "hidden", p: 3, w: "16.25rem", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
42
- react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: "11.25rem", w: "full", overflow: "hidden" },
43
- react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full", objectFit: "cover" }),
44
- batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "red", position: "absolute", top: 2, right: 2 }, batch.label))),
45
- react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
46
- react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
47
- tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),
48
- options && react_1.default.createElement(ProductPrice_1.default, { options: options }),
49
- onAddToCart && react_1.default.createElement(Button_1.default, { colorScheme: "orange", size: "sm", width: "100%", onClick: onAddToCart }, "Add to Cart"))));
41
+ var sizeStyles = {
42
+ xs: { cardWidth: '16.25rem', imgHeight: '11.25rem', padding: 3, },
43
+ sm: { cardWidth: '18rem', imgHeight: '13rem', padding: 4, },
44
+ md: { cardWidth: '20rem', imgHeight: '15rem', padding: 5, },
45
+ lg: { cardWidth: '22rem', imgHeight: '17rem', padding: 6, },
46
+ };
47
+ var _d = sizeStyles[size], cardWidth = _d.cardWidth, imgHeight = _d.imgHeight, padding = _d.padding;
48
+ var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
49
+ var safeSize = allowedSizes.includes(size) ? size : "md";
50
+ return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
51
+ react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick },
52
+ react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full" }),
53
+ batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || 'green', position: "absolute", top: 2, right: 2, fontSize: {
54
+ xs: 'xs',
55
+ sm: 'sm',
56
+ md: 'md',
57
+ lg: 'lg',
58
+ }[size], px: {
59
+ xs: 1,
60
+ sm: 2,
61
+ md: 3,
62
+ lg: 4,
63
+ }[size], py: {
64
+ xs: 0.5,
65
+ sm: 1,
66
+ md: 1.5,
67
+ lg: 2,
68
+ }[size] }, batch.label))),
69
+ react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding },
70
+ react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size }),
71
+ tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
72
+ options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size }),
73
+ onAddToCart && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: onAddToCart }, "Add to Cart")))));
50
74
  };
51
75
  exports.default = ProductCard;
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
1
2
  export type ProductCardProps = {
2
3
  label: string;
3
4
  description?: string;
@@ -9,6 +10,8 @@ export type ProductCardProps = {
9
10
  onClick?: () => void;
10
11
  onAddToCart?: () => void;
11
12
  batch?: batch;
13
+ size?: SizeType;
14
+ avalabilitys?: boolean;
12
15
  };
13
16
  export type options = {
14
17
  label: string;
package/dist/Components/ProductCard/ProductLabel.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
- declare const ProductLabel: ({ label, description }: {
2
+ import { SizeType } from './ProductCardProps';
3
+ declare const ProductLabel: ({ label, description, size }: {
3
4
  label: string;
4
5
  description?: string | undefined;
6
+ size: SizeType;
5
7
  }) => React.JSX.Element;
6
8
  export default ProductLabel;
package/dist/Components/ProductCard/ProductLabel.js CHANGED
@@ -6,9 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = require("@chakra-ui/react");
7
7
  var react_2 = __importDefault(require("react"));
8
8
  var ProductLabel = function (_a) {
9
- var label = _a.label, description = _a.description;
9
+ var label = _a.label, description = _a.description, size = _a.size;
10
+ var fontSizes = {
11
+ xs: "md",
12
+ sm: "lg",
13
+ md: "xl",
14
+ lg: "2xl"
15
+ };
16
+ var descriptionSizes = {
17
+ xs: 'xs',
18
+ sm: 'sm',
19
+ md: 'md',
20
+ lg: 'lg',
21
+ };
10
22
  return (react_2.default.createElement(react_1.Box, null,
11
- react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, label),
12
- description && react_2.default.createElement(react_1.Text, { fontSize: "xs", fontStyle: "italic" }, description)));
23
+ react_2.default.createElement(react_1.Text, { fontWeight: "bold", fontSize: fontSizes[size] }, label),
24
+ description && react_2.default.createElement(react_1.Text, { fontSize: descriptionSizes[size], fontStyle: "italic" }, description)));
13
25
  };
14
26
  exports.default = ProductLabel;
package/dist/Components/ProductCard/ProductPrice.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- import { options } from './ProductCardProps';
2
+ import { options, SizeType } from './ProductCardProps';
3
3
  type ProductPriceProps = {
4
4
  options: options[];
5
+ size: SizeType;
5
6
  };
6
- declare const ProductPrice: ({ options }: ProductPriceProps) => React.JSX.Element;
7
+ declare const ProductPrice: ({ options, size }: ProductPriceProps) => React.JSX.Element;
7
8
  export default ProductPrice;
package/dist/Components/ProductCard/ProductPrice.js CHANGED
@@ -25,8 +25,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  var react_1 = __importStar(require("react"));
27
27
  var react_2 = require("@chakra-ui/react");
28
+ var sizeConfig = {
29
+ xs: {
30
+ font: "xs",
31
+ label: "sm",
32
+ price: "sm",
33
+ px: 2,
34
+ py: 1,
35
+ rowHeight: "2rem",
36
+ iconSize: "0.75rem",
37
+ dotSize: "0.375rem",
38
+ },
39
+ sm: {
40
+ font: "sm",
41
+ label: "md",
42
+ price: "md",
43
+ px: 3,
44
+ py: 1.5,
45
+ rowHeight: "2.5rem",
46
+ iconSize: "1rem",
47
+ dotSize: "0.5rem",
48
+ },
49
+ md: {
50
+ font: "md",
51
+ label: "lg",
52
+ price: "lg",
53
+ px: 4,
54
+ py: 2,
55
+ rowHeight: "3rem",
56
+ iconSize: "1.25rem",
57
+ dotSize: "0.625rem",
58
+ },
59
+ lg: {
60
+ font: "lg",
61
+ label: "xl",
62
+ price: "xl",
63
+ px: 5,
64
+ py: 2.5,
65
+ rowHeight: "3.5rem",
66
+ iconSize: "1.5rem",
67
+ dotSize: "0.75rem",
68
+ },
69
+ };
28
70
  var ProductPrice = function (_a) {
29
- var options = _a.options;
71
+ var options = _a.options, size = _a.size;
72
+ var cfg = sizeConfig[size];
30
73
  var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
31
74
  var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
32
75
  var _d = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPosition = _d[0], setDropdownPosition = _d[1];
@@ -51,37 +94,37 @@ var ProductPrice = function (_a) {
51
94
  }
52
95
  }, [isOpen]);
53
96
  return (react_1.default.createElement(react_1.default.Fragment, null,
54
- isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", display: "inline-block", w: "100%" },
55
- react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
56
- react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, selected.label),
57
- react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "orange.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
97
+ isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
98
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
99
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, selected.label),
100
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
58
101
  !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
59
- react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "orange.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
102
+ react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
60
103
  var discounted = getDiscountedPrice(option);
61
104
  var isSelected = selected.weight === option.weight;
62
- return (react_1.default.createElement(react_2.Box, { key: option.weight, px: 4, h: "2.5rem", cursor: "pointer", bg: isSelected ? 'orange.50' : 'white', _hover: { bg: 'orange.100' }, onClick: function () {
105
+ return (react_1.default.createElement(react_2.Box, { key: option.weight, px: cfg.px, h: cfg.rowHeight, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', _hover: { bg: 'red.100' }, onClick: function () {
63
106
  setSelected(option);
64
107
  setIsOpen(false);
65
108
  }, display: "flex", alignItems: "center", justifyContent: "space-between" },
66
109
  react_1.default.createElement(react_2.Box, null,
67
- react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, option.label),
68
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "green.600", fontWeight: "semibold" },
110
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, option.label),
111
+ option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "green.600", fontWeight: "semibold" },
69
112
  option.offer,
70
113
  "% OFF"))),
71
114
  react_1.default.createElement(react_2.Box, { textAlign: "right" },
72
- react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "semibold", color: "orange.500" },
115
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.price, fontWeight: "semibold", color: "red.500" },
73
116
  "\u20B9",
74
117
  discounted),
75
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.400", textDecoration: "line-through" },
118
+ option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "gray.400", textDecoration: "line-through" },
76
119
  "\u20B9",
77
120
  option.price))),
78
- react_1.default.createElement(react_2.Box, { ml: 4, w: "1rem", h: "1rem", minW: "1rem", borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'orange.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", bg: "orange.400", borderRadius: "full" })))));
121
+ react_1.default.createElement(react_2.Box, { ml: 4, w: cfg.iconSize, h: cfg.iconSize, minW: cfg.iconSize, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: cfg.dotSize, h: cfg.dotSize, bg: "red.400", borderRadius: "full" })))));
79
122
  })))),
80
- react_1.default.createElement(react_2.Box, { mt: 2, display: "flex", alignItems: "center", fontSize: "sm", gap: 2 },
123
+ react_1.default.createElement(react_2.Box, { mt: 2, display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2 },
81
124
  selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
82
125
  "\u20B9",
83
126
  selected.price)),
84
- react_1.default.createElement(react_2.Text, { color: "orange.500", fontWeight: "semibold" },
127
+ react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
85
128
  "\u20B9",
86
129
  getDiscountedPrice(selected)))));
87
130
  };
package/dist/Components/ProductCard/ProductTags.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
+ import { SizeType } from './ProductCardProps';
2
3
  type ProductTagsProps = {
3
4
  tags: string[];
4
5
  className?: string;
6
+ size: SizeType;
5
7
  };
6
- declare const ProductTags: ({ tags, className }: ProductTagsProps) => React.JSX.Element;
8
+ declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => React.JSX.Element;
7
9
  export default ProductTags;
package/dist/Components/ProductCard/ProductTags.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var ProductTags = function (_a) {
9
- var tags = _a.tags, className = _a.className;
9
+ var tags = _a.tags, className = _a.className, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
10
10
  var getRows = function (tags) {
11
11
  var count = tags.length;
12
12
  if (count === 1)
@@ -19,12 +19,17 @@ var ProductTags = function (_a) {
19
19
  return [tags.slice(0, 2), tags.slice(2, 4)];
20
20
  return [];
21
21
  };
22
- return (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (
23
- // <></>
24
- react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1 }, tag)); }))); })));
22
+ return (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1, size: size }, tag)); }))); })));
25
23
  };
26
24
  var Tag = function (_a) {
27
- var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b;
28
- return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f89f24", color: "black", fontSize: "0.625rem", fontWeight: "semibold", borderRadius: "full", px: "0.5rem", py: "0.125rem", textAlign: "center", whiteSpace: "nowrap", backgroundColor: "orange.100" }, children));
25
+ var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c;
26
+ // Size map for tags
27
+ var tagSizes = {
28
+ xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
29
+ sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
30
+ md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
31
+ lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
32
+ };
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", backgroundColor: "red.200" }, children));
29
34
  };
30
35
  exports.default = ProductTags;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -18,10 +18,10 @@ var ProductDetails = function (_a) {
18
18
  react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
19
19
  react_1.default.createElement(react_2.Box, { flex: "1" },
20
20
  label &&
21
- react_1.default.createElement(ProductLabel_1.default, { label: label }),
21
+ react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
22
22
  react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
23
23
  tags &&
24
- react_1.default.createElement(ProductTags_1.default, { tags: tags }),
24
+ react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
25
25
  price &&
26
26
  react_1.default.createElement(ProductDtlPrice_1.default, { price: price }))));
27
27
  };
package/dist/Pages/productCaard.js CHANGED
@@ -5,7 +5,6 @@ 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 ProductCard_1 = __importDefault(require("../Components/ProductCard/ProductCard"));
8
- var react_2 = require("@chakra-ui/react");
9
8
  var productCaard = function () {
10
9
  var option = [{
11
10
  label: "100 G",
@@ -22,11 +21,35 @@ var productCaard = function () {
22
21
  offer: 50,
23
22
  }
24
23
  ];
25
- return (react_1.default.createElement(react_2.SimpleGrid, { columns: [1, 2, 3], spacing: 6, p: 4 },
24
+ return (react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
26
25
  react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
27
- visibile: "https://www.sreeannapoorna.com/cdn/shop/files/80A4644.jpg?v=1752466892&width=1946",
28
- hover: "https://www.sreeannapoorna.com/cdn/shop/files/80A4658.jpg?v=1752466430&width=1946",
29
- }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, onAddToCart: function () { }, onClick: function () { }, batch: {
26
+ visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
27
+ hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
28
+ }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
29
+ label: "Special",
30
+ color: "red",
31
+ } }),
32
+ react_1.default.createElement("br", null),
33
+ react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
34
+ visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
35
+ hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
36
+ }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "sm", onAddToCart: function () { }, onClick: function () { }, batch: {
37
+ label: "Special",
38
+ color: "red",
39
+ } }),
40
+ react_1.default.createElement("br", null),
41
+ react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
42
+ visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
43
+ hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
44
+ }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "md", onAddToCart: function () { }, onClick: function () { }, batch: {
45
+ label: "Special",
46
+ color: "red",
47
+ } }),
48
+ react_1.default.createElement("br", null),
49
+ react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
50
+ visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
51
+ hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
52
+ }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "lg", onAddToCart: function () { }, onClick: function () { }, batch: {
30
53
  label: "Special",
31
54
  color: "red",
32
55
  } })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.1.34",
3
+ "version": "2.1.36",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",