@fluid-app/rep-widgets 0.1.16 → 0.1.18

package/dist/NestedWidget-CwyVsZ-f.mjs

@@ -0,0 +1,330 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { a as getFontSizeField, c as getPaddingField, i as getColorField, n as getBorderRadiusField$1, o as getGapField, t as gapValues } from "./fields-C29fgJje.mjs";
+import { t as ScrollArrows } from "./scroll-arrows-BevCYRNT.mjs";
+import { n as getMediaPropsFromShareable, t as MediaRenderer } from "./MediaRenderer-Uq90PZcY.mjs";
+import { getHeightField } from "@fluid-app/rep-core/registries";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "@fluid-app/rep-core/types";
+//#region src/widgets/NestedWidget.tsx
+var NestedWidget_exports = /* @__PURE__ */ __exportAll({
+	NestedWidget: () => NestedWidget,
+	nestedWidgetPropertySchema: () => nestedWidgetPropertySchema
+});
+const DEFAULT_SHAREABLES = [];
+function NestedWidget({ resource, titleEnabled = true, titleText = "Featured Collection", shareables = DEFAULT_SHAREABLES, gap = "md", padding = 4, borderRadius = "md", primaryMediaHeight = "400px", titleFontSize = "xl", titleColor = "background", titleAlignment = {
+	horizontal: "left",
+	vertical: "bottom"
+}, nestedTextColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, overlayEnabled = true, overlayType = "gradient", overlayIntensity = 50, className, ...props }) {
+	const scrollContainerRef = useRef(null);
+	const primaryMediaRef = useRef(null);
+	const [primaryMediaWidthPx, setPrimaryMediaWidthPx] = useState(400);
+	useEffect(() => {
+		const el = primaryMediaRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) setPrimaryMediaWidthPx(entry.contentRect.width);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const scrollByAmount = (direction) => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
+		const scrollAmount = primaryMediaWidthPx * .75 + computedGap;
+		container.scrollTo({
+			left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
+			behavior: "smooth"
+		});
+	};
+	const hasNestedMedia = shareables.length > 0;
+	const titleAlignmentClasses = {
+		left: "text-left",
+		center: "text-center",
+		right: "text-right"
+	};
+	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 flex w-full p-${padding} rounded-${borderRadius} bg-${backgroundColor} ${className}`,
+		...props,
+		style: {
+			maxHeight: primaryMediaHeight,
+			backgroundImage
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: primaryMediaRef,
+			className: `overflow-hidden @md:flex-none rounded-${borderRadius}`,
+			style: { width: primaryMediaHeight },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative h-full w-full",
+				children: [
+					/* @__PURE__ */ jsx(MediaRenderer, { ...resource ? getMediaPropsFromShareable(resource) : {} }),
+					overlayEnabled && /* @__PURE__ */ jsx("div", {
+						className: `pointer-events-none absolute inset-0 z-10 ${overlayType === "gradient" ? "bg-gradient-to-t from-black to-transparent" : "bg-black"}`,
+						style: { opacity: (Number(String(overlayIntensity).replace("%", "")) || 50) / 100 }
+					}),
+					(titleEnabled && titleText || hasNestedMedia) && /* @__PURE__ */ jsxs("div", {
+						className: `absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? "left"]} p-${padding} ${titleAlignment.vertical === "top" ? `top-0 pt-${padding}` : titleAlignment.vertical === "center" ? "top-1/2 -translate-y-1/2" : `bottom-0 pb-${padding}`}`,
+						children: [titleEnabled && titleText && /* @__PURE__ */ jsx("h2", {
+							className: `leading-tight font-bold text-${titleColor} text-${titleFontSize === "md" ? "base" : titleFontSize}`,
+							children: titleText
+						}), hasNestedMedia && /* @__PURE__ */ jsx("div", {
+							className: `pt-${padding} @md:hidden`,
+							children: /* @__PURE__ */ jsx("div", {
+								className: `flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`,
+								children: shareables.map((shareable) => /* @__PURE__ */ jsx("div", {
+									className: "flex shrink-0 flex-col items-center",
+									children: /* @__PURE__ */ jsx("div", {
+										className: `aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`,
+										children: /* @__PURE__ */ jsx(MediaRenderer, { ...getMediaPropsFromShareable(shareable) })
+									})
+								}, shareable.id))
+							})
+						})]
+					})
+				]
+			})
+		}), hasNestedMedia && /* @__PURE__ */ jsxs("div", {
+			className: `relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`,
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				className: `flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`,
+				style: { scrollSnapType: "x mandatory" },
+				children: shareables.map((shareable) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					style: {
+						width: `${primaryMediaWidthPx * .75}px`,
+						scrollSnapAlign: "start"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: `aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`,
+						children: /* @__PURE__ */ jsx(MediaRenderer, { ...getMediaPropsFromShareable(shareable) })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: `flex-none text-sm text-${nestedTextColor}`,
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate",
+							children: shareable.title || ""
+						}), /* @__PURE__ */ jsx("p", {
+							className: "truncate",
+							children: (shareable.display_price ?? shareable.price) || ""
+						})]
+					})]
+				}, shareable.id))
+			}), /* @__PURE__ */ jsx("div", {
+				className: `absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`,
+				children: /* @__PURE__ */ jsx(ScrollArrows, {
+					onPrevious: () => scrollByAmount("prev"),
+					onNext: () => scrollByAmount("next")
+				})
+			})]
+		})]
+	});
+}
+const nestedWidgetPropertySchema = {
+	widgetType: "NestedWidget",
+	displayName: "Nested Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}, {
+		id: "data",
+		label: "Data"
+	}],
+	dataSourceTargetProps: ["shareables"],
+	fields: [
+		{
+			key: "resource",
+			label: "Primary Media",
+			type: "resource",
+			description: "Select the primary media displayed in the large panel",
+			allowedTypes: ["Medium"],
+			tab: "styling",
+			group: "Content"
+		},
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed over the primary media",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Main title displayed over the primary media",
+			defaultValue: "Featured Collection",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		getFontSizeField({
+			label: "Title Font Size",
+			defaultValue: "xl",
+			key: "titleFontSize",
+			description: "Font size for the widget title",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		getColorField({
+			defaultValue: "background",
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		getHeightField({
+			key: "primaryMediaHeight",
+			label: "Primary Media Height",
+			description: "Height of the primary media container",
+			min: 100,
+			max: 1200,
+			step: 10,
+			defaultValue: "400px",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "titleAlignment",
+			label: "Content Alignment",
+			type: "alignment",
+			description: "Alignment of the content inside the primary media",
+			defaultValue: {
+				horizontal: "left",
+				vertical: "bottom"
+			},
+			options: {
+				horizontalEnabled: true,
+				verticalEnabled: true
+			},
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "separator2",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		getPaddingField({
+			defaultValue: 4,
+			key: "padding",
+			label: "Padding",
+			description: "Padding used throughout the widget",
+			tab: "styling",
+			group: "Design"
+		}),
+		getBorderRadiusField$1({
+			defaultValue: "md",
+			label: "Border Radius",
+			key: "borderRadius",
+			description: "Rounded corners for the widget",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "overlayEnabled",
+			label: "Enable Overlay",
+			type: "boolean",
+			description: "Add a dark overlay to the primary media for better text readability",
+			defaultValue: true,
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "overlayType",
+			label: "Overlay Type",
+			type: "buttonGroup",
+			description: "Type of overlay effect",
+			defaultValue: "gradient",
+			options: [{
+				label: "Solid",
+				value: "solid"
+			}, {
+				label: "Gradient",
+				value: "gradient"
+			}],
+			tab: "styling",
+			group: "Design",
+			requiresKeyToBeTrue: "overlayEnabled"
+		},
+		{
+			key: "overlayIntensity",
+			label: "Overlay Intensity",
+			type: "slider",
+			description: "Opacity of the overlay (0-100)",
+			min: 0,
+			max: 100,
+			step: 5,
+			defaultValue: 50,
+			unit: "%",
+			tab: "styling",
+			group: "Design",
+			requiresKeyToBeTrue: "overlayEnabled"
+		},
+		getGapField({
+			label: "Gap",
+			defaultValue: "md",
+			key: "gap",
+			description: "Gap between nested media items",
+			tab: "styling",
+			group: "Nested Design"
+		}),
+		getColorField({
+			defaultValue: "foreground",
+			key: "nestedTextColor",
+			label: "Nested Text Color",
+			description: "Color for nested media labels",
+			tab: "styling",
+			group: "Nested Design"
+		}),
+		{
+			type: "background",
+			defaultValue: "background",
+			key: "background",
+			label: "Background",
+			description: "Background color for nested media container",
+			tab: "styling",
+			group: "Nested Design"
+		},
+		{
+			key: "dataSource",
+			label: "Data Source",
+			type: "dataSource",
+			description: "Configure dynamic data fetching from an API",
+			tab: "data",
+			group: "Data Configuration"
+		}
+	],
+	itemConfigSchema: {
+		description: "Configure settings for this item",
+		fields: [{
+			key: "title",
+			label: "Custom Title",
+			type: "text",
+			description: "Override the item's title for this widget"
+		}]
+	}
+};
+//#endregion
+export { NestedWidget_exports as n, nestedWidgetPropertySchema as r, NestedWidget as t };
+
+//# sourceMappingURL=NestedWidget-CwyVsZ-f.mjs.map

package/dist/NestedWidget-CwyVsZ-f.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedWidget-CwyVsZ-f.mjs","names":["getBorderRadiusField"],"sources":["../src/widgets/NestedWidget.tsx"],"sourcesContent":["import { useRef, useState, useEffect, type ComponentProps } from \"react\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport type {\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n  AlignOptions,\n  GapOptions,\n  BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport {\n  getHeightField,\n  type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport { type ShareableItem } from \"@fluid-app/rep-core/types\";\n\nconst DEFAULT_SHAREABLES: ShareableItem[] = [];\n\ntype NestedWidgetProps = ComponentProps<\"div\"> & {\n  // Content\n  resource?: ShareableItem;\n  titleEnabled?: boolean;\n  titleText?: string;\n  shareables?: ShareableItem[];\n\n  // Layout\n  gap?: GapOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  primaryMediaHeight?: string;\n\n  // Title styling\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  titleAlignment?: AlignOptions;\n\n  // Nested media styling\n  nestedTextColor?: ColorOptions;\n  background?: BackgroundValue;\n\n  // Overlay\n  overlayEnabled?: boolean;\n  overlayType?: \"solid\" | \"gradient\";\n  overlayIntensity?: number;\n};\n\nexport function NestedWidget({\n  resource,\n  titleEnabled = true,\n  titleText = \"Featured Collection\",\n  shareables = DEFAULT_SHAREABLES,\n  gap = \"md\",\n  padding = 4,\n  borderRadius = \"md\",\n  primaryMediaHeight = \"400px\",\n  titleFontSize = \"xl\",\n  titleColor = \"background\",\n  titleAlignment = { horizontal: \"left\", vertical: \"bottom\" },\n  nestedTextColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  overlayEnabled = true,\n  overlayType = \"gradient\",\n  overlayIntensity = 50,\n  className,\n  ...props\n}: NestedWidgetProps) {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const primaryMediaRef = useRef<HTMLDivElement>(null);\n  const [primaryMediaWidthPx, setPrimaryMediaWidthPx] = useState(400);\n\n  useEffect(() => {\n    const el = primaryMediaRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (entry) setPrimaryMediaWidthPx(entry.contentRect.width);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const scrollByAmount = (direction: \"prev\" | \"next\") => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;\n    const itemWidth = primaryMediaWidthPx * 0.75;\n    const scrollAmount = itemWidth + computedGap;\n\n    container.scrollTo({\n      left:\n        container.scrollLeft +\n        (direction === \"next\" ? scrollAmount : -scrollAmount),\n      behavior: \"smooth\",\n    });\n  };\n\n  const hasNestedMedia = shareables.length > 0;\n\n  const titleAlignmentClasses = {\n    left: \"text-left\",\n    center: \"text-center\",\n    right: \"text-right\",\n  };\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  return (\n    <div\n      className={`@container flex w-full p-${padding} rounded-${borderRadius} bg-${backgroundColor} ${className}`}\n      {...props}\n      style={{\n        maxHeight: primaryMediaHeight,\n        backgroundImage: backgroundImage,\n      }}\n    >\n      {/* Primary Media Container - Full width on mobile, fixed on desktop */}\n      <div\n        ref={primaryMediaRef}\n        className={`overflow-hidden @md:flex-none rounded-${borderRadius}`}\n        style={{\n          width: primaryMediaHeight,\n        }}\n      >\n        {/* Primary Media */}\n        <div className=\"relative h-full w-full\">\n          <MediaRenderer\n            {...(resource ? getMediaPropsFromShareable(resource) : {})}\n          />\n\n          {/* Overlay */}\n          {overlayEnabled && (\n            <div\n              className={`pointer-events-none absolute inset-0 z-10 ${\n                overlayType === \"gradient\"\n                  ? \"bg-gradient-to-t from-black to-transparent\"\n                  : \"bg-black\"\n              }`}\n              style={{\n                opacity:\n                  (Number(String(overlayIntensity).replace(\"%\", \"\")) || 50) /\n                  100,\n              }}\n            />\n          )}\n\n          {/* Title and Mobile Nested Media */}\n          {((titleEnabled && titleText) || hasNestedMedia) && (\n            <div\n              className={`absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? \"left\"]} p-${padding} ${\n                titleAlignment.vertical === \"top\"\n                  ? `top-0 pt-${padding}`\n                  : titleAlignment.vertical === \"center\"\n                    ? \"top-1/2 -translate-y-1/2\"\n                    : `bottom-0 pb-${padding}`\n              }`}\n            >\n              {titleEnabled && titleText && (\n                <h2\n                  className={`leading-tight font-bold text-${titleColor} text-${titleFontSize === \"md\" ? \"base\" : titleFontSize}`}\n                >\n                  {titleText}\n                </h2>\n              )}\n\n              {/* Mobile: Products overlay inside primary media */}\n              {hasNestedMedia && (\n                <div className={`pt-${padding} @md:hidden`}>\n                  <div\n                    className={`flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`}\n                  >\n                    {shareables.map((shareable) => (\n                      <div\n                        key={shareable.id}\n                        className=\"flex shrink-0 flex-col items-center\"\n                      >\n                        <div\n                          className={`aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`}\n                        >\n                          <MediaRenderer\n                            {...getMediaPropsFromShareable(shareable)}\n                          />\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Desktop: Products Container - Single row beside primary media */}\n      {hasNestedMedia && (\n        <div\n          className={`relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`}\n        >\n          <div\n            ref={scrollContainerRef}\n            className={`flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`}\n            style={{ scrollSnapType: \"x mandatory\" }}\n          >\n            {shareables.map((shareable) => (\n              <div\n                key={shareable.id}\n                className=\"flex flex-col gap-1\"\n                style={{\n                  width: `${primaryMediaWidthPx * 0.75}px`,\n                  scrollSnapAlign: \"start\",\n                }}\n              >\n                <div\n                  className={`aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`}\n                >\n                  <MediaRenderer {...getMediaPropsFromShareable(shareable)} />\n                </div>\n                <span className={`flex-none text-sm text-${nestedTextColor}`}>\n                  <p className=\"truncate\">{shareable.title || \"\"}</p>\n                  <p className=\"truncate\">\n                    {((shareable.display_price as string) ?? shareable.price) ||\n                      \"\"}\n                  </p>\n                </span>\n              </div>\n            ))}\n          </div>\n\n          {/* Navigation arrows */}\n          <div\n            className={`absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`}\n          >\n            <ScrollArrows\n              onPrevious={() => scrollByAmount(\"prev\")}\n              onNext={() => scrollByAmount(\"next\")}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const nestedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"NestedWidget\",\n  displayName: \"Nested Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"shareables\"],\n  fields: [\n    // Content tab - Resource group\n    {\n      key: \"resource\",\n      label: \"Primary Media\",\n      type: \"resource\",\n      description: \"Select the primary media displayed in the large panel\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    // Content tab - Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed over the primary media\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Main title displayed over the primary media\",\n      defaultValue: \"Featured Collection\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      defaultValue: \"background\",\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Styling tab - Design group\n    getHeightField({\n      key: \"primaryMediaHeight\",\n      label: \"Primary Media Height\",\n      description: \"Height of the primary media container\",\n      min: 100,\n      max: 1200,\n      step: 10,\n      defaultValue: \"400px\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"titleAlignment\",\n      label: \"Content Alignment\",\n      type: \"alignment\",\n      description: \"Alignment of the content inside the primary media\",\n      defaultValue: { horizontal: \"left\", vertical: \"bottom\" },\n      options: {\n        horizontalEnabled: true,\n        verticalEnabled: true,\n      },\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      defaultValue: 4,\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding used throughout the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      defaultValue: \"md\",\n      label: \"Border Radius\",\n      key: \"borderRadius\",\n      description: \"Rounded corners for the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"overlayEnabled\",\n      label: \"Enable Overlay\",\n      type: \"boolean\",\n      description:\n        \"Add a dark overlay to the primary media for better text readability\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"overlayType\",\n      label: \"Overlay Type\",\n      type: \"buttonGroup\",\n      description: \"Type of overlay effect\",\n      defaultValue: \"gradient\",\n      options: [\n        { label: \"Solid\", value: \"solid\" },\n        { label: \"Gradient\", value: \"gradient\" },\n      ],\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    {\n      key: \"overlayIntensity\",\n      label: \"Overlay Intensity\",\n      type: \"slider\",\n      description: \"Opacity of the overlay (0-100)\",\n      min: 0,\n      max: 100,\n      step: 5,\n      defaultValue: 50,\n      unit: \"%\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    // Styling tab - Nested Media Styling group\n    getGapField({\n      label: \"Gap\",\n      defaultValue: \"md\",\n      key: \"gap\",\n      description: \"Gap between nested media items\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    getColorField({\n      defaultValue: \"foreground\",\n      key: \"nestedTextColor\",\n      label: \"Nested Text Color\",\n      description: \"Color for nested media labels\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    {\n      type: \"background\",\n      defaultValue: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background color for nested media container\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    },\n    // Data tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n  // Per-item configuration schema for custom data sources\n  itemConfigSchema: {\n    description: \"Configure settings for this item\",\n    fields: [\n      {\n        key: \"title\",\n        label: \"Custom Title\",\n        type: \"text\",\n        description: \"Override the item's title for this widget\",\n      },\n    ],\n  },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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GACR;EACD,gBAAgB;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACFA,uBAAqB;GACnB,cAAc;GACd,OAAO;GACP,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;GACD,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,MAAM;GACN,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED,YAAY;GACV,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ,CACN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACd,CACF;EACF;CACF"}