@opensite/ui 2.1.9 → 2.2.1

package/dist/about-network-spotlight.cjs

@@ -831,6 +831,70 @@ var Section = React__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 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
+      ] })
+    }
+  );
+}
 function AboutNetworkSpotlight({
   eyebrow,
   heading,
@@ -843,6 +907,7 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -852,7 +917,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -873,7 +938,7 @@ function AboutNetworkSpotlight({
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: item })
     ] }, index)) });
   }, [highlightsSlot, highlights, highlightsClassName]);
-  const actionsContent = React.useMemo(() => {
+  React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -937,9 +1002,10 @@ function AboutNetworkSpotlight({
     {
       background,
       spacing,
-      className: cn(className),
       pattern,
       patternOpacity,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -955,7 +1021,7 @@ function AboutNetworkSpotlight({
                 whileInView: { opacity: 1, x: 0 },
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl aspect-square md:aspect-auto", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     img.Img,
                     {
@@ -966,7 +1032,7 @@ function AboutNetworkSpotlight({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-black/70 via-transparent to-transparent" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-6 left-6 right-6", children: spotlightCardContent })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 md:bottom-6 left-2 md:left-6 right-2 md:right-6", children: spotlightCardContent })
                 ] })
               }
             ),
@@ -987,29 +1053,33 @@ function AboutNetworkSpotlight({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "h2",
                     {
                       className: cn(
-                        "mt-2 text-3xl font-bold text-background md:text-4xl",
+                        "mt-2 text-3xl font-bold md:text-4xl text-pretty",
                         headingClassName
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
+                  ) : heading),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "mt-4 text-lg text-background/80",
-                        descriptionClassName
-                      ),
+                      className: cn("mt-4 text-lg text-pretty", descriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+                  ) : description),
                   (highlightsSlot || highlights && highlights.length > 0) && highlightsContent,
-                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
                 ]
               }
             )

package/dist/about-network-spotlight.d.cts

@@ -111,11 +111,15 @@ interface AboutNetworkSpotlightProps {
      * Optional Optix Flow configuration for image optimization
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * AboutNetworkSpotlight - Dark spotlight section with image overlay and CTA.
  * Ideal for partner programs, network invitations, or alliance highlights.
  */
-declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
+declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
 
 export { AboutNetworkSpotlight, type AboutNetworkSpotlightProps };

package/dist/about-network-spotlight.d.ts

@@ -111,11 +111,15 @@ interface AboutNetworkSpotlightProps {
      * Optional Optix Flow configuration for image optimization
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * AboutNetworkSpotlight - Dark spotlight section with image overlay and CTA.
  * Ideal for partner programs, network invitations, or alliance highlights.
  */
-declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
+declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
 
 export { AboutNetworkSpotlight, type AboutNetworkSpotlightProps };

package/dist/about-network-spotlight.js

@@ -810,6 +810,70 @@ var Section = React__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 width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function AboutNetworkSpotlight({
   eyebrow,
   heading,
@@ -822,6 +886,7 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -831,7 +896,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -852,7 +917,7 @@ function AboutNetworkSpotlight({
       /* @__PURE__ */ jsx("span", { children: item })
     ] }, index)) });
   }, [highlightsSlot, highlights, highlightsClassName]);
-  const actionsContent = useMemo(() => {
+  useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -916,9 +981,10 @@ function AboutNetworkSpotlight({
     {
       background,
       spacing,
-      className: cn(className),
       pattern,
       patternOpacity,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -934,7 +1000,7 @@ function AboutNetworkSpotlight({
                 whileInView: { opacity: 1, x: 0 },
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
-                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl aspect-square md:aspect-auto", children: [
                   /* @__PURE__ */ jsx(
                     Img,
                     {
@@ -945,7 +1011,7 @@ function AboutNetworkSpotlight({
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-black/70 via-transparent to-transparent" }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 left-6 right-6", children: spotlightCardContent })
+                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 md:bottom-6 left-2 md:left-6 right-2 md:right-6", children: spotlightCardContent })
                 ] })
               }
             ),
@@ -966,29 +1032,33 @@ function AboutNetworkSpotlight({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                     "h2",
                     {
                       className: cn(
-                        "mt-2 text-3xl font-bold text-background md:text-4xl",
+                        "mt-2 text-3xl font-bold md:text-4xl text-pretty",
                         headingClassName
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
+                  ) : heading),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: cn(
-                        "mt-4 text-lg text-background/80",
-                        descriptionClassName
-                      ),
+                      className: cn("mt-4 text-lg text-pretty", descriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+                  ) : description),
                   (highlightsSlot || highlights && highlights.length > 0) && highlightsContent,
-                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
+                  /* @__PURE__ */ jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
                 ]
               }
             )