@cntyclub/ui-react 0.7.1 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.7.1",
+  "version": "0.8.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,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,51 +19,70 @@ 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. `conversions[i]` is the share of stage `i`
+   * that advances to stage `i + 1`, and is shown as a pill right beside stage
+   * `i`'s number (length = `stages.length - 1`). Typically a percentage string.
    */
   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. Each stage
+ * carries its own step-to-step conversion in a pill next to the number, and a
+ * chevron points 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 chevrons 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
-                className={cn(
-                  "font-sans font-semibold text-3xl text-foreground leading-none tabular-nums tracking-tight",
-                  stage.accent && "text-primary",
-                )}
-              >
-                {stage.value}
-              </span>
-              {conv != null ? <PipelineConversion>{conv}</PipelineConversion> : null}
-            </div>
-            <div className="mt-1.5 text-muted-foreground text-xs leading-snug">
-              {stage.label}
+          <Fragment key={i}>
+            <div className="min-w-0 flex-1 px-0.5" data-slot="pipeline-stage">
+              <div className="flex items-center gap-2">
+                <span
+                  className={cn(
+                    "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>
+            {conv != null ? (
+              <div
+                className="flex flex-none items-center px-1 @max-[560px]:hidden"
+                data-slot="pipeline-arrow"
+                aria-hidden
+              >
+                <ChevronRight className="size-3.5 text-muted-foreground/40" />
+              </div>
+            ) : null}
+          </Fragment>
         );
       })}
     </div>
   );
 }
 
-/** The small pill that carries a stage-to-stage conversion value. */
+/** The conversion pill sitting beside a stage number. */
 function PipelineConversion({
   className,
   ...props
@@ -69,7 +90,7 @@ function PipelineConversion({
   return (
     <span
       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",
+        "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",
         className,
       )}
       data-slot="pipeline-conversion"