@fluid-app/rep-widgets 0.1.0

package/dist/chunk-YY5WLV63.js

@@ -0,0 +1,951 @@
+import { MediaRenderer } from './chunk-F63VY23B.js';
+import { ScrollArrows } from './chunk-7JIRJTGY.js';
+import { getFontSizeField, getColorField, getPaddingField, getBorderRadiusField, getGapField, gapValues } from './chunk-ZS7C474P.js';
+import { useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SCROLL_ITEM_WIDTH = 300;
+var getImageUrl = (item) => {
+  return item.imageUrl || item.image;
+};
+function getFeaturedAssetUrl(value) {
+  if (!value) return void 0;
+  if (typeof value === "string") {
+    const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(value);
+    return { url: value, isVideo };
+  }
+  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 };
+    }
+  }
+  return void 0;
+}
+function getTextContent(value) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object" && value !== null && "body" in value) {
+    const body = value.body;
+    return typeof body === "string" ? body : "";
+  }
+  if (typeof value === "object") return "";
+  return String(value);
+}
+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 "";
+}
+var getAspectRatioClass = (ratio) => {
+  const ratios = {
+    square: "aspect-square",
+    landscape: "aspect-video",
+    portrait: "aspect-[3/4]"
+  };
+  return ratios[ratio];
+};
+var getResponsiveGridClass = (columns) => {
+  const responsiveClasses = {
+    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"
+  };
+  return responsiveClasses[columns] || "grid-cols-2 @lg:grid-cols-3";
+};
+function ListWidget({
+  listType = "unordered",
+  scrollAxis = "horizontal",
+  titleEnabled = true,
+  title,
+  items = [],
+  titleColor = "foreground",
+  titleSize = "lg",
+  itemTitleColor = "foreground",
+  itemTitleSize = "sm",
+  descriptionColor = "muted",
+  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 scrollContainerRef = useRef(null);
+  const displayItems = maxItems ? items.slice(0, maxItems) : items;
+  const hasItems = displayItems.length > 0;
+  const largeNumberSizes = {
+    xs: "8rem",
+    sm: "10rem",
+    md: "12rem",
+    lg: "14rem",
+    xl: "16rem",
+    "2xl": "20rem"
+  };
+  const scrollByAmount = (direction) => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
+    const scrollAmount = SCROLL_ITEM_WIDTH + computedGap;
+    container.scrollTo({
+      left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
+      behavior: "smooth"
+    });
+  };
+  const renderFeaturedSection = () => {
+    if (!showFeaturedSection) return null;
+    const asset = getFeaturedAssetUrl(featuredAsset);
+    if (!asset) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsx(
+            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__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-start justify-end p-8", children: [
+            featuredTitle && /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
+                children: featuredTitle
+              }
+            ),
+            featuredSubtitle && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
+                children: featuredSubtitle
+              }
+            ),
+            featuredButtonText && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: featuredButtonUrl || "#",
+                className: `bg-white px-6 py-2 font-medium text-foreground transition-opacity hover:opacity-90 rounded-${borderRadius}`,
+                children: featuredButtonText
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  };
+  const renderUnorderedList = () => {
+    const gridClass = getResponsiveGridClass(columns);
+    return /* @__PURE__ */ jsx("div", { className: `grid ${gridClass} gap-${gapValues[gap]}`, children: displayItems.map((item) => {
+      const imageUrl = getImageUrl(item);
+      const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative rounded-${borderRadius} overflow-hidden bg-white shadow-sm transition-shadow hover:shadow-md`,
+          children: [
+            showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-red-500 px-2 py-1 text-xs font-bold text-white", children: getStringValue(item.discount) }),
+            showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-white/80 p-2 backdrop-blur-sm transition-colors hover:bg-white", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-5 w-5 text-gray-600",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ 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"
+                  }
+                )
+              }
+            ) }),
+            imageUrl && /* @__PURE__ */ jsx("div", { className: `w-full ${aspectRatioClass} overflow-hidden`, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: item.title || "Product",
+                className: "h-full w-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: `p-${padding}`, children: [
+              item.title && /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
+                  children: getTextContent(item.title)
+                }
+              ),
+              item.description && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
+                  children: getTextContent(item.description)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                item.price && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+                    children: getStringValue(item.price)
+                  }
+                ),
+                item.originalPrice && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+                    children: getStringValue(item.originalPrice)
+                  }
+                )
+              ] }),
+              showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
+                  children: [
+                    item.qv && /* @__PURE__ */ jsxs("span", { children: [
+                      "QV: ",
+                      getStringValue(item.qv)
+                    ] }),
+                    item.cv && /* @__PURE__ */ jsxs("span", { children: [
+                      "CV: ",
+                      getStringValue(item.cv)
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        item.id
+      );
+    }) });
+  };
+  const renderOrderedList = () => {
+    const isHorizontal = scrollAxis === "horizontal";
+    const isVertical = scrollAxis === "vertical";
+    if (isHorizontal) {
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollContainerRef,
+            className: `flex gap-${gapValues[gap]} scrollbar-hide overflow-x-auto scroll-smooth`,
+            children: displayItems.map((item, index) => {
+              const imageUrl = getImageUrl(item);
+              const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `relative w-[300px] flex-shrink-0`,
+                  children: [
+                    /* @__PURE__ */ 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__ */ jsxs(
+                      "div",
+                      {
+                        className: `relative z-10 ml-20 rounded-${borderRadius} overflow-hidden bg-white shadow-sm transition-shadow hover:shadow-md`,
+                        children: [
+                          showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-red-500 px-2 py-1 text-xs font-bold text-white", children: getStringValue(item.discount) }),
+                          showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-white/80 p-2 backdrop-blur-sm transition-colors hover:bg-white", children: /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: "h-5 w-5 text-gray-600",
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ 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"
+                                }
+                              )
+                            }
+                          ) }),
+                          imageUrl && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: `w-full ${aspectRatioClass} overflow-hidden`,
+                              children: /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  src: imageUrl,
+                                  alt: item.title || "Product",
+                                  className: "h-full w-full object-cover"
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: `p-${padding}`, children: [
+                            item.title && /* @__PURE__ */ jsx(
+                              "h3",
+                              {
+                                className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
+                                children: getTextContent(item.title)
+                              }
+                            ),
+                            item.description && /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
+                                children: getTextContent(item.description)
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                              item.price && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+                                  children: getStringValue(item.price)
+                                }
+                              ),
+                              item.originalPrice && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+                                  children: getStringValue(item.originalPrice)
+                                }
+                              )
+                            ] }),
+                            showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
+                                children: [
+                                  item.qv && /* @__PURE__ */ jsxs("span", { children: [
+                                    "QV: ",
+                                    getStringValue(item.qv)
+                                  ] }),
+                                  item.cv && /* @__PURE__ */ jsxs("span", { children: [
+                                    "CV: ",
+                                    getStringValue(item.cv)
+                                  ] })
+                                ]
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
+              ScrollArrows,
+              {
+                onPrevious: () => scrollByAmount("prev"),
+                onNext: () => scrollByAmount("next")
+              }
+            )
+          }
+        )
+      ] });
+    }
+    if (isVertical) {
+      return /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-${gapValues[gap]}`, children: displayItems.map((item, index) => {
+        const imageUrl = getImageUrl(item);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative flex gap-${gapValues[gap]} rounded-${borderRadius} overflow-hidden bg-white shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
+            children: [
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: item.title || "Product",
+                  className: "h-full w-full object-cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                item.title && /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
+                    children: getTextContent(item.title)
+                  }
+                ),
+                item.description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
+                    children: getTextContent(item.description)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  item.price && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+                      children: getStringValue(item.price)
+                    }
+                  ),
+                  item.originalPrice && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+                      children: getStringValue(item.originalPrice)
+                    }
+                  )
+                ] }),
+                showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
+                    children: [
+                      item.qv && /* @__PURE__ */ jsxs("span", { children: [
+                        "QV: ",
+                        getStringValue(item.qv)
+                      ] }),
+                      item.cv && /* @__PURE__ */ jsxs("span", { children: [
+                        "CV: ",
+                        getStringValue(item.cv)
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 rounded-md bg-red-500 px-2 py-1 text-xs font-bold text-white", children: getStringValue(item.discount) }),
+              showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 right-12 rounded-full bg-white/80 p-2 backdrop-blur-sm transition-colors hover:bg-white", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-5 w-5 text-gray-600",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ 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"
+                    }
+                  )
+                }
+              ) })
+            ]
+          },
+          item.id
+        );
+      }) });
+    }
+    return null;
+  };
+  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__ */ jsxs(
+    "div",
+    {
+      className: `@container bg-${backgroundColor} ${className}`,
+      style: { backgroundImage },
+      ...props,
+      children: [
+        titleEnabled && title && /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: `text-${titleColor} text-${titleSize === "md" ? "base" : titleSize} mb-6 font-bold`,
+            children: title
+          }
+        ),
+        !hasItems ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-50 py-12 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted", children: "No items to display" }) }) : shouldShowFeaturedSection ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 @lg:flex-row @lg:gap-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[45%]", children: renderFeaturedSection() }),
+          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[55%]", children: listType === "unordered" ? renderUnorderedList() : renderOrderedList() })
+        ] }) : listType === "unordered" ? renderUnorderedList() : renderOrderedList()
+      ]
+    }
+  );
+}
+var listWidgetPropertySchema = {
+  widgetType: "ListWidget",
+  displayName: "List",
+  tabsConfig: [
+    { id: "styling", label: "Styling" },
+    { id: "data", label: "Data" }
+  ],
+  dataSourceTargetProps: ["items"],
+  fields: [
+    // Styling tab - Title group
+    {
+      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"
+    },
+    getFontSizeField({
+      key: "titleSize",
+      label: "Title Font Size",
+      description: "Size of the list title",
+      defaultValue: "xl",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    getColorField({
+      key: "titleColor",
+      label: "Title Color",
+      description: "Color for the list title",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    // Styling tab - Design group
+    getPaddingField({
+      key: "padding",
+      label: "Padding",
+      description: "Padding inside the container",
+      defaultValue: 4,
+      tab: "styling",
+      group: "Design"
+    }),
+    getBorderRadiusField({
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Rounded corners for the container and images",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Design"
+    }),
+    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"
+    },
+    // Styling tab - List Configuration group
+    {
+      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"
+    },
+    // Styling tab - Unordered 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" }
+    },
+    // Styling tab - Ordered List Configuration
+    {
+      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" }
+    },
+    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" }
+    }),
+    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" }
+    }),
+    // Styling tab - Item Styling group
+    getColorField({
+      key: "itemTitleColor",
+      label: "Item Title Color",
+      description: "Color for item titles",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    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"
+    },
+    getColorField({
+      key: "priceColor",
+      label: "Price Color",
+      description: "Color for prices",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    getFontSizeField({
+      key: "priceSize",
+      label: "Price Font Size",
+      description: "Size of prices",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    getColorField({
+      key: "originalPriceColor",
+      label: "Original Price Color",
+      description: "Color for crossed-out original prices",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    {
+      key: "separator3",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Item Styling"
+    },
+    getColorField({
+      key: "metaTextColor",
+      label: "Meta Text Color",
+      description: "Color for QV/CV text",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    getFontSizeField({
+      key: "metaTextSize",
+      label: "Meta Text Font Size",
+      description: "Size of QV/CV text",
+      defaultValue: "xs",
+      tab: "styling",
+      group: "Item Styling"
+    }),
+    // Styling tab - Featured Section group
+    {
+      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"
+    },
+    getColorField({
+      key: "featuredSubtitleColor",
+      label: "Featured Subtitle Color",
+      description: "Color for featured subtitle",
+      defaultValue: "background",
+      tab: "styling",
+      group: "Featured Section",
+      requiresKeyToBeTrue: "showFeaturedSection"
+    }),
+    getFontSizeField({
+      key: "featuredSubtitleSize",
+      label: "Featured Subtitle Font Size",
+      description: "Size of featured subtitle",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Featured Section",
+      requiresKeyToBeTrue: "showFeaturedSection"
+    }),
+    // Data tab - Data Configuration
+    {
+      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"
+      }
+    ]
+  }
+};
+
+export { ListWidget, listWidgetPropertySchema };
+//# sourceMappingURL=chunk-YY5WLV63.js.map
+//# sourceMappingURL=chunk-YY5WLV63.js.map