@opensite/ui 0.7.9 → 0.8.0

package/dist/carousel-horizontal-cards.js

@@ -4,14 +4,119 @@ import React__default from 'react';
 import { motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/carousel/carousel-horizontal-cards.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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;
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -430,110 +535,49 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   className,
-  alt
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  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",
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
       {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
+        onClick: onPrevious,
+        disabled: !canScrollPrevious,
+        "aria-label": previousAriaLabel,
+        asButton: true,
+        className: cn(
+          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
+          buttonClassName
+        ),
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: previousIcon, size: iconSize })
       }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
       {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
+        onClick: onNext,
+        disabled: !canScrollNext,
+        "aria-label": nextAriaLabel,
+        asButton: true,
+        className: cn(
+          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
+          buttonClassName
+        ),
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: nextIcon, size: iconSize })
       }
-    );
-  }
-  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",
@@ -932,28 +976,22 @@ function CarouselHorizontalCards({
   const carouselRef = React.useRef(null);
   const [isAtStart, setIsAtStart] = React.useState(true);
   const [isAtEnd, setIsAtEnd] = React.useState(false);
-  const getCardWidth = React.useCallback(() => {
-    if (typeof window === "undefined") return 320;
-    if (window.innerWidth >= 1024) return 400;
-    if (window.innerWidth >= 640) return 360;
-    return 320;
-  }, []);
-  const scroll = (direction) => {
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
+    }
+  };
+  const scrollRight = () => {
     if (carouselRef.current) {
-      const { scrollLeft } = carouselRef.current;
-      const cardWidth = getCardWidth();
-      const gap = 16;
-      const scrollAmount = cardWidth + gap;
-      const newScrollLeft = direction === "left" ? scrollLeft - scrollAmount : scrollLeft + scrollAmount;
-      carouselRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth" });
+      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
     }
   };
   React.useEffect(() => {
     const checkScrollPosition = () => {
       if (carouselRef.current) {
-        const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
-        setIsAtStart(scrollLeft < 10);
-        setIsAtEnd(scrollLeft + clientWidth >= scrollWidth - 10);
+        const { scrollLeft: scrollLeft2, scrollWidth, clientWidth } = carouselRef.current;
+        setIsAtStart(scrollLeft2 < 10);
+        setIsAtEnd(scrollLeft2 + clientWidth >= scrollWidth - 10);
       }
     };
     const currentRef = carouselRef.current;
@@ -969,41 +1007,6 @@ function CarouselHorizontalCards({
       window.removeEventListener("resize", checkScrollPosition);
     };
   }, [items]);
-  const renderItems = () => {
-    if (itemsSlot) return itemsSlot;
-    if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: cn(
-          "group w-[320px] shrink-0 snap-start sm:w-[360px] lg:w-[400px]",
-          item.className
-        ),
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.5, delay: index * 0.1 },
-        children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
-          /* @__PURE__ */ jsx(
-            Img,
-            {
-              alt: typeof item.title === "string" ? item.title : `Card ${index + 1}`,
-              className: cn("aspect-video w-full object-cover transition-transform group-hover:scale-105", item.imageClassName),
-              src: item.imageSrc,
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsx("div", { children: item.title })),
-            (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-              item.count !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xl font-bold", children: item.count }),
-              item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsx("div", { children: item.countLabel }))
-            ] })
-          ] })
-        ] })
-      },
-      item.id
-    ));
-  };
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1014,74 +1017,143 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
-          heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
-            typeof heading === "string" ? /* @__PURE__ */ jsx(
-              "h2",
-              {
-                id: "carousel-title",
-                className: cn("text-2xl font-bold tracking-tight text-card-foreground md:text-3xl", headingClassName),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }),
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/chevron-right",
-                size: 24,
-                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
-              }
-            )
-          ] }),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex items-center justify-between gap-4",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { children: [
+              heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
+                typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: "carousel-title",
+                    className: cn(
+                      "text-2xl font-bold tracking-tight text-card-foreground md:text-3xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }),
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/chevron-right",
+                    size: 24,
+                    className: "ml-2 shrink-0 self-center transition-transform group-hover:translate-x-1"
+                  }
+                )
+              ] }),
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground",
+                    subtitleClassName
+                  ),
+                  children: subtitle
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
+              className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-4 [scrollbar-width:none] md:py-6",
               ref: carouselRef,
-              className: cn(
-                "scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4",
-                "snap-x snap-mandatory scroll-pl-0",
-                carouselClassName
-              ),
-              children: renderItems()
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-row justify-start gap-4 pl-4",
+                    carouselClassName
+                  ),
+                  children: [
+                    items?.map((item, index) => /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        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" },
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "group w-56 shrink-0 md:w-96",
+                              item.className
+                            ),
+                            children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
+                              /* @__PURE__ */ jsx(
+                                Img,
+                                {
+                                  alt: typeof item.title === "string" ? item.title : `Card ${index + 1}`,
+                                  className: cn(
+                                    "aspect-video w-full object-cover transition-transform group-hover:scale-105",
+                                    item.imageClassName
+                                  ),
+                                  src: item.imageSrc,
+                                  optixFlowConfig
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+                                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsx("div", { children: item.title })),
+                                (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+                                  item.count !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xl font-bold", children: item.count }),
+                                  item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsx("div", { children: item.countLabel }))
+                                ] }),
+                                item.actions && item.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: item.actions.map((action, actionIndex) => {
+                                  const {
+                                    label,
+                                    icon,
+                                    iconAfter,
+                                    children,
+                                    className: actionClassName,
+                                    asButton,
+                                    ...pressableProps
+                                  } = action;
+                                  return /* @__PURE__ */ jsx(
+                                    Pressable,
+                                    {
+                                      asButton,
+                                      className: actionClassName,
+                                      ...pressableProps,
+                                      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                        icon,
+                                        label,
+                                        iconAfter
+                                      ] })
+                                    },
+                                    actionIndex
+                                  );
+                                }) })
+                              ] })
+                            ] })
+                          }
+                        )
+                      },
+                      item.id
+                    )),
+                    itemsSlot
+                  ]
+                }
+              )
             }
           ),
-          !isAtStart && /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: () => scroll("left"),
-              className: cn(
-                "absolute left-4 top-1/2 z-10 -translate-y-1/2",
-                "flex h-12 w-12 items-center justify-center",
-                "rounded-full border border-border/50 bg-background shadow-lg",
-                "text-foreground transition-all duration-200",
-                "hover:bg-accent hover:shadow-xl hover:scale-105",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                navigationClassName
-              ),
-              "aria-label": "Scroll left",
-              asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
-            }
-          ),
-          !isAtEnd && /* @__PURE__ */ jsx(
-            Pressable,
+          /* @__PURE__ */ jsx(
+            CarouselPagination,
             {
-              onClick: () => scroll("right"),
-              className: cn(
-                "absolute right-4 top-1/2 z-10 -translate-y-1/2",
-                "flex h-12 w-12 items-center justify-center",
-                "rounded-full border border-border/50 bg-background shadow-lg",
-                "text-foreground transition-all duration-200",
-                "hover:bg-accent hover:shadow-xl hover:scale-105",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                navigationClassName
-              ),
-              "aria-label": "Scroll right",
-              asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              onPrevious: scrollLeft,
+              onNext: scrollRight,
+              canScrollPrevious: !isAtStart,
+              canScrollNext: !isAtEnd,
+              className: cn("mr-0 md:mr-10", navigationClassName)
             }
           )
         ] })