@opensite/ui 2.0.6 → 2.0.8

package/dist/hero-customer-support-layered.cjs

@@ -7,7 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -550,38 +549,6 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-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",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -858,6 +825,70 @@ var Pressable = React3__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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 HeroCustomerSupportLayered({
   tagline,
   heading,
@@ -872,7 +903,7 @@ function HeroCustomerSupportLayered({
   actionsSlot,
   actionsClassName,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -923,34 +954,6 @@ function HeroCustomerSupportLayered({
       }
     );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  const renderActions = React3.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: 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, actionsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -961,43 +964,53 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-9",
+              "flex w-full max-w-125 flex-col gap-4 md:gap-6",
               contentClassName
             ),
             children: [
-              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
+              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
-                    headingClassName
+                    "font-light tracking-widest text-sm md:text-md uppercase",
+                    taglineClassName
                   ),
-                  children: heading
+                  children: tagline
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
+              ) : tagline),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h1",
                 {
                   className: cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    "text-4xl font-semibold text-balance md:text-7xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn("leading-normal text-lg", descriptionClassName),
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              renderActions
+              ) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),

package/dist/hero-customer-support-layered.js

@@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-customer-support-layered.tsx
 function cn(...inputs) {
@@ -529,38 +528,6 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var badgeVariants = 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",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -837,6 +804,70 @@ var Pressable = React3.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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 HeroCustomerSupportLayered({
   tagline,
   heading,
@@ -851,7 +882,7 @@ function HeroCustomerSupportLayered({
   actionsSlot,
   actionsClassName,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -902,34 +933,6 @@ function HeroCustomerSupportLayered({
       }
     );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -940,43 +943,53 @@ function HeroCustomerSupportLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-9",
+              "flex w-full max-w-125 flex-col gap-4 md:gap-6",
               contentClassName
             ),
             children: [
-              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(Badge, { children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+              tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
+                "div",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl font-semibold text-balance leading-snug",
-                    headingClassName
+                    "font-light tracking-widest text-sm md:text-md uppercase",
+                    taglineClassName
                   ),
-                  children: heading
+                  children: tagline
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : tagline),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
                 {
                   className: cn(
-                    "text-2xl md:text-3xl lg:text-4xl font-semibold text-balance",
+                    "text-4xl font-semibold text-balance md:text-7xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn("leading-normal text-lg", descriptionClassName),
+                  className: cn(
+                    "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),