@opensite/ui 0.8.9 → 0.9.1

package/dist/process-roadmap-timeline.cjs

@@ -60,6 +60,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -548,17 +600,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getNestedCardTextColor(background)),
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
@@ -638,13 +690,13 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-muted-foreground", children: milestone.date })),
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
                           /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: milestone.status, background })
                         ]
                       }
                     ),
                     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-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -675,8 +727,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2",
+                getNestedCardBg(background, "card"),
+                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? cn("border-primary bg-primary", getNestedCardTextColor(background)) : cn(getBorderColor(background, "default"), getTextColor(background, "muted")),
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -712,7 +765,8 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -724,7 +778,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border",
+                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }

package/dist/process-roadmap-timeline.js

@@ -39,6 +39,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -527,17 +579,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getNestedCardTextColor(background)),
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
@@ -617,13 +669,13 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: milestone.date })),
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
                           /* @__PURE__ */ jsx(StatusBadge, { status: milestone.status, background })
                         ]
                       }
                     ),
                     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-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -654,8 +706,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2",
+                getNestedCardBg(background, "card"),
+                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? cn("border-primary bg-primary", getNestedCardTextColor(background)) : cn(getBorderColor(background, "default"), getTextColor(background, "muted")),
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -691,7 +744,8 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -703,7 +757,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border",
+                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }

package/dist/process-scroll-image.cjs

@@ -33,6 +33,36 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -944,7 +974,8 @@ var ProcessCard = ({
   step,
   index,
   setActive,
-  itemClassName
+  itemClassName,
+  background
 }) => {
   const ref = React6__namespace.useRef(null);
   const itemInView = framerMotion.useInView(ref, {
@@ -969,7 +1000,7 @@ var ProcessCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
         /* @__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: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
         ] })
       ]
     }
@@ -992,7 +1023,7 @@ function ProcessScrollImage({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -1014,7 +1045,7 @@ function ProcessScrollImage({
         {
           name: "lucide/corner-down-right",
           size: 20,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       )
     }
@@ -1023,33 +1054,39 @@ function ProcessScrollImage({
     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,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
+          children: resolvedActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) });
+              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(() => {
@@ -1061,7 +1098,8 @@ function ProcessScrollImage({
         step,
         index,
         setActive,
-        itemClassName: stepItemClassName
+        itemClassName: stepItemClassName,
+        background
       },
       index
     )) });
@@ -1109,7 +1147,8 @@ function ProcessScrollImage({
                     "p",
                     {
                       className: cn(
-                        "text-base text-muted-foreground",
+                        "text-base",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/process-scroll-image.js

@@ -12,6 +12,36 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -923,7 +953,8 @@ var ProcessCard = ({
   step,
   index,
   setActive,
-  itemClassName
+  itemClassName,
+  background
 }) => {
   const ref = React6.useRef(null);
   const itemInView = useInView(ref, {
@@ -948,7 +979,7 @@ var ProcessCard = ({
         /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", 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: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
         ] })
       ]
     }
@@ -971,7 +1002,7 @@ function ProcessScrollImage({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -993,7 +1024,7 @@ function ProcessScrollImage({
         {
           name: "lucide/corner-down-right",
           size: 20,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       )
     }
@@ -1002,33 +1033,39 @@ function ProcessScrollImage({
     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,
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
+          children: resolvedActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) });
+              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(() => {
@@ -1040,7 +1077,8 @@ function ProcessScrollImage({
         step,
         index,
         setActive,
-        itemClassName: stepItemClassName
+        itemClassName: stepItemClassName,
+        background
       },
       index
     )) });
@@ -1088,7 +1126,8 @@ function ProcessScrollImage({
                     "p",
                     {
                       className: cn(
-                        "text-base text-muted-foreground",
+                        "text-base",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description