@opensite/ui 2.8.8 → 2.9.0

package/dist/carousel-feature-badge.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React6 = require('react');
+var React8 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
@@ -31,7 +31,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 // components/blocks/carousel/carousel-feature-badge.tsx
@@ -145,7 +145,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React6__namespace.useMemo(() => {
+  const linkType = React8__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -166,7 +166,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React6__namespace.useMemo(() => {
+  const normalizedHref = React8__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -184,7 +184,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React6__namespace.useMemo(() => {
+  const target = React8__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -197,7 +197,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React6__namespace.useMemo(() => {
+  const rel = React8__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -206,7 +206,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React6__namespace.useCallback(
+  const handleClick = React8__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -390,7 +390,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React6__namespace.forwardRef(
+var Pressable = React8__namespace.forwardRef(
   ({
     children,
     className,
@@ -489,7 +489,7 @@ var Pressable = React6__namespace.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React6__namespace.memo(function DynamicIcon2({
+var DynamicIcon = React8__namespace.memo(function DynamicIcon2({
   apiKey,
   ...props
 }) {
@@ -563,7 +563,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React6__namespace.default.forwardRef(
+var Container = React8__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -869,7 +869,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React6__namespace.default.forwardRef(
+var Section = React8__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -930,6 +930,102 @@ var Section = React6__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React8__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React8__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React8__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React8__namespace.isValidElement(reactNode)) {
+          return React8__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React8__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
+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 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) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  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
+      ] })
+    }
+  );
+}
 var SLIDE_LAYOUT_ASPECT_MAP = {
   horizontal: "aspect-video",
   vertical: "aspect-[9/16]",
@@ -950,28 +1046,31 @@ function CarouselFeatureBadge({
   carouselClassName,
   carouselItemClassName,
   optixFlowConfig,
+  actions,
+  actionsSlot,
+  actionsClassName,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   slideLayoutVariant = "square",
   containerMaxWidth = "2xl"
 }) {
   const [emblaRef, emblaApi] = useEmblaCarousel__default.default();
-  const [canScrollPrev, setCanScrollPrev] = React6__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React6__namespace.useState(false);
-  const scrollPrev = React6__namespace.useCallback(() => {
+  const [canScrollPrev, setCanScrollPrev] = React8__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React8__namespace.useState(false);
+  const scrollPrev = React8__namespace.useCallback(() => {
     emblaApi?.scrollPrev();
   }, [emblaApi]);
-  const scrollNext = React6__namespace.useCallback(() => {
+  const scrollNext = React8__namespace.useCallback(() => {
     emblaApi?.scrollNext();
   }, [emblaApi]);
-  const onSelect = React6__namespace.useCallback(() => {
+  const onSelect = React8__namespace.useCallback(() => {
     if (!emblaApi) return;
     setCanScrollPrev(emblaApi.canScrollPrev());
     setCanScrollNext(emblaApi.canScrollNext());
   }, [emblaApi]);
-  React6__namespace.useEffect(() => {
+  React8__namespace.useEffect(() => {
     if (!emblaApi) return;
     onSelect();
     emblaApi.on("reInit", onSelect);
@@ -1014,12 +1113,46 @@ function CarouselFeatureBadge({
       index
     ));
   };
+  const headerItems = React8__namespace.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-left text-2xl font-semibold md:text-4xl lg:max-w-xl lg:text-6xl text-pretty",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-full text-left text-lg leading-snug lg:max-w-sm text-balance text-lg",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerMaxWidth,
@@ -1029,29 +1162,16 @@ function CarouselFeatureBadge({
           {
             className: cn("flex flex-col items-start gap-4", contentClassName),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }) : badge }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-left text-xl font-semibold md:text-3xl lg:max-w-xl lg:text-4xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "max-w-xl text-left text-lg leading-snug lg:max-w-sm",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-              ] })
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: badge }) : badge),
+              /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { items: headerItems, className: "flex flex-col gap-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),

package/dist/carousel-feature-badge.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName, m as ContainerMaxWidth } from './community-initiatives-B8KCpwXH.cjs';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { I as ImageItem, O as OptixFlowConfig } from './blocks-BtDAbw8d.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -101,7 +102,19 @@ interface CarouselFeatureBadgeProps {
      * Optional max width for the content container
      */
     containerMaxWidth?: ContainerMaxWidth;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
-declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
+declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, actions, actionsSlot, actionsClassName, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
 
 export { CarouselFeatureBadge, type CarouselFeatureBadgeProps };

package/dist/carousel-feature-badge.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName, m as ContainerMaxWidth } from './community-initiatives-rTRuDt0r.js';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { I as ImageItem, O as OptixFlowConfig } from './blocks-BlWXj9GI.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -101,7 +102,19 @@ interface CarouselFeatureBadgeProps {
      * Optional max width for the content container
      */
     containerMaxWidth?: ContainerMaxWidth;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
-declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
+declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, actions, actionsSlot, actionsClassName, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
 
 export { CarouselFeatureBadge, type CarouselFeatureBadgeProps };