@opensite/ui 2.0.2 → 2.0.4

package/dist/hero-simple-centered-image.cjs

@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -851,19 +825,87 @@ 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 renderAction = React__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 HeroSimpleCenteredImage({
   heading,
   description,
   actions,
   actionsSlot,
   imageSrc,
-  imageAlt = "placeholder hero",
+  imageAlt,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -872,11 +914,18 @@ function HeroSimpleCenteredImage({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = React.useMemo(() => {
+  React.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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -900,22 +949,69 @@ function HeroSimpleCenteredImage({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", 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("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center text-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            src: imageSrc,
-            alt: imageAlt,
-            className: cn("h-full w-full rounded-md object-cover", imageClassName),
-            optixFlowConfig
+            className: cn(
+              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)] mt-8 md:mt-16",
+              imageWrapperClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: imageSrc,
+                alt: imageAlt,
+                className: cn(
+                  "h-full w-full rounded-t-2xl object-cover",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           }
-        ) }) })
+        )
       ]
     }
   );

package/dist/hero-simple-centered-image.d.cts

@@ -84,6 +84,6 @@ interface HeroSimpleCenteredImageProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSimpleCenteredImage({ heading, description, actions, actionsSlot, imageSrc, imageAlt, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageWrapperClassName, imageClassName, optixFlowConfig, }: HeroSimpleCenteredImageProps): React.JSX.Element;
+declare function HeroSimpleCenteredImage({ heading, description, actions, actionsSlot, imageSrc, imageAlt, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageWrapperClassName, imageClassName, optixFlowConfig, }: HeroSimpleCenteredImageProps): React.JSX.Element;
 
 export { HeroSimpleCenteredImage, type HeroSimpleCenteredImageProps };

package/dist/hero-simple-centered-image.d.ts

@@ -84,6 +84,6 @@ interface HeroSimpleCenteredImageProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSimpleCenteredImage({ heading, description, actions, actionsSlot, imageSrc, imageAlt, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageWrapperClassName, imageClassName, optixFlowConfig, }: HeroSimpleCenteredImageProps): React.JSX.Element;
+declare function HeroSimpleCenteredImage({ heading, description, actions, actionsSlot, imageSrc, imageAlt, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageWrapperClassName, imageClassName, optixFlowConfig, }: HeroSimpleCenteredImageProps): React.JSX.Element;
 
 export { HeroSimpleCenteredImage, type HeroSimpleCenteredImageProps };

package/dist/hero-simple-centered-image.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(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";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -830,19 +804,87 @@ 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 renderAction = React.useCallback(
+    (action, idx) => {
+      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
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  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) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function HeroSimpleCenteredImage({
   heading,
   description,
   actions,
   actionsSlot,
   imageSrc,
-  imageAlt = "placeholder hero",
+  imageAlt,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -851,11 +893,18 @@ function HeroSimpleCenteredImage({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
+  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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -879,22 +928,69 @@ function HeroSimpleCenteredImage({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsx(
-          Img,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center text-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
+        imageSrc && /* @__PURE__ */ jsx(
+          "div",
           {
-            src: imageSrc,
-            alt: imageAlt,
-            className: cn("h-full w-full rounded-md object-cover", imageClassName),
-            optixFlowConfig
+            className: cn(
+              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)] mt-8 md:mt-16",
+              imageWrapperClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imageSrc,
+                alt: imageAlt,
+                className: cn(
+                  "h-full w-full rounded-t-2xl object-cover",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           }
-        ) }) })
+        )
       ]
     }
   );