pixelize-design-library 2.2.84 → 2.2.85

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 (10) hide show
  1. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  2. package/dist/Components/ProductCard/ProductCard.js +3 -2
  3. package/dist/Components/ProductCard/ProductCardProps.d.ts +1 -0
  4. package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
  5. package/dist/Components/ProductDetails/ProductDetails.js +5 -4
  6. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +1 -0
  7. package/dist/Components/ProductDetails/ProductImageSlider.js +48 -9
  8. package/dist/Components/Slider/Slider.d.ts +1 -0
  9. package/dist/Components/Slider/Slider.js +24 -15
  10. package/package.json +1 -1
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 }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -37,7 +37,8 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
37
37
  var lucide_react_1 = require("lucide-react");
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;
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;
41
42
  var _l = (0, react_1.useState)(false), hover = _l[0], setHover = _l[1];
42
43
  var theme = (0, useCustomTheme_1.useCustomTheme)();
43
44
  var _m = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _m[0], setSelectedOption = _m[1];
@@ -99,7 +100,7 @@ var ProductCard = function (_a) {
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,6 +18,7 @@ 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;
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, }: ProductDetailsProps) => React.JSX.Element;
4
4
  export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -14,8 +14,9 @@ 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;
18
18
  var theme = (0, useCustomTheme_1.useCustomTheme)();
19
+ var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
19
20
  var _g = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _g[0], setSelectedOption = _g[1];
20
21
  var _h = react_1.default.useState(1), qty = _h[0], setQty = _h[1];
21
22
  react_1.default.useEffect(function () {
@@ -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),
@@ -53,6 +54,6 @@ var ProductDetails = function (_a) {
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,6 +13,7 @@ export type ProductDetailsProps = {
13
13
  onOptionChange?: (option: options) => void;
14
14
  addToCart?: boolean;
15
15
  goToCart?: boolean;
16
+ notifyMe?: boolean;
16
17
  OnGoToCart?: () => void;
17
18
  };
18
19
  export type images = {
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,21 @@ 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
+ }, [slides.length]);
67
+ var ratio = (_c = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _c !== void 0 ? _c : 16 / 9;
68
+ return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden" },
69
+ 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; })
70
+ .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" },
71
+ react_1.default.createElement(react_2.AspectRatio, { ratio: ratio, w: "100%" },
72
+ 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
73
  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" })); }))));
74
+ 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] } }),
75
+ 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] } }))),
76
+ 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
77
  };
69
78
  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.85",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",