@opensite/ui 1.6.9 → 1.7.0

package/dist/hero-conversion-video-play.js

@@ -1,6 +1,7 @@
 "use client";
-import * as React from 'react';
-import React__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
+import * as React4 from 'react';
+import React4__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
+import AutoScroll from 'embla-carousel-auto-scroll';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -8,6 +9,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import useEmblaCarousel from 'embla-carousel-react';
 
 // components/blocks/hero/hero-conversion-video-play.tsx
 function cn(...inputs) {
@@ -88,7 +90,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -109,7 +111,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -127,7 +129,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -140,7 +142,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -149,7 +151,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -333,7 +335,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -439,10 +441,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const { url, iconName } = React4.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
@@ -451,7 +453,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -625,6 +627,135 @@ function DialogTitle({
     }
   );
 }
+var CarouselContext = React4.createContext(null);
+function useCarousel() {
+  const context = React4.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
+  const [canScrollNext, setCanScrollNext] = React4.useState(false);
+  const onSelect = React4.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React4.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React4.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React4.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React4.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React4.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -634,7 +765,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -939,7 +1070,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -1032,64 +1163,42 @@ function HeroConversionVideoPlay({
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       primaryAction && (() => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
-        return /* @__PURE__ */ jsxs(
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = primaryAction;
+        return /* @__PURE__ */ jsx(
           Pressable,
           {
             asButton: true,
             className: actionClassName,
             ...pressableProps,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex items-center gap-2.5", children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                icon,
-                /* @__PURE__ */ jsx("span", { children: label }),
-                iconAfter
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute bottom-16 -left-16 aspect-square w-16 rounded-full bg-pink-400 transition-all duration-300 group-hover:bottom-1/2 group-hover:-left-5 group-hover:w-[110%] group-hover:translate-y-1/2" })
-            ]
+            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { children: label }),
+              iconAfter
+            ] })
           }
         );
       })(),
-      /* @__PURE__ */ jsxs(
+      videoUrl && /* @__PURE__ */ jsxs(
         Pressable,
         {
-          href: "#",
           onClick: () => setIsVideoOpen(true),
           asButton: true,
-          variant: "ghost",
-          className: "flex h-fit w-fit items-center gap-2 text-lg font-semibold uppercase hover:bg-transparent",
+          variant: "link",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary", children: /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 16,
-                className: "m-auto fill-white stroke-white"
-              }
-            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play" }) }),
             /* @__PURE__ */ jsx("div", { children: videoButtonLabel })
           ]
         }
       )
     ] });
   }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return logos.map((logo, index) => {
-      const src = typeof logo.src === "string" ? logo.src : logo.src.light;
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt: logo.alt,
-          className: logo.className,
-          optixFlowConfig
-        },
-        index
-      );
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       Section,
@@ -1102,42 +1211,91 @@ function HeroConversionVideoPlay({
         containerClassName,
         children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-8",
+                  contentClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl text-balance",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-wrap items-center justify-center gap-8",
+                        actionsClassName
+                      ),
+                      children: renderActions
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: image.src,
                 alt: image.alt,
-                className: cn("size-full object-cover object-center", image.className),
+                className: cn(
+                  "size-full object-cover object-center",
+                  image.className
+                ),
                 optixFlowConfig
               }
             ) }) }) }) : null })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium text-accent-foreground"), children: logosTagline }) : logosTagline),
-            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium "), children: logosTagline }) : logosTagline),
+            logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
+              Carousel,
+              {
+                opts: { loop: true },
+                plugins: [AutoScroll({ playOnInit: true, speed: 1 })],
+                className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: typeof logo.src === "string" ? logo.src : logo.src.light,
+                    alt: logo.alt,
+                    className: cn(
+                      "h-8 w-full object-fill",
+                      logo.imgClassName
+                    ),
+                    optixFlowConfig
+                  }
+                ) }, index)) })
+              }
+            ) : null
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          className: "h-full w-full",
-          src: videoUrl,
-          title: videoDialogTitle,
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true
-        }
-      ) })
+      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
     ] }) })
   ] });
 }

package/dist/hero-customer-support-layered.cjs

@@ -961,7 +961,7 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {

package/dist/hero-customer-support-layered.js

@@ -940,7 +940,7 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {

package/dist/hero-dashed-border-features.cjs

@@ -1006,30 +1006,39 @@ function HeroDashedBorderFeatures({
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center mt-4 md:flex-row gap-4",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            icon,
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
@@ -1084,7 +1093,7 @@ function HeroDashedBorderFeatures({
                 "p",
                 {
                   className: cn(
-                    "mx-auto mb-6 max-w-2xl text-center lg:text-xl text-balance",
+                    "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description

package/dist/hero-dashed-border-features.js

@@ -985,30 +985,39 @@ function HeroDashedBorderFeatures({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center mt-4 md:flex-row gap-4",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            icon,
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
@@ -1063,7 +1072,7 @@ function HeroDashedBorderFeatures({
                 "p",
                 {
                   className: cn(
-                    "mx-auto mb-6 max-w-2xl text-center lg:text-xl text-balance",
+                    "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description