@opensite/ui 0.5.5 → 0.5.7

package/dist/process-numbered-services.js

@@ -1,12 +1,12 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/process/process-numbered-services.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -920,50 +920,52 @@ function ProcessNumberedServices({
   serviceItemClassName,
   serviceBadgeClassName,
   capabilitiesClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderServiceAction = (service) => {
-    if (service.actionSlot) return service.actionSlot;
-    const action = service.action ?? (service.ctaText && service.ctaUrl ? {
-      label: service.ctaText,
-      href: service.ctaUrl,
-      variant: "ghost"
-    } : null);
-    if (!action) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = action;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: cn(
-          "mt-4 inline-flex items-center gap-2 p-0 text-primary hover:text-primary/80",
-          actionClassName
-        ),
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon,
-          label,
-          iconAfter ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ] })
-      }
-    );
-  };
-  const renderServices = () => {
+  const renderServiceAction = useMemo(() => {
+    return (service) => {
+      if (service.actionSlot) return service.actionSlot;
+      const action = service.action ?? (service.ctaText && service.ctaUrl ? {
+        label: service.ctaText,
+        href: service.ctaUrl,
+        variant: "ghost"
+      } : null);
+      if (!action) return null;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn(
+            "mt-4 inline-flex items-center gap-2 p-0 text-primary hover:text-primary/80",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          ] })
+        }
+      );
+    };
+  }, []);
+  const renderServices = useMemo(() => {
     if (servicesSlot) return servicesSlot;
-    if (!services || services.length === 0) return null;
+    if (!services?.length) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-0", servicesClassName), children: services.map((service, index) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -988,7 +990,7 @@ function ProcessNumberedServices({
             service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50 leading-relaxed", children: service.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50 leading-relaxed", children: service.description })),
             renderServiceAction(service)
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities && service.capabilities.length > 0 && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
@@ -1014,12 +1016,12 @@ function ProcessNumberedServices({
                 cIndex
               ))
             }
-          ) })
+          ) : null })
         ]
       },
       index
     )) });
-  };
+  }, [servicesSlot, services, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1051,7 +1053,7 @@ function ProcessNumberedServices({
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        renderServices()
+        renderServices
       ] })
     }
   );

package/dist/process-roadmap-timeline.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/process/process-roadmap-timeline.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -559,15 +559,15 @@ function ProcessRoadmapTimeline({
   timelineLineClassName,
   milestoneCardClassName,
   milestoneNodeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderMilestones = () => {
+  const renderMilestones = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: milestones.map((milestone, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -610,7 +610,7 @@ function ProcessRoadmapTimeline({
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
                     milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-foreground/50", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-foreground/50", children: milestone.description })),
-                    milestone.features && milestone.features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: cn(
@@ -626,7 +626,7 @@ function ProcessRoadmapTimeline({
                           fIndex
                         ))
                       }
-                    )
+                    ) : null
                   ]
                 }
               )
@@ -648,7 +648,7 @@ function ProcessRoadmapTimeline({
       },
       index
     )) });
-  };
+  }, [milestonesSlot, milestones, milestoneCardClassName, milestoneNodeClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -690,7 +690,7 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          renderMilestones()
+          renderMilestones
         ] })
       ] })
     }

package/dist/process-roadmap-timeline.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/process-roadmap-timeline.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/process-roadmap-timeline.js

@@ -1,11 +1,11 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/process/process-roadmap-timeline.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -538,15 +538,15 @@ function ProcessRoadmapTimeline({
   timelineLineClassName,
   milestoneCardClassName,
   milestoneNodeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderMilestones = () => {
+  const renderMilestones = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "space-y-12", children: milestones.map((milestone, index) => /* @__PURE__ */ jsxs(
@@ -589,7 +589,7 @@ function ProcessRoadmapTimeline({
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
                     milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-foreground/50", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-foreground/50", children: milestone.description })),
-                    milestone.features && milestone.features.length > 0 && /* @__PURE__ */ jsx(
+                    milestone.features?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: cn(
@@ -605,7 +605,7 @@ function ProcessRoadmapTimeline({
                           fIndex
                         ))
                       }
-                    )
+                    ) : null
                   ]
                 }
               )
@@ -627,7 +627,7 @@ function ProcessRoadmapTimeline({
       },
       index
     )) });
-  };
+  }, [milestonesSlot, milestones, milestoneCardClassName, milestoneNodeClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -669,7 +669,7 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          renderMilestones()
+          renderMilestones
         ] })
       ] })
     }

package/dist/process-scroll-image.cjs

@@ -989,8 +989,8 @@ function ProcessScrollImage({
   actionsClassName,
   stepsClassName,
   stepItemClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -1017,40 +1017,42 @@ function ProcessScrollImage({
       )
     }
   ] : []);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!resolvedActions || resolvedActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn(
-            "flex items-center justify-start gap-2",
-            actionClassName
-          ),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  };
-  const renderSteps = () => {
+  const renderActions = React6.useMemo(() => {
+    return () => {
+      if (actionsSlot) return actionsSlot;
+      if (!resolvedActions?.length) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: cn(
+              "flex items-center justify-start gap-2",
+              actionClassName
+            ),
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              label,
+              iconAfter
+            ] })
+          },
+          index
+        );
+      }) });
+    };
+  }, [actionsSlot, resolvedActions, actionsClassName]);
+  const renderSteps = React6.useMemo(() => {
     if (stepsSlot) return stepsSlot;
-    if (!steps || steps.length === 0) return null;
+    if (!steps?.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
       ProcessCard,
       {
@@ -1061,9 +1063,11 @@ function ProcessScrollImage({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepsClassName, stepItemClassName, setActive]);
   const getStepTitle = (step) => {
-    return typeof step.title === "string" ? step.title : `Step ${steps?.indexOf(step) ?? 0 + 1}`;
+    if (typeof step.title === "string") return step.title;
+    const stepIndex = steps?.indexOf(step) ?? 0;
+    return `Step ${stepIndex + 1}`;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1117,7 +1121,7 @@ function ProcessScrollImage({
                         imageContainerClassName
                       ),
                       children: [
-                        previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        previousActive !== void 0 && steps?.[previousActive]?.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
                           img.Img,
                           {
                             src: steps[previousActive].image,
@@ -1126,7 +1130,7 @@ function ProcessScrollImage({
                             optixFlowConfig
                           }
                         ) }),
-                        steps && steps[active] && steps[active].image && /* @__PURE__ */ jsxRuntime.jsx(
+                        steps?.[active]?.image && /* @__PURE__ */ jsxRuntime.jsx(
                           framerMotion.motion.div,
                           {
                             initial: { clipPath: "inset(100% 100% 0% 0%)" },
@@ -1156,7 +1160,7 @@ function ProcessScrollImage({
                 ]
               }
             ),
-            renderSteps()
+            renderSteps
           ]
         }
       )

package/dist/process-scroll-image.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/process-scroll-image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/process-scroll-image.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React6 from 'react';
-import React6__default from 'react';
+import React6__default, { useMemo } from 'react';
 import { motion, useInView } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -968,8 +968,8 @@ function ProcessScrollImage({
   actionsClassName,
   stepsClassName,
   stepItemClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -996,40 +996,42 @@ function ProcessScrollImage({
       )
     }
   ] : []);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!resolvedActions || resolvedActions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn(
-            "flex items-center justify-start gap-2",
-            actionClassName
-          ),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  };
-  const renderSteps = () => {
+  const renderActions = useMemo(() => {
+    return () => {
+      if (actionsSlot) return actionsSlot;
+      if (!resolvedActions?.length) return null;
+      return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: cn(
+              "flex items-center justify-start gap-2",
+              actionClassName
+            ),
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              icon,
+              label,
+              iconAfter
+            ] })
+          },
+          index
+        );
+      }) });
+    };
+  }, [actionsSlot, resolvedActions, actionsClassName]);
+  const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
-    if (!steps || steps.length === 0) return null;
+    if (!steps?.length) return null;
     return /* @__PURE__ */ jsx("ul", { className: cn("relative w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsx(
       ProcessCard,
       {
@@ -1040,9 +1042,11 @@ function ProcessScrollImage({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepsClassName, stepItemClassName, setActive]);
   const getStepTitle = (step) => {
-    return typeof step.title === "string" ? step.title : `Step ${steps?.indexOf(step) ?? 0 + 1}`;
+    if (typeof step.title === "string") return step.title;
+    const stepIndex = steps?.indexOf(step) ?? 0;
+    return `Step ${stepIndex + 1}`;
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -1096,7 +1100,7 @@ function ProcessScrollImage({
                         imageContainerClassName
                       ),
                       children: [
-                        previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsx(
+                        previousActive !== void 0 && steps?.[previousActive]?.image && /* @__PURE__ */ jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsx(
                           Img,
                           {
                             src: steps[previousActive].image,
@@ -1105,7 +1109,7 @@ function ProcessScrollImage({
                             optixFlowConfig
                           }
                         ) }),
-                        steps && steps[active] && steps[active].image && /* @__PURE__ */ jsx(
+                        steps?.[active]?.image && /* @__PURE__ */ jsx(
                           motion.div,
                           {
                             initial: { clipPath: "inset(100% 100% 0% 0%)" },
@@ -1135,7 +1139,7 @@ function ProcessScrollImage({
                 ]
               }
             ),
-            renderSteps()
+            renderSteps
           ]
         }
       )

package/dist/process-steps-grid.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/process/process-steps-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -521,15 +521,15 @@ function ProcessStepsGrid({
   stepsGridClassName,
   stepCardClassName,
   stepIconClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderSteps = () => {
+  const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps || steps.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -569,7 +569,7 @@ function ProcessStepsGrid({
         ))
       }
     );
-  };
+  }, [stepsSlot, steps, stepsGridClassName, stepCardClassName, stepIconClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -601,7 +601,7 @@ function ProcessStepsGrid({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        renderSteps()
+        renderSteps
       ] })
     }
   );

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';