@opensite/ui 0.5.5 → 0.5.6

package/dist/process-expandable-timeline.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -538,8 +538,8 @@ function ProcessExpandableTimeline({
   stepItemClassName,
   stepBadgeClassName,
   expandedContentClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
@@ -550,9 +550,9 @@ function ProcessExpandableTimeline({
   const toggleExpand = (index) => {
     setExpandedIndex(expandedIndex === index ? null : index);
   };
-  const renderSteps = () => {
+  const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
-    if (!steps || steps.length === 0) return null;
+    if (!steps?.length) return null;
     return /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: cn("relative", step.className), children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -613,7 +613,7 @@ function ProcessExpandableTimeline({
         }
       ) })
     ] }, index)) });
-  };
+  }, [stepsSlot, steps, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -655,7 +655,7 @@ function ProcessExpandableTimeline({
               )
             }
           ),
-          renderSteps()
+          renderSteps
         ] })
       ] })
     }

package/dist/process-hover-cards.cjs

@@ -471,8 +471,8 @@ function ProcessHoverCards({
   stepsClassName,
   stepItemClassName,
   hoverImageClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -480,9 +480,9 @@ function ProcessHoverCards({
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderSteps = () => {
+  const renderSteps = React.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", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
       ProcessCard,
       {
@@ -494,7 +494,7 @@ function ProcessHoverCards({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepsClassName, stepItemClassName, hoverImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -526,7 +526,7 @@ function ProcessHoverCards({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        renderSteps()
+        renderSteps
       ] })
     }
   );

package/dist/process-hover-cards.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-hover-cards.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-hover-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -450,8 +450,8 @@ function ProcessHoverCards({
   stepsClassName,
   stepItemClassName,
   hoverImageClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -459,9 +459,9 @@ function ProcessHoverCards({
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderSteps = () => {
+  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", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsx(
       ProcessCard,
       {
@@ -473,7 +473,7 @@ function ProcessHoverCards({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepsClassName, stepItemClassName, hoverImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -505,7 +505,7 @@ function ProcessHoverCards({
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        renderSteps()
+        renderSteps
       ] })
     }
   );

package/dist/process-icon-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-icon-timeline.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -522,17 +522,17 @@ function ProcessIconTimeline({
   timelineLineClassName,
   stepCardClassName,
   stepBadgeClassName,
-  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;
+    if (!steps?.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -571,7 +571,7 @@ function ProcessIconTimeline({
                   children: [
                     step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title })),
                     step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-foreground/50", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-foreground/50", children: step.description })),
-                    step.highlights && step.highlights.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    step.highlights?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: cn(
@@ -587,7 +587,7 @@ function ProcessIconTimeline({
                           hIndex
                         ))
                       }
-                    )
+                    ) : null
                   ]
                 }
               )
@@ -598,7 +598,7 @@ function ProcessIconTimeline({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepBadgeClassName, stepCardClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -640,7 +640,7 @@ function ProcessIconTimeline({
               )
             }
           ),
-          renderSteps()
+          renderSteps
         ] })
       ] })
     }

package/dist/process-icon-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-icon-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-icon-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-icon-timeline.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -501,17 +501,17 @@ function ProcessIconTimeline({
   timelineLineClassName,
   stepCardClassName,
   stepBadgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   title
 }) {
   const resolvedHeading = title ?? heading;
-  const renderSteps = () => {
+  const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
-    if (!steps || steps.length === 0) return null;
+    if (!steps?.length) return null;
     return /* @__PURE__ */ jsx("div", { className: "space-y-12", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -550,7 +550,7 @@ function ProcessIconTimeline({
                   children: [
                     step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title })),
                     step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-foreground/50", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-foreground/50", children: step.description })),
-                    step.highlights && step.highlights.length > 0 && /* @__PURE__ */ jsx(
+                    step.highlights?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: cn(
@@ -566,7 +566,7 @@ function ProcessIconTimeline({
                           hIndex
                         ))
                       }
-                    )
+                    ) : null
                   ]
                 }
               )
@@ -577,7 +577,7 @@ function ProcessIconTimeline({
       },
       index
     )) });
-  };
+  }, [stepsSlot, steps, stepBadgeClassName, stepCardClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -619,7 +619,7 @@ function ProcessIconTimeline({
               )
             }
           ),
-          renderSteps()
+          renderSteps
         ] })
       ] })
     }

package/dist/process-mission-principles.cjs

@@ -1,16 +1,16 @@
 "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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// lib/utils.ts
+// components/blocks/process/process-mission-principles.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -388,10 +388,10 @@ var Section = React__default.default.forwardRef(
 );
 Section.displayName = "Section";
 function ProcessMissionPrinciples({
-  missionLabel = "OUR MISSION",
-  missionHeading = "Building the Future Together",
-  missionDescription = "We're on a mission to transform how businesses operate by providing innovative solutions that drive growth, efficiency, and success. Our commitment to excellence guides everything we do.",
-  principlesLabel = "OUR PRINCIPLES",
+  missionLabel,
+  missionHeading,
+  missionDescription,
+  principlesLabel,
   principles,
   principlesSlot,
   className,
@@ -405,17 +405,17 @@ function ProcessMissionPrinciples({
   principlesGridClassName,
   principleCardClassName,
   principleBadgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   missionTitle
 }) {
   const resolvedMissionHeading = missionTitle ?? missionHeading;
-  const renderPrinciples = () => {
+  const renderPrinciples = React.useMemo(() => {
     if (principlesSlot) return principlesSlot;
-    if (!principles || principles.length === 0) return null;
+    if (!principles?.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -452,7 +452,7 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  };
+  }, [principlesSlot, principles, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -505,7 +505,7 @@ function ProcessMissionPrinciples({
               children: principlesLabel
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: principlesLabelClassName, children: principlesLabel })),
-          renderPrinciples()
+          renderPrinciples
         ] })
       ] })
     }

package/dist/process-mission-principles.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-mission-principles.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-mission-principles.js

@@ -1,10 +1,10 @@
 "use client";
+import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/process/process-mission-principles.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -382,10 +382,10 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProcessMissionPrinciples({
-  missionLabel = "OUR MISSION",
-  missionHeading = "Building the Future Together",
-  missionDescription = "We're on a mission to transform how businesses operate by providing innovative solutions that drive growth, efficiency, and success. Our commitment to excellence guides everything we do.",
-  principlesLabel = "OUR PRINCIPLES",
+  missionLabel,
+  missionHeading,
+  missionDescription,
+  principlesLabel,
   principles,
   principlesSlot,
   className,
@@ -399,17 +399,17 @@ function ProcessMissionPrinciples({
   principlesGridClassName,
   principleCardClassName,
   principleBadgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   // Backwards compatibility
   missionTitle
 }) {
   const resolvedMissionHeading = missionTitle ?? missionHeading;
-  const renderPrinciples = () => {
+  const renderPrinciples = useMemo(() => {
     if (principlesSlot) return principlesSlot;
-    if (!principles || principles.length === 0) return null;
+    if (!principles?.length) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -446,7 +446,7 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  };
+  }, [principlesSlot, principles, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -499,7 +499,7 @@ function ProcessMissionPrinciples({
               children: principlesLabel
             }
           ) : /* @__PURE__ */ jsx("div", { className: principlesLabelClassName, children: principlesLabel })),
-          renderPrinciples()
+          renderPrinciples
         ] })
       ] })
     }

package/dist/process-numbered-services.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 classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/process/process-numbered-services.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -941,50 +941,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          label,
-          iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ] })
-      }
-    );
-  };
-  const renderServices = () => {
+  const renderServiceAction = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          ] })
+        }
+      );
+    };
+  }, []);
+  const renderServices = React.useMemo(() => {
     if (servicesSlot) return servicesSlot;
-    if (!services || services.length === 0) return null;
+    if (!services?.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-0", servicesClassName), children: services.map((service, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1009,7 +1011,7 @@ function ProcessNumberedServices({
             service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50 leading-relaxed", children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: service.description })),
             renderServiceAction(service)
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities && service.capabilities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
@@ -1035,12 +1037,12 @@ function ProcessNumberedServices({
                 cIndex
               ))
             }
-          ) })
+          ) : null })
         ]
       },
       index
     )) });
-  };
+  }, [servicesSlot, services, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1072,7 +1074,7 @@ function ProcessNumberedServices({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        renderServices()
+        renderServices
       ] })
     }
   );

package/dist/process-numbered-services.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-numbered-services.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';