@opensite/ui 1.6.5 → 1.6.7

package/dist/process-numbered-services.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/process-roadmap-timeline.cjs

@@ -5,6 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,88 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(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";
-    }
-  }
-}
-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,
@@ -592,6 +512,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 var StatusBadge = ({
   status,
   background,
@@ -600,35 +552,22 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
-  const { label, badgeClassName, icon } = config[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: cn(
-        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium",
-        badgeClassName,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 14 }),
-        label
-      ]
-    }
-  );
+  const { label, icon } = config[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 14 }),
+    label
+  ] });
 };
 function ProcessRoadmapTimeline({
   heading,
@@ -645,13 +584,13 @@ function ProcessRoadmapTimeline({
   milestoneCardClassName,
   milestoneNodeClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  patternClassName
 }) {
-  const resolvedHeading = title ?? heading;
+  const resolvedHeading = heading;
   const renderMilestones = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -675,9 +614,7 @@ function ProcessRoadmapTimeline({
                 "div",
                 {
                   className: cn(
-                    "rounded-lg border p-6 shadow-sm transition-shadow hover:shadow-md",
-                    getNestedCardBg(background, "card"),
-                    getNestedCardTextColor(background),
+                    "bg-card text-card-foreground rounded-lg border p-6 shadow-sm transition-shadow hover:shadow-md",
                     milestone.status === "in-progress" && "border-primary/50",
                     milestoneCardClassName
                   ),
@@ -690,13 +627,19 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          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.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium"), 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: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -708,9 +651,7 @@ function ProcessRoadmapTimeline({
                           "span",
                           {
                             className: cn(
-                              "rounded px-2 py-1 text-xs",
-                              getNestedCardBg(background, "muted"),
-                              getNestedCardTextColor(background)
+                              "rounded border text-card-foreground px-2 py-1 text-xs"
                             ),
                             children: feature
                           },
@@ -723,39 +664,35 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "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 })
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
         ]
       },
       index
     )) });
-  }, [milestonesSlot, milestones, background, milestoneCardClassName, milestoneNodeClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    background,
+    milestoneCardClassName,
+    milestoneNodeClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className,
       pattern,
       patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
               className: cn(
-                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl text-balance",
                 headingClassName
               ),
               children: resolvedHeading
@@ -765,8 +702,7 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg",
-                getTextColor(background, "muted"),
+                "mx-auto max-w-2xl text-lg text-balance",
                 descriptionClassName
               ),
               children: description

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -100,6 +100,10 @@ interface ProcessRoadmapTimelineProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -109,17 +113,17 @@ interface ProcessRoadmapTimelineProps {
      */
     patternOpacity?: number;
     /**
-     * OptixFlow image optimization configuration
+     * Additional CSS classes for the pattern overlay
      */
-    optixFlowConfig?: OptixFlowConfig;
+    patternClassName?: string;
     /**
-     * @deprecated Use `heading` instead
+     * OptixFlow image optimization configuration
      */
-    title?: string;
+    optixFlowConfig?: OptixFlowConfig;
 }
 /**
  * ProcessRoadmapTimeline - A roadmap timeline showing project milestones with status indicators.
  */
-declare function ProcessRoadmapTimeline({ heading, description, milestones, milestonesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, milestoneCardClassName, milestoneNodeClassName, background, spacing, pattern, patternOpacity, title, }: ProcessRoadmapTimelineProps): React.JSX.Element;
+declare function ProcessRoadmapTimeline({ heading, description, milestones, milestonesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, milestoneCardClassName, milestoneNodeClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ProcessRoadmapTimelineProps): React.JSX.Element;
 
 export { ProcessRoadmapTimeline, type ProcessRoadmapTimelineProps };

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -100,6 +100,10 @@ interface ProcessRoadmapTimelineProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -109,17 +113,17 @@ interface ProcessRoadmapTimelineProps {
      */
     patternOpacity?: number;
     /**
-     * OptixFlow image optimization configuration
+     * Additional CSS classes for the pattern overlay
      */
-    optixFlowConfig?: OptixFlowConfig;
+    patternClassName?: string;
     /**
-     * @deprecated Use `heading` instead
+     * OptixFlow image optimization configuration
      */
-    title?: string;
+    optixFlowConfig?: OptixFlowConfig;
 }
 /**
  * ProcessRoadmapTimeline - A roadmap timeline showing project milestones with status indicators.
  */
-declare function ProcessRoadmapTimeline({ heading, description, milestones, milestonesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, milestoneCardClassName, milestoneNodeClassName, background, spacing, pattern, patternOpacity, title, }: ProcessRoadmapTimelineProps): React.JSX.Element;
+declare function ProcessRoadmapTimeline({ heading, description, milestones, milestonesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, milestoneCardClassName, milestoneNodeClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ProcessRoadmapTimelineProps): React.JSX.Element;
 
 export { ProcessRoadmapTimeline, type ProcessRoadmapTimelineProps };