@opensite/ui 0.8.4 → 0.8.5

package/dist/feature-showcase.cjs

@@ -1062,63 +1062,49 @@ function CarouselItem({ className, ...props }) {
     }
   );
 }
-function CarouselPrevious({
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-}
-function CarouselNext({
-  className,
-  variant = "default",
-  size = "icon",
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: previousIcon, size: iconSize })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: nextIcon, size: iconSize })
+      }
+    )
+  ] });
 }
 function FeatureShowcase({
   items,
@@ -1128,7 +1114,6 @@ function FeatureShowcase({
   slideClassName,
   contentClassName,
   mediaClassName,
-  arrowClassName,
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
@@ -1137,10 +1122,21 @@ function FeatureShowcase({
   patternOpacity,
   patternClassName
 }) {
-  const baseArrowClassName = React6.useMemo(
-    () => "bottom-4 top-auto size-12 translate-y-0 rounded-full border border-current bg-transparent text-current shadow-sm focus:ring-current focus:ring-offset-2 focus:ring-offset-transparent hover:bg-current/10 md:bottom-6",
-    []
-  );
+  const [api, setApi] = React6__namespace.useState();
+  const [canScrollPrevious, setCanScrollPrevious] = React6__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React6__namespace.useState(false);
+  React6__namespace.useEffect(() => {
+    if (!api) return;
+    const updateScrollState = () => {
+      setCanScrollPrevious(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    updateScrollState();
+    api.on("select", updateScrollState);
+    return () => {
+      api.off("select", updateScrollState);
+    };
+  }, [api]);
   const [mobileSlideHeight, setMobileSlideHeight] = React6.useState(
     null
   );
@@ -1183,7 +1179,7 @@ function FeatureShowcase({
   }, [equalizeOnMobile, items]);
   const carouselContent = React6.useMemo(() => {
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, setApi, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-18 md:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "ease-in", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -1212,15 +1208,14 @@ function FeatureShowcase({
         }
       ) }, `slide-${itemIndex}`)) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        CarouselPrevious,
-        {
-          className: cn(baseArrowClassName, "right-16", arrowClassName)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CarouselNext,
+        CarouselPagination,
         {
-          className: cn(baseArrowClassName, "right-0", arrowClassName)
+          onPrevious: () => api?.scrollPrev(),
+          onNext: () => api?.scrollNext(),
+          canScrollPrevious,
+          canScrollNext,
+          className: "absolute bottom-4 right-0 md:bottom-6",
+          buttonClassName: "size-12 rounded-full border border-current bg-transparent text-current shadow-sm hover:bg-current/10"
         }
       )
     ] });
@@ -1233,8 +1228,9 @@ function FeatureShowcase({
     contentClassName,
     mediaWrapperClassName,
     mediaClassName,
-    baseArrowClassName,
-    arrowClassName
+    api,
+    canScrollPrevious,
+    canScrollNext
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,

package/dist/feature-showcase.d.cts

@@ -47,10 +47,6 @@ interface FeatureShowcaseProps {
      * Additional CSS classes for the media area
      */
     mediaClassName?: string;
-    /**
-     * Additional CSS classes for navigation arrows
-     */
-    arrowClassName?: string;
     /**
      * Whether to equalize slide heights on mobile
      */
@@ -103,6 +99,6 @@ interface FeatureShowcaseProps {
  * />
  * ```
  */
-declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, arrowClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
+declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
 
 export { FeatureShowcase };

package/dist/feature-showcase.d.ts

@@ -47,10 +47,6 @@ interface FeatureShowcaseProps {
      * Additional CSS classes for the media area
      */
     mediaClassName?: string;
-    /**
-     * Additional CSS classes for navigation arrows
-     */
-    arrowClassName?: string;
     /**
      * Whether to equalize slide heights on mobile
      */
@@ -103,6 +99,6 @@ interface FeatureShowcaseProps {
  * />
  * ```
  */
-declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, arrowClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
+declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
 
 export { FeatureShowcase };

package/dist/feature-showcase.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React6 from 'react';
-import React6__default, { useMemo, useState, useRef, useEffect } from 'react';
+import React6__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -1038,63 +1038,49 @@ function CarouselItem({ className, ...props }) {
     }
   );
 }
-function CarouselPrevious({
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   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 = "default",
-  size = "icon",
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  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" })
-      ]
-    }
-  );
+  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 })
+      }
+    ),
+    /* @__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 })
+      }
+    )
+  ] });
 }
 function FeatureShowcase({
   items,
@@ -1104,7 +1090,6 @@ function FeatureShowcase({
   slideClassName,
   contentClassName,
   mediaClassName,
-  arrowClassName,
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
@@ -1113,10 +1098,21 @@ function FeatureShowcase({
   patternOpacity,
   patternClassName
 }) {
-  const baseArrowClassName = useMemo(
-    () => "bottom-4 top-auto size-12 translate-y-0 rounded-full border border-current bg-transparent text-current shadow-sm focus:ring-current focus:ring-offset-2 focus:ring-offset-transparent hover:bg-current/10 md:bottom-6",
-    []
-  );
+  const [api, setApi] = React6.useState();
+  const [canScrollPrevious, setCanScrollPrevious] = React6.useState(false);
+  const [canScrollNext, setCanScrollNext] = React6.useState(false);
+  React6.useEffect(() => {
+    if (!api) return;
+    const updateScrollState = () => {
+      setCanScrollPrevious(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    updateScrollState();
+    api.on("select", updateScrollState);
+    return () => {
+      api.off("select", updateScrollState);
+    };
+  }, [api]);
   const [mobileSlideHeight, setMobileSlideHeight] = useState(
     null
   );
@@ -1159,7 +1155,7 @@ function FeatureShowcase({
   }, [equalizeOnMobile, items]);
   const carouselContent = useMemo(() => {
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Carousel, { className: carouselClassName, children: [
+    return /* @__PURE__ */ jsxs(Carousel, { className: carouselClassName, setApi, children: [
       /* @__PURE__ */ jsx("div", { className: "pb-18 md:pb-24", children: /* @__PURE__ */ jsx(CarouselContent, { className: "ease-in", children: items.map((item, itemIndex) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -1188,15 +1184,14 @@ function FeatureShowcase({
         }
       ) }, `slide-${itemIndex}`)) }) }),
       /* @__PURE__ */ jsx(
-        CarouselPrevious,
-        {
-          className: cn(baseArrowClassName, "right-16", arrowClassName)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        CarouselNext,
+        CarouselPagination,
         {
-          className: cn(baseArrowClassName, "right-0", arrowClassName)
+          onPrevious: () => api?.scrollPrev(),
+          onNext: () => api?.scrollNext(),
+          canScrollPrevious,
+          canScrollNext,
+          className: "absolute bottom-4 right-0 md:bottom-6",
+          buttonClassName: "size-12 rounded-full border border-current bg-transparent text-current shadow-sm hover:bg-current/10"
         }
       )
     ] });
@@ -1209,8 +1204,9 @@ function FeatureShowcase({
     contentClassName,
     mediaWrapperClassName,
     mediaClassName,
-    baseArrowClassName,
-    arrowClassName
+    api,
+    canScrollPrevious,
+    canScrollNext
   ]);
   return /* @__PURE__ */ jsxs(
     Section,

package/dist/feature-split-image-reverse.cjs

@@ -843,7 +843,7 @@ function FeatureSplitImageReverse({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -860,11 +860,20 @@ function FeatureSplitImageReverse({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          asButton: true,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   }, [actionsSlot, actions]);
   const imageContent = React.useMemo(() => {
@@ -875,7 +884,10 @@ function FeatureSplitImageReverse({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -891,14 +903,77 @@ function FeatureSplitImageReverse({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-8 md:gap-16 lg:grid-cols-2", gridClassName), children: [
-        imageContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-center gap-8 md:gap-16 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            imageContent,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center text-center lg:items-start lg:text-left",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
+                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }