@opensite/ui 0.8.9 → 0.9.1

package/dist/media-hover-ctas.cjs

@@ -15,6 +15,32 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -417,7 +443,7 @@ function MediaHoverCtas({
           "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
         } : {}
       } : void 0;
-      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
+      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : getNestedCardBg(background, "muted");
       const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
       const hoverImageAltText = item.altText ?? "";
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -453,7 +479,7 @@ function MediaHoverCtas({
         index
       );
     });
-  }, [itemsSlot, resolvedItems, optixFlowConfig]);
+  }, [itemsSlot, resolvedItems, optixFlowConfig, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/media-hover-ctas.js

@@ -9,6 +9,32 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -411,7 +437,7 @@ function MediaHoverCtas({
           "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
         } : {}
       } : void 0;
-      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
+      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : getNestedCardBg(background, "muted");
       const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
       const hoverImageAltText = item.altText ?? "";
       return /* @__PURE__ */ jsxs(
@@ -447,7 +473,7 @@ function MediaHoverCtas({
         index
       );
     });
-  }, [itemsSlot, resolvedItems, optixFlowConfig]);
+  }, [itemsSlot, resolvedItems, optixFlowConfig, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/process-expandable-timeline.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -612,7 +664,8 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors hover:bg-muted/30",
+            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
+            `hover:${getNestedCardBg(background, "muted")}/30`,
             stepItemClassName
           ),
           children: [
@@ -620,27 +673,28 @@ function ProcessExpandableTimeline({
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 bg-background transition-colors",
-                  expandedIndex === index ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground group-hover:border-primary",
+                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  getNestedCardBg(background, "card"),
+                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: "absolute right-4 top-4 text-muted-foreground/30" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-12", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
                     size: 20,
-                    className: "text-muted-foreground"
+                    className: getTextColor(background, "muted")
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-muted-foreground", children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
             ] })
           ]
         }
@@ -662,7 +716,7 @@ function ProcessExpandableTimeline({
                 getNestedCardTextColor(background),
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
             }
           )
         }
@@ -693,7 +747,8 @@ function ProcessExpandableTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -705,7 +760,8 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                "absolute left-6 top-0 bottom-0 w-px",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-expandable-timeline.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -591,7 +643,8 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors hover:bg-muted/30",
+            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
+            `hover:${getNestedCardBg(background, "muted")}/30`,
             stepItemClassName
           ),
           children: [
@@ -599,27 +652,28 @@ function ProcessExpandableTimeline({
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 bg-background transition-colors",
-                  expandedIndex === index ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground group-hover:border-primary",
+                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  getNestedCardBg(background, "card"),
+                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsx(CornerConnector, { className: "absolute right-4 top-4 text-muted-foreground/30" }),
+            /* @__PURE__ */ jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 pr-12", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
                     size: 20,
-                    className: "text-muted-foreground"
+                    className: getTextColor(background, "muted")
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground", children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
             ] })
           ]
         }
@@ -641,7 +695,7 @@ function ProcessExpandableTimeline({
                 getNestedCardTextColor(background),
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
             }
           )
         }
@@ -672,7 +726,8 @@ function ProcessExpandableTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -684,7 +739,8 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                "absolute left-6 top-0 bottom-0 w-px",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-hover-cards.cjs

@@ -32,6 +32,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -412,7 +442,8 @@ var ProcessCard = ({
   index,
   optixFlowConfig,
   itemClassName,
-  hoverImageClassName
+  hoverImageClassName,
+  background
 }) => {
   const [isHovered, setIsHovered] = React__namespace.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
@@ -450,10 +481,10 @@ var ProcessCard = ({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center font-mono text-sm tracking-tighter text-muted-foreground", children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-fit items-center justify-center font-mono text-sm tracking-tighter", getTextColor(background, "muted")), children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-2xl font-semibold tracking-tighter transition-colors group-hover:text-primary lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md text-muted-foreground", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-2xl font-semibold tracking-tighter transition-colors lg:text-3xl", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }))
           ] })
         ] }) })
       ]
@@ -492,7 +523,8 @@ function ProcessHoverCards({
         index,
         optixFlowConfig,
         itemClassName: stepItemClassName,
-        hoverImageClassName
+        hoverImageClassName,
+        background
       },
       index
     )) });
@@ -521,7 +553,8 @@ function ProcessHoverCards({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-hover-cards.js

@@ -11,6 +11,36 @@ import { jsx, jsxs } 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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -391,7 +421,8 @@ var ProcessCard = ({
   index,
   optixFlowConfig,
   itemClassName,
-  hoverImageClassName
+  hoverImageClassName,
+  background
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
@@ -429,10 +460,10 @@ var ProcessCard = ({
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center font-mono text-sm tracking-tighter text-muted-foreground", children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsx("div", { className: cn("flex w-fit items-center justify-center font-mono text-sm tracking-tighter", getTextColor(background, "muted")), children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-semibold tracking-tighter transition-colors group-hover:text-primary lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "max-w-md text-muted-foreground", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-2xl font-semibold tracking-tighter transition-colors lg:text-3xl", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }))
           ] })
         ] }) })
       ]
@@ -471,7 +502,8 @@ function ProcessHoverCards({
         index,
         optixFlowConfig,
         itemClassName: stepItemClassName,
-        hoverImageClassName
+        hoverImageClassName,
+        background
       },
       index
     )) });
@@ -500,7 +532,8 @@ function ProcessHoverCards({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-icon-timeline.cjs

@@ -60,6 +60,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,
@@ -604,7 +652,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-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-muted-foreground", children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -661,7 +709,8 @@ function ProcessIconTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -673,7 +722,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
               )
             }