@opensite/ui 2.0.2 → 2.0.4

package/dist/hero-ai-powered-carousel.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
 var AutoScroll = require('embla-carousel-auto-scroll');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -9,6 +8,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var React3 = require('react');
 var useEmblaCarousel = require('embla-carousel-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,40 +31,14 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var AutoScroll__default = /*#__PURE__*/_interopDefault(AutoScroll);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 // components/blocks/hero/hero-ai-powered-carousel.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1019,6 +993,74 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React3__namespace.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function HeroAiPoweredCarousel({
   badge,
   badgeTagline,
@@ -1026,17 +1068,15 @@ function HeroAiPoweredCarousel({
   description,
   actions,
   actionsSlot,
-  mobileCarouselImages1,
-  mobileCarouselImages2,
-  desktopCarouselImages1,
-  desktopCarouselImages2,
+  carouselImages1,
+  carouselImages2,
   carouselSlot,
   background,
-  spacing,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -1044,27 +1084,6 @@ function HeroAiPoweredCarousel({
   actionsClassName,
   optixFlowConfig
 }) {
-  const renderActions = React3.useMemo(() => {
-    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;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1073,19 +1092,63 @@ function HeroAiPoweredCarousel({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto", contentClassName), children: [
-          (badge || badgeTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-fit items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs font-medium", badgeClassName), children: [
-            badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }),
-            badgeTagline
-          ] }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-10 mb-4 text-3xl font-semibold lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-16 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex flex-col gap-4 md:gap-8",
+              contentClassName
+            ),
+            children: [
+              (badge || badgeTagline) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex w-fit items-center gap-2 rounded-full border pl-2.5 pr-4 py-1.5 text-xs font-medium",
+                    badgeClassName
+                  ),
+                  children: [
+                    badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }),
+                    badgeTagline
+                  ]
+                }
+              ),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
         carouselSlot ? carouselSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 lg:hidden", children: [
-            mobileCarouselImages1 && mobileCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            carouselImages1 && carouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               Carousel,
               {
                 opts: {
@@ -1097,18 +1160,21 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 className: "-mx-7",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: carouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
               }
             ),
-            mobileCarouselImages2 && mobileCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            carouselImages2 && carouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               Carousel,
               {
                 opts: {
@@ -1121,12 +1187,15 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 className: "-mx-7",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: mobileCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[350px]", children: carouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
@@ -1134,7 +1203,7 @@ function HeroAiPoweredCarousel({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden grid-cols-2 gap-8 lg:grid", children: [
-            desktopCarouselImages1 && desktopCarouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            carouselImages1 && carouselImages1.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               Carousel,
               {
                 opts: {
@@ -1146,18 +1215,21 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 orientation: "vertical",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: carouselImages1.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })
               }
             ),
-            desktopCarouselImages2 && desktopCarouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            carouselImages2 && carouselImages2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               Carousel,
               {
                 opts: {
@@ -1170,12 +1242,15 @@ function HeroAiPoweredCarousel({
                   })
                 ],
                 orientation: "vertical",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: desktopCarouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "max-h-[600px]", children: carouselImages2.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: image.src,
                     alt: image.alt,
-                    className: image.className,
+                    className: cn(
+                      "rounded-lg shadow-lg",
+                      image.className
+                    ),
                     optixFlowConfig
                   }
                 ) }, index)) })

package/dist/hero-ai-powered-carousel.d.cts

@@ -32,21 +32,13 @@ interface HeroAiPoweredCarouselProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Images for mobile carousel (first row)
+     * Images for carousel 1
      */
-    mobileCarouselImages1?: ImageItem[];
+    carouselImages1?: ImageItem[];
     /**
-     * Images for mobile carousel (second row)
+     * Images for carousel 2
      */
-    mobileCarouselImages2?: ImageItem[];
-    /**
-     * Images for desktop carousel (first column)
-     */
-    desktopCarouselImages1?: ImageItem[];
-    /**
-     * Images for desktop carousel (second column)
-     */
-    desktopCarouselImages2?: ImageItem[];
+    carouselImages2?: ImageItem[];
     /**
      * Custom slot for carousel content (overrides all carousel images)
      */
@@ -100,6 +92,6 @@ interface HeroAiPoweredCarouselProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroAiPoweredCarousel({ badge, badgeTagline, heading, description, actions, actionsSlot, mobileCarouselImages1, mobileCarouselImages2, desktopCarouselImages1, desktopCarouselImages2, carouselSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, optixFlowConfig, }: HeroAiPoweredCarouselProps): React.JSX.Element;
+declare function HeroAiPoweredCarousel({ badge, badgeTagline, heading, description, actions, actionsSlot, carouselImages1, carouselImages2, carouselSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, optixFlowConfig, }: HeroAiPoweredCarouselProps): React.JSX.Element;
 
 export { HeroAiPoweredCarousel, type HeroAiPoweredCarouselProps };

package/dist/hero-ai-powered-carousel.d.ts

@@ -32,21 +32,13 @@ interface HeroAiPoweredCarouselProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Images for mobile carousel (first row)
+     * Images for carousel 1
      */
-    mobileCarouselImages1?: ImageItem[];
+    carouselImages1?: ImageItem[];
     /**
-     * Images for mobile carousel (second row)
+     * Images for carousel 2
      */
-    mobileCarouselImages2?: ImageItem[];
-    /**
-     * Images for desktop carousel (first column)
-     */
-    desktopCarouselImages1?: ImageItem[];
-    /**
-     * Images for desktop carousel (second column)
-     */
-    desktopCarouselImages2?: ImageItem[];
+    carouselImages2?: ImageItem[];
     /**
      * Custom slot for carousel content (overrides all carousel images)
      */
@@ -100,6 +92,6 @@ interface HeroAiPoweredCarouselProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroAiPoweredCarousel({ badge, badgeTagline, heading, description, actions, actionsSlot, mobileCarouselImages1, mobileCarouselImages2, desktopCarouselImages1, desktopCarouselImages2, carouselSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, optixFlowConfig, }: HeroAiPoweredCarouselProps): React.JSX.Element;
+declare function HeroAiPoweredCarousel({ badge, badgeTagline, heading, description, actions, actionsSlot, carouselImages1, carouselImages2, carouselSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, optixFlowConfig, }: HeroAiPoweredCarouselProps): React.JSX.Element;
 
 export { HeroAiPoweredCarousel, type HeroAiPoweredCarouselProps };