@opensite/ui 0.7.3 → 0.7.5

package/dist/registry.js

@@ -18240,6 +18240,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
+  containerClassName = "h-full flex flex-col justify-center",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -18255,40 +18256,44 @@ function CarouselFullscreenScrollFx({
   patternOpacity = 0.033
 }) {
   const containerRef = React52.useRef(null);
+  const scrollContainerRef = React52.useRef(null);
   const [activeIndex, setActiveIndex] = React52.useState(0);
   React52.useEffect(() => {
-    const observers = [];
-    slides?.forEach((slide, index) => {
-      const element = document.getElementById(`fullscreen-${slide.id}`);
-      if (element) {
-        const observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
-                setActiveIndex(index);
-              }
-            });
-          },
-          { threshold: 0.5 }
-        );
-        observer.observe(element);
-        observers.push(observer);
-      }
-    });
-    return () => {
-      observers.forEach((observer) => observer.disconnect());
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer || !slides?.length) return;
+    const handleScroll = () => {
+      const scrollLeft = scrollContainer.scrollLeft;
+      const slideWidth = scrollContainer.clientWidth;
+      const newIndex = Math.round(scrollLeft / slideWidth);
+      setActiveIndex(newIndex);
     };
+    scrollContainer.addEventListener("scroll", handleScroll);
+    return () => scrollContainer.removeEventListener("scroll", handleScroll);
   }, [slides]);
+  const scrollToSlide = React52.useCallback((index) => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    const slideWidth = scrollContainer.clientWidth;
+    if (typeof scrollContainer.scrollTo === "function") {
+      scrollContainer.scrollTo({
+        left: slideWidth * index,
+        behavior: "smooth"
+      });
+    } else {
+      scrollContainer.scrollLeft = slideWidth * index;
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     Section,
     {
       ref: containerRef,
       background,
       spacing,
-      className: cn(className),
+      className: cn("relative overflow-hidden", className),
       pattern,
       patternOpacity,
       containerMaxWidth,
+      containerClassName: "p-0",
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -18300,10 +18305,7 @@ function CarouselFullscreenScrollFx({
             children: slides?.map((slide, index) => /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => {
-                  const element = document.getElementById(`fullscreen-${slide.id}`);
-                  element?.scrollIntoView({ behavior: "smooth" });
-                },
+                onClick: () => scrollToSlide(index),
                 className: cn(
                   "h-3 w-3 rounded-full border-2 transition-all",
                   activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
@@ -18314,76 +18316,115 @@ function CarouselFullscreenScrollFx({
             ))
           }
         ),
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            id: `fullscreen-${slide.id}`,
-            className: cn(
-              "relative flex h-screen w-full items-center justify-center overflow-hidden",
-              slide.className
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
-                /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: slide.image,
-                    alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                    className: cn(
-                      "h-full w-full object-cover",
-                      slide.imageClassName
-                    ),
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0",
-                    style: {
-                      backgroundColor: slide.overlayColor || "rgba(0, 0, 0, 0.5)"
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(
+            ref: scrollContainerRef,
+            className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
+            style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+            children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
+              const renderActions = React52.useMemo(() => {
+                if (!slide.actions || slide.actions.length === 0) return null;
+                return slide.actions.map((action, actionIndex) => {
+                  const {
+                    label,
+                    icon,
+                    iconAfter,
+                    children,
+                    className: actionClassName,
+                    asButton,
+                    ...pressableProps
+                  } = action;
+                  return /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      asButton: asButton ?? true,
+                      className: actionClassName,
+                      ...pressableProps,
+                      children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                        icon,
+                        label,
+                        iconAfter
+                      ] })
+                    },
+                    actionIndex
+                  );
+                });
+              }, [slide.actions]);
+              return /* @__PURE__ */ jsxs(
                 "div",
                 {
+                  id: `fullscreen-${slide.id}`,
                   className: cn(
-                    "relative z-10 mx-auto max-w-4xl px-6 text-center text-white",
-                    contentClassName
+                    "relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
+                    slide.className
                   ),
                   children: [
-                    slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
-                          subtitleClassName
-                        ),
-                        children: slide.subtitle
-                      }
-                    ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
-                    slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        className: cn(
-                          "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                          titleClassName
-                        ),
-                        children: slide.title
-                      }
-                    ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
-                    slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
-                      "p",
+                    /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+                      /* @__PURE__ */ jsx(
+                        Img,
+                        {
+                          src: slide.image,
+                          alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                          className: cn(
+                            "h-full w-full object-cover",
+                            slide.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute inset-0",
+                          style: {
+                            backgroundColor: slide.overlayColor || "rgba(0, 0, 0, 0.5)"
+                          }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
                       {
                         className: cn(
-                          "mx-auto max-w-2xl text-lg text-white/80 md:text-xl",
-                          descriptionClassName
+                          "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                          contentClassName
                         ),
-                        children: slide.description
+                        children: [
+                          slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
+                                subtitleClassName
+                              ),
+                              children: slide.subtitle
+                            }
+                          ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
+                          slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
+                            "h2",
+                            {
+                              className: cn(
+                                "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                                titleClassName
+                              ),
+                              children: slide.title
+                            }
+                          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
+                          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "mx-auto text-lg text-white/80 md:text-xl text-balance",
+                                descriptionClassName
+                              ),
+                              children: slide.description
+                            }
+                          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description })),
+                          renderActions && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: renderActions })
+                        ]
                       }
-                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description })),
+                    ),
                     index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -18393,32 +18434,32 @@ function CarouselFullscreenScrollFx({
                         ),
                         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
                           /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-                          /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-gradient-to-b from-white/50 to-transparent" })
+                          /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
                         ] })
                       }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute bottom-8 right-8 text-sm text-white/50",
+                          counterClassName
+                        ),
+                        children: [
+                          String(index + 1).padStart(2, "0"),
+                          " /",
+                          " ",
+                          String(slides?.length ?? 0).padStart(2, "0")
+                        ]
+                      }
                     )
                   ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "absolute bottom-8 right-8 text-sm text-white/50",
-                    counterClassName
-                  ),
-                  children: [
-                    String(index + 1).padStart(2, "0"),
-                    " /",
-                    " ",
-                    String(slides?.length ?? 0).padStart(2, "0")
-                  ]
-                }
-              )
-            ]
-          },
-          slide.id
-        ))
+                },
+                slide.id
+              );
+            })
+          }
+        )
       ]
     }
   );
@@ -76900,7 +76941,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo440 } = React52;
+var { useMemo: useMemo441 } = React52;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -76967,7 +77008,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo440(() => {
+  const renderCloseButton = useMemo441(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -76981,12 +77022,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo440(() => {
+  const renderHeader = useMemo441(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo440(() => {
+  const renderForm = useMemo441(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -77048,7 +77089,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo441 } = React52;
+var { useMemo: useMemo442 } = React52;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -77124,7 +77165,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo441(() => {
+  const renderImage = useMemo442(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -77137,7 +77178,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo441(() => {
+  const renderCloseButton = useMemo442(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -77153,7 +77194,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo441(() => {
+  const renderForm = useMemo442(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -77216,7 +77257,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo441(() => {
+  const renderFooter = useMemo442(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -77244,7 +77285,7 @@ function OfferModalMembershipImage({
     }
   ) });
 }
-var { useMemo: useMemo442 } = React52;
+var { useMemo: useMemo443 } = React52;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -77326,7 +77367,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo442(() => {
+  const renderLogo = useMemo443(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -77340,7 +77381,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo442(() => {
+  const renderHeader = useMemo443(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -77350,7 +77391,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo442(() => {
+  const renderForm = useMemo443(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -77398,7 +77439,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo442(() => {
+  const renderLegal = useMemo443(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -77412,7 +77453,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo442(() => {
+  const renderImage = useMemo443(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",