@opensite/ui 3.2.7 → 3.2.8

package/dist/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/process-numbered-services.cjs

@@ -432,7 +432,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/process-numbered-services.js

@@ -411,7 +411,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/process-sticky-steps.cjs

@@ -416,6 +416,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.Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var CornerIllustration = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -469,47 +533,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = React.useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              pressable.Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -522,7 +550,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            pressable.Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -534,8 +570,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -573,7 +609,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]

package/dist/process-sticky-steps.d.cts

@@ -26,6 +26,10 @@ interface ProcessStickyStepItem {
      * Additional CSS classes for the step item
      */
     className?: string;
+    /**
+     * Optional URL
+     */
+    href?: string;
 }
 interface ProcessStickyStepsProps {
     /**

package/dist/process-sticky-steps.d.ts

@@ -26,6 +26,10 @@ interface ProcessStickyStepItem {
      * Additional CSS classes for the step item
      */
     className?: string;
+    /**
+     * Optional URL
+     */
+    href?: string;
 }
 interface ProcessStickyStepsProps {
     /**

package/dist/process-sticky-steps.js

@@ -395,6 +395,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
+      ] })
+    }
+  );
+}
 var CornerIllustration = (props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -448,47 +512,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -501,7 +529,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -513,8 +549,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -552,7 +588,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]

package/dist/registry.cjs

@@ -78270,47 +78270,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = React30.useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              pressable.Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React30.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -78323,7 +78287,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            pressable.Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -78335,8 +78307,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -78374,7 +78346,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]
@@ -79562,7 +79541,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/registry.js

@@ -78230,47 +78230,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -78283,7 +78247,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -78295,8 +78267,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -78334,7 +78306,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]
@@ -79522,7 +79501,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",