@fluid-app/rep-widgets 0.1.15 → 0.1.17

package/dist/ListWidget-CxaLm0D5.cjs

@@ -0,0 +1,919 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_scroll_arrows = require("./scroll-arrows-BZIlsE_x.cjs");
+const require_MediaRenderer = require("./MediaRenderer-CcJvyOJ1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let dompurify = require("dompurify");
+dompurify = require_chunk.__toESM(dompurify);
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+//#region src/widgets/list-widget/FeaturedSection.tsx
+function FeaturedSection({ borderRadius, titleSize, featuredTitle, featuredSubtitle, featuredButtonText, featuredButtonUrl, featuredSubtitleColor, featuredSubtitleSize, asset }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0 h-full w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, {
+					src: asset.url,
+					mediaType: asset.isVideo ? "video" : "image",
+					alt: featuredTitle || "Featured",
+					objectFit: "cover",
+					autoplay: asset.isVideo,
+					loop: asset.isVideo,
+					muted: asset.isVideo,
+					controls: false
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "absolute inset-0 flex flex-col items-start justify-end p-8",
+				children: [
+					featuredTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
+						children: featuredTitle
+					}),
+					featuredSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
+						children: featuredSubtitle
+					}),
+					featuredButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: featuredButtonUrl || "#",
+						className: `text-foreground bg-white px-6 py-2 font-medium transition-opacity hover:opacity-90 rounded-${borderRadius}`,
+						children: featuredButtonText
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/widgets/list-widget/ListItemCard.tsx
+function getStringValue(value) {
+	if (!value) return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return String(value);
+	if (typeof value === "object" && value !== null) {
+		if ("body" in value) {
+			const body = value.body;
+			if (typeof body === "string") return body;
+		}
+		if ("text" in value) {
+			const text = value.text;
+			if (typeof text === "string") return text;
+		}
+		if ("value" in value) {
+			const val = value.value;
+			if (typeof val === "string") return val;
+			if (typeof val === "number") return String(val);
+		}
+	}
+	return "";
+}
+/**
+* Strips parenthetical text like "(USD)" from price strings.
+* Matches the shop page's stripParentheticalText pattern.
+*/
+function stripParentheticalText(text) {
+	return text.replace(/\s*\([^)]*\)/g, "").trim();
+}
+/**
+* Formats a price for display. Follows the shop page pattern:
+* prices arrive pre-formatted from the API via display_price
+* (e.g. "$19.99", "€15.00 (EUR)") so we just extract the string
+* and strip parenthetical suffixes.
+*/
+function formatPrice(value) {
+	const str = getStringValue(value);
+	if (!str) return "";
+	return stripParentheticalText(str);
+}
+function ListItemCardContent({ item, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, showMetaText }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `p-${padding}`,
+		children: [
+			item.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
+				children: getStringValue(item.title)
+			}),
+			item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2 line-clamp-2 overflow-hidden`,
+				dangerouslySetInnerHTML: { __html: dompurify.default.sanitize(item.description ?? "", {
+					ALLOWED_TAGS: [
+						"br",
+						"strong",
+						"em",
+						"b",
+						"i",
+						"ul",
+						"ol",
+						"li",
+						"p"
+					],
+					ALLOWED_ATTR: []
+				}) }
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [(item.display_price || item.price) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+					children: formatPrice(item.display_price || item.price)
+				}), item.originalPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+					children: formatPrice(item.originalPrice)
+				})]
+			}),
+			showMetaText && (item.qv || item.cv) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
+				children: [item.qv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["QV: ", getStringValue(item.qv)] }), item.cv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["CV: ", getStringValue(item.cv)] })]
+			})
+		]
+	});
+}
+function DiscountBadge({ discount }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "bg-destructive text-destructive-foreground absolute top-2 right-2 z-10 rounded-md px-2 py-1 text-xs font-bold",
+		children: getStringValue(discount)
+	});
+}
+function FavoriteButton({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: className || "bg-background/80 hover:bg-background absolute top-2 left-2 z-10 rounded-full p-2 backdrop-blur-sm transition-colors",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: "text-muted-foreground h-5 w-5",
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				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"
+			})
+		})
+	});
+}
+//#endregion
+//#region src/widgets/list-widget/UnorderedList.tsx
+const getImageUrl$1 = (item) => {
+	return item.imageUrl || item.image;
+};
+const getAspectRatioClass$1 = (ratio) => {
+	return {
+		square: "aspect-square",
+		landscape: "aspect-video",
+		portrait: "aspect-[3/4]"
+	}[ratio];
+};
+const getResponsiveGridClass = (columns) => {
+	return {
+		1: "grid-cols-2 @lg:grid-cols-1",
+		2: "grid-cols-2 @lg:grid-cols-2",
+		3: "grid-cols-2 @lg:grid-cols-3",
+		4: "grid-cols-2 @lg:grid-cols-4",
+		5: "grid-cols-2 @lg:grid-cols-5",
+		6: "grid-cols-2 @lg:grid-cols-6"
+	}[columns] || "grid-cols-2 @lg:grid-cols-3";
+};
+function UnorderedList({ items, columns, gap, borderRadius, imageAspectRatio, showBadge, showFavorite, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, showMetaText }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `grid ${getResponsiveGridClass(columns)} gap-${_fluid_app_rep_core_registries.gapValues[gap]}`,
+		children: items.map((item) => {
+			const imageUrl = getImageUrl$1(item);
+			const aspectRatioClass = getAspectRatioClass$1(imageAspectRatio);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `relative rounded-${borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md`,
+				children: [
+					showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }),
+					showFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FavoriteButton, {}),
+					imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `w-full ${aspectRatioClass} overflow-hidden`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: imageUrl,
+							alt: item.title || "Product",
+							className: "h-full w-full object-cover"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
+						item,
+						padding,
+						itemTitleColor,
+						itemTitleSize,
+						descriptionColor,
+						descriptionSize,
+						priceColor,
+						priceSize,
+						originalPriceColor,
+						metaTextColor,
+						metaTextSize,
+						showMetaText
+					})
+				]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+//#region src/widgets/list-widget/OrderedList.tsx
+const SCROLL_ITEM_WIDTH = 300;
+const getImageUrl = (item) => {
+	return item.imageUrl || item.image;
+};
+const getAspectRatioClass = (ratio) => {
+	return {
+		square: "aspect-square",
+		landscape: "aspect-video",
+		portrait: "aspect-[3/4]"
+	}[ratio];
+};
+const largeNumberSizes = {
+	xs: "8rem",
+	sm: "10rem",
+	md: "12rem",
+	lg: "14rem",
+	xl: "16rem",
+	"2xl": "20rem"
+};
+function OrderedList({ items, scrollAxis, gap, borderRadius, imageAspectRatio, showBadge, showFavorite, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, numberColor, numberSize, showMetaText }) {
+	const scrollContainerRef = (0, react.useRef)(null);
+	const scrollByAmount = (direction) => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const scrollAmount = SCROLL_ITEM_WIDTH + (parseFloat(getComputedStyle(container).gap) || 0);
+		container.scrollTo({
+			left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
+			behavior: "smooth"
+		});
+	};
+	const contentProps = {
+		padding,
+		itemTitleColor,
+		itemTitleSize,
+		descriptionColor,
+		descriptionSize,
+		priceColor,
+		priceSize,
+		originalPriceColor,
+		metaTextColor,
+		metaTextSize,
+		showMetaText
+	};
+	if (scrollAxis === "horizontal") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: scrollContainerRef,
+			className: `flex gap-${_fluid_app_rep_core_registries.gapValues[gap]} scrollbar-hide overflow-x-auto overflow-y-hidden scroll-smooth`,
+			children: items.map((item, index) => {
+				const imageUrl = getImageUrl(item);
+				const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative w-[300px] flex-shrink-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
+						style: { fontSize: largeNumberSizes[numberSize] },
+						children: index + 1
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `relative z-10 ml-20 rounded-${borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md`,
+						children: [
+							showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }),
+							showFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FavoriteButton, {}),
+							imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `w-full ${aspectRatioClass} overflow-hidden`,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									src: imageUrl,
+									alt: item.title || "Product",
+									className: "h-full w-full object-cover"
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
+								item,
+								...contentProps
+							})
+						]
+					})]
+				}, item.id);
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_scroll_arrows.ScrollArrows, {
+				onPrevious: () => scrollByAmount("prev"),
+				onNext: () => scrollByAmount("next")
+			})
+		})]
+	});
+	if (scrollAxis === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `flex flex-col gap-${_fluid_app_rep_core_registries.gapValues[gap]}`,
+		children: items.map((item, index) => {
+			const imageUrl = getImageUrl(item);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `relative flex gap-${_fluid_app_rep_core_registries.gapValues[gap]} rounded-${borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
+						children: index + 1
+					}),
+					imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: imageUrl,
+							alt: item.title || "Product",
+							className: "h-full w-full object-cover"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
+							item,
+							...contentProps
+						})
+					}),
+					showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "bg-destructive text-destructive-foreground absolute top-2 right-2 rounded-md px-2 py-1 text-xs font-bold",
+						children: getStringValue(item.discount)
+					}),
+					showFavorite && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FavoriteButton, { className: "bg-background/80 hover:bg-background absolute top-2 right-12 rounded-full p-2 backdrop-blur-sm transition-colors" })
+				]
+			}, item.id);
+		})
+	});
+	return null;
+}
+//#endregion
+//#region src/widgets/ListWidget.tsx
+var ListWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	ListWidget: () => ListWidget,
+	listWidgetPropertySchema: () => listWidgetPropertySchema
+});
+const DEFAULT_ITEMS = [];
+function getFeaturedAssetUrl(value) {
+	if (!value) return void 0;
+	if (typeof value === "string") return {
+		url: value,
+		isVideo: /\.(mp4|webm|ogg|mov)$/i.test(value)
+	};
+	if (typeof value === "object") {
+		const videoUrl = value.videoUrl || value.video_url || value.url;
+		if (videoUrl && /\.(mp4|webm|ogg|mov)$/i.test(videoUrl)) return {
+			url: videoUrl,
+			isVideo: true
+		};
+		const imageUrl = value.imageUrl || value.image_url || value.url;
+		if (imageUrl) return {
+			url: imageUrl,
+			isVideo: false
+		};
+	}
+}
+function ListWidget({ listType = "unordered", scrollAxis = "horizontal", titleEnabled = true, title, items = DEFAULT_ITEMS, titleColor = "foreground", titleSize = "lg", itemTitleColor = "foreground", itemTitleSize = "sm", descriptionColor = "foreground", descriptionSize = "sm", priceColor = "foreground", priceSize = "md", originalPriceColor = "muted", metaTextColor = "muted", metaTextSize = "xs", numberColor = "primary", numberSize = "2xl", borderRadius = "md", padding = 4, gap = "md", columns = 3, imageAspectRatio = "square", background = {
+	type: "solid",
+	color: "background"
+}, showBadge = true, showFavorite = true, showMetaText = true, maxItems = 12, showFeaturedSection = false, featuredAsset, featuredTitle, featuredSubtitle, featuredButtonText, featuredButtonUrl, featuredSubtitleColor = "background", featuredSubtitleSize = "md", className, ...props }) {
+	const displayItems = maxItems ? items.slice(0, maxItems) : items;
+	const hasItems = displayItems.length > 0;
+	const itemStyleProps = {
+		padding,
+		itemTitleColor,
+		itemTitleSize,
+		descriptionColor,
+		descriptionSize,
+		priceColor,
+		priceSize,
+		originalPriceColor,
+		metaTextColor,
+		metaTextSize,
+		showMetaText,
+		showBadge,
+		showFavorite,
+		borderRadius,
+		imageAspectRatio,
+		gap
+	};
+	const hasFeaturedAsset = getFeaturedAssetUrl(featuredAsset);
+	const shouldShowFeaturedSection = showFeaturedSection && hasFeaturedAsset;
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `@container bg-${backgroundColor} ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+			className: `text-${titleColor} text-${titleSize === "md" ? "base" : titleSize} mb-6 font-bold`,
+			children: title
+		}), !hasItems ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border bg-muted flex items-center justify-center rounded-md border-2 border-dashed py-12 text-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted",
+				children: "No items to display"
+			})
+		}) : shouldShowFeaturedSection ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4 @lg:flex-row @lg:gap-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full @lg:w-[45%]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeaturedSection, {
+					borderRadius,
+					titleSize,
+					featuredTitle,
+					featuredSubtitle,
+					featuredButtonText,
+					featuredButtonUrl,
+					featuredSubtitleColor,
+					featuredSubtitleSize,
+					asset: hasFeaturedAsset
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full @lg:w-[55%]",
+				children: listType === "unordered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnorderedList, {
+					items: displayItems,
+					columns,
+					...itemStyleProps
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderedList, {
+					items: displayItems,
+					scrollAxis,
+					numberColor,
+					numberSize,
+					...itemStyleProps
+				})
+			})]
+		}) : listType === "unordered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnorderedList, {
+			items: displayItems,
+			columns,
+			...itemStyleProps
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderedList, {
+			items: displayItems,
+			scrollAxis,
+			numberColor,
+			numberSize,
+			...itemStyleProps
+		})]
+	});
+}
+const listWidgetPropertySchema = {
+	widgetType: "ListWidget",
+	displayName: "List",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}, {
+		id: "data",
+		label: "Data"
+	}],
+	dataSourceTargetProps: ["items"],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the list",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "title",
+			label: "Title",
+			type: "text",
+			description: "Header text for the list",
+			defaultValue: "List",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "titleSize",
+			label: "Title Font Size",
+			description: "Size of the list title",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the list title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_rep_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding inside the container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_rep_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Rounded corners for the container and images",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_rep_core_registries.getGapField)({
+			key: "gap",
+			label: "Gap",
+			description: "Spacing between items",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			type: "background",
+			defaultValue: "background",
+			key: "background",
+			label: "Background",
+			description: "Background color or image for the widget",
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "listType",
+			label: "List Type",
+			type: "select",
+			description: "Type of list layout",
+			defaultValue: "unordered",
+			options: [{
+				label: "Unordered (Grid)",
+				value: "unordered"
+			}, {
+				label: "Ordered (Numbered)",
+				value: "ordered"
+			}],
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "maxItems",
+			label: "Max Items",
+			type: "number",
+			description: "Maximum number of items to display",
+			min: 1,
+			max: 100,
+			step: 1,
+			defaultValue: 12,
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "imageAspectRatio",
+			label: "Image Aspect Ratio",
+			type: "buttonGroup",
+			description: "Aspect ratio for item images",
+			defaultValue: "square",
+			options: [
+				{
+					label: "Square",
+					value: "square"
+				},
+				{
+					label: "Landscape",
+					value: "landscape"
+				},
+				{
+					label: "Portrait",
+					value: "portrait"
+				}
+			],
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "showBadge",
+			label: "Show Discount Badge",
+			type: "boolean",
+			description: "Display discount badge on images",
+			defaultValue: true,
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "showFavorite",
+			label: "Show Favorite Icon",
+			type: "boolean",
+			description: "Display favorite/heart icon on images",
+			defaultValue: true,
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "showMetaText",
+			label: "Show QV/CV Text",
+			type: "boolean",
+			description: "Display QV and CV values",
+			defaultValue: true,
+			tab: "styling",
+			group: "List Configuration"
+		},
+		{
+			key: "columns",
+			label: "Grid Columns",
+			type: "number",
+			description: "Number of columns in the grid (unordered list only)",
+			min: 1,
+			max: 6,
+			step: 1,
+			defaultValue: 3,
+			tab: "styling",
+			group: "Unordered List Configuration",
+			requiresKeyValue: {
+				key: "listType",
+				value: "unordered"
+			}
+		},
+		{
+			key: "scrollAxis",
+			label: "Scroll Direction",
+			type: "select",
+			description: "Direction for ordered list scrolling",
+			defaultValue: "horizontal",
+			options: [{
+				label: "Horizontal",
+				value: "horizontal"
+			}, {
+				label: "Vertical",
+				value: "vertical"
+			}],
+			tab: "styling",
+			group: "Ordered List Configuration",
+			requiresKeyValue: {
+				key: "listType",
+				value: "ordered"
+			}
+		},
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "numberColor",
+			label: "Number Color",
+			description: "Color for ordered list numbers",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Ordered List Configuration",
+			requiresKeyValue: {
+				key: "listType",
+				value: "ordered"
+			}
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "numberSize",
+			label: "Number Font Size",
+			description: "Size of ordered list numbers",
+			defaultValue: "2xl",
+			tab: "styling",
+			group: "Ordered List Configuration",
+			requiresKeyValue: {
+				key: "listType",
+				value: "ordered"
+			}
+		}),
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "itemTitleColor",
+			label: "Item Title Color",
+			description: "Color for item titles",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "itemTitleSize",
+			label: "Item Title Font Size",
+			description: "Size of item titles",
+			defaultValue: "sm",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		{
+			key: "separator2",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Item Styling"
+		},
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "descriptionColor",
+			label: "Description Color",
+			description: "Color for descriptions",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "descriptionSize",
+			label: "Description Font Size",
+			description: "Size of descriptions",
+			defaultValue: "sm",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		{
+			key: "separator3",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Item Styling"
+		},
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "priceColor",
+			label: "Price Color",
+			description: "Color for prices",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "priceSize",
+			label: "Price Font Size",
+			description: "Size of prices",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "originalPriceColor",
+			label: "Original Price Color",
+			description: "Color for crossed-out original prices",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		{
+			key: "separator4",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Item Styling"
+		},
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "metaTextColor",
+			label: "Meta Text Color",
+			description: "Color for QV/CV text",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "metaTextSize",
+			label: "Meta Text Font Size",
+			description: "Size of QV/CV text",
+			defaultValue: "xs",
+			tab: "styling",
+			group: "Item Styling"
+		}),
+		{
+			key: "showFeaturedSection",
+			label: "Show Featured Section",
+			type: "boolean",
+			description: "Display a featured content section",
+			defaultValue: false,
+			tab: "styling",
+			group: "Featured Section"
+		},
+		{
+			key: "featuredAsset",
+			label: "Featured Asset",
+			type: "resource",
+			description: "Select a single image or video resource for the featured section",
+			tab: "styling",
+			group: "Featured Section",
+			allowedTypes: ["Medium"],
+			requiresKeyToBeTrue: "showFeaturedSection"
+		},
+		{
+			key: "featuredTitle",
+			label: "Featured Title",
+			type: "text",
+			description: "Title for featured section",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		},
+		{
+			key: "featuredSubtitle",
+			label: "Featured Subtitle",
+			type: "text",
+			description: "Subtitle for featured section",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		},
+		{
+			key: "featuredButtonText",
+			label: "Featured Button Text",
+			type: "text",
+			description: "Text for featured section button",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		},
+		{
+			key: "featuredButtonUrl",
+			label: "Featured Button URL",
+			type: "text",
+			description: "URL for featured section button",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		},
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "featuredSubtitleColor",
+			label: "Featured Subtitle Color",
+			description: "Color for featured subtitle",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		}),
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "featuredSubtitleSize",
+			label: "Featured Subtitle Font Size",
+			description: "Size of featured subtitle",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Featured Section",
+			requiresKeyToBeTrue: "showFeaturedSection"
+		}),
+		{
+			key: "dataSource",
+			label: "Data Source",
+			type: "dataSource",
+			description: "",
+			tab: "data",
+			group: "Data Configuration"
+		}
+	],
+	itemConfigSchema: {
+		description: "Configure settings for this list item",
+		fields: [
+			{
+				key: "title",
+				label: "Custom Title",
+				type: "text",
+				description: "Override the item's title"
+			},
+			{
+				key: "description",
+				label: "Custom Description",
+				type: "textarea",
+				description: "Override the item's description",
+				rows: 3
+			},
+			{
+				key: "price",
+				label: "Price",
+				type: "text",
+				description: "Current price"
+			},
+			{
+				key: "originalPrice",
+				label: "Original Price",
+				type: "text",
+				description: "Original price (will be crossed out)"
+			},
+			{
+				key: "discount",
+				label: "Discount Badge",
+				type: "text",
+				description: "Discount text (e.g., '40% Off')"
+			},
+			{
+				key: "qv",
+				label: "QV Value",
+				type: "text",
+				description: "Qualifying Volume value"
+			},
+			{
+				key: "cv",
+				label: "CV Value",
+				type: "text",
+				description: "Commission Volume value"
+			},
+			{
+				key: "image",
+				label: "Image URL",
+				type: "text",
+				description: "Custom image URL for this item"
+			}
+		]
+	}
+};
+//#endregion
+Object.defineProperty(exports, "ListWidget", {
+	enumerable: true,
+	get: function() {
+		return ListWidget;
+	}
+});
+Object.defineProperty(exports, "ListWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return ListWidget_exports;
+	}
+});
+Object.defineProperty(exports, "listWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return listWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=ListWidget-CxaLm0D5.cjs.map