pixelize-design-library 2.2.103 → 2.2.104

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 (11) hide show
  1. package/dist/Components/Common/FormattedDescription.d.ts +6 -0
  2. package/dist/Components/Common/FormattedDescription.js +66 -0
  3. package/dist/Components/FilterSidebar/FilterSidebar.js +84 -50
  4. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  5. package/dist/Components/ProductCard/ProductCard.js +6 -6
  6. package/dist/Components/ProductCard/ProductCardProps.d.ts +1 -0
  7. package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
  8. package/dist/Components/ProductDetails/ProductDetails.js +7 -5
  9. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +8 -0
  10. package/dist/Components/ProductDetails/ProductImageSlider.js +133 -12
  11. package/package.json +1 -1
package/dist/Components/Common/FormattedDescription.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ type Props = {
3
+ content?: string;
4
+ };
5
+ declare const FormattedDescription: ({ content }: Props) => React.JSX.Element | null;
6
+ export default FormattedDescription;
package/dist/Components/Common/FormattedDescription.js ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var react_2 = require("@chakra-ui/react");
8
+ var InlineText = function (_a) {
9
+ var text = _a.text;
10
+ var nodes = [];
11
+ var i = 0;
12
+ while (i < text.length) {
13
+ if (text.startsWith("**", i)) {
14
+ var end = text.indexOf("**", i + 2);
15
+ if (end !== -1) {
16
+ nodes.push(react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "bold", key: "b-".concat(i) }, text.slice(i + 2, end)));
17
+ i = end + 2;
18
+ continue;
19
+ }
20
+ }
21
+ if (text.startsWith("*", i)) {
22
+ var end = text.indexOf("*", i + 1);
23
+ if (end !== -1) {
24
+ nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "i-".concat(i) }, text.slice(i + 1, end)));
25
+ i = end + 1;
26
+ continue;
27
+ }
28
+ }
29
+ var nextBold = text.indexOf("**", i);
30
+ var nextIt = text.indexOf("*", i);
31
+ var next = nextBold === -1
32
+ ? nextIt
33
+ : nextIt === -1
34
+ ? nextBold
35
+ : Math.min(nextBold, nextIt);
36
+ if (next === -1) {
37
+ nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "t-".concat(i) }, text.slice(i)));
38
+ break;
39
+ }
40
+ else {
41
+ nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "t-".concat(i) }, text.slice(i, next)));
42
+ i = next;
43
+ }
44
+ }
45
+ return react_1.default.createElement(react_1.default.Fragment, null, nodes);
46
+ };
47
+ var FormattedDescription = function (_a) {
48
+ var content = _a.content;
49
+ if (!content)
50
+ return null;
51
+ var lines = content.split(/\r?\n/);
52
+ return (react_1.default.createElement(react_2.Box, null, lines.map(function (line, idx) {
53
+ var m = line.match(/^(#{1,3})\s+(.*)$/);
54
+ if (m) {
55
+ var level = m[1].length;
56
+ var text = m[2];
57
+ var size = level === 1 ? "lg" : level === 2 ? "md" : "sm";
58
+ var weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
59
+ return (react_1.default.createElement(react_2.Text, { fontSize: size, fontWeight: weight, key: "h-".concat(idx), mt: idx === 0 ? 0 : 2, textAlign: "left" },
60
+ react_1.default.createElement(InlineText, { text: text })));
61
+ }
62
+ return (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.700", key: "p-".concat(idx), mt: idx === 0 ? 0 : 2, textAlign: "justify" },
63
+ react_1.default.createElement(InlineText, { text: line })));
64
+ })));
65
+ };
66
+ exports.default = FormattedDescription;
package/dist/Components/FilterSidebar/FilterSidebar.js CHANGED
@@ -46,10 +46,11 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
46
46
  var FilterSidebar = function (_a) {
47
47
  var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f, _g = _a.sliderMode, sliderMode = _g === void 0 ? "native" : _g;
48
48
  var theme = (0, useCustomTheme_1.useCustomTheme)();
49
+ var _h = (0, react_1.useState)({}), openPrice = _h[0], setOpenPrice = _h[1];
49
50
  // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
50
51
  var isControlled = selected !== undefined;
51
52
  // Local state for uncontrolled mode
52
- var _h = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _h[0], setLocalSelected = _h[1];
53
+ var _j = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _j[0], setLocalSelected = _j[1];
53
54
  // Derived state: use prop if controlled, otherwise local state
54
55
  var internalSelected = (selected !== undefined ? selected : localSelected);
55
56
  // Wrapper for state updates to handle both modes
@@ -61,12 +62,12 @@ var FilterSidebar = function (_a) {
61
62
  setLocalSelected(next);
62
63
  }
63
64
  };
64
- var _j = (0, react_1.useState)(function () {
65
+ var _k = (0, react_1.useState)(function () {
65
66
  var initial = {};
66
67
  sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
67
68
  return initial;
68
- }), expanded = _j[0], setExpanded = _j[1];
69
- var _k = (0, react_1.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
69
+ }), expanded = _k[0], setExpanded = _k[1];
70
+ var _l = (0, react_1.useState)({}), searchTerms = _l[0], setSearchTerms = _l[1];
70
71
  var activeCount = (0, react_1.useMemo)(function () {
71
72
  return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
72
73
  }, [internalSelected]);
@@ -115,7 +116,7 @@ var FilterSidebar = function (_a) {
115
116
  e.stopPropagation();
116
117
  clearFilter(section.id);
117
118
  }, borderRadius: "full", px: 2 }, "Clear")) : null)),
118
- content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, py: 1 }, section.range ? ((function () {
119
+ content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, py: 0 }, section.range ? ((function () {
119
120
  var _a, _b, _c, _d, _e, _f, _g, _h;
120
121
  var range = section.range;
121
122
  var step = range.step || 1;
@@ -129,11 +130,18 @@ var FilterSidebar = function (_a) {
129
130
  var secondaryColor = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.red) === null || _h === void 0 ? void 0 : _h[600];
130
131
  return (react_1.default.createElement(react_2.Box, { w: "full", px: 3 },
131
132
  react_1.default.createElement("style", null, "\n .custom-range-slider::-webkit-slider-thumb {\n pointer-events: auto;\n width: 24px;\n height: 24px;\n -webkit-appearance: none;\n cursor: pointer;\n }\n .custom-range-slider::-moz-range-thumb {\n pointer-events: auto;\n width: 24px;\n height: 24px;\n border: none;\n cursor: pointer;\n }\n "),
132
- react_1.default.createElement(react_2.Box, { w: "full", position: "relative", h: "30px", display: "flex", alignItems: "center" },
133
+ react_1.default.createElement(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center" },
133
134
  react_1.default.createElement(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }),
134
135
  react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), width: "".concat(maxPercent - minPercent, "%"), height: "6px", style: { background: "linear-gradient(to right, ".concat(primaryColor, ", ").concat(secondaryColor, ")") }, borderRadius: "full", boxShadow: "0 0 8px rgba(66, 153, 225, 0.4)" }),
135
- react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: "20px", h: "20px", borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
136
- react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: "20px", h: "20px", borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
136
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
137
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
138
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.white, border: "1px solid ".concat(theme.colors.gray[200]), borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3 },
139
+ currentMin,
140
+ range.unit ? " ".concat(range.unit) : ""),
141
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.white, border: "1px solid ".concat(theme.colors.gray[200]), borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3 },
142
+ currentMax,
143
+ range.unit ? " ".concat(range.unit) : ""),
144
+ [0, 25, 50, 75, 100].map(function (p) { return (react_1.default.createElement(react_2.Box, { key: "tick-".concat(p), position: "absolute", left: "".concat(p, "%"), bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] })); }),
137
145
  react_1.default.createElement("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: function (e) {
138
146
  var min = Math.min(Number(e.target.value), currentMax - (step || 1));
139
147
  var nextVal = [min, currentMax];
@@ -172,38 +180,59 @@ var FilterSidebar = function (_a) {
172
180
  zIndex: 3,
173
181
  margin: 0,
174
182
  } })),
175
- react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", pt: 3 },
176
- react_1.default.createElement(react_2.Box, { borderWidth: "1px", borderRadius: "md", p: 2, minW: "100px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
177
- react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Min"),
178
- react_1.default.createElement(react_2.Select, { "aria-label": "Minimum price", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: currentMin, onChange: function (e) {
179
- var min = Number(e.target.value);
180
- var max = currentMax;
181
- var nextVal = [Math.min(min, max), Math.max(min, max)];
182
- setInternalSelected(function (prev) {
183
- var _a;
184
- var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
185
- onChange === null || onChange === void 0 ? void 0 : onChange(next);
186
- return next;
187
- });
188
- } }, values.map(function (v) { return (react_1.default.createElement("option", { key: "min-".concat(v), value: v },
189
- v,
190
- range.unit ? " ".concat(range.unit) : "")); }))),
191
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.400" }, "-"),
192
- react_1.default.createElement(react_2.Box, { borderWidth: "1px", borderRadius: "md", p: 2, minW: "100px", textAlign: "center", bg: theme.colors.gray[50], borderColor: theme.colors.gray[200] },
193
- react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600", mb: "-2px" }, "Max"),
194
- react_1.default.createElement(react_2.Select, { "aria-label": "Maximum price", variant: "outline", size: "sm", textAlign: "center", borderColor: theme.colors.gray[300], bg: theme.colors.white, borderRadius: "full", _hover: { borderColor: theme.colors.gray[400] }, _focus: { borderColor: theme.colors.red[500], boxShadow: "none" }, value: currentMax, onChange: function (e) {
195
- var max = Number(e.target.value);
196
- var min = currentMin;
197
- var nextVal = [Math.min(min, max), Math.max(min, max)];
198
- setInternalSelected(function (prev) {
199
- var _a;
200
- var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
201
- onChange === null || onChange === void 0 ? void 0 : onChange(next);
202
- return next;
203
- });
204
- } }, values.map(function (v) { return (react_1.default.createElement("option", { key: "max-".concat(v), value: v },
205
- v,
206
- range.unit ? " ".concat(range.unit) : "")); }))))));
183
+ react_1.default.createElement(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full" },
184
+ react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
185
+ react_1.default.createElement(react_2.PopoverTrigger, null,
186
+ react_1.default.createElement(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: function () { return setOpenPrice({ id: section.id, target: "min" }); }, gap: 2, overflow: "hidden" },
187
+ react_1.default.createElement(react_2.Box, { ml: "auto" },
188
+ react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
189
+ currentMin,
190
+ range.unit ? " ".concat(range.unit) : "")))),
191
+ react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0 },
192
+ react_1.default.createElement(react_2.PopoverBody, { p: 0 },
193
+ react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "min-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
194
+ var min = v;
195
+ var max = currentMax;
196
+ var nextVal = [Math.min(min, max), Math.max(min, max)];
197
+ setInternalSelected(function (prev) {
198
+ var _a;
199
+ var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
200
+ onChange === null || onChange === void 0 ? void 0 : onChange(next);
201
+ return next;
202
+ });
203
+ setOpenPrice({});
204
+ } },
205
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
206
+ v,
207
+ range.unit ? " ".concat(range.unit) : ""),
208
+ currentMin === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
209
+ react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))),
210
+ react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
211
+ react_1.default.createElement(react_2.PopoverTrigger, null,
212
+ react_1.default.createElement(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: function () { return setOpenPrice({ id: section.id, target: "max" }); }, gap: 2, overflow: "hidden" },
213
+ react_1.default.createElement(react_2.Box, { ml: "auto" },
214
+ react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
215
+ currentMax,
216
+ range.unit ? " ".concat(range.unit) : "")))),
217
+ react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0 },
218
+ react_1.default.createElement(react_2.PopoverBody, { p: 0 },
219
+ react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "max-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
220
+ var max = v;
221
+ var min = currentMin;
222
+ var nextVal = [Math.min(min, max), Math.max(min, max)];
223
+ setInternalSelected(function (prev) {
224
+ var _a;
225
+ var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
226
+ onChange === null || onChange === void 0 ? void 0 : onChange(next);
227
+ return next;
228
+ });
229
+ setOpenPrice({});
230
+ } },
231
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
232
+ v,
233
+ range.unit ? " ".concat(range.unit) : ""),
234
+ currentMax === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
235
+ react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))))));
207
236
  })()) : (react_1.default.createElement(react_1.default.Fragment, null,
208
237
  section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
209
238
  setInternalSelected(function (prev) {
@@ -218,7 +247,7 @@ var FilterSidebar = function (_a) {
218
247
  react_1.default.createElement(lucide_react_1.Star, { size: 16, color: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "none" }))); })),
219
248
  react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")),
220
249
  String(internalSelected[section.id] || "") === String(r) && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "red", borderRadius: "full", px: 2 }, "Selected")))); }))) : null,
221
- section.searchable && (react_1.default.createElement(react_2.Input, { size: "sm", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
250
+ section.searchable && (react_1.default.createElement(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
222
251
  var v = e.target.value;
223
252
  setSearchTerms(function (prev) {
224
253
  var _a;
@@ -238,15 +267,20 @@ var FilterSidebar = function (_a) {
238
267
  return next;
239
268
  });
240
269
  } },
241
- react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "full" }, ((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
242
- .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Radio, { key: opt.id, value: opt.id, size: "md", colorScheme: "red" },
243
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, opt.label))); })))) : (((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
244
- .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Flex, { key: opt.id, align: "center", justify: "space-between", w: "full", _hover: { bg: theme.colors.gray[50], borderRadius: "md" }, p: 1 },
245
- react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
270
+ react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, ((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
271
+ .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Radio, { key: opt.id, value: opt.id, size: "sm", colorScheme: "red" },
272
+ react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[700] }, opt.label))); })))) : (((expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
273
+ .filter(function (opt) { return !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()); })).map(function (opt) { return (react_1.default.createElement(react_2.Flex, { key: opt.id, align: "center", justify: "space-between", w: "full", _hover: { bg: theme.colors.gray[50], borderRadius: "md" }, p: 0 },
274
+ react_1.default.createElement(react_2.Flex, { align: "center", gap: 1 },
246
275
  react_1.default.createElement(Checkbox_1.default, { isChecked: Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id), onChange: function (e) {
247
276
  toggleOption(section.id, opt.id, e.target.checked);
248
- }, size: "sm", color: "red" }),
249
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700], cursor: "pointer", onClick: function () {
277
+ }, size: "sm", iconSize: "0.5rem", sx: {
278
+ '.chakra-checkbox__control': {
279
+ width: '12px',
280
+ height: '12px',
281
+ }
282
+ }, color: "red" }),
283
+ react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[700], cursor: "pointer", onClick: function () {
250
284
  var isChecked = Array.isArray(internalSelected[section.id]) && (internalSelected[section.id] || []).includes(opt.id);
251
285
  toggleOption(section.id, opt.id, !isChecked);
252
286
  } }, opt.label)),
@@ -268,12 +302,12 @@ var FilterSidebar = function (_a) {
268
302
  buttonStyle: variant === "minimal"
269
303
  ? {
270
304
  justifyContent: "space-between",
271
- padding: "8px 0",
305
+ padding: 0,
272
306
  background: "transparent",
273
307
  }
274
308
  : {
275
309
  justifyContent: "space-between",
276
- padding: headerPadding,
310
+ padding: 0,
277
311
  background: theme.colors.gray[50],
278
312
  borderRadius: 8,
279
313
  border: "1px solid ".concat(theme.colors.gray[200]),
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, notifyMe, isQtyEditable, }: 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, displayRating, }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -38,11 +38,11 @@ var ProductReview_1 = __importDefault(require("./ProductReview"));
38
38
  var ProductCard = function (_a) {
39
39
  var _b, _c, _d, _e, _f, _g, _h, _j;
40
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];
41
+ notifyMe = _a.notifyMe, _l = _a.isQtyEditable, isQtyEditable = _l === void 0 ? false : _l, _m = _a.displayRating, displayRating = _m === void 0 ? true : _m;
42
+ var _o = (0, react_1.useState)(false), hover = _o[0], setHover = _o[1];
43
43
  var theme = (0, useCustomTheme_1.useCustomTheme)();
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];
44
+ var _p = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _p[0], setSelectedOption = _p[1];
45
+ var _q = (0, react_1.useState)(1), qty = _q[0], setQty = _q[1];
46
46
  var handleOptionSelect = function (option) {
47
47
  setSelectedOption(option);
48
48
  onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
@@ -65,7 +65,7 @@ var ProductCard = function (_a) {
65
65
  md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
66
66
  lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
67
67
  };
68
- var _q = sizeStyles[size], cardWidth = _q.cardWidth, imgHeight = _q.imgHeight, padding = _q.padding;
68
+ var _r = sizeStyles[size], cardWidth = _r.cardWidth, imgHeight = _r.imgHeight, padding = _r.padding;
69
69
  var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
70
70
  var safeSize = allowedSizes.includes(size) ? size : "md";
71
71
  return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
@@ -91,7 +91,7 @@ var ProductCard = function (_a) {
91
91
  react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
92
92
  react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
93
93
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
94
- options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)
94
+ options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
95
95
  ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews })
96
96
  : undefined })),
97
97
  react_1.default.createElement(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto" },
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -24,6 +24,7 @@ export type ProductCardProps = {
24
24
  size?: SizeType;
25
25
  avalabilitys?: boolean;
26
26
  isQtyEditable?: boolean;
27
+ displayRating?: boolean;
27
28
  };
28
29
  export type options = {
29
30
  label: string;
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, rating, reviews, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
3
+ declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => React.JSX.Element;
4
4
  export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -13,13 +13,14 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
13
13
  var Button_1 = __importDefault(require("../Button/Button"));
14
14
  var lucide_react_1 = require("lucide-react");
15
15
  var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
16
+ var FormattedDescription_1 = __importDefault(require("../Common/FormattedDescription"));
16
17
  var ProductDetails = function (_a) {
17
18
  var _b, _c, _d, _e, _f;
18
- 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, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g;
19
+ 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, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g, _h = _a.displayRating, displayRating = _h === void 0 ? true : _h;
19
20
  var theme = (0, useCustomTheme_1.useCustomTheme)();
20
21
  var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
21
- var _h = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _h[0], setSelectedOption = _h[1];
22
- var _j = react_1.default.useState(1), qty = _j[0], setQty = _j[1];
22
+ var _j = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _j[0], setSelectedOption = _j[1];
23
+ var _k = react_1.default.useState(1), qty = _k[0], setQty = _k[1];
23
24
  react_1.default.useEffect(function () {
24
25
  setQty(1);
25
26
  }, [selectedOption]);
@@ -40,8 +41,9 @@ var ProductDetails = function (_a) {
40
41
  react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch })),
41
42
  react_1.default.createElement(react_2.Box, { flex: "1" },
42
43
  label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
43
- react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
44
- ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
44
+ shortdesc && react_1.default.createElement(react_2.Box, { my: 3 },
45
+ react_1.default.createElement(FormattedDescription_1.default, { content: shortdesc })),
46
+ ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
45
47
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
46
48
  price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
47
49
  setSelectedOption(option);
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts CHANGED
@@ -18,9 +18,17 @@ export type ProductDetailsProps = {
18
18
  notifyMe?: boolean;
19
19
  OnGoToCart?: () => void;
20
20
  isQtyEditable?: boolean;
21
+ displayRating?: boolean;
21
22
  };
22
23
  export type images = {
23
24
  imageUrl: string;
24
25
  imageId: number;
25
26
  order: number;
27
+ isImage?: boolean;
28
+ };
29
+ export type videos = {
30
+ videoUrl: string;
31
+ videoId: number;
32
+ order?: number;
33
+ thumb?: string;
26
34
  };
package/dist/Components/ProductDetails/ProductImageSlider.js CHANGED
@@ -28,14 +28,75 @@ 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, _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];
31
+ var images = _a.images, _b = _a.thumbHeight, thumbHeight = _b === void 0 ? 60 : _b, _c = _a.imageSize, imageSize = _c === void 0 ? 480 : _c, _d = _a.thumbnailsToShow, thumbnailsToShow = _d === void 0 ? 6 : _d, batch = _a.batch;
32
+ var _e = (0, react_2.useState)(0), activeIndex = _e[0], setActiveIndex = _e[1];
33
+ var _f = (0, react_2.useState)(0), thumbStartIndex = _f[0], setThumbStartIndex = _f[1];
34
+ var _g = (0, react_2.useState)("center center"), transformOrigin = _g[0], setTransformOrigin = _g[1];
35
+ var _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
36
+ var _j = (0, react_2.useState)(false), isPlaying = _j[0], setIsPlaying = _j[1];
37
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
38
38
  var isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
39
+ var getYouTubeId = function (url) {
40
+ var patterns = [
41
+ /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
42
+ /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
43
+ /youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i,
44
+ /youtube\.com\/shorts\/([A-Za-z0-9_-]{6,})/i,
45
+ /youtube\.com\/live\/([A-Za-z0-9_-]{6,})/i,
46
+ ];
47
+ for (var _i = 0, patterns_1 = patterns; _i < patterns_1.length; _i++) {
48
+ var re = patterns_1[_i];
49
+ var m = url.match(re);
50
+ if (m === null || m === void 0 ? void 0 : m[1])
51
+ return m[1];
52
+ }
53
+ return undefined;
54
+ };
55
+ var getVimeoId = function (url) {
56
+ var patterns = [
57
+ /vimeo\.com\/(\d+)/i,
58
+ /player\.vimeo\.com\/video\/(\d+)/i,
59
+ ];
60
+ for (var _i = 0, patterns_2 = patterns; _i < patterns_2.length; _i++) {
61
+ var re = patterns_2[_i];
62
+ var m = url.match(re);
63
+ if (m === null || m === void 0 ? void 0 : m[1])
64
+ return m[1];
65
+ }
66
+ return undefined;
67
+ };
68
+ var getDailymotionId = function (url) {
69
+ var patterns = [
70
+ /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
71
+ /dai\.ly\/([A-Za-z0-9]+)/i,
72
+ ];
73
+ for (var _i = 0, patterns_3 = patterns; _i < patterns_3.length; _i++) {
74
+ var re = patterns_3[_i];
75
+ var m = url.match(re);
76
+ if (m === null || m === void 0 ? void 0 : m[1])
77
+ return m[1];
78
+ }
79
+ return undefined;
80
+ };
81
+ var isVideoUrl = function (url) {
82
+ return /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
83
+ !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
84
+ };
85
+ var getThumbForItem = function (url) {
86
+ var yt = getYouTubeId(url);
87
+ if (yt)
88
+ return "https://img.youtube.com/vi/".concat(yt, "/hqdefault.jpg");
89
+ var vm = getVimeoId(url);
90
+ if (vm)
91
+ return "https://vumbnail.com/".concat(vm, ".jpg");
92
+ var dm = getDailymotionId(url);
93
+ if (dm)
94
+ return "https://www.dailymotion.com/thumbnail/video/".concat(dm);
95
+ return undefined;
96
+ };
97
+ react_2.default.useEffect(function () {
98
+ setIsPlaying(false);
99
+ }, [activeIndex]);
39
100
  var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
40
101
  var hasMultiple = totalThumbs > 1;
41
102
  var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
@@ -83,7 +144,29 @@ function ProductImageSlider(_a) {
83
144
  } },
84
145
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
85
146
  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)),
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" }),
147
+ (function () {
148
+ var item = images === null || images === void 0 ? void 0 : images[activeIndex];
149
+ var url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
150
+ var isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
151
+ var yt = getYouTubeId(url);
152
+ var vimeo = getVimeoId(url);
153
+ var dm = getDailymotionId(url);
154
+ var thumb = getThumbForItem(url);
155
+ if (isVideo) {
156
+ if (!isPlaying) {
157
+ return (react_2.default.createElement(react_1.Box, { position: "relative", w: "100%", h: "".concat(imageSize, "px") },
158
+ react_2.default.createElement(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }),
159
+ react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center" },
160
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: function () { return setIsPlaying(true); } },
161
+ react_2.default.createElement(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] })))));
162
+ }
163
+ return yt ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
164
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.youtube.com/embed/".concat(yt, "?rel=0&autoplay=1"), allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }))) : vimeo ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
165
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://player.vimeo.com/video/".concat(vimeo, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : dm ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
166
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.dailymotion.com/embed/video/".concat(dm, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : (react_2.default.createElement(react_1.Box, { as: "video", src: url, w: "100%", h: "".concat(imageSize, "px"), controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
167
+ }
168
+ return (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
169
+ })(),
87
170
  hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
88
171
  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
172
  var _a;
@@ -101,20 +184,36 @@ function ProductImageSlider(_a) {
101
184
  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 :
102
185
  visibleThumbnails.map(function (src, index) {
103
186
  var actualIndex = thumbStartIndex + index;
187
+ var url = src.imageUrl;
188
+ var isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
189
+ var thumb = getThumbForItem(url);
104
190
  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
105
191
  ? "0.125rem solid ".concat(theme.colors.gray[500])
106
- : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
107
- react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover" })));
192
+ : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative" }, isVideo ? (thumb ? (react_2.default.createElement(react_2.default.Fragment, null,
193
+ react_2.default.createElement(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }),
194
+ react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none" },
195
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
196
+ react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100] },
197
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
198
+ react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" }))));
108
199
  }),
109
200
  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
201
  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" },
111
202
  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 }),
112
203
  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) {
113
204
  var actualIndex = thumbStartIndex + index;
205
+ var url = src.imageUrl;
206
+ var isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
207
+ var thumb = getThumbForItem(url);
114
208
  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
115
209
  ? "0.125rem solid ".concat(theme.colors.gray[500])
116
- : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s" },
117
- react_2.default.createElement(react_1.Image, { src: src.imageUrl, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) })));
210
+ : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative" }, isVideo ? (thumb ? (react_2.default.createElement(react_2.default.Fragment, null,
211
+ react_2.default.createElement(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) }),
212
+ react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none" },
213
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
214
+ react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100] },
215
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
216
+ react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) }))));
118
217
  })),
119
218
  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 }))),
120
219
  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) {
@@ -128,7 +227,29 @@ function ProductImageSlider(_a) {
128
227
  } },
129
228
  react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
130
229
  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)),
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" }),
230
+ (function () {
231
+ var item = images === null || images === void 0 ? void 0 : images[activeIndex];
232
+ var url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
233
+ var isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
234
+ var yt = getYouTubeId(url);
235
+ var vimeo = getVimeoId(url);
236
+ var dm = getDailymotionId(url);
237
+ var thumb = getThumbForItem(url);
238
+ if (isVideo) {
239
+ if (!isPlaying) {
240
+ return (react_2.default.createElement(react_1.Box, { position: "relative", w: "100%", h: "".concat(imageSize, "px") },
241
+ react_2.default.createElement(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }),
242
+ react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center" },
243
+ react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: function () { return setIsPlaying(true); } },
244
+ react_2.default.createElement(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] })))));
245
+ }
246
+ return yt ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
247
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.youtube.com/embed/".concat(yt, "?rel=0&autoplay=1"), allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }))) : vimeo ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
248
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://player.vimeo.com/video/".concat(vimeo, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : dm ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
249
+ react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.dailymotion.com/embed/video/".concat(dm, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : (react_2.default.createElement(react_1.Box, { as: "video", src: url, w: "100%", h: "".concat(imageSize, "px"), controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
250
+ }
251
+ return (react_2.default.createElement(react_1.Image, { src: url, 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" }));
252
+ })(),
132
253
  hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
133
254
  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
255
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.103",
3
+ "version": "2.2.104",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",