@opensite/ui 3.2.6 → 3.2.8

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 {
     /**
@@ -100,6 +104,10 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -107,6 +115,6 @@ interface ProcessStickyStepsProps {
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type 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 {
     /**
@@ -100,6 +104,10 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -107,6 +115,6 @@ interface ProcessStickyStepsProps {
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type ProcessStickyStepsProps };

package/dist/process-sticky-steps.js

@@ -11,36 +11,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -425,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",
@@ -478,46 +512,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
-  patternOpacity
+  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;
@@ -530,21 +529,28 @@ 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",
             {
               className: cn(
                 "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background)
+                "bg-muted text-muted-foreground"
               ),
               children: step.step ?? `0${index + 1}`
             }
           ),
           /* @__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)
           ] })
         ]
       },
@@ -560,6 +566,7 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -570,7 +577,7 @@ function ProcessStickySteps({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : heading),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -580,8 +587,15 @@ function ProcessStickySteps({
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions()
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]