pixelize-design-library 2.2.96 → 2.2.98

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 (6) hide show
  1. package/dist/Components/Header/components/desktopMenu.js +2 -2
  2. package/dist/Components/Header/components/mobileMenu.js +1 -1
  3. package/dist/Components/NavigationBar/NavigationBar.js +26 -34
  4. package/dist/Components/ProductDetails/ProductImageSlider.js +31 -28
  5. package/dist/Components/Slider/Slider.js +1 -1
  6. package/package.json +1 -1
package/dist/Components/Header/components/desktopMenu.js CHANGED
@@ -19,7 +19,7 @@ var DesktopMenu = function (_a) {
19
19
  // bg={isActive(item.href) ? activeBg : "transparent"}
20
20
  borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
21
21
  react_2.default.createElement(react_1.VStack, { spacing: 0 },
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)),
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", borderRadius: "full" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
23
23
  react_2.default.createElement(react_1.Text, null, item.label))),
24
24
  hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
25
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 },
@@ -27,7 +27,7 @@ var DesktopMenu = function (_a) {
27
27
  var _a, _b, _c, _d;
28
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 } },
29
29
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
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)),
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", borderRadius: "full" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
31
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))));
32
32
  })))))));
33
33
  })));
package/dist/Components/Header/components/mobileMenu.js CHANGED
@@ -43,7 +43,7 @@ var MobileMenu = function (_a) {
43
43
  react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
44
44
  }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
45
45
  react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
46
- 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)),
46
+ item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em", borderRadius: "full" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
47
47
  react_2.default.createElement(react_1.Text, null, item.label))));
48
48
  }),
49
49
  rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
package/dist/Components/NavigationBar/NavigationBar.js CHANGED
@@ -24,39 +24,31 @@ function NavBar(_a) {
24
24
  react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
25
25
  react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
26
26
  react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
27
- react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
28
- react_1.default.createElement(react_2.Center, { py: 4 },
29
- react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
30
- react_1.default.createElement(react_2.Center, null,
31
- react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
32
- react_1.default.createElement(react_2.MenuDivider, null), navMenu === null || navMenu === void 0 ? void 0 :
33
- navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
34
- fontWeight: 500,
35
- gap: theme.space["2"],
36
- },
37
- // _hover={{
38
- // backgroundColor: theme.colors.primary["50"],
39
- // }}
40
- _focus: {
41
- backgroundColor: "transparent", // remove focus highlight
42
- // boxShadow: "none",
43
- },
44
- // _active={{
45
- // backgroundColor: "transparent", // remove click highlight
46
- // }}
47
- _hover: {
48
- backgroundColor: theme.colors.primary["50"],
49
- } },
50
- menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
51
- react_1.default.createElement(react_2.Box, null, menu.title))); }),
52
- react_1.default.createElement(react_2.MenuDivider, null),
53
- react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
54
- fontWeight: 500,
55
- gap: theme.space["2"],
56
- }, _hover: {
57
- backgroundColor: theme.colors.primary["50"],
58
- } },
59
- react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
60
- react_1.default.createElement(react_2.Box, null, logoutText)))))))));
27
+ react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0 },
28
+ react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
29
+ react_1.default.createElement(react_2.Center, { py: 4 },
30
+ react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
31
+ react_1.default.createElement(react_2.Center, null,
32
+ react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
33
+ react_1.default.createElement(react_2.MenuDivider, null),
34
+ react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, navMenu === null || navMenu === void 0 ? void 0 : navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
35
+ fontWeight: 500,
36
+ gap: theme.space["2"],
37
+ }, _focus: {
38
+ backgroundColor: "transparent",
39
+ }, _hover: {
40
+ backgroundColor: theme.colors.primary["50"],
41
+ } },
42
+ menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
43
+ react_1.default.createElement(react_2.Box, null, menu.title))); })),
44
+ react_1.default.createElement(react_2.MenuDivider, null),
45
+ react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
46
+ fontWeight: 500,
47
+ gap: theme.space["2"],
48
+ }, _hover: {
49
+ backgroundColor: theme.colors.primary["50"],
50
+ } },
51
+ react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
52
+ react_1.default.createElement(react_2.Box, null, logoutText))))))))));
61
53
  }
62
54
  exports.default = NavBar;
package/dist/Components/ProductDetails/ProductImageSlider.js CHANGED
@@ -37,6 +37,7 @@ function ProductImageSlider(_a) {
37
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
38
38
  var isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
39
39
  var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
40
+ var hasMultiple = totalThumbs > 1;
40
41
  var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
41
42
  var canScrollUp = thumbStartIndex > 0;
42
43
  var canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
@@ -83,19 +84,20 @@ function ProductImageSlider(_a) {
83
84
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
84
85
  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
86
  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" },
87
+ hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
88
+ 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 () {
89
+ var _a;
90
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
91
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
92
+ updateActiveIndex(newIndex);
93
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
94
+ 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 () {
95
+ var _a;
96
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
97
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
98
+ updateActiveIndex(newIndex);
99
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })))),
100
+ hasMultiple && (react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center", justify: "center" },
99
101
  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
102
  visibleThumbnails.map(function (src, index) {
101
103
  var actualIndex = thumbStartIndex + index;
@@ -104,8 +106,8 @@ function ProductImageSlider(_a) {
104
106
  : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
105
107
  react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover" })));
106
108
  }),
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,
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" },
109
+ 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,
110
+ hasMultiple && (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" },
109
111
  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 }),
110
112
  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) {
111
113
  var actualIndex = thumbStartIndex + index;
@@ -114,7 +116,7 @@ function ProductImageSlider(_a) {
114
116
  : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
115
117
  react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) })));
116
118
  })),
117
- react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })),
119
+ react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 }))),
118
120
  react_2.default.createElement(react_1.Box, { w: "".concat(imageSize, "px"), h: "".concat(imageSize, "px"), position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
119
121
  var bounds = e.currentTarget.getBoundingClientRect();
120
122
  var x = ((e.clientX - bounds.left) / bounds.width) * 100;
@@ -127,17 +129,18 @@ function ProductImageSlider(_a) {
127
129
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
128
130
  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)),
129
131
  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" }),
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 () {
131
- var _a;
132
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
133
- var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
134
- updateActiveIndex(newIndex);
135
- }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
136
- 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 () {
137
- var _a;
138
- var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
139
- var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
140
- updateActiveIndex(newIndex);
141
- }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))));
132
+ hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
133
+ 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 () {
134
+ var _a;
135
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
136
+ var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
137
+ updateActiveIndex(newIndex);
138
+ }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
139
+ 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 () {
140
+ var _a;
141
+ var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
142
+ var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
143
+ updateActiveIndex(newIndex);
144
+ }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))))));
142
145
  }
143
146
  exports.default = ProductImageSlider;
package/dist/Components/Slider/Slider.js CHANGED
@@ -74,6 +74,6 @@ var Slider = function (_a) {
74
74
  isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
75
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
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" })); }))));
77
+ slides.length > 1 && (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" })); })))));
78
78
  };
79
79
  exports.default = Slider;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.96",
3
+ "version": "2.2.98",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",