@cntyclub/ui-react 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "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,6 +1,8 @@
 "use client";
 
+import { Fragment } from "react";
 import type * as React from "react";
+import { ChevronRight } from "lucide-react";
 
 import { cn } from "../../lib/utils/css";
 
@@ -17,65 +19,80 @@ interface PipelineProps extends React.ComponentProps<"div"> {
   /** Ordered funnel stages, left to right. */
   stages: PipelineStage[];
   /**
-   * Conversion markers shown after each stage (length = `stages.length - 1`).
-   * Typically a percentage string; any node works.
+   * Step-to-step conversion markers shown in the connector *between* stages
+   * (length = `stages.length - 1`). Typically a percentage string; any node works.
    */
   conversions?: React.ReactNode[];
 }
 
 /**
- * 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.
+ * A conversion funnel — equal-width stages laid left to right, joined by
+ * connectors that carry the step-to-step conversion and a chevron pointing to
+ * the next stage, so the row reads as a flow rather than a set of loose stats.
+ *
+ * The component is its own container query context: when it gets narrow (e.g.
+ * beside a docked panel) the connectors hide and the stages reflow into a
+ * two-column grid, staying readable without squashing the numbers.
  */
 function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
   return (
     <div
-      className={cn("flex flex-wrap items-start gap-x-5 gap-y-4", className)}
+      className={cn(
+        "@container flex items-stretch @max-[560px]:grid @max-[560px]:grid-cols-2 @max-[560px]:gap-x-6 @max-[560px]:gap-y-5",
+        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
+          <Fragment key={i}>
+            <div className="min-w-0 flex-1 px-0.5" data-slot="pipeline-stage">
+              <div
                 className={cn(
-                  "font-sans font-semibold text-3xl text-foreground leading-none tabular-nums tracking-tight",
-                  stage.accent && "text-primary",
+                  "font-sans font-bold text-3xl text-foreground leading-none tabular-nums tracking-tight",
+                  stage.accent && "text-success",
                 )}
               >
                 {stage.value}
-              </span>
-              {conv != null ? <PipelineConversion>{conv}</PipelineConversion> : null}
+              </div>
+              <div className="mt-2 text-muted-foreground text-xs leading-snug">
+                {stage.label}
+              </div>
             </div>
-            <div className="mt-1.5 text-muted-foreground text-xs leading-snug">
-              {stage.label}
-            </div>
-          </div>
+            {conv != null ? <PipelineConnector>{conv}</PipelineConnector> : null}
+          </Fragment>
         );
       })}
     </div>
   );
 }
 
-/** The small pill that carries a stage-to-stage conversion value. */
-function PipelineConversion({
+/**
+ * The between-stages connector: a conversion pill above a chevron pointing to
+ * the next stage. Hidden when the funnel collapses to a grid.
+ */
+function PipelineConnector({
   className,
+  children,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"div">) {
   return (
-    <span
+    <div
       className={cn(
-        "inline-flex items-center rounded-full border border-border bg-secondary px-2 py-0.5 font-medium text-secondary-foreground text-xs tabular-nums",
+        "flex flex-none flex-col items-center justify-center gap-1.5 px-1 @max-[560px]:hidden",
         className,
       )}
-      data-slot="pipeline-conversion"
+      data-slot="pipeline-connector"
       {...props}
-    />
+    >
+      <span className="inline-flex items-center rounded-full border border-success/20 bg-success/10 px-2 py-0.5 font-medium text-[11px] text-success tabular-nums dark:bg-success/16">
+        {children}
+      </span>
+      <ChevronRight className="size-3.5 text-muted-foreground/40" aria-hidden />
+    </div>
   );
 }
 
-export { Pipeline, PipelineConversion, type PipelineProps, type PipelineStage };
+export { Pipeline, PipelineConnector, type PipelineProps, type PipelineStage };