@opensite/ui 0.8.1 → 0.8.3

package/dist/carousel-image-hero.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default from 'react';
+import * as React5 from 'react';
+import React5__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -86,7 +86,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -107,7 +107,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -125,7 +125,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React5.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -138,7 +138,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React5.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -147,7 +147,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 = React5.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -331,7 +331,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React5.forwardRef(
   ({
     children,
     className,
@@ -429,111 +429,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  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 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}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -543,7 +438,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React5__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -848,7 +743,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React5__default.forwardRef(
   ({
     id,
     title,
@@ -916,43 +811,57 @@ function CarouselImageHero({
   actions,
   actionsSlot,
   images,
-  autoPlayInterval = 5e3,
+  autoPlayInterval = 7500,
   className,
-  containerClassName,
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageClassName,
-  navigationClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
-  const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
-  const goToNextImage = () => {
+  const [currentImageIndex, setCurrentImageIndex] = React5.useState(0);
+  const intervalRef = React5.useRef(null);
+  const goToNext = React5.useCallback(() => {
     setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-  };
-  const goToPreviousImage = () => {
-    setCurrentImageIndex(
-      (prevIndex) => (prevIndex - 1 + (images?.length ?? 1)) % (images?.length ?? 1)
-    );
-  };
+  }, [images?.length]);
+  const resetInterval = React5.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React5.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
+  React5.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -974,11 +883,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1002,50 +915,79 @@ function CarouselImageHero({
             index
           )),
           /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: goToPreviousImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute left-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: goToNextImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute right-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Next image",
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
+            "div",
             {
-              onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
-                index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3",
+                indicatorsClassName
               ),
-              "aria-label": `Go to image ${index + 1}`
-            },
-            index
-          )) })
+              children: images?.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => goToSlide(index),
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
+                    index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                  ),
+                  "aria-label": `Go to image ${index + 1}`
+                },
+                index
+              ))
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            badge && (typeof badge === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsx("span", { children: badge }) }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-primary-foreground dark:text-primary", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-16 md:py-20"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm",
+                      badgeClassName
+                    ),
+                    children: /* @__PURE__ */ jsx("span", { children: badge })
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-xl text-balance text-shadow",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-center gap-4 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions()
+                }
+              )
+            ] })
+          }
+        )
       ]
     }
   );