@opensite/ui 0.7.9 → 0.8.0

package/dist/carousel-feature-badge.js

@@ -1,15 +1,15 @@
 "use client";
+import * as React6 from 'react';
+import React6__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React4 from 'react';
-import React4__default from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
 import { Img } from '@page-speed/img';
+import useEmblaCarousel from 'embla-carousel-react';
 
-// lib/utils.ts
+// components/blocks/carousel/carousel-feature-badge.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -120,7 +120,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React4.useMemo(() => {
+  const linkType = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -141,7 +141,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React4.useMemo(() => {
+  const normalizedHref = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -159,7 +159,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React4.useMemo(() => {
+  const target = React6.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -172,7 +172,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React4.useMemo(() => {
+  const rel = React6.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -181,7 +181,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React4.useCallback(
+  const handleClick = React6.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -365,7 +365,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React4.forwardRef(
+var Pressable = React6.forwardRef(
   ({
     children,
     className,
@@ -471,10 +471,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React4.useState(null);
-  const [isLoading, setIsLoading] = React4.useState(true);
-  const [error, setError] = React4.useState(null);
-  const { url, iconName } = React4.useMemo(() => {
+  const [svgContent, setSvgContent] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  const { url, iconName } = React6.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}`;
@@ -483,7 +483,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -568,192 +568,49 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-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,
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   className,
-  children,
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  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();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        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 })
       }
-    },
-    [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
-    }
-  );
-}
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      "data-slot": "carousel-previous",
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      asButton: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-}
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      "data-slot": "carousel-next",
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      asButton: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        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 })
+      }
+    )
+  ] });
 }
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
@@ -764,7 +621,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React4__default.forwardRef(
+var Container = React6__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -1069,7 +926,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React4__default.forwardRef(
+var Section = React6__default.forwardRef(
   ({
     id,
     title,
@@ -1157,27 +1014,62 @@ function CarouselFeatureBadge({
   slideLayoutVariant = "square",
   containerMaxWidth = "2xl"
 }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel();
+  const [canScrollPrev, setCanScrollPrev] = React6.useState(false);
+  const [canScrollNext, setCanScrollNext] = React6.useState(false);
+  const scrollPrev = React6.useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+  const scrollNext = React6.useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+  const onSelect = React6.useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  React6.useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+    return () => {
+      emblaApi?.off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
   const renderCarouselItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsx(
       "div",
       {
+        role: "group",
+        "aria-roledescription": "slide",
         className: cn(
-          "flex items-center justify-center overflow-hidden rounded-2xl",
-          SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+          "min-w-0 shrink-0 grow-0 basis-full pl-4",
+          carouselItemClassName
         ),
         children: /* @__PURE__ */ jsx(
-          Img,
+          "div",
           {
-            src: item.src,
-            alt: item.alt,
-            className: cn("h-full w-full object-cover", item.className),
-            optixFlowConfig
+            className: cn(
+              "flex items-center justify-center overflow-hidden rounded-2xl",
+              SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: item.src,
+                alt: item.alt,
+                className: cn("h-full w-full object-cover", item.className),
+                optixFlowConfig
+              }
+            )
           }
         )
-      }
-    ) }, index));
+      },
+      index
+    ));
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -1220,10 +1112,18 @@ function CarouselFeatureBadge({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxs(Carousel, { children: [
-          /* @__PURE__ */ jsx(CarouselContent, { children: renderCarouselItems() }),
-          /* @__PURE__ */ jsx(CarouselPrevious, {}),
-          /* @__PURE__ */ jsx(CarouselNext, {})
+        /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { ref: emblaRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex -ml-4", children: renderCarouselItems() }) }),
+          /* @__PURE__ */ jsx(
+            CarouselPagination,
+            {
+              onPrevious: scrollPrev,
+              onNext: scrollNext,
+              canScrollPrevious: canScrollPrev,
+              canScrollNext,
+              className: "mt-4"
+            }
+          )
         ] }) })
       ] }) })
     }