pixelize-design-library 2.2.97 → 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 (3) hide show
  1. package/dist/Components/NavigationBar/NavigationBar.js +26 -34
  2. package/dist/Components/ProductDetails/ProductImageSlider.js +31 -28
  3. package/package.json +1 -1
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.97",
3
+ "version": "2.2.98",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",