@fluid-app/rep-widgets 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/{ListWidget-6MD3LNJR.cjs → ListWidget-7HUFB5JZ.cjs} +5 -5
  2. package/dist/{ListWidget-6MD3LNJR.cjs.map → ListWidget-7HUFB5JZ.cjs.map} +1 -1
  3. package/dist/ListWidget-I7I7FAW5.js +6 -0
  4. package/dist/{ListWidget-XI75HDHT.js.map → ListWidget-I7I7FAW5.js.map} +1 -1
  5. package/dist/{chunk-64HIILUF.cjs → chunk-BZQW7APC.cjs} +438 -425
  6. package/dist/chunk-BZQW7APC.cjs.map +1 -0
  7. package/dist/{chunk-TQYXX5IT.js → chunk-Y657NN2D.js} +438 -425
  8. package/dist/chunk-Y657NN2D.js.map +1 -0
  9. package/dist/widgets/index.cjs +4 -4
  10. package/dist/widgets/index.js +2 -2
  11. package/package.json +3 -3
  12. package/dist/ListWidget-XI75HDHT.js +0 -6
  13. package/dist/chunk-64HIILUF.cjs.map +0 -1
  14. package/dist/chunk-TQYXX5IT.js.map +0 -1
package/dist/{chunk-64HIILUF.cjs → chunk-BZQW7APC.cjs} RENAMED
@@ -3,31 +3,66 @@
3
3
  var chunkLOXFR6XC_cjs = require('./chunk-LOXFR6XC.cjs');
4
4
  var chunkQV3OAAEQ_cjs = require('./chunk-QV3OAAEQ.cjs');
5
5
  var chunkCM7D7WGL_cjs = require('./chunk-CM7D7WGL.cjs');
6
- var react = require('react');
7
6
  var jsxRuntime = require('react/jsx-runtime');
7
+ var react = require('react');
8
8
 
9
- var DEFAULT_ITEMS = [];
10
- var SCROLL_ITEM_WIDTH = 300;
11
- var getImageUrl = (item) => {
12
- return item.imageUrl || item.image;
13
- };
14
- function getFeaturedAssetUrl(value) {
15
- if (!value) return void 0;
16
- if (typeof value === "string") {
17
- const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(value);
18
- return { url: value, isVideo };
19
- }
20
- if (typeof value === "object") {
21
- const videoUrl = value.videoUrl || value.video_url || value.url;
22
- if (videoUrl && /\.(mp4|webm|ogg|mov)$/i.test(videoUrl)) {
23
- return { url: videoUrl, isVideo: true };
24
- }
25
- const imageUrl = value.imageUrl || value.image_url || value.url;
26
- if (imageUrl) {
27
- return { url: imageUrl, isVideo: false };
9
+ function FeaturedSection({
10
+ borderRadius,
11
+ titleSize,
12
+ featuredTitle,
13
+ featuredSubtitle,
14
+ featuredButtonText,
15
+ featuredButtonUrl,
16
+ featuredSubtitleColor,
17
+ featuredSubtitleSize,
18
+ asset
19
+ }) {
20
+ return /* @__PURE__ */ jsxRuntime.jsxs(
21
+ "div",
22
+ {
23
+ className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
24
+ children: [
25
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
26
+ chunkLOXFR6XC_cjs.MediaRenderer,
27
+ {
28
+ src: asset.url,
29
+ mediaType: asset.isVideo ? "video" : "image",
30
+ alt: featuredTitle || "Featured",
31
+ objectFit: "cover",
32
+ autoplay: asset.isVideo,
33
+ loop: asset.isVideo,
34
+ muted: asset.isVideo,
35
+ controls: false
36
+ }
37
+ ) }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" }),
39
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-start justify-end p-8", children: [
40
+ featuredTitle && /* @__PURE__ */ jsxRuntime.jsx(
41
+ "h3",
42
+ {
43
+ className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
44
+ children: featuredTitle
45
+ }
46
+ ),
47
+ featuredSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
48
+ "p",
49
+ {
50
+ className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
51
+ children: featuredSubtitle
52
+ }
53
+ ),
54
+ featuredButtonText && /* @__PURE__ */ jsxRuntime.jsx(
55
+ "a",
56
+ {
57
+ href: featuredButtonUrl || "#",
58
+ className: `bg-white px-6 py-2 font-medium text-foreground transition-opacity hover:opacity-90 rounded-${borderRadius}`,
59
+ children: featuredButtonText
60
+ }
61
+ )
62
+ ] })
63
+ ]
28
64
  }
29
- }
30
- return void 0;
65
+ );
31
66
  }
32
67
  function getTextContent(value) {
33
68
  if (!value) return "";
@@ -60,6 +95,101 @@ function getStringValue(value) {
60
95
  }
61
96
  return "";
62
97
  }
98
+ function ListItemCardContent({
99
+ item,
100
+ padding,
101
+ itemTitleColor,
102
+ itemTitleSize,
103
+ descriptionColor,
104
+ descriptionSize,
105
+ priceColor,
106
+ priceSize,
107
+ originalPriceColor,
108
+ metaTextColor,
109
+ metaTextSize,
110
+ showMetaText
111
+ }) {
112
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-${padding}`, children: [
113
+ item.title && /* @__PURE__ */ jsxRuntime.jsx(
114
+ "h3",
115
+ {
116
+ className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
117
+ children: getTextContent(item.title)
118
+ }
119
+ ),
120
+ item.description && /* @__PURE__ */ jsxRuntime.jsx(
121
+ "p",
122
+ {
123
+ className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
124
+ children: getTextContent(item.description)
125
+ }
126
+ ),
127
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
128
+ item.price && /* @__PURE__ */ jsxRuntime.jsx(
129
+ "span",
130
+ {
131
+ className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
132
+ children: getStringValue(item.price)
133
+ }
134
+ ),
135
+ item.originalPrice && /* @__PURE__ */ jsxRuntime.jsx(
136
+ "span",
137
+ {
138
+ className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
139
+ children: getStringValue(item.originalPrice)
140
+ }
141
+ )
142
+ ] }),
143
+ showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxRuntime.jsxs(
144
+ "div",
145
+ {
146
+ className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
147
+ children: [
148
+ item.qv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
149
+ "QV: ",
150
+ getStringValue(item.qv)
151
+ ] }),
152
+ item.cv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
153
+ "CV: ",
154
+ getStringValue(item.cv)
155
+ ] })
156
+ ]
157
+ }
158
+ )
159
+ ] });
160
+ }
161
+ function DiscountBadge({ discount }) {
162
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(discount) });
163
+ }
164
+ function FavoriteButton({ className }) {
165
+ return /* @__PURE__ */ jsxRuntime.jsx(
166
+ "button",
167
+ {
168
+ className: className || "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background",
169
+ children: /* @__PURE__ */ jsxRuntime.jsx(
170
+ "svg",
171
+ {
172
+ className: "h-5 w-5 text-muted-foreground",
173
+ fill: "none",
174
+ stroke: "currentColor",
175
+ viewBox: "0 0 24 24",
176
+ children: /* @__PURE__ */ jsxRuntime.jsx(
177
+ "path",
178
+ {
179
+ strokeLinecap: "round",
180
+ strokeLinejoin: "round",
181
+ strokeWidth: 2,
182
+ d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
183
+ }
184
+ )
185
+ }
186
+ )
187
+ }
188
+ );
189
+ }
190
+ var getImageUrl = (item) => {
191
+ return item.imageUrl || item.image;
192
+ };
63
193
  var getAspectRatioClass = (ratio) => {
64
194
  const ratios = {
65
195
  square: "aspect-square",
@@ -79,65 +209,243 @@ var getResponsiveGridClass = (columns) => {
79
209
  };
80
210
  return responsiveClasses[columns] || "grid-cols-2 @lg:grid-cols-3";
81
211
  };
82
- function FeaturedSection({
83
- featuredAsset,
84
- featuredTitle,
85
- featuredSubtitle,
86
- featuredButtonText,
87
- featuredButtonUrl,
88
- featuredSubtitleColor,
89
- featuredSubtitleSize,
90
- titleSize,
91
- borderRadius
212
+ function UnorderedList({
213
+ items,
214
+ columns,
215
+ gap,
216
+ borderRadius,
217
+ imageAspectRatio,
218
+ showBadge,
219
+ showFavorite,
220
+ padding,
221
+ itemTitleColor,
222
+ itemTitleSize,
223
+ descriptionColor,
224
+ descriptionSize,
225
+ priceColor,
226
+ priceSize,
227
+ originalPriceColor,
228
+ metaTextColor,
229
+ metaTextSize,
230
+ showMetaText
92
231
  }) {
93
- const asset = getFeaturedAssetUrl(featuredAsset);
94
- if (!asset) return null;
95
- return /* @__PURE__ */ jsxRuntime.jsxs(
96
- "div",
97
- {
98
- className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
99
- children: [
100
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
101
- chunkLOXFR6XC_cjs.MediaRenderer,
102
- {
103
- src: asset.url,
104
- mediaType: asset.isVideo ? "video" : "image",
105
- alt: featuredTitle || "Featured",
106
- objectFit: "cover",
107
- autoplay: asset.isVideo,
108
- loop: asset.isVideo,
109
- muted: asset.isVideo,
110
- controls: false
111
- }
112
- ) }),
113
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" }),
114
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-start justify-end p-8", children: [
115
- featuredTitle && /* @__PURE__ */ jsxRuntime.jsx(
116
- "h3",
117
- {
118
- className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
119
- children: featuredTitle
120
- }
121
- ),
122
- featuredSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
123
- "p",
232
+ const gridClass = getResponsiveGridClass(columns);
233
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${gridClass} gap-${chunkCM7D7WGL_cjs.gapValues[gap]}`, children: items.map((item) => {
234
+ const imageUrl = getImageUrl(item);
235
+ const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
236
+ return /* @__PURE__ */ jsxRuntime.jsxs(
237
+ "div",
238
+ {
239
+ className: `relative rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
240
+ children: [
241
+ showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx(DiscountBadge, { discount: item.discount }),
242
+ showFavorite && /* @__PURE__ */ jsxRuntime.jsx(FavoriteButton, {}),
243
+ imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${aspectRatioClass} overflow-hidden`, children: /* @__PURE__ */ jsxRuntime.jsx(
244
+ "img",
124
245
  {
125
- className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
126
- children: featuredSubtitle
246
+ src: imageUrl,
247
+ alt: item.title || "Product",
248
+ className: "h-full w-full object-cover"
127
249
  }
128
- ),
129
- featuredButtonText && /* @__PURE__ */ jsxRuntime.jsx(
130
- "a",
250
+ ) }),
251
+ /* @__PURE__ */ jsxRuntime.jsx(
252
+ ListItemCardContent,
131
253
  {
132
- href: featuredButtonUrl || "#",
133
- className: `bg-white px-6 py-2 font-medium text-foreground transition-opacity hover:opacity-90 rounded-${borderRadius}`,
134
- children: featuredButtonText
254
+ item,
255
+ padding,
256
+ itemTitleColor,
257
+ itemTitleSize,
258
+ descriptionColor,
259
+ descriptionSize,
260
+ priceColor,
261
+ priceSize,
262
+ originalPriceColor,
263
+ metaTextColor,
264
+ metaTextSize,
265
+ showMetaText
135
266
  }
136
267
  )
137
- ] })
138
- ]
268
+ ]
269
+ },
270
+ item.id
271
+ );
272
+ }) });
273
+ }
274
+ var SCROLL_ITEM_WIDTH = 300;
275
+ var getImageUrl2 = (item) => {
276
+ return item.imageUrl || item.image;
277
+ };
278
+ var getAspectRatioClass2 = (ratio) => {
279
+ const ratios = {
280
+ square: "aspect-square",
281
+ landscape: "aspect-video",
282
+ portrait: "aspect-[3/4]"
283
+ };
284
+ return ratios[ratio];
285
+ };
286
+ var largeNumberSizes = {
287
+ xs: "8rem",
288
+ sm: "10rem",
289
+ md: "12rem",
290
+ lg: "14rem",
291
+ xl: "16rem",
292
+ "2xl": "20rem"
293
+ };
294
+ function OrderedList({
295
+ items,
296
+ scrollAxis,
297
+ gap,
298
+ borderRadius,
299
+ imageAspectRatio,
300
+ showBadge,
301
+ showFavorite,
302
+ padding,
303
+ itemTitleColor,
304
+ itemTitleSize,
305
+ descriptionColor,
306
+ descriptionSize,
307
+ priceColor,
308
+ priceSize,
309
+ originalPriceColor,
310
+ metaTextColor,
311
+ metaTextSize,
312
+ numberColor,
313
+ numberSize,
314
+ showMetaText
315
+ }) {
316
+ const scrollContainerRef = react.useRef(null);
317
+ const scrollByAmount = (direction) => {
318
+ const container = scrollContainerRef.current;
319
+ if (!container) return;
320
+ const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
321
+ const scrollAmount = SCROLL_ITEM_WIDTH + computedGap;
322
+ container.scrollTo({
323
+ left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
324
+ behavior: "smooth"
325
+ });
326
+ };
327
+ const contentProps = {
328
+ padding,
329
+ itemTitleColor,
330
+ itemTitleSize,
331
+ descriptionColor,
332
+ descriptionSize,
333
+ priceColor,
334
+ priceSize,
335
+ originalPriceColor,
336
+ metaTextColor,
337
+ metaTextSize,
338
+ showMetaText
339
+ };
340
+ if (scrollAxis === "horizontal") {
341
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
342
+ /* @__PURE__ */ jsxRuntime.jsx(
343
+ "div",
344
+ {
345
+ ref: scrollContainerRef,
346
+ className: `flex gap-${chunkCM7D7WGL_cjs.gapValues[gap]} scrollbar-hide overflow-x-auto scroll-smooth`,
347
+ children: items.map((item, index) => {
348
+ const imageUrl = getImageUrl2(item);
349
+ const aspectRatioClass = getAspectRatioClass2(imageAspectRatio);
350
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-[300px] flex-shrink-0", children: [
351
+ /* @__PURE__ */ jsxRuntime.jsx(
352
+ "div",
353
+ {
354
+ className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
355
+ style: { fontSize: largeNumberSizes[numberSize] },
356
+ children: index + 1
357
+ }
358
+ ),
359
+ /* @__PURE__ */ jsxRuntime.jsxs(
360
+ "div",
361
+ {
362
+ className: `relative z-10 ml-20 rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
363
+ children: [
364
+ showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx(DiscountBadge, { discount: item.discount }),
365
+ showFavorite && /* @__PURE__ */ jsxRuntime.jsx(FavoriteButton, {}),
366
+ imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
367
+ "div",
368
+ {
369
+ className: `w-full ${aspectRatioClass} overflow-hidden`,
370
+ children: /* @__PURE__ */ jsxRuntime.jsx(
371
+ "img",
372
+ {
373
+ src: imageUrl,
374
+ alt: item.title || "Product",
375
+ className: "h-full w-full object-cover"
376
+ }
377
+ )
378
+ }
379
+ ),
380
+ /* @__PURE__ */ jsxRuntime.jsx(ListItemCardContent, { item, ...contentProps })
381
+ ]
382
+ }
383
+ )
384
+ ] }, item.id);
385
+ })
386
+ }
387
+ ),
388
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-1/2 z-20 flex w-full -translate-y-1/2 items-center justify-between px-8", children: /* @__PURE__ */ jsxRuntime.jsx(
389
+ chunkQV3OAAEQ_cjs.ScrollArrows,
390
+ {
391
+ onPrevious: () => scrollByAmount("prev"),
392
+ onNext: () => scrollByAmount("next")
393
+ }
394
+ ) })
395
+ ] });
396
+ }
397
+ if (scrollAxis === "vertical") {
398
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-col gap-${chunkCM7D7WGL_cjs.gapValues[gap]}`, children: items.map((item, index) => {
399
+ const imageUrl = getImageUrl2(item);
400
+ return /* @__PURE__ */ jsxRuntime.jsxs(
401
+ "div",
402
+ {
403
+ className: `relative flex gap-${chunkCM7D7WGL_cjs.gapValues[gap]} rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
404
+ children: [
405
+ /* @__PURE__ */ jsxRuntime.jsx(
406
+ "div",
407
+ {
408
+ className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
409
+ children: index + 1
410
+ }
411
+ ),
412
+ imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
413
+ "img",
414
+ {
415
+ src: imageUrl,
416
+ alt: item.title || "Product",
417
+ className: "h-full w-full object-cover"
418
+ }
419
+ ) }),
420
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ListItemCardContent, { item, ...contentProps }) }),
421
+ showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
422
+ showFavorite && /* @__PURE__ */ jsxRuntime.jsx(FavoriteButton, { className: "absolute top-2 right-12 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background" })
423
+ ]
424
+ },
425
+ item.id
426
+ );
427
+ }) });
428
+ }
429
+ return null;
430
+ }
431
+ var DEFAULT_ITEMS = [];
432
+ function getFeaturedAssetUrl(value) {
433
+ if (!value) return void 0;
434
+ if (typeof value === "string") {
435
+ const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(value);
436
+ return { url: value, isVideo };
437
+ }
438
+ if (typeof value === "object") {
439
+ const videoUrl = value.videoUrl || value.video_url || value.url;
440
+ if (videoUrl && /\.(mp4|webm|ogg|mov)$/i.test(videoUrl)) {
441
+ return { url: videoUrl, isVideo: true };
139
442
  }
140
- );
443
+ const imageUrl = value.imageUrl || value.image_url || value.url;
444
+ if (imageUrl) {
445
+ return { url: imageUrl, isVideo: false };
446
+ }
447
+ }
448
+ return void 0;
141
449
  }
142
450
  function ListWidget({
143
451
  listType = "unordered",
@@ -179,352 +487,25 @@ function ListWidget({
179
487
  className,
180
488
  ...props
181
489
  }) {
182
- const scrollContainerRef = react.useRef(null);
183
490
  const displayItems = maxItems ? items.slice(0, maxItems) : items;
184
491
  const hasItems = displayItems.length > 0;
185
- const largeNumberSizes = {
186
- xs: "8rem",
187
- sm: "10rem",
188
- md: "12rem",
189
- lg: "14rem",
190
- xl: "16rem",
191
- "2xl": "20rem"
192
- };
193
- const scrollByAmount = (direction) => {
194
- const container = scrollContainerRef.current;
195
- if (!container) return;
196
- const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
197
- const scrollAmount = SCROLL_ITEM_WIDTH + computedGap;
198
- container.scrollTo({
199
- left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
200
- behavior: "smooth"
201
- });
202
- };
203
- const renderUnorderedList = () => {
204
- const gridClass = getResponsiveGridClass(columns);
205
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${gridClass} gap-${chunkCM7D7WGL_cjs.gapValues[gap]}`, children: displayItems.map((item) => {
206
- const imageUrl = getImageUrl(item);
207
- const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
208
- return /* @__PURE__ */ jsxRuntime.jsxs(
209
- "div",
210
- {
211
- className: `relative rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
212
- children: [
213
- showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
214
- showFavorite && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
215
- "svg",
216
- {
217
- className: "h-5 w-5 text-muted-foreground",
218
- fill: "none",
219
- stroke: "currentColor",
220
- viewBox: "0 0 24 24",
221
- children: /* @__PURE__ */ jsxRuntime.jsx(
222
- "path",
223
- {
224
- strokeLinecap: "round",
225
- strokeLinejoin: "round",
226
- strokeWidth: 2,
227
- d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
228
- }
229
- )
230
- }
231
- ) }),
232
- imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${aspectRatioClass} overflow-hidden`, children: /* @__PURE__ */ jsxRuntime.jsx(
233
- "img",
234
- {
235
- src: imageUrl,
236
- alt: item.title || "Product",
237
- className: "h-full w-full object-cover"
238
- }
239
- ) }),
240
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-${padding}`, children: [
241
- item.title && /* @__PURE__ */ jsxRuntime.jsx(
242
- "h3",
243
- {
244
- className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
245
- children: getTextContent(item.title)
246
- }
247
- ),
248
- item.description && /* @__PURE__ */ jsxRuntime.jsx(
249
- "p",
250
- {
251
- className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
252
- children: getTextContent(item.description)
253
- }
254
- ),
255
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
256
- item.price && /* @__PURE__ */ jsxRuntime.jsx(
257
- "span",
258
- {
259
- className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
260
- children: getStringValue(item.price)
261
- }
262
- ),
263
- item.originalPrice && /* @__PURE__ */ jsxRuntime.jsx(
264
- "span",
265
- {
266
- className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
267
- children: getStringValue(item.originalPrice)
268
- }
269
- )
270
- ] }),
271
- showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxRuntime.jsxs(
272
- "div",
273
- {
274
- className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
275
- children: [
276
- item.qv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
277
- "QV: ",
278
- getStringValue(item.qv)
279
- ] }),
280
- item.cv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
281
- "CV: ",
282
- getStringValue(item.cv)
283
- ] })
284
- ]
285
- }
286
- )
287
- ] })
288
- ]
289
- },
290
- item.id
291
- );
292
- }) });
293
- };
294
- const renderOrderedList = () => {
295
- const isHorizontal = scrollAxis === "horizontal";
296
- const isVertical = scrollAxis === "vertical";
297
- if (isHorizontal) {
298
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
299
- /* @__PURE__ */ jsxRuntime.jsx(
300
- "div",
301
- {
302
- ref: scrollContainerRef,
303
- className: `flex gap-${chunkCM7D7WGL_cjs.gapValues[gap]} scrollbar-hide overflow-x-auto scroll-smooth`,
304
- children: displayItems.map((item, index) => {
305
- const imageUrl = getImageUrl(item);
306
- const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
307
- return /* @__PURE__ */ jsxRuntime.jsxs(
308
- "div",
309
- {
310
- className: `relative w-[300px] flex-shrink-0`,
311
- children: [
312
- /* @__PURE__ */ jsxRuntime.jsx(
313
- "div",
314
- {
315
- className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
316
- style: { fontSize: largeNumberSizes[numberSize] },
317
- children: index + 1
318
- }
319
- ),
320
- /* @__PURE__ */ jsxRuntime.jsxs(
321
- "div",
322
- {
323
- className: `relative z-10 ml-20 rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
324
- children: [
325
- showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
326
- showFavorite && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
327
- "svg",
328
- {
329
- className: "h-5 w-5 text-muted-foreground",
330
- fill: "none",
331
- stroke: "currentColor",
332
- viewBox: "0 0 24 24",
333
- children: /* @__PURE__ */ jsxRuntime.jsx(
334
- "path",
335
- {
336
- strokeLinecap: "round",
337
- strokeLinejoin: "round",
338
- strokeWidth: 2,
339
- d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
340
- }
341
- )
342
- }
343
- ) }),
344
- imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
345
- "div",
346
- {
347
- className: `w-full ${aspectRatioClass} overflow-hidden`,
348
- children: /* @__PURE__ */ jsxRuntime.jsx(
349
- "img",
350
- {
351
- src: imageUrl,
352
- alt: item.title || "Product",
353
- className: "h-full w-full object-cover"
354
- }
355
- )
356
- }
357
- ),
358
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-${padding}`, children: [
359
- item.title && /* @__PURE__ */ jsxRuntime.jsx(
360
- "h3",
361
- {
362
- className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
363
- children: getTextContent(item.title)
364
- }
365
- ),
366
- item.description && /* @__PURE__ */ jsxRuntime.jsx(
367
- "p",
368
- {
369
- className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
370
- children: getTextContent(item.description)
371
- }
372
- ),
373
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
374
- item.price && /* @__PURE__ */ jsxRuntime.jsx(
375
- "span",
376
- {
377
- className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
378
- children: getStringValue(item.price)
379
- }
380
- ),
381
- item.originalPrice && /* @__PURE__ */ jsxRuntime.jsx(
382
- "span",
383
- {
384
- className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
385
- children: getStringValue(item.originalPrice)
386
- }
387
- )
388
- ] }),
389
- showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxRuntime.jsxs(
390
- "div",
391
- {
392
- className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
393
- children: [
394
- item.qv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
395
- "QV: ",
396
- getStringValue(item.qv)
397
- ] }),
398
- item.cv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
399
- "CV: ",
400
- getStringValue(item.cv)
401
- ] })
402
- ]
403
- }
404
- )
405
- ] })
406
- ]
407
- }
408
- )
409
- ]
410
- },
411
- item.id
412
- );
413
- })
414
- }
415
- ),
416
- /* @__PURE__ */ jsxRuntime.jsx(
417
- "div",
418
- {
419
- className: `absolute inset-x-0 top-1/2 z-20 flex w-full -translate-y-1/2 items-center justify-between px-8`,
420
- children: /* @__PURE__ */ jsxRuntime.jsx(
421
- chunkQV3OAAEQ_cjs.ScrollArrows,
422
- {
423
- onPrevious: () => scrollByAmount("prev"),
424
- onNext: () => scrollByAmount("next")
425
- }
426
- )
427
- }
428
- )
429
- ] });
430
- }
431
- if (isVertical) {
432
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-col gap-${chunkCM7D7WGL_cjs.gapValues[gap]}`, children: displayItems.map((item, index) => {
433
- const imageUrl = getImageUrl(item);
434
- return /* @__PURE__ */ jsxRuntime.jsxs(
435
- "div",
436
- {
437
- className: `relative flex gap-${chunkCM7D7WGL_cjs.gapValues[gap]} rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
438
- children: [
439
- /* @__PURE__ */ jsxRuntime.jsx(
440
- "div",
441
- {
442
- className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
443
- children: index + 1
444
- }
445
- ),
446
- imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
447
- "img",
448
- {
449
- src: imageUrl,
450
- alt: item.title || "Product",
451
- className: "h-full w-full object-cover"
452
- }
453
- ) }),
454
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
455
- item.title && /* @__PURE__ */ jsxRuntime.jsx(
456
- "h3",
457
- {
458
- className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
459
- children: getTextContent(item.title)
460
- }
461
- ),
462
- item.description && /* @__PURE__ */ jsxRuntime.jsx(
463
- "p",
464
- {
465
- className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
466
- children: getTextContent(item.description)
467
- }
468
- ),
469
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
470
- item.price && /* @__PURE__ */ jsxRuntime.jsx(
471
- "span",
472
- {
473
- className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
474
- children: getStringValue(item.price)
475
- }
476
- ),
477
- item.originalPrice && /* @__PURE__ */ jsxRuntime.jsx(
478
- "span",
479
- {
480
- className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
481
- children: getStringValue(item.originalPrice)
482
- }
483
- )
484
- ] }),
485
- showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxRuntime.jsxs(
486
- "div",
487
- {
488
- className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
489
- children: [
490
- item.qv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
491
- "QV: ",
492
- getStringValue(item.qv)
493
- ] }),
494
- item.cv && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
495
- "CV: ",
496
- getStringValue(item.cv)
497
- ] })
498
- ]
499
- }
500
- )
501
- ] }),
502
- showBadge && item.discount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
503
- showFavorite && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "absolute top-2 right-12 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
504
- "svg",
505
- {
506
- className: "h-5 w-5 text-muted-foreground",
507
- fill: "none",
508
- stroke: "currentColor",
509
- viewBox: "0 0 24 24",
510
- children: /* @__PURE__ */ jsxRuntime.jsx(
511
- "path",
512
- {
513
- strokeLinecap: "round",
514
- strokeLinejoin: "round",
515
- strokeWidth: 2,
516
- d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
517
- }
518
- )
519
- }
520
- ) })
521
- ]
522
- },
523
- item.id
524
- );
525
- }) });
526
- }
527
- return null;
492
+ const itemStyleProps = {
493
+ padding,
494
+ itemTitleColor,
495
+ itemTitleSize,
496
+ descriptionColor,
497
+ descriptionSize,
498
+ priceColor,
499
+ priceSize,
500
+ originalPriceColor,
501
+ metaTextColor,
502
+ metaTextSize,
503
+ showMetaText,
504
+ showBadge,
505
+ showFavorite,
506
+ borderRadius,
507
+ imageAspectRatio,
508
+ gap
528
509
  };
529
510
  const hasFeaturedAsset = getFeaturedAssetUrl(featuredAsset);
530
511
  const shouldShowFeaturedSection = showFeaturedSection && hasFeaturedAsset;
@@ -548,19 +529,51 @@ function ListWidget({
548
529
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full @lg:w-[45%]", children: /* @__PURE__ */ jsxRuntime.jsx(
549
530
  FeaturedSection,
550
531
  {
551
- featuredAsset,
532
+ borderRadius,
533
+ titleSize,
552
534
  featuredTitle,
553
535
  featuredSubtitle,
554
536
  featuredButtonText,
555
537
  featuredButtonUrl,
556
538
  featuredSubtitleColor,
557
539
  featuredSubtitleSize,
558
- titleSize,
559
- borderRadius
540
+ asset: hasFeaturedAsset
560
541
  }
561
542
  ) }),
562
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full @lg:w-[55%]", children: listType === "unordered" ? renderUnorderedList() : renderOrderedList() })
563
- ] }) : listType === "unordered" ? renderUnorderedList() : renderOrderedList()
543
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full @lg:w-[55%]", children: listType === "unordered" ? /* @__PURE__ */ jsxRuntime.jsx(
544
+ UnorderedList,
545
+ {
546
+ items: displayItems,
547
+ columns,
548
+ ...itemStyleProps
549
+ }
550
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
551
+ OrderedList,
552
+ {
553
+ items: displayItems,
554
+ scrollAxis,
555
+ numberColor,
556
+ numberSize,
557
+ ...itemStyleProps
558
+ }
559
+ ) })
560
+ ] }) : listType === "unordered" ? /* @__PURE__ */ jsxRuntime.jsx(
561
+ UnorderedList,
562
+ {
563
+ items: displayItems,
564
+ columns,
565
+ ...itemStyleProps
566
+ }
567
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
568
+ OrderedList,
569
+ {
570
+ items: displayItems,
571
+ scrollAxis,
572
+ numberColor,
573
+ numberSize,
574
+ ...itemStyleProps
575
+ }
576
+ )
564
577
  ]
565
578
  }
566
579
  );
@@ -973,5 +986,5 @@ var listWidgetPropertySchema = {
973
986
 
974
987
  exports.ListWidget = ListWidget;
975
988
  exports.listWidgetPropertySchema = listWidgetPropertySchema;
976
- //# sourceMappingURL=chunk-64HIILUF.cjs.map
977
- //# sourceMappingURL=chunk-64HIILUF.cjs.map
989
+ //# sourceMappingURL=chunk-BZQW7APC.cjs.map
990
+ //# sourceMappingURL=chunk-BZQW7APC.cjs.map