@fluid-app/rep-widgets 0.1.0

package/dist/chunk-NGYR4RQF.js

@@ -0,0 +1,476 @@
+import { MediaRenderer, getMediaPropsFromWidgetSchema } from './chunk-F63VY23B.js';
+import { Button } from './chunk-NUG3DWF7.js';
+import { ScrollArrows } from './chunk-7JIRJTGY.js';
+import { getFontSizeField, getColorField, getBorderRadiusField, getPaddingField, getButtonSizeField } from './chunk-ZS7C474P.js';
+import { useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CarouselWidget({
+  slides = [],
+  autoScrollInterval = 3e3,
+  enableAutoScroll = false,
+  carouselHeight = 400,
+  align = { vertical: "bottom", horizontal: "left" },
+  overlayIntensity = 40,
+  borderRadius = "none",
+  padding = 0,
+  textWidth = "100%",
+  headerSize = "lg",
+  headerColor = "background",
+  textSize = "md",
+  textColor = "background",
+  showButton = true,
+  buttonColor = "background",
+  buttonSize = "default",
+  overlayEnabled = true,
+  overlayType = "solid",
+  className,
+  ...props
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+  const hasSlides = slides.length > 0;
+  const totalSlides = slides.length;
+  const goToNext = useCallback(() => {
+    if (!hasSlides) return;
+    setCurrentIndex((prev) => {
+      if (prev === totalSlides - 1) {
+        return 0;
+      }
+      return prev + 1;
+    });
+  }, [hasSlides, totalSlides]);
+  const goToPrevious = useCallback(() => {
+    if (!hasSlides) return;
+    setCurrentIndex((prev) => {
+      if (prev === 0) {
+        return totalSlides - 1;
+      }
+      return prev - 1;
+    });
+  }, [hasSlides, totalSlides]);
+  const goToSlide = useCallback(
+    (index) => {
+      if (!hasSlides) return;
+      if (index >= 0 && index < totalSlides) {
+        setCurrentIndex(index);
+      }
+    },
+    [hasSlides, totalSlides]
+  );
+  useEffect(() => {
+    if (!enableAutoScroll || !hasSlides || isHovered) return;
+    const intervalId = setInterval(() => {
+      goToNext();
+    }, autoScrollInterval);
+    return () => clearInterval(intervalId);
+  }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);
+  useEffect(() => {
+    if (currentIndex >= totalSlides && totalSlides > 0) {
+      setCurrentIndex(0);
+    }
+  }, [totalSlides, currentIndex]);
+  if (!hasSlides) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `rounded-${borderRadius} ${className} w-full overflow-hidden`,
+        style: { minHeight: `${carouselHeight}px` },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full w-full items-center justify-center bg-muted",
+            style: { minHeight: `${carouselHeight}px` },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-4xl", children: "\u{1F3A0}" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No slides added" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70", children: "Add slides to create a carousel" })
+            ] })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full overflow-hidden rounded-${borderRadius} ${className}`,
+      style: { minHeight: `${carouselHeight}px` },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative h-full w-full",
+            style: { minHeight: `${carouselHeight}px` },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex h-full transition-transform duration-500 ease-in-out",
+                style: {
+                  transform: `translateX(-${currentIndex * 100}%)`
+                },
+                children: slides.map((slide) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "relative h-full w-full flex-shrink-0",
+                    style: { minWidth: "100%", minHeight: `${carouselHeight}px` },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsx(
+                        MediaRenderer,
+                        {
+                          ...getMediaPropsFromWidgetSchema(slide.content)
+                        }
+                      ) }),
+                      overlayEnabled && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: `absolute inset-0 z-9 ${overlayType === "gradient" ? "bg-gradient-to-t from-black to-transparent" : "bg-black"}`,
+                          style: {
+                            opacity: (Number(String(overlayIntensity).replace("%", "")) || 40) / 100
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: `absolute inset-x-0 z-10 flex px-3 ${align.horizontal === "left" ? "justify-start" : align.horizontal === "center" ? "justify-center" : "justify-end"} ${align.vertical === "top" ? "top-0 pt-13" : align.vertical === "center" ? "top-1/2 -translate-y-1/2" : "bottom-0 pb-13"}`,
+                          children: /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: `p-${padding} flex flex-col gap-3`,
+                              style: { maxWidth: textWidth },
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { className: `flex flex-col text-${align.horizontal}`, children: [
+                                  slide.title && /* @__PURE__ */ jsx(
+                                    "h2",
+                                    {
+                                      className: `mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === "md" ? "base" : headerSize}`,
+                                      children: slide.title
+                                    }
+                                  ),
+                                  slide.description && /* @__PURE__ */ jsx(
+                                    "p",
+                                    {
+                                      className: `leading-[13px] text-${textColor} text-${textSize === "md" ? "base" : textSize}`,
+                                      children: slide.description
+                                    }
+                                  )
+                                ] }),
+                                slide.buttonText && slide.buttonEnabled && showButton && /* @__PURE__ */ jsx("div", { className: `text-${align.horizontal}`, children: /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    size: buttonSize,
+                                    className: `rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`,
+                                    asChild: true,
+                                    children: /* @__PURE__ */ jsx("a", { href: slide.buttonLink, children: slide.buttonText })
+                                  }
+                                ) })
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  slide.id
+                ))
+              }
+            )
+          }
+        ),
+        totalSlides > 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === "center" ? "h-full" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex items-center ${align.horizontal === "center" ? `p-${padding} absolute inset-x-0 bottom-3 justify-center` : ""}`,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `flex items-center gap-2 ${align.horizontal === "center" ? "justify-center" : ""}`,
+                      children: slides.map((_, index) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: `h-[6px] w-[6px] rounded-full transition-colors ${index === currentIndex ? "bg-white" : "bg-white/40 hover:bg-white/60"}`,
+                          onClick: () => goToSlide(index),
+                          "aria-label": `Go to slide ${index + 1}`,
+                          "aria-current": index === currentIndex ? "true" : "false"
+                        },
+                        `dot-${index}`
+                      ))
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex items-center gap-[10px] ${align.horizontal === "center" ? `absolute inset-x-0 top-1/2 justify-between px-${padding}` : ""}`,
+                  children: /* @__PURE__ */ jsx(ScrollArrows, { onPrevious: goToPrevious, onNext: goToNext })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var carouselWidgetPropertySchema = {
+  widgetType: "CarouselWidget",
+  displayName: "Carousel",
+  tabsConfig: [
+    { id: "styling", label: "Styling" },
+    { id: "behavior", label: "Behavior" },
+    { id: "data", label: "Data" }
+  ],
+  dataSourceTargetProps: ["slides"],
+  fields: [
+    // Styling tab - Text Styling group
+    getFontSizeField({
+      defaultValue: "lg",
+      key: "headerSize",
+      label: "Header Font Size",
+      description: "Font size for the slide header",
+      tab: "styling",
+      group: "Text Styling"
+    }),
+    getColorField({
+      defaultValue: "background",
+      key: "headerColor",
+      label: "Header Color",
+      description: "Color variant for the slide header",
+      tab: "styling",
+      group: "Text Styling"
+    }),
+    {
+      key: "separator",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Text Styling"
+    },
+    getFontSizeField({
+      defaultValue: "md",
+      key: "textSize",
+      label: "Text Font Size",
+      description: "Font size for the slide text",
+      tab: "styling",
+      group: "Text Styling"
+    }),
+    getColorField({
+      defaultValue: "background",
+      key: "textColor",
+      label: "Text Color",
+      description: "Color variant for the slide text",
+      tab: "styling",
+      group: "Text Styling"
+    }),
+    // Styling tab - Layout group
+    {
+      key: "align",
+      label: "Alignment",
+      type: "alignment",
+      description: "Alignment of the carousel content",
+      defaultValue: { vertical: "bottom", horizontal: "left" },
+      options: {
+        verticalEnabled: true,
+        horizontalEnabled: true
+      },
+      tab: "styling",
+      group: "Layout"
+    },
+    {
+      key: "textWidth",
+      label: "Content Width",
+      type: "text",
+      description: "Maximum width for slide content (e.g., 100%, 50%, 600px)",
+      defaultValue: "100%",
+      tab: "styling",
+      group: "Layout"
+    },
+    // Styling tab - Design group
+    {
+      key: "carouselHeight",
+      label: "Carousel Height (px)",
+      type: "number",
+      description: "Height of the carousel in pixels",
+      min: 100,
+      max: 1e3,
+      step: 10,
+      defaultValue: 400,
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "separator2",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Design"
+    },
+    getBorderRadiusField({
+      defaultValue: "md",
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Rounded corners for the carousel",
+      tab: "styling",
+      group: "Design"
+    }),
+    getPaddingField({
+      defaultValue: 4,
+      key: "padding",
+      label: "Padding",
+      description: "Padding for the carousel",
+      tab: "styling",
+      group: "Design"
+    }),
+    {
+      key: "overlayEnabled",
+      label: "Enable Overlay",
+      type: "boolean",
+      description: "Add background overlay to slide content",
+      defaultValue: true,
+      tab: "styling",
+      group: "Design"
+    },
+    {
+      key: "overlayType",
+      label: "Overlay Type",
+      type: "buttonGroup",
+      description: "Type of overlay to add to the slide content",
+      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 background (0-100)",
+      min: 0,
+      max: 100,
+      step: 5,
+      defaultValue: 50,
+      unit: "%",
+      tab: "styling",
+      group: "Design",
+      requiresKeyToBeTrue: "overlayEnabled"
+    },
+    {
+      key: "showButton",
+      label: "Show Button",
+      type: "boolean",
+      description: "Display the button in slide content",
+      defaultValue: true,
+      tab: "styling",
+      group: "Design"
+    },
+    getColorField({
+      defaultValue: "primary",
+      key: "buttonColor",
+      label: "Button Color",
+      description: "Color variant for the slide button",
+      tab: "styling",
+      group: "Design",
+      requiresKeyToBeTrue: "showButton"
+    }),
+    getButtonSizeField({
+      defaultValue: "default",
+      key: "buttonSize",
+      label: "Button Size",
+      description: "Size of the slide button",
+      tab: "styling",
+      group: "Design",
+      requiresKeyToBeTrue: "showButton"
+    }),
+    // Behavior tab - Auto-Scroll group
+    {
+      key: "enableAutoScroll",
+      label: "Enable Auto-Scroll",
+      type: "boolean",
+      description: "Automatically advance to the next slide",
+      defaultValue: false,
+      tab: "behavior",
+      group: "Auto-Scroll"
+    },
+    {
+      key: "autoScrollInterval",
+      label: "Auto-Scroll Interval (ms)",
+      type: "number",
+      description: "Time in milliseconds between automatic slide transitions",
+      min: 1e3,
+      max: 1e4,
+      step: 500,
+      defaultValue: 3e3,
+      tab: "behavior",
+      group: "Auto-Scroll",
+      requiresKeyToBeTrue: "enableAutoScroll"
+    },
+    // Data tab - Data Configuration group
+    {
+      key: "dataSource",
+      label: "Data Source",
+      type: "dataSource",
+      description: "",
+      tab: "data",
+      group: "Data Configuration"
+    }
+  ],
+  // Per-item configuration schema for custom data sources
+  itemConfigSchema: {
+    description: "Configure settings for this slide",
+    fields: [
+      {
+        key: "title",
+        label: "Custom Title",
+        type: "text",
+        description: "Override the item's title for this slide"
+      },
+      {
+        key: "description",
+        label: "Custom Description",
+        type: "textarea",
+        description: "Override the item's description for this slide",
+        rows: 3
+      },
+      {
+        key: "buttonEnabled",
+        label: "Show Button",
+        type: "boolean",
+        description: "Show the button in the slide",
+        defaultValue: false
+      },
+      {
+        key: "buttonText",
+        label: "Button Text",
+        type: "text",
+        description: "Text to display on the slide button",
+        requiresKeyToBeTrue: "buttonEnabled"
+      },
+      {
+        key: "buttonLink",
+        label: "Button Link",
+        type: "text",
+        description: "URL for the slide button",
+        requiresKeyToBeTrue: "buttonEnabled"
+      }
+    ]
+  }
+};
+
+export { CarouselWidget, carouselWidgetPropertySchema };
+//# sourceMappingURL=chunk-NGYR4RQF.js.map
+//# sourceMappingURL=chunk-NGYR4RQF.js.map

package/dist/chunk-NGYR4RQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets/CarouselWidget.tsx"],"names":[],"mappings":";;;;;;;AAwEO,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAS,EAAC;AAAA,EACV,kBAAA,GAAqB,GAAA;AAAA,EACrB,gBAAA,GAAmB,KAAA;AAAA,EACnB,cAAA,GAAiB,GAAA;AAAA,EACjB,KAAA,GAAQ,EAAE,QAAA,EAAU,QAAA,EAAU,YAAY,MAAA,EAAO;AAAA,EACjD,gBAAA,GAAmB,EAAA;AAAA,EACnB,YAAA,GAAe,MAAA;AAAA,EACf,OAAA,GAAU,CAAA;AAAA,EACV,SAAA,GAAY,MAAA;AAAA,EACZ,UAAA,GAAa,IAAA;AAAA,EACb,WAAA,GAAc,YAAA;AAAA,EACd,QAAA,GAAW,IAAA;AAAA,EACX,SAAA,GAAY,YAAA;AAAA,EACZ,UAAA,GAAa,IAAA;AAAA,EACb,WAAA,GAAc,YAAA;AAAA,EACd,UAAA,GAAa,SAAA;AAAA,EACb,cAAA,GAAiB,IAAA;AAAA,EACjB,WAAA,GAAc,OAAA;AAAA,EACd,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,SAAA,GAAY,OAAO,MAAA,GAAS,CAAA;AAClC,EAAA,MAAM,cAAc,MAAA,CAAO,MAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,YAAY,MAAM;AACjC,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,eAAA,CAAgB,CAAC,IAAA,KAAS;AACxB,MAAA,IAAI,IAAA,KAAS,cAAc,CAAA,EAAG;AAC5B,QAAA,OAAO,CAAA;AAAA,MACT;AACA,MAAA,OAAO,IAAA,GAAO,CAAA;AAAA,IAChB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,SAAA,EAAW,WAAW,CAAC,CAAA;AAE3B,EAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,eAAA,CAAgB,CAAC,IAAA,KAAS;AACxB,MAAA,IAAI,SAAS,CAAA,EAAG;AACd,QAAA,OAAO,WAAA,GAAc,CAAA;AAAA,MACvB;AACA,MAAA,OAAO,IAAA,GAAO,CAAA;AAAA,IAChB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,SAAA,EAAW,WAAW,CAAC,CAAA;AAE3B,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,KAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,SAAA,EAAW;AAChB,MAAA,IAAI,KAAA,IAAS,CAAA,IAAK,KAAA,GAAQ,WAAA,EAAa;AACrC,QAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAW,WAAW;AAAA,GACzB;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,gBAAA,IAAoB,CAAC,SAAA,IAAa,SAAA,EAAW;AAElD,IAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,QAAA,EAAS;AAAA,IACX,GAAG,kBAAkB,CAAA;AAErB,IAAA,OAAO,MAAM,cAAc,UAAU,CAAA;AAAA,EACvC,GAAG,CAAC,gBAAA,EAAkB,oBAAoB,SAAA,EAAW,SAAA,EAAW,QAAQ,CAAC,CAAA;AAGzE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,IAAgB,WAAA,IAAe,WAAA,GAAc,CAAA,EAAG;AAClD,MAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,IACnB;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,YAAY,CAAC,CAAA;AAE9B,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA,EAAI,SAAS,CAAA,uBAAA,CAAA;AAAA,QAC/C,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,cAAc,CAAA,EAAA,CAAA,EAAK;AAAA,QACzC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,yDAAA;AAAA,YACV,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,cAAc,CAAA,EAAA,CAAA,EAAK;AAAA,YAE1C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wDAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAW,QAAA,EAAA,WAAA,EAAE,CAAA;AAAA,8BAC5B,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,iBAAA,EAAe,CAAA;AAAA,8BACtC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,kCAAA,EAAmC,QAAA,EAAA,iCAAA,EAEhD;AAAA,aAAA,EACF;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,wCAAA,EAA2C,YAAY,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MAC/E,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,cAAc,CAAA,EAAA,CAAA,EAAK;AAAA,MAC1C,YAAA,EAAc,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,MACrC,YAAA,EAAc,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,MACrC,GAAG,KAAA;AAAA,MAGJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,wBAAA;AAAA,YACV,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,cAAc,CAAA,EAAA,CAAA,EAAK;AAAA,YAE1C,QAAA,kBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,2DAAA;AAAA,gBACV,KAAA,EAAO;AAAA,kBACL,SAAA,EAAW,CAAA,YAAA,EAAe,YAAA,GAAe,GAAG,CAAA,EAAA;AAAA,iBAC9C;AAAA,gBAEC,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,qBACX,IAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBAEC,SAAA,EAAU,sCAAA;AAAA,oBACV,OAAO,EAAE,QAAA,EAAU,QAAQ,SAAA,EAAW,CAAA,EAAG,cAAc,CAAA,EAAA,CAAA,EAAK;AAAA,oBAG5D,QAAA,EAAA;AAAA,sCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gCAAA,EACb,QAAA,kBAAA,GAAA;AAAA,wBAAC,aAAA;AAAA,wBAAA;AAAA,0BACE,GAAG,6BAAA,CAA8B,KAAA,CAAM,OAAO;AAAA;AAAA,uBACjD,EACF,CAAA;AAAA,sBAGC,cAAA,oBACC,GAAA;AAAA,wBAAC,KAAA;AAAA,wBAAA;AAAA,0BACC,SAAA,EAAW,CAAA,qBAAA,EACT,WAAA,KAAgB,UAAA,GACZ,+CACA,UACN,CAAA,CAAA;AAAA,0BACA,KAAA,EAAO;AAAA,4BACL,OAAA,EAAA,CACG,MAAA,CAAO,MAAA,CAAO,gBAAgB,CAAA,CAAE,QAAQ,GAAA,EAAK,EAAE,CAAC,CAAA,IAC/C,EAAA,IAAM;AAAA;AACZ;AAAA,uBACF;AAAA,sCAIF,GAAA;AAAA,wBAAC,KAAA;AAAA,wBAAA;AAAA,0BACC,SAAA,EAAW,qCACT,KAAA,CAAM,UAAA,KAAe,SACjB,eAAA,GACA,KAAA,CAAM,eAAe,QAAA,GACnB,gBAAA,GACA,aACR,CAAA,CAAA,EACE,KAAA,CAAM,aAAa,KAAA,GACf,aAAA,GACA,MAAM,QAAA,KAAa,QAAA,GACjB,6BACA,gBACR,CAAA,CAAA;AAAA,0BAEA,QAAA,kBAAA,IAAA;AAAA,4BAAC,KAAA;AAAA,4BAAA;AAAA,8BACC,SAAA,EAAW,KAAK,OAAO,CAAA,oBAAA,CAAA;AAAA,8BACvB,KAAA,EAAO,EAAE,QAAA,EAAU,SAAA,EAAU;AAAA,8BAG7B,QAAA,EAAA;AAAA,gDAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,CAAA,mBAAA,EAAsB,KAAA,CAAM,UAAU,CAAA,CAAA,EACnD,QAAA,EAAA;AAAA,kCAAA,KAAA,CAAM,KAAA,oBACL,GAAA;AAAA,oCAAC,IAAA;AAAA,oCAAA;AAAA,sCACC,WAAW,CAAA,kCAAA,EAAqC,WAAW,SAAS,UAAA,KAAe,IAAA,GAAO,SAAS,UAAU,CAAA,CAAA;AAAA,sCAE5G,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,mCACT;AAAA,kCAED,MAAM,WAAA,oBACL,GAAA;AAAA,oCAAC,GAAA;AAAA,oCAAA;AAAA,sCACC,WAAW,CAAA,oBAAA,EAAuB,SAAS,SAAS,QAAA,KAAa,IAAA,GAAO,SAAS,QAAQ,CAAA,CAAA;AAAA,sCAExF,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA;AACT,iCAAA,EAEJ,CAAA;AAAA,gCAGC,KAAA,CAAM,UAAA,IAAc,KAAA,CAAM,aAAA,IAAiB,UAAA,oBAC1C,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,CAAA,KAAA,EAAQ,KAAA,CAAM,UAAU,CAAA,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,kCAAC,MAAA;AAAA,kCAAA;AAAA,oCACC,IAAA,EAAM,UAAA;AAAA,oCACN,WAAW,CAAA,iCAAA,EAAoC,WAAW,CAAA,MAAA,EAAS,WAAW,wBAAwB,WAAW,CAAA,GAAA,CAAA;AAAA,oCACjH,OAAA,EAAO,IAAA;AAAA,oCAEP,8BAAC,GAAA,EAAA,EAAE,IAAA,EAAM,KAAA,CAAM,UAAA,EAAa,gBAAM,UAAA,EAAW;AAAA;AAAA,iCAC/C,EACF;AAAA;AAAA;AAAA;AAEJ;AAAA;AACF;AAAA,mBAAA;AAAA,kBA9EK,KAAA,CAAM;AAAA,iBAgFd;AAAA;AAAA;AACH;AAAA,SACF;AAAA,QAEC,cAAc,CAAA,oBACb,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,KAAK,OAAO,CAAA,iEAAA,EAAoE,MAAM,UAAA,KAAe,QAAA,GAAW,WAAW,EAAE,CAAA,CAAA;AAAA,YAGxI,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,qBACT,KAAA,CAAM,UAAA,KAAe,WACjB,CAAA,EAAA,EAAK,OAAO,gDACZ,EACN,CAAA,CAAA;AAAA,kBAEA,QAAA,kBAAA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,WAAW,CAAA,wBAAA,EACT,KAAA,CAAM,UAAA,KAAe,QAAA,GAAW,mBAAmB,EACrD,CAAA,CAAA;AAAA,sBAEC,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,KAAA,qBACd,GAAA;AAAA,wBAAC,QAAA;AAAA,wBAAA;AAAA,0BAEC,SAAA,EAAW,CAAA,+CAAA,EACT,KAAA,KAAU,YAAA,GACN,aACA,+BACN,CAAA,CAAA;AAAA,0BACA,OAAA,EAAS,MAAM,SAAA,CAAU,KAAK,CAAA;AAAA,0BAC9B,YAAA,EAAY,CAAA,YAAA,EAAe,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,0BACpC,cAAA,EAAc,KAAA,KAAU,YAAA,GAAe,MAAA,GAAS;AAAA,yBAAA;AAAA,wBAR3C,OAAO,KAAK,CAAA;AAAA,uBAUpB;AAAA;AAAA;AACH;AAAA,eACF;AAAA,8BAGA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,gCACT,KAAA,CAAM,UAAA,KAAe,WACjB,CAAA,8CAAA,EAAiD,OAAO,KACxD,EACN,CAAA,CAAA;AAAA,kBAEA,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,UAAA,EAAY,YAAA,EAAc,QAAQ,QAAA,EAAU;AAAA;AAAA;AAC5D;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;AAEO,IAAM,4BAAA,GAAqD;AAAA,EAChE,UAAA,EAAY,gBAAA;AAAA,EACZ,WAAA,EAAa,UAAA;AAAA,EACb,UAAA,EAAY;AAAA,IACV,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU;AAAA,IAClC,EAAE,EAAA,EAAI,UAAA,EAAY,KAAA,EAAO,UAAA,EAAW;AAAA,IACpC,EAAE,EAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,MAAA;AAAO,GAC9B;AAAA,EACA,qBAAA,EAAuB,CAAC,QAAQ,CAAA;AAAA,EAChC,MAAA,EAAQ;AAAA;AAAA,IAEN,gBAAA,CAAiB;AAAA,MACf,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,kBAAA;AAAA,MACP,WAAA,EAAa,gCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,aAAA,CAAc;AAAA,MACZ,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,oCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,gBAAA,CAAiB;AAAA,MACf,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EAAO,gBAAA;AAAA,MACP,WAAA,EAAa,8BAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,aAAA,CAAc;AAAA,MACZ,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,kCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA;AAAA,IAED;AAAA,MACE,GAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,WAAA;AAAA,MACP,IAAA,EAAM,WAAA;AAAA,MACN,WAAA,EAAa,mCAAA;AAAA,MACb,YAAA,EAAc,EAAE,QAAA,EAAU,QAAA,EAAU,YAAY,MAAA,EAAO;AAAA,MACvD,OAAA,EAAS;AAAA,QACP,eAAA,EAAiB,IAAA;AAAA,QACjB,iBAAA,EAAmB;AAAA,OACrB;AAAA,MACA,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,WAAA,EAAa,0DAAA;AAAA,MACb,YAAA,EAAc,MAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA;AAAA,IAEA;AAAA,MACE,GAAA,EAAK,gBAAA;AAAA,MACL,KAAA,EAAO,sBAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,kCAAA;AAAA,MACb,GAAA,EAAK,GAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,YAAA,EAAc,GAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,YAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,oBAAA,CAAqB;AAAA,MACnB,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,WAAA,EAAa,kCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,eAAA,CAAgB;AAAA,MACd,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,0BAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,GAAA,EAAK,gBAAA;AAAA,MACL,KAAA,EAAO,gBAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,yCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,aAAA;AAAA,MACN,WAAA,EAAa,6CAAA;AAAA,MACb,YAAA,EAAc,UAAA;AAAA,MACd,OAAA,EAAS;AAAA,QACP,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,OAAA,EAAQ;AAAA,QACjC,EAAE,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,UAAA;AAAW,OACzC;AAAA,MACA,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACA;AAAA,MACE,GAAA,EAAK,kBAAA;AAAA,MACL,KAAA,EAAO,mBAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,2CAAA;AAAA,MACb,GAAA,EAAK,CAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,YAAA,EAAc,EAAA;AAAA,MACd,IAAA,EAAM,GAAA;AAAA,MACN,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACA;AAAA,MACE,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA,aAAA,CAAc;AAAA,MACZ,YAAA,EAAc,SAAA;AAAA,MACd,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,oCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA,IACD,kBAAA,CAAmB;AAAA,MACjB,YAAA,EAAc,SAAA;AAAA,MACd,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,WAAA,EAAa,0BAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA;AAAA,IAED;AAAA,MACE,GAAA,EAAK,kBAAA;AAAA,MACL,KAAA,EAAO,oBAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,yCAAA;AAAA,MACb,YAAA,EAAc,KAAA;AAAA,MACd,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,oBAAA;AAAA,MACL,KAAA,EAAO,2BAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,0DAAA;AAAA,MACb,GAAA,EAAK,GAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,GAAA;AAAA,MACN,YAAA,EAAc,GAAA;AAAA,MACd,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA;AAAA,IAEA;AAAA,MACE,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,IAAA,EAAM,YAAA;AAAA,MACN,WAAA,EAAa,EAAA;AAAA,MACb,GAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAO;AAAA;AACT,GACF;AAAA;AAAA,EAEA,gBAAA,EAAkB;AAAA,IAChB,WAAA,EAAa,mCAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN;AAAA,QACE,GAAA,EAAK,OAAA;AAAA,QACL,KAAA,EAAO,cAAA;AAAA,QACP,IAAA,EAAM,MAAA;AAAA,QACN,WAAA,EAAa;AAAA,OACf;AAAA,MACA;AAAA,QACE,GAAA,EAAK,aAAA;AAAA,QACL,KAAA,EAAO,oBAAA;AAAA,QACP,IAAA,EAAM,UAAA;AAAA,QACN,WAAA,EAAa,gDAAA;AAAA,QACb,IAAA,EAAM;AAAA,OACR;AAAA,MACA;AAAA,QACE,GAAA,EAAK,eAAA;AAAA,QACL,KAAA,EAAO,aAAA;AAAA,QACP,IAAA,EAAM,SAAA;AAAA,QACN,WAAA,EAAa,8BAAA;AAAA,QACb,YAAA,EAAc;AAAA,OAChB;AAAA,MACA;AAAA,QACE,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO,aAAA;AAAA,QACP,IAAA,EAAM,MAAA;AAAA,QACN,WAAA,EAAa,qCAAA;AAAA,QACb,mBAAA,EAAqB;AAAA,OACvB;AAAA,MACA;AAAA,QACE,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO,aAAA;AAAA,QACP,IAAA,EAAM,MAAA;AAAA,QACN,WAAA,EAAa,0BAAA;AAAA,QACb,mBAAA,EAAqB;AAAA;AACvB;AACF;AAEJ","file":"chunk-NGYR4RQF.js","sourcesContent":["import { Button } from \"../ui/button\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport type { ComponentProps } from \"react\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromWidgetSchema,\n} from \"../components/MediaRenderer\";\nimport type {\n  WidgetSchema,\n  BorderRadiusOptions,\n  ColorOptions,\n  AlignOptions,\n  FontSizeOptions,\n  PaddingOptions,\n  ButtonSizeOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n  getButtonSizeField,\n} from \"../core/fields\";\n\ntype CarouselSlide = {\n  id: string;\n  content: WidgetSchema;\n  title?: string;\n  description?: string;\n  buttonEnabled?: boolean;\n  buttonText?: string;\n  buttonVariant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"destructive\"\n    | \"ghost\"\n    | \"link\";\n  buttonLink?: string;\n};\n\ntype CarouselWidgetProps = ComponentProps<\"div\"> & {\n  slides?: CarouselSlide[];\n  autoScrollInterval?: number;\n  enableAutoScroll?: boolean;\n\n  // Layout\n  align?: AlignOptions;\n  carouselHeight?: number;\n  borderRadius?: BorderRadiusOptions;\n  padding?: PaddingOptions;\n\n  // Text Styling\n  headerSize?: FontSizeOptions;\n  headerColor?: ColorOptions;\n  textSize?: FontSizeOptions;\n  textColor?: ColorOptions;\n  textWidth?: string;\n\n  // Button\n  showButton?: boolean;\n  buttonColor?: ColorOptions;\n  buttonSize?: ButtonSizeOptions;\n\n  // Overlay\n  overlayEnabled?: boolean;\n  overlayType?: \"solid\" | \"gradient\";\n  overlayIntensity?: number;\n};\n\nexport function CarouselWidget({\n  slides = [],\n  autoScrollInterval = 3000,\n  enableAutoScroll = false,\n  carouselHeight = 400,\n  align = { vertical: \"bottom\", horizontal: \"left\" },\n  overlayIntensity = 40,\n  borderRadius = \"none\",\n  padding = 0,\n  textWidth = \"100%\",\n  headerSize = \"lg\",\n  headerColor = \"background\",\n  textSize = \"md\",\n  textColor = \"background\",\n  showButton = true,\n  buttonColor = \"background\",\n  buttonSize = \"default\",\n  overlayEnabled = true,\n  overlayType = \"solid\",\n  className,\n  ...props\n}: CarouselWidgetProps) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const hasSlides = slides.length > 0;\n  const totalSlides = slides.length;\n\n  const goToNext = useCallback(() => {\n    if (!hasSlides) return;\n    setCurrentIndex((prev) => {\n      if (prev === totalSlides - 1) {\n        return 0;\n      }\n      return prev + 1;\n    });\n  }, [hasSlides, totalSlides]);\n\n  const goToPrevious = useCallback(() => {\n    if (!hasSlides) return;\n    setCurrentIndex((prev) => {\n      if (prev === 0) {\n        return totalSlides - 1;\n      }\n      return prev - 1;\n    });\n  }, [hasSlides, totalSlides]);\n\n  const goToSlide = useCallback(\n    (index: number) => {\n      if (!hasSlides) return;\n      if (index >= 0 && index < totalSlides) {\n        setCurrentIndex(index);\n      }\n    },\n    [hasSlides, totalSlides],\n  );\n\n  // Auto-scroll effect\n  useEffect(() => {\n    if (!enableAutoScroll || !hasSlides || isHovered) return;\n\n    const intervalId = setInterval(() => {\n      goToNext();\n    }, autoScrollInterval);\n\n    return () => clearInterval(intervalId);\n  }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);\n\n  // Reset to first slide if slides change\n  useEffect(() => {\n    if (currentIndex >= totalSlides && totalSlides > 0) {\n      setCurrentIndex(0);\n    }\n  }, [totalSlides, currentIndex]);\n\n  if (!hasSlides) {\n    return (\n      <div\n        className={`rounded-${borderRadius} ${className} w-full overflow-hidden`}\n        style={{ minHeight: `${carouselHeight}px` }}\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full items-center justify-center bg-muted\"\n          style={{ minHeight: `${carouselHeight}px` }}\n        >\n          <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n            <div className=\"text-4xl\">🎠</div>\n            <p className=\"text-sm\">No slides added</p>\n            <p className=\"text-xs text-muted-foreground/70\">\n              Add slides to create a carousel\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`relative w-full overflow-hidden rounded-${borderRadius} ${className}`}\n      style={{ minHeight: `${carouselHeight}px` }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      {...props}\n    >\n      {/* Slides Container */}\n      <div\n        className=\"relative h-full w-full\"\n        style={{ minHeight: `${carouselHeight}px` }}\n      >\n        <div\n          className=\"flex h-full transition-transform duration-500 ease-in-out\"\n          style={{\n            transform: `translateX(-${currentIndex * 100}%)`,\n          }}\n        >\n          {slides.map((slide) => (\n            <div\n              key={slide.id}\n              className=\"relative h-full w-full flex-shrink-0\"\n              style={{ minWidth: \"100%\", minHeight: `${carouselHeight}px` }}\n            >\n              {/* Background image/content layer */}\n              <div className=\"absolute inset-0 h-full w-full\">\n                <MediaRenderer\n                  {...getMediaPropsFromWidgetSchema(slide.content)}\n                />\n              </div>\n\n              {/* Dark overlay for text readability */}\n              {overlayEnabled && (\n                <div\n                  className={`absolute inset-0 z-9 ${\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(\"%\", \"\")) ||\n                        40) / 100,\n                  }}\n                />\n              )}\n\n              {/* Content box */}\n              <div\n                className={`absolute inset-x-0 z-10 flex px-3 ${\n                  align.horizontal === \"left\"\n                    ? \"justify-start\"\n                    : align.horizontal === \"center\"\n                      ? \"justify-center\"\n                      : \"justify-end\"\n                } ${\n                  align.vertical === \"top\"\n                    ? \"top-0 pt-13\"\n                    : align.vertical === \"center\"\n                      ? \"top-1/2 -translate-y-1/2\"\n                      : \"bottom-0 pb-13\"\n                }`}\n              >\n                <div\n                  className={`p-${padding} flex flex-col gap-3`}\n                  style={{ maxWidth: textWidth }}\n                >\n                  {/* Heading and text */}\n                  <div className={`flex flex-col text-${align.horizontal}`}>\n                    {slide.title && (\n                      <h2\n                        className={`mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === \"md\" ? \"base\" : headerSize}`}\n                      >\n                        {slide.title}\n                      </h2>\n                    )}\n                    {slide.description && (\n                      <p\n                        className={`leading-[13px] text-${textColor} text-${textSize === \"md\" ? \"base\" : textSize}`}\n                      >\n                        {slide.description}\n                      </p>\n                    )}\n                  </div>\n\n                  {/* Button */}\n                  {slide.buttonText && slide.buttonEnabled && showButton && (\n                    <div className={`text-${align.horizontal}`}>\n                      <Button\n                        size={buttonSize}\n                        className={`rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`}\n                        asChild\n                      >\n                        <a href={slide.buttonLink}>{slide.buttonText}</a>\n                      </Button>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n      {/* Dots and Navigation */}\n      {totalSlides > 1 && (\n        <div\n          className={`p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === \"center\" ? \"h-full\" : \"\"}`}\n        >\n          {/* Pagination dots - always at bottom */}\n          <div\n            className={`flex items-center ${\n              align.horizontal === \"center\"\n                ? `p-${padding} absolute inset-x-0 bottom-3 justify-center`\n                : \"\"\n            }`}\n          >\n            <div\n              className={`flex items-center gap-2 ${\n                align.horizontal === \"center\" ? \"justify-center\" : \"\"\n              }`}\n            >\n              {slides.map((_, index) => (\n                <button\n                  key={`dot-${index}`}\n                  className={`h-[6px] w-[6px] rounded-full transition-colors ${\n                    index === currentIndex\n                      ? \"bg-white\"\n                      : \"bg-white/40 hover:bg-white/60\"\n                  }`}\n                  onClick={() => goToSlide(index)}\n                  aria-label={`Go to slide ${index + 1}`}\n                  aria-current={index === currentIndex ? \"true\" : \"false\"}\n                />\n              ))}\n            </div>\n          </div>\n\n          {/* Navigation arrows - position changes based on alignment */}\n          <div\n            className={`flex items-center gap-[10px] ${\n              align.horizontal === \"center\"\n                ? `absolute inset-x-0 top-1/2 justify-between px-${padding}`\n                : \"\"\n            }`}\n          >\n            <ScrollArrows onPrevious={goToPrevious} onNext={goToNext} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const carouselWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"CarouselWidget\",\n  displayName: \"Carousel\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"slides\"],\n  fields: [\n    // Styling tab - Text Styling group\n    getFontSizeField({\n      defaultValue: \"lg\",\n      key: \"headerSize\",\n      label: \"Header Font Size\",\n      description: \"Font size for the slide header\",\n      tab: \"styling\",\n      group: \"Text Styling\",\n    }),\n    getColorField({\n      defaultValue: \"background\",\n      key: \"headerColor\",\n      label: \"Header Color\",\n      description: \"Color variant for the slide header\",\n      tab: \"styling\",\n      group: \"Text Styling\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Text Styling\",\n    },\n    getFontSizeField({\n      defaultValue: \"md\",\n      key: \"textSize\",\n      label: \"Text Font Size\",\n      description: \"Font size for the slide text\",\n      tab: \"styling\",\n      group: \"Text Styling\",\n    }),\n    getColorField({\n      defaultValue: \"background\",\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Color variant for the slide text\",\n      tab: \"styling\",\n      group: \"Text Styling\",\n    }),\n    // Styling tab - Layout group\n    {\n      key: \"align\",\n      label: \"Alignment\",\n      type: \"alignment\",\n      description: \"Alignment of the carousel content\",\n      defaultValue: { vertical: \"bottom\", horizontal: \"left\" },\n      options: {\n        verticalEnabled: true,\n        horizontalEnabled: true,\n      },\n      tab: \"styling\",\n      group: \"Layout\",\n    },\n    {\n      key: \"textWidth\",\n      label: \"Content Width\",\n      type: \"text\",\n      description: \"Maximum width for slide content (e.g., 100%, 50%, 600px)\",\n      defaultValue: \"100%\",\n      tab: \"styling\",\n      group: \"Layout\",\n    },\n    // Styling tab - Design group\n    {\n      key: \"carouselHeight\",\n      label: \"Carousel Height (px)\",\n      type: \"number\",\n      description: \"Height of the carousel in pixels\",\n      min: 100,\n      max: 1000,\n      step: 10,\n      defaultValue: 400,\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    getBorderRadiusField({\n      defaultValue: \"md\",\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Rounded corners for the carousel\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getPaddingField({\n      defaultValue: 4,\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the carousel\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"overlayEnabled\",\n      label: \"Enable Overlay\",\n      type: \"boolean\",\n      description: \"Add background overlay to slide content\",\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 to add to the slide content\",\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 background (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    {\n      key: \"showButton\",\n      label: \"Show Button\",\n      type: \"boolean\",\n      description: \"Display the button in slide content\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      defaultValue: \"primary\",\n      key: \"buttonColor\",\n      label: \"Button Color\",\n      description: \"Color variant for the slide button\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"showButton\",\n    }),\n    getButtonSizeField({\n      defaultValue: \"default\",\n      key: \"buttonSize\",\n      label: \"Button Size\",\n      description: \"Size of the slide button\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"showButton\",\n    }),\n    // Behavior tab - Auto-Scroll group\n    {\n      key: \"enableAutoScroll\",\n      label: \"Enable Auto-Scroll\",\n      type: \"boolean\",\n      description: \"Automatically advance to the next slide\",\n      defaultValue: false,\n      tab: \"behavior\",\n      group: \"Auto-Scroll\",\n    },\n    {\n      key: \"autoScrollInterval\",\n      label: \"Auto-Scroll Interval (ms)\",\n      type: \"number\",\n      description: \"Time in milliseconds between automatic slide transitions\",\n      min: 1000,\n      max: 10000,\n      step: 500,\n      defaultValue: 3000,\n      tab: \"behavior\",\n      group: \"Auto-Scroll\",\n      requiresKeyToBeTrue: \"enableAutoScroll\",\n    },\n    // Data tab - Data Configuration group\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"\",\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 slide\",\n    fields: [\n      {\n        key: \"title\",\n        label: \"Custom Title\",\n        type: \"text\",\n        description: \"Override the item's title for this slide\",\n      },\n      {\n        key: \"description\",\n        label: \"Custom Description\",\n        type: \"textarea\",\n        description: \"Override the item's description for this slide\",\n        rows: 3,\n      },\n      {\n        key: \"buttonEnabled\",\n        label: \"Show Button\",\n        type: \"boolean\",\n        description: \"Show the button in the slide\",\n        defaultValue: false,\n      },\n      {\n        key: \"buttonText\",\n        label: \"Button Text\",\n        type: \"text\",\n        description: \"Text to display on the slide button\",\n        requiresKeyToBeTrue: \"buttonEnabled\",\n      },\n      {\n        key: \"buttonLink\",\n        label: \"Button Link\",\n        type: \"text\",\n        description: \"URL for the slide button\",\n        requiresKeyToBeTrue: \"buttonEnabled\",\n      },\n    ],\n  },\n} as const satisfies WidgetPropertySchema;\n"]}