@opensite/ui 1.8.7 → 1.8.9

package/dist/registry.js

@@ -7229,7 +7229,16 @@ function FooterNavSocial({
     }
   );
 }
+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,
@@ -7242,13 +7251,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -7262,6 +7275,9 @@ function BlockActions({
     },
     []
   );
+  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) {
@@ -7270,6 +7286,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),
@@ -7293,7 +7310,6 @@ function AboutDeveloperProfile({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   nameClassName,
   roleClassName,
@@ -7305,7 +7321,8 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -7345,7 +7362,7 @@ function AboutDeveloperProfile({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
@@ -8232,25 +8249,10 @@ function AboutStoryExpertise({
   const storyContent = useMemo(() => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", getTextColor(background, "muted"), storyClassName), children: storyParagraphs.map(
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", storyClassName), children: storyParagraphs.map(
       (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsx("div", { children: paragraph }, idx)
     ) });
   }, [storySlot, storyParagraphs, storyClassName]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        children: action.label
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
   const highlightContent = useMemo(() => {
     if (highlightSlot) return highlightSlot;
     if (!highlight) return null;
@@ -8258,18 +8260,26 @@ function AboutStoryExpertise({
       "div",
       {
         className: cn(
-          "rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl",
+          "rounded-2xl border border-border/60 p-6 shadow-xl",
           highlightClassName
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
             /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
             /* @__PURE__ */ jsxs("div", { children: [
-              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.2em]", getTextColor(background, "muted")), children: highlight.label }) : highlight.label),
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-xs font-semibold uppercase tracking-[0.2em]"
+                  ),
+                  children: highlight.label
+                }
+              ) : highlight.label),
               highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
-          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: highlight.description }) : highlight.description)
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
         ]
       }
     );
@@ -8293,14 +8303,18 @@ function AboutStoryExpertise({
             transition: { duration: 0.3, delay: idx * 0.05 },
             className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [
-              /* @__PURE__ */ jsx("div", { className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-xl",
-                getNestedCardBg(background, "muted"),
-                getAccentColor(background)
-              ), children: area.icon }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-12 w-12 items-center justify-center rounded-xl"
+                  ),
+                  children: area.icon
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { children: [
                 area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
-                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
           },
@@ -8334,7 +8348,6 @@ function AboutStoryExpertise({
                     {
                       className: cn(
                         "text-sm font-semibold uppercase tracking-[0.2em]",
-                        getAccentColor(background),
                         eyebrowClassName
                       ),
                       children: eyebrow
@@ -8352,7 +8365,14 @@ function AboutStoryExpertise({
                   ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
                 ] }),
                 storyContent,
-                actionsContent
+                /* @__PURE__ */ jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsClassName,
+                    actionsSlot
+                  }
+                )
               ]
             }
           ),
@@ -8394,12 +8414,11 @@ function AboutStoryExpertise({
           {
             className: cn(
               "mt-20 rounded-3xl p-8 md:p-12",
-              getNestedCardBg(background, "subtle"),
               expertiseSectionClassName
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]", getAccentColor(background)), children: "Our Expertise" }),
+                /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]"), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx(
                   "h3",
                   {
@@ -8415,7 +8434,6 @@ function AboutStoryExpertise({
                   {
                     className: cn(
                       "mx-auto mt-3 max-w-2xl",
-                      getTextColor(background, "muted"),
                       expertiseDescriptionClassName
                     ),
                     children: expertiseDescription
@@ -56248,10 +56266,10 @@ function HeroStatsSocialProof({
   statusCard,
   statusCardSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   badgeClassName,
@@ -56322,7 +56340,8 @@ function HeroStatsSocialProof({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { position: "left", width: "fit" }
             }
           ),
           (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3384,7 +3384,7 @@
   },
   "dependencies": {
     "@opensite/hooks": "2.0.8",
-    "@page-speed/forms": "0.4.7",
+    "@page-speed/forms": "0.4.8",
     "@page-speed/img": "0.4.5",
     "@page-speed/lightbox": "0.2.1",
     "@page-speed/pdf-viewer": "0.1.9",