@opensite/ui 1.6.9 → 1.7.0

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

@@ -1,7 +1,8 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
+var AutoScroll = require('embla-carousel-auto-scroll');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -9,6 +10,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var DialogPrimitive = require('@radix-ui/react-dialog');
+var useEmblaCarousel = require('embla-carousel-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,9 +32,11 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var AutoScroll__default = /*#__PURE__*/_interopDefault(AutoScroll);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 // components/blocks/hero/hero-conversion-video-play.tsx
 function cn(...inputs) {
@@ -111,7 +117,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -132,7 +138,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -150,7 +156,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -163,7 +169,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -172,7 +178,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React__namespace.useCallback(
+  const handleClick = React4__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -356,7 +362,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -462,10 +468,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React4__namespace.useState(null);
+  const [isLoading, setIsLoading] = React4__namespace.useState(true);
+  const [error, setError] = React4__namespace.useState(null);
+  const { url, iconName } = React4__namespace.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`;
@@ -474,7 +480,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -648,6 +654,135 @@ function DialogTitle({
     }
   );
 }
+var CarouselContext = React4__namespace.createContext(null);
+function useCarousel() {
+  const context = React4__namespace.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__default.default(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React4__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React4__namespace.useState(false);
+  const onSelect = React4__namespace.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React4__namespace.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React4__namespace.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React4__namespace.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React4__namespace.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React4__namespace.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsxRuntime.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",
@@ -657,7 +792,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -962,7 +1097,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -1050,70 +1185,48 @@ function HeroConversionVideoPlay({
   logosClassName,
   optixFlowConfig
 }) {
-  const [isVideoOpen, setIsVideoOpen] = React.useState(false);
-  const renderActions = React.useMemo(() => {
+  const [isVideoOpen, setIsVideoOpen] = React4.useState(false);
+  const renderActions = React4.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       primaryAction && (() => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = primaryAction;
+        return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
             asButton: true,
             className: actionClassName,
             ...pressableProps,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex items-center gap-2.5", children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                icon,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-                iconAfter
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              iconAfter
+            ] })
           }
         );
       })(),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      videoUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 16,
-                className: "m-auto fill-white stroke-white"
-              }
-            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: videoButtonLabel })
           ]
         }
       )
     ] });
   }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
-  const renderLogos = React.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__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src,
-          alt: logo.alt,
-          className: logo.className,
-          optixFlowConfig
-        },
-        index
-      );
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(React4.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
@@ -1125,42 +1238,91 @@ function HeroConversionVideoPlay({
         containerClassName,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-8",
+                  contentClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-wrap items-center justify-center gap-8",
+                        actionsClassName
+                      ),
+                      children: renderActions
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
               img.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium text-accent-foreground"), children: logosTagline }) : logosTagline),
-            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium "), children: logosTagline }) : logosTagline),
+            logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
+              {
+                opts: { loop: true },
+                plugins: [AutoScroll__default.default({ playOnInit: true, speed: 1 })],
+                className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.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__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
     ] }) })
   ] });
 }