@opensite/ui 0.8.9 → 0.9.1

package/dist/process-icon-timeline.js

@@ -39,6 +39,54 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -583,7 +631,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-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-muted-foreground", children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -640,7 +688,8 @@ function ProcessIconTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -652,7 +701,8 @@ function ProcessIconTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border lg:left-1/2 lg:-translate-x-1/2",
+                "absolute left-6 top-0 bottom-0 w-px lg:left-1/2 lg:-translate-x-1/2",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-mission-principles.cjs

@@ -44,6 +44,36 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -452,7 +482,7 @@ function ProcessMissionPrinciples({
       "div",
       {
         className: cn(
-          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-0",
           principlesGridClassName
         ),
         children: principles.map((principle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -478,7 +508,7 @@ function ProcessMissionPrinciples({
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
               ] })
             ]
           },
@@ -486,7 +516,14 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  }, [principlesSlot, principles, background, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
+  }, [
+    principlesSlot,
+    principles,
+    background,
+    principlesGridClassName,
+    principleCardClassName,
+    principleBadgeClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -501,7 +538,8 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
+                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel
@@ -521,7 +559,7 @@ function ProcessMissionPrinciples({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground leading-relaxed",
+                "text-lg leading-relaxed",
                 missionDescriptionClassName
               ),
               children: missionDescription
@@ -533,7 +571,7 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider",
                 principlesLabelClassName
               ),
               children: principlesLabel

package/dist/process-mission-principles.js

@@ -38,6 +38,36 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -446,7 +476,7 @@ function ProcessMissionPrinciples({
       "div",
       {
         className: cn(
-          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-0",
           principlesGridClassName
         ),
         children: principles.map((principle, index) => /* @__PURE__ */ jsxs(
@@ -472,7 +502,7 @@ function ProcessMissionPrinciples({
               ),
               /* @__PURE__ */ jsxs("div", { className: "pt-4", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
               ] })
             ]
           },
@@ -480,7 +510,14 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  }, [principlesSlot, principles, background, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
+  }, [
+    principlesSlot,
+    principles,
+    background,
+    principlesGridClassName,
+    principleCardClassName,
+    principleBadgeClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -495,7 +532,8 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
+                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel
@@ -515,7 +553,7 @@ function ProcessMissionPrinciples({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground leading-relaxed",
+                "text-lg leading-relaxed",
                 missionDescriptionClassName
               ),
               children: missionDescription
@@ -527,7 +565,7 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider",
                 principlesLabelClassName
               ),
               children: principlesLabel

package/dist/process-numbered-services.cjs

@@ -61,6 +61,58 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -974,7 +1026,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   // Backwards compatibility
@@ -998,22 +1050,11 @@ function ProcessNumberedServices({
         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 })
-          ] })
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter && iconAfter
+      ] }) });
     };
   }, []);
   const renderServices = React.useMemo(() => {
@@ -1032,7 +1073,10 @@ function ProcessNumberedServices({
             "div",
             {
               className: cn(
-                "flex size-16 items-center justify-center rounded-full border-2 border-primary bg-primary/5 text-xl font-bold text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                "flex size-16 items-center justify-center rounded-full border-2 text-xl font-bold transition-colors",
+                getBorderColor(background, "accent"),
+                getAccentColor(background),
+                "bg-primary/5 group-hover:bg-primary group-hover:text-primary-foreground",
                 serviceBadgeClassName
               ),
               children: service.number ?? `0${index + 1}`
@@ -1040,7 +1084,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1064,7 +1108,7 @@ function ProcessNumberedServices({
                       {
                         name: "lucide/check-circle-2",
                         size: 18,
-                        className: "text-primary"
+                        className: getAccentColor(background)
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: capability })
@@ -1078,7 +1122,16 @@ function ProcessNumberedServices({
       },
       index
     )) });
-  }, [servicesSlot, services, background, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
+  }, [
+    servicesSlot,
+    services,
+    background,
+    servicesClassName,
+    serviceItemClassName,
+    serviceBadgeClassName,
+    capabilitiesClassName,
+    renderServiceAction
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1103,7 +1156,8 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-numbered-services.js

@@ -40,6 +40,58 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -953,7 +1005,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   // Backwards compatibility
@@ -977,22 +1029,11 @@ function ProcessNumberedServices({
         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 })
-          ] })
-        }
-      );
+      return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter && iconAfter
+      ] }) });
     };
   }, []);
   const renderServices = useMemo(() => {
@@ -1011,7 +1052,10 @@ function ProcessNumberedServices({
             "div",
             {
               className: cn(
-                "flex size-16 items-center justify-center rounded-full border-2 border-primary bg-primary/5 text-xl font-bold text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                "flex size-16 items-center justify-center rounded-full border-2 text-xl font-bold transition-colors",
+                getBorderColor(background, "accent"),
+                getAccentColor(background),
+                "bg-primary/5 group-hover:bg-primary group-hover:text-primary-foreground",
                 serviceBadgeClassName
               ),
               children: service.number ?? `0${index + 1}`
@@ -1019,7 +1063,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
@@ -1043,7 +1087,7 @@ function ProcessNumberedServices({
                       {
                         name: "lucide/check-circle-2",
                         size: 18,
-                        className: "text-primary"
+                        className: getAccentColor(background)
                       }
                     ),
                     /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: capability })
@@ -1057,7 +1101,16 @@ function ProcessNumberedServices({
       },
       index
     )) });
-  }, [servicesSlot, services, background, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
+  }, [
+    servicesSlot,
+    services,
+    background,
+    servicesClassName,
+    serviceItemClassName,
+    serviceBadgeClassName,
+    capabilitiesClassName,
+    renderServiceAction
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1082,7 +1135,8 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description