@cntyclub/ui-react 0.7.0 → 0.7.1

package/dist/index.d.ts

@@ -1233,20 +1233,16 @@ interface PipelineProps extends React$1.ComponentProps<"div"> {
     /** Ordered funnel stages, left to right. */
     stages: PipelineStage[];
     /**
-     * Conversion markers shown between consecutive stages (length =
-     * `stages.length - 1`). Typically a percentage string; any node works.
+     * Conversion markers shown after each stage (length = `stages.length - 1`).
+     * Typically a percentage string; any node works.
      */
     conversions?: React$1.ReactNode[];
 }
 /**
- * A horizontal conversion funnel — a row of headline stages with the
- * step-to-step conversion shown between them.
- *
- * Self-contained responsive: the component establishes its own container, so
- * it lays out as a horizontal funnel when it has room and stacks vertically
- * when narrow (e.g. beside a docked panel). When stacked, each conversion sits
- * attached to the stage number it converts from; when wide, it sits between
- * the two stages with a chevron.
+ * A horizontal conversion funnel — a row of headline stages, each with the
+ * step-to-step conversion pill sitting right beside its number. The row wraps
+ * onto multiple lines when space is tight (e.g. beside a docked panel), so it
+ * stays readable without stretching the stages apart.
  */
 declare function Pipeline({ stages, conversions, className, ...props }: PipelineProps): React$1.JSX.Element;
 /** The small pill that carries a stage-to-stage conversion value. */

package/dist/index.js

@@ -6,7 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import * as React17 from 'react';
-import { createContext, memo, forwardRef, useRef, useState, useMemo, useContext, useEffect, useCallback, Fragment as Fragment$1, useSyncExternalStore, isValidElement, useLayoutEffect } from 'react';
+import { createContext, memo, forwardRef, useRef, useState, useMemo, useContext, useEffect, useCallback, useSyncExternalStore, isValidElement, useLayoutEffect } from 'react';
 import { flushSync } from 'react-dom';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
@@ -7406,51 +7406,33 @@ function StepperSeparator({ className, ...props }) {
   );
 }
 function Pipeline({ stages, conversions = [], className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("@container", className), "data-slot": "pipeline", ...props, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 @min-[640px]:flex-row @min-[640px]:items-start", children: stages.map((stage, i) => {
-    const conv = i < stages.length - 1 ? conversions[i] : void 0;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "min-w-0 py-1.5 @min-[640px]:flex-1 @min-[640px]:px-2 @min-[640px]:py-0",
-          "data-slot": "pipeline-stage",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "font-semibold text-2xl text-foreground leading-none tabular-nums tracking-tight",
-                    stage.accent && "text-primary"
-                  ),
-                  children: stage.value
-                }
-              ),
-              conv != null ? /* @__PURE__ */ jsx(PipelineConversion, { className: "@min-[640px]:hidden", children: conv }) : null
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground text-xs leading-snug", children: stage.label })
-          ]
-        }
-      ),
-      conv != null ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "hidden flex-col items-center justify-center gap-1 self-center px-1 @min-[640px]:flex",
-          "data-slot": "pipeline-connector",
-          children: [
-            /* @__PURE__ */ jsx(PipelineConversion, { children: conv }),
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-start gap-x-5 gap-y-4", className),
+      "data-slot": "pipeline",
+      ...props,
+      children: stages.map((stage, i) => {
+        const conv = i < stages.length - 1 ? conversions[i] : void 0;
+        return /* @__PURE__ */ jsxs("div", { "data-slot": "pipeline-stage", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
             /* @__PURE__ */ jsx(
-              ChevronRightIcon,
+              "span",
               {
-                className: "size-3.5 text-muted-foreground/50",
-                strokeWidth: 2
+                className: cn(
+                  "font-sans font-semibold text-3xl text-foreground leading-none tabular-nums tracking-tight",
+                  stage.accent && "text-primary"
+                ),
+                children: stage.value
               }
-            )
-          ]
-        }
-      ) : null
-    ] }, i);
-  }) }) });
+            ),
+            conv != null ? /* @__PURE__ */ jsx(PipelineConversion, { children: conv }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-muted-foreground text-xs leading-snug", children: stage.label })
+        ] }, i);
+      })
+    }
+  );
 }
 function PipelineConversion({
   className,