@opensite/ui 2.1.3 → 2.1.5

package/dist/components.cjs

@@ -15,8 +15,8 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var icon = require('@page-speed/icon');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var forms = require('@page-speed/forms');
 var integration = require('@page-speed/forms/integration');
+var forms = require('@page-speed/forms');
 var inputs = require('@page-speed/forms/inputs');
 
 function _interopNamespace(e) {
@@ -2602,6 +2602,70 @@ function CommunityInitiatives({
     }
   );
 }
+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 AboutCultureTabs({
   badgeText,
   heading,
@@ -2615,7 +2679,7 @@ function AboutCultureTabs({
   ctaImages,
   ctaImagesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2627,45 +2691,33 @@ function AboutCultureTabs({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
   const resolvedAspects = aspects ?? [];
-  const [activeTab, setActiveTab] = React4__namespace.useState(resolvedAspects[0]?.id || "");
-  const actionsContent = React4.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]);
+  const [activeTab, setActiveTab] = React4__namespace.useState(
+    resolvedAspects[0]?.id || ""
+  );
   const ctaImagesContent = React4.useMemo(() => {
     if (ctaImagesSlot) return ctaImagesSlot;
     if (!ctaImages || ctaImages.length === 0) return null;
-    return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-square overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src,
-        alt: "Team culture",
-        className: "h-full w-full object-cover",
-        optixFlowConfig
-      }
-    ) }, i));
+        className: "relative aspect-square overflow-hidden rounded-md",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src,
+            alt: "Team culture",
+            className: "h-full w-full object-cover",
+            optixFlowConfig
+          }
+        )
+      },
+      i
+    ));
   }, [ctaImagesSlot, ctaImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -2674,14 +2726,32 @@ function AboutCultureTabs({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-md space-y-4 text-center flex flex-col items-center justify-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3 py-1", badgeClassName), children: badgeText }) : badgeText),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
+            ]
+          }
+        ),
         aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
           Tabs,
           {
@@ -2694,80 +2764,103 @@ function AboutCultureTabs({
                 TabsTrigger,
                 {
                   value: aspect.id,
-                  className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
+                  className: cn("px-3 py-2.5"),
                   children: aspect.title
                 },
                 aspect.id
               )) }) }),
-              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: aspect.id, className: "space-y-8", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/quote",
-                        size: 32,
-                        className: cn(getAccentColor(background), "opacity-40")
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
-                      '"',
-                      aspect.testimonial.quote,
-                      '"'
+              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(
+                TabsContent,
+                {
+                  value: aspect.id,
+                  className: "space-y-8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: aspect.description })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/quote", size: 32 }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "italic", children: [
+                          '"',
+                          aspect.testimonial.quote,
+                          '"'
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            img.Img,
+                            {
+                              src: aspect.testimonial.avatar,
+                              alt: aspect.testimonial.author,
+                              className: "h-full w-full object-cover",
+                              optixFlowConfig
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: aspect.testimonial.role })
+                          ] })
+                        ] })
+                      ] }) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: aspect.testimonial.avatar,
-                          alt: aspect.testimonial.author,
-                          className: "h-full w-full object-cover",
-                          optixFlowConfig
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
-                      ] })
-                    ] })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "relative aspect-[4/3] overflow-hidden rounded-lg",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
                       {
-                        src: image,
-                        alt: `${aspect.title} culture`,
-                        className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
-                        optixFlowConfig
-                      }
-                    )
-                  },
-                  idx
-                )) })
-              ] }, aspect.id))
+                        className: "relative aspect-4/3 overflow-hidden rounded-lg",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: image,
+                            alt: `${aspect.title} culture`,
+                            className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
+                            optixFlowConfig
+                          }
+                        )
+                      },
+                      idx
+                    )) })
+                  ]
+                },
+                aspect.id
+              ))
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-16 rounded-xl border bg-background p-8 md:p-12", ctaClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mt-16 rounded-xl border p-8 md:p-12",
+              ctaClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName),
+                      children: ctaHeading
+                    }
+                  ) : ctaHeading),
+                  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
+            ]
+          }
+        )
       ]
     }
   );