pixelize-design-library 2.2.84 → 2.2.86

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 (14) hide show
  1. package/dist/Components/Header/components/mobileMenu.js +26 -9
  2. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  3. package/dist/Components/ProductCard/ProductCard.js +11 -10
  4. package/dist/Components/ProductCard/ProductCardProps.d.ts +2 -0
  5. package/dist/Components/ProductCard/ProductPrice.d.ts +2 -1
  6. package/dist/Components/ProductCard/ProductPrice.js +10 -8
  7. package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
  8. package/dist/Components/ProductDetails/ProductDetails.js +8 -7
  9. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +2 -0
  10. package/dist/Components/ProductDetails/ProductDtlPrice.js +0 -1
  11. package/dist/Components/ProductDetails/ProductImageSlider.js +48 -9
  12. package/dist/Components/Slider/Slider.d.ts +1 -0
  13. package/dist/Components/Slider/Slider.js +25 -15
  14. package/package.json +1 -1
package/dist/Components/Header/components/mobileMenu.js CHANGED
@@ -5,24 +5,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = require("@chakra-ui/react");
7
7
  var react_2 = __importDefault(require("react"));
8
+ var lucide_react_1 = require("lucide-react");
8
9
  var MobileMenu = function (_a) {
9
10
  var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot, onClose = _a.onClose;
11
+ var _b = react_2.default.useState(null), openMenuLabel = _b[0], setOpenMenuLabel = _b[1];
12
+ react_2.default.useEffect(function () {
13
+ if (!isOpen)
14
+ setOpenMenuLabel(null);
15
+ }, [isOpen]);
10
16
  return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
11
17
  react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
12
18
  react_2.default.createElement(react_1.Stack, { spacing: 4 },
13
19
  menuItems.map(function (item) {
14
20
  var _a, _b, _c, _d, _e;
15
21
  return item.children ? (react_2.default.createElement(react_1.Box, { key: item.label, px: 2 },
16
- react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
17
- 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)),
18
- react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)),
19
- react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1 }, item.children.map(function (subItem) {
20
- var _a, _b, _c;
21
- return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: function () { var _a; (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
22
+ react_2.default.createElement(react_1.Button, { onClick: function () {
23
+ return setOpenMenuLabel(function (prev) { return (prev === item.label ? null : item.label); });
24
+ }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some(function (subItem) { return isActive(subItem.href); })
25
+ ? activeBg
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
+ react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
22
28
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
23
- 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)),
24
- react_2.default.createElement(react_1.Text, null, subItem.label))));
25
- })))) : (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 } },
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)),
30
+ react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)))),
31
+ react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
32
+ react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
33
+ var _a, _b, _c;
34
+ return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: function () {
35
+ var _a;
36
+ (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
37
+ onClose === null || onClose === void 0 ? void 0 : onClose();
38
+ }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
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)),
41
+ react_2.default.createElement(react_1.Text, null, subItem.label))));
42
+ }))))) : (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 } },
26
43
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
27
44
  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)),
28
45
  react_2.default.createElement(react_1.Text, null, item.label))));
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: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, }: ProductCardProps) => React.JSX.Element;
3
+ declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -29,19 +29,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_2 = require("@chakra-ui/react");
31
31
  var ProductTags_1 = __importDefault(require("./ProductTags"));
32
- // import ProductReview from './ProductReview';
33
32
  var ProductPrice_1 = __importDefault(require("./ProductPrice"));
34
33
  var Button_1 = __importDefault(require("../Button/Button"));
35
34
  var ProductLabel_1 = __importDefault(require("./ProductLabel"));
36
35
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
37
36
  var lucide_react_1 = require("lucide-react");
37
+ var ProductReview_1 = __importDefault(require("./ProductReview"));
38
38
  var ProductCard = function (_a) {
39
39
  var _b, _c, _d, _e, _f, _g, _h, _j;
40
- var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _k = _a.size, size = _k === void 0 ? "sm" : _k;
41
- var _l = (0, react_1.useState)(false), hover = _l[0], setHover = _l[1];
40
+ var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _k = _a.size, size = _k === void 0 ? "sm" : _k, // ✅ default to "sm"
41
+ notifyMe = _a.notifyMe, _l = _a.isQtyEditable, isQtyEditable = _l === void 0 ? false : _l;
42
+ var _m = (0, react_1.useState)(false), hover = _m[0], setHover = _m[1];
42
43
  var theme = (0, useCustomTheme_1.useCustomTheme)();
43
- var _m = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _m[0], setSelectedOption = _m[1];
44
- var _o = (0, react_1.useState)(1), qty = _o[0], setQty = _o[1];
44
+ var _o = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _o[0], setSelectedOption = _o[1];
45
+ var _p = (0, react_1.useState)(1), qty = _p[0], setQty = _p[1];
45
46
  var handleOptionSelect = function (option) {
46
47
  setSelectedOption(option);
47
48
  onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
@@ -64,7 +65,7 @@ var ProductCard = function (_a) {
64
65
  md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
65
66
  lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
66
67
  };
67
- var _p = sizeStyles[size], cardWidth = _p.cardWidth, imgHeight = _p.imgHeight, padding = _p.padding;
68
+ var _q = sizeStyles[size], cardWidth = _q.cardWidth, imgHeight = _q.imgHeight, padding = _q.padding;
68
69
  var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
69
70
  var safeSize = allowedSizes.includes(size) ? size : "md";
70
71
  return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
@@ -88,18 +89,18 @@ var ProductCard = function (_a) {
88
89
  }[size] }, batch.label))),
89
90
  react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding },
90
91
  react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
91
- react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size })),
92
+ react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
92
93
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
93
- options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect }),
94
+ options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: rating && reviews ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }) : undefined })),
94
95
  typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK")),
95
- addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
96
+ addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
96
97
  react_1.default.createElement(react_2.HStack, null,
97
98
  react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
98
99
  react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
99
100
  react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
100
101
  (button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart")),
101
102
  addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); }, colorScheme: "red" }, "Add to Cart")),
102
- addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
103
+ addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
103
104
  goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart")))));
104
105
  };
105
106
  exports.default = ProductCard;
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -18,10 +18,12 @@ export type ProductCardProps = {
18
18
  onOptionChange?: (option: options) => void;
19
19
  addToCart?: boolean;
20
20
  goToCart?: boolean;
21
+ notifyMe?: boolean;
21
22
  OnGoToCart?: () => void;
22
23
  batch?: batch;
23
24
  size?: SizeType;
24
25
  avalabilitys?: boolean;
26
+ isQtyEditable?: boolean;
25
27
  };
26
28
  export type options = {
27
29
  label: string;
package/dist/Components/ProductCard/ProductPrice.d.ts CHANGED
@@ -4,6 +4,7 @@ type ProductPriceProps = {
4
4
  options: options[];
5
5
  size: SizeType;
6
6
  onSelect?: (option: options) => void;
7
+ rightSlot?: React.ReactNode;
7
8
  };
8
- declare const ProductPrice: ({ options, size, onSelect }: ProductPriceProps) => React.JSX.Element;
9
+ declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => React.JSX.Element;
9
10
  export default ProductPrice;
package/dist/Components/ProductCard/ProductPrice.js CHANGED
@@ -68,7 +68,7 @@ var sizeConfig = {
68
68
  },
69
69
  };
70
70
  var ProductPrice = function (_a) {
71
- var options = _a.options, size = _a.size, onSelect = _a.onSelect;
71
+ var options = _a.options, size = _a.size, onSelect = _a.onSelect, rightSlot = _a.rightSlot;
72
72
  var cfg = sizeConfig[size];
73
73
  var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
74
74
  var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
@@ -134,12 +134,14 @@ var ProductPrice = function (_a) {
134
134
  option.price))),
135
135
  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" })))));
136
136
  })))),
137
- react_1.default.createElement(react_2.Box, { mt: 2, display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2 },
138
- selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
139
- "\u20B9",
140
- selected.price)),
141
- react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
142
- "\u20B9",
143
- getDiscountedPrice(selected)))));
137
+ react_1.default.createElement(react_2.Flex, { mt: 2, align: "center", justify: rightSlot ? "space-between" : "flex-start", w: "full", gap: 3 },
138
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0 },
139
+ selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
140
+ "\u20B9",
141
+ selected.price)),
142
+ react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
143
+ "\u20B9",
144
+ getDiscountedPrice(selected))),
145
+ rightSlot && react_1.default.createElement(react_2.Box, { flexShrink: 0 }, rightSlot))));
144
146
  };
145
147
  exports.default = ProductPrice;
package/dist/Components/ProductDetails/ProductDetails.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ProductDetailsProps } from "./ProductDetailsProps";
3
- declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, }: ProductDetailsProps) => React.JSX.Element;
3
+ declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
4
4
  export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -14,10 +14,11 @@ var Button_1 = __importDefault(require("../Button/Button"));
14
14
  var lucide_react_1 = require("lucide-react");
15
15
  var ProductDetails = function (_a) {
16
16
  var _b, _c, _d, _e, _f;
17
- var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart;
17
+ var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g;
18
18
  var theme = (0, useCustomTheme_1.useCustomTheme)();
19
- var _g = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _g[0], setSelectedOption = _g[1];
20
- var _h = react_1.default.useState(1), qty = _h[0], setQty = _h[1];
19
+ var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
20
+ var _h = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _h[0], setSelectedOption = _h[1];
21
+ var _j = react_1.default.useState(1), qty = _j[0], setQty = _j[1];
21
22
  react_1.default.useEffect(function () {
22
23
  setQty(1);
23
24
  }, [selectedOption]);
@@ -34,8 +35,8 @@ var ProductDetails = function (_a) {
34
35
  setQty(function (prev) { return (prev > 1 ? prev - 1 : 1); });
35
36
  };
36
37
  return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
37
- react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: "31.25rem" },
38
- react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
38
+ react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem" },
39
+ react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch })),
39
40
  react_1.default.createElement(react_2.Box, { flex: "1" },
40
41
  label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
41
42
  react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
@@ -47,12 +48,12 @@ var ProductDetails = function (_a) {
47
48
  typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) <= 0 && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
48
49
  react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK"))),
49
50
  goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
50
- addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
51
+ addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
51
52
  react_1.default.createElement(react_2.HStack, null,
52
53
  react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
53
54
  react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
54
55
  react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : Infinity), isRound: true, variant: "outline", colorScheme: "red" })))),
55
56
  addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); } }, "Add to cart")),
56
- addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) <= 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); } }, "Notify Me")))));
57
+ addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); } }, "Notify Me")))));
57
58
  };
58
59
  exports.default = ProductDetails;
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts CHANGED
@@ -13,7 +13,9 @@ export type ProductDetailsProps = {
13
13
  onOptionChange?: (option: options) => void;
14
14
  addToCart?: boolean;
15
15
  goToCart?: boolean;
16
+ notifyMe?: boolean;
16
17
  OnGoToCart?: () => void;
18
+ isQtyEditable?: boolean;
17
19
  };
18
20
  export type images = {
19
21
  imageUrl: string;
package/dist/Components/ProductDetails/ProductDtlPrice.js CHANGED
@@ -47,7 +47,6 @@ var ProductDtlPrice = function (_a) {
47
47
  "SAVE ",
48
48
  selected.offer,
49
49
  "%")),
50
- react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: "medium" }, selected.weight),
51
50
  react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
52
51
  react_1.default.createElement(react_2.Box, null,
53
52
  react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
package/dist/Components/ProductDetails/ProductImageSlider.js CHANGED
@@ -28,13 +28,14 @@ var react_2 = __importStar(require("react"));
28
28
  var lucide_react_1 = require("lucide-react");
29
29
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
30
30
  function ProductImageSlider(_a) {
31
- var _b;
32
- var images = _a.images, _c = _a.thumbHeight, thumbHeight = _c === void 0 ? 60 : _c, _d = _a.imageSize, imageSize = _d === void 0 ? 480 : _d, _e = _a.thumbnailsToShow, thumbnailsToShow = _e === void 0 ? 6 : _e, batch = _a.batch;
33
- var _f = (0, react_2.useState)(0), activeIndex = _f[0], setActiveIndex = _f[1];
34
- var _g = (0, react_2.useState)(0), thumbStartIndex = _g[0], setThumbStartIndex = _g[1];
35
- var _h = (0, react_2.useState)("center center"), transformOrigin = _h[0], setTransformOrigin = _h[1];
36
- var _j = (0, react_2.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
31
+ var _b, _c;
32
+ var images = _a.images, _d = _a.thumbHeight, thumbHeight = _d === void 0 ? 60 : _d, _e = _a.imageSize, imageSize = _e === void 0 ? 480 : _e, _f = _a.thumbnailsToShow, thumbnailsToShow = _f === void 0 ? 6 : _f, batch = _a.batch;
33
+ var _g = (0, react_2.useState)(0), activeIndex = _g[0], setActiveIndex = _g[1];
34
+ var _h = (0, react_2.useState)(0), thumbStartIndex = _h[0], setThumbStartIndex = _h[1];
35
+ var _j = (0, react_2.useState)("center center"), transformOrigin = _j[0], setTransformOrigin = _j[1];
36
+ var _k = (0, react_2.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
37
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
38
+ var isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
38
39
  var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
39
40
  var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
40
41
  var canScrollUp = thumbStartIndex > 0;
@@ -65,7 +66,45 @@ function ProductImageSlider(_a) {
65
66
  setThumbStartIndex(newIndex - thumbnailsToShow + 1);
66
67
  }
67
68
  };
68
- return (react_2.default.createElement(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4 },
69
+ return (react_2.default.createElement(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row" }, isMobile ? (react_2.default.createElement(react_2.default.Fragment, null,
70
+ react_2.default.createElement(react_1.Box, { w: "full",
71
+ // h={`${imageSize}px`}
72
+ position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
73
+ if (isMobile)
74
+ return;
75
+ var bounds = e.currentTarget.getBoundingClientRect();
76
+ var x = ((e.clientX - bounds.left) / bounds.width) * 100;
77
+ var y = ((e.clientY - bounds.top) / bounds.height) * 100;
78
+ setTransformOrigin("".concat(x, "% ").concat(y, "%"));
79
+ }, onMouseEnter: function () { return !isMobile && setIsHovered(true); }, onMouseLeave: function () {
80
+ setIsHovered(false);
81
+ setTransformOrigin("center center");
82
+ } },
83
+ react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
84
+ react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
85
+ react_2.default.createElement(react_1.Image, { src: (_b = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _b !== void 0 ? _b : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }),
86
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
87
+ var _a;
88
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
89
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
90
+ updateActiveIndex(newIndex);
91
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
92
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
93
+ var _a;
94
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
95
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
96
+ updateActiveIndex(newIndex);
97
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })),
98
+ react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center", justify: "center" },
99
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 :
100
+ visibleThumbnails.map(function (src, index) {
101
+ var actualIndex = thumbStartIndex + index;
102
+ return (react_2.default.createElement(react_1.Box, { key: actualIndex, w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight, "px"), borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
103
+ ? "0.125rem solid ".concat(theme.colors.gray[500])
104
+ : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
105
+ react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover" })));
106
+ }),
107
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm" })))) : (react_2.default.createElement(react_2.default.Fragment, null,
69
108
  react_2.default.createElement(react_1.Box, { w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight * thumbnailsToShow, "px"), display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden" },
70
109
  react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }),
71
110
  react_2.default.createElement(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden" }, visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map(function (src, index) {
@@ -87,7 +126,7 @@ function ProductImageSlider(_a) {
87
126
  } },
88
127
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
89
128
  react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
90
- react_2.default.createElement(react_1.Image, { src: (_b = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _b !== void 0 ? _b : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }),
129
+ react_2.default.createElement(react_1.Image, { src: (_c = images === null || images === void 0 ? void 0 : images[activeIndex].imageUrl) !== null && _c !== void 0 ? _c : "", w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }),
91
130
  react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
92
131
  var _a;
93
132
  var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
@@ -99,6 +138,6 @@ function ProductImageSlider(_a) {
99
138
  var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
100
139
  var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
101
140
  updateActiveIndex(newIndex);
102
- }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))));
141
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))));
103
142
  }
104
143
  exports.default = ProductImageSlider;
package/dist/Components/Slider/Slider.d.ts CHANGED
@@ -3,6 +3,7 @@ type ImageSliderProps = {
3
3
  images: SliderImage[];
4
4
  interval?: number;
5
5
  isArrow?: boolean;
6
+ mobileImages?: SliderImage[];
6
7
  };
7
8
  type SliderImage = {
8
9
  id: string | number;
package/dist/Components/Slider/Slider.js CHANGED
@@ -37,17 +37,19 @@ var react_2 = require("@chakra-ui/react");
37
37
  var lucide_react_1 = require("lucide-react");
38
38
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
39
39
  var Slider = function (_a) {
40
- var _b, _c, _d, _e;
41
- var images = _a.images, _f = _a.interval, interval = _f === void 0 ? 5000 : _f, _g = _a.isArrow, isArrow = _g === void 0 ? false : _g;
40
+ var _b, _c, _d, _e, _f, _g;
41
+ var images = _a.images, _h = _a.interval, interval = _h === void 0 ? 5000 : _h, _j = _a.isArrow, isArrow = _j === void 0 ? false : _j, mobileImages = _a.mobileImages;
42
42
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
43
- var _h = (0, react_1.useState)(0), currentIndex = _h[0], setCurrentIndex = _h[1];
43
+ var _k = (0, react_1.useState)(0), currentIndex = _k[0], setCurrentIndex = _k[1];
44
44
  var timeoutRef = (0, react_1.useRef)(null);
45
+ var isMobile = (_b = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _b !== void 0 ? _b : false;
46
+ var slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
45
47
  var nextSlide = (0, react_1.useCallback)(function () {
46
- setCurrentIndex(function (prev) { return (prev + 1) % images.length; });
47
- }, [images.length]); // ✅ Stable reference
48
+ setCurrentIndex(function (prev) { return (prev + 1) % slides.length; });
49
+ }, [slides.length]);
48
50
  var prevSlide = (0, react_1.useCallback)(function () {
49
- setCurrentIndex(function (prev) { return (prev - 1 + images.length) % images.length; });
50
- }, [images.length]);
51
+ setCurrentIndex(function (prev) { return (prev - 1 + slides.length) % slides.length; });
52
+ }, [slides.length]);
51
53
  (0, react_1.useEffect)(function () {
52
54
  if (interval > 0) {
53
55
  timeoutRef.current = setTimeout(nextSlide, interval);
@@ -56,14 +58,22 @@ var Slider = function (_a) {
56
58
  if (timeoutRef.current)
57
59
  clearTimeout(timeoutRef.current);
58
60
  };
59
- }, [currentIndex, interval, nextSlide]); // ✅ include nextSlide safely
60
- return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "30rem", overflow: "hidden" },
61
- react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, __spreadArray([], images, true).sort(function (a, b) { return a.order - b.order; })
62
- .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
63
- react_1.default.createElement(react_2.Image, { src: image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100vw", h: "100%" }))); })),
61
+ }, [currentIndex, interval, nextSlide]);
62
+ (0, react_1.useEffect)(function () {
63
+ if (currentIndex >= slides.length) {
64
+ setCurrentIndex(0);
65
+ }
66
+ // eslint-disable-next-line
67
+ }, [slides.length]);
68
+ var ratio = (_c = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _c !== void 0 ? _c : 16 / 9;
69
+ return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden" },
70
+ react_1.default.createElement(react_2.Flex, { w: "".concat(slides.length * 100, "%"), transform: "translateX(-".concat((currentIndex * 100) / slides.length, "%)"), transition: "transform 0.5s ease" }, __spreadArray([], slides, true).sort(function (a, b) { return a.order - b.order; })
71
+ .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "".concat(100 / slides.length, "%"), h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
72
+ react_1.default.createElement(react_2.AspectRatio, { ratio: ratio, w: "100%" },
73
+ react_1.default.createElement(react_2.Image, { src: isMobile && image.mobilePreviewUrl ? image.mobilePreviewUrl : image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100%", h: "100%", loading: "lazy" })))); })),
64
74
  isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
65
- react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200] } }),
66
- react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }))),
67
- react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, images.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "0.8rem", h: "0.8rem", bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); }))));
75
+ react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }),
76
+ react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200] } }))),
77
+ react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, slides.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); }))));
68
78
  };
69
79
  exports.default = Slider;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.84",
3
+ "version": "2.2.86",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",