@cntyclub/ui-react 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/pipeline.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { ChevronRightIcon } from "lucide-react";
-import { Fragment } from "react";
 import type * as React from "react";
 
 import { cn } from "../../lib/utils/css";
@@ -19,69 +17,46 @@ interface PipelineProps extends React.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.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.
  */
 function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
   return (
-    <div className={cn("@container", className)} data-slot="pipeline" {...props}>
-      <div className="flex flex-col gap-1 @min-[640px]:flex-row @min-[640px]:items-start">
-        {stages.map((stage, i) => {
-          const conv = i < stages.length - 1 ? conversions[i] : undefined;
-          return (
-            <Fragment key={i}>
-              <div
-                className="min-w-0 py-1.5 @min-[640px]:flex-1 @min-[640px]:px-2 @min-[640px]:py-0"
-                data-slot="pipeline-stage"
+    <div
+      className={cn("flex flex-wrap items-start gap-x-5 gap-y-4", className)}
+      data-slot="pipeline"
+      {...props}
+    >
+      {stages.map((stage, i) => {
+        const conv = i < stages.length - 1 ? conversions[i] : undefined;
+        return (
+          <div key={i} data-slot="pipeline-stage">
+            <div className="flex items-baseline gap-2">
+              <span
+                className={cn(
+                  "font-sans font-semibold text-3xl text-foreground leading-none tabular-nums tracking-tight",
+                  stage.accent && "text-primary",
+                )}
               >
-                <div className="flex items-baseline gap-2">
-                  <span
-                    className={cn(
-                      "font-semibold text-2xl text-foreground leading-none tabular-nums tracking-tight",
-                      stage.accent && "text-primary",
-                    )}
-                  >
-                    {stage.value}
-                  </span>
-                  {conv != null ? (
-                    <PipelineConversion className="@min-[640px]:hidden">
-                      {conv}
-                    </PipelineConversion>
-                  ) : null}
-                </div>
-                <div className="mt-1 text-muted-foreground text-xs leading-snug">
-                  {stage.label}
-                </div>
-              </div>
-              {conv != null ? (
-                <div
-                  className="hidden flex-col items-center justify-center gap-1 self-center px-1 @min-[640px]:flex"
-                  data-slot="pipeline-connector"
-                >
-                  <PipelineConversion>{conv}</PipelineConversion>
-                  <ChevronRightIcon
-                    className="size-3.5 text-muted-foreground/50"
-                    strokeWidth={2}
-                  />
-                </div>
-              ) : null}
-            </Fragment>
-          );
-        })}
-      </div>
+                {stage.value}
+              </span>
+              {conv != null ? <PipelineConversion>{conv}</PipelineConversion> : null}
+            </div>
+            <div className="mt-1.5 text-muted-foreground text-xs leading-snug">
+              {stage.label}
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 }