@opensite/ui 0.8.1 → 0.8.3

package/dist/carousel-horizontal-cards.cjs

@@ -1090,19 +1090,21 @@ function CarouselHorizontalCards({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
+                    "flex flex-row justify-start gap-2",
                     carouselClassName
                   ),
                   children: [
                     items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
                       framerMotion.motion.div,
                       {
-                        className: cn(
-                          "rounded-lg last:pr-[5%] md:last:pr-[33%]"
-                        ),
+                        className: cn("rounded-lg last:pr-[5%] md:last:pr-[33%]"),
                         initial: { opacity: 0, y: 20 },
                         animate: { opacity: 1, y: 0 },
-                        transition: { duration: 0.5, delay: 0.2 * index, ease: "easeOut" },
+                        transition: {
+                          duration: 0.5,
+                          delay: 0.2 * index,
+                          ease: "easeOut"
+                        },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
@@ -1174,7 +1176,7 @@ function CarouselHorizontalCards({
               onNext: scrollRight,
               canScrollPrevious: !isAtStart,
               canScrollNext: !isAtEnd,
-              className: cn("mr-0 md:mr-10", navigationClassName)
+              className: cn("mr-0", navigationClassName)
             }
           )
         ] })

package/dist/carousel-horizontal-cards.js

@@ -1069,19 +1069,21 @@ function CarouselHorizontalCards({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
+                    "flex flex-row justify-start gap-2",
                     carouselClassName
                   ),
                   children: [
                     items?.map((item, index) => /* @__PURE__ */ jsx(
                       motion.div,
                       {
-                        className: cn(
-                          "rounded-lg last:pr-[5%] md:last:pr-[33%]"
-                        ),
+                        className: cn("rounded-lg last:pr-[5%] md:last:pr-[33%]"),
                         initial: { opacity: 0, y: 20 },
                         animate: { opacity: 1, y: 0 },
-                        transition: { duration: 0.5, delay: 0.2 * index, ease: "easeOut" },
+                        transition: {
+                          duration: 0.5,
+                          delay: 0.2 * index,
+                          ease: "easeOut"
+                        },
                         children: /* @__PURE__ */ jsx(
                           "div",
                           {
@@ -1153,7 +1155,7 @@ function CarouselHorizontalCards({
               onNext: scrollRight,
               canScrollPrevious: !isAtStart,
               canScrollNext: !isAtEnd,
-              className: cn("mr-0 md:mr-10", navigationClassName)
+              className: cn("mr-0", navigationClassName)
             }
           )
         ] })

package/dist/carousel-image-hero.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React5 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // components/blocks/carousel/carousel-image-hero.tsx
 function cn(...inputs) {
@@ -107,7 +107,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React5__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -128,7 +128,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React5__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -146,7 +146,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React5__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -159,7 +159,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React5__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -168,7 +168,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 = React5__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -352,7 +352,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React5__namespace.forwardRef(
   ({
     children,
     className,
@@ -450,111 +450,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  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 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__namespace.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__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.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",
@@ -564,7 +459,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React5__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -869,7 +764,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React5__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -937,43 +832,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__namespace.useState(0);
-  React__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
-  const goToNextImage = () => {
+  const [currentImageIndex, setCurrentImageIndex] = React5__namespace.useState(0);
+  const intervalRef = React5__namespace.useRef(null);
+  const goToNext = React5__namespace.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__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React5__namespace.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
+  React5__namespace.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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -995,11 +904,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__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1023,50 +936,79 @@ function CarouselImageHero({
             index
           )),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: badge }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge })),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-primary-foreground dark:text-primary", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: badge })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-xl text-balance text-shadow",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-center gap-4 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions()
+                }
+              )
+            ] })
+          }
+        )
       ]
     }
   );

package/dist/carousel-image-hero.d.cts

@@ -82,10 +82,6 @@ interface CarouselImageHeroProps {
      * Additional CSS classes for the image container
      */
     imageClassName?: string;
-    /**
-     * Additional CSS classes for the navigation arrows
-     */
-    navigationClassName?: string;
     /**
      * Additional CSS classes for the indicators
      */
@@ -111,6 +107,6 @@ interface CarouselImageHeroProps {
      */
     patternOpacity?: number;
 }
-declare function CarouselImageHero({ badge, heading, description, actions, actionsSlot, images, autoPlayInterval, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, navigationClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselImageHeroProps): React.JSX.Element;
+declare function CarouselImageHero({ badge, heading, description, actions, actionsSlot, images, autoPlayInterval, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselImageHeroProps): React.JSX.Element;
 
 export { CarouselImageHero, type CarouselImageHeroProps };

package/dist/carousel-image-hero.d.ts

@@ -82,10 +82,6 @@ interface CarouselImageHeroProps {
      * Additional CSS classes for the image container
      */
     imageClassName?: string;
-    /**
-     * Additional CSS classes for the navigation arrows
-     */
-    navigationClassName?: string;
     /**
      * Additional CSS classes for the indicators
      */
@@ -111,6 +107,6 @@ interface CarouselImageHeroProps {
      */
     patternOpacity?: number;
 }
-declare function CarouselImageHero({ badge, heading, description, actions, actionsSlot, images, autoPlayInterval, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, navigationClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselImageHeroProps): React.JSX.Element;
+declare function CarouselImageHero({ badge, heading, description, actions, actionsSlot, images, autoPlayInterval, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselImageHeroProps): React.JSX.Element;
 
 export { CarouselImageHero, type CarouselImageHeroProps };