@cntyclub/ui-react 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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

@@ -19,19 +19,21 @@ interface PipelineProps extends React.ComponentProps<"div"> {
   /** Ordered funnel stages, left to right. */
   stages: PipelineStage[];
   /**
-   * Step-to-step conversion markers shown in the connector *between* stages
-   * (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 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.
+ * 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 connectors hide and the stages reflow into a
+ * 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) {
@@ -49,19 +51,30 @@ function Pipeline({ stages, conversions = [], className, ...props }: PipelinePro
         return (
           <Fragment key={i}>
             <div className="min-w-0 flex-1 px-0.5" data-slot="pipeline-stage">
-              <div
-                className={cn(
-                  "font-sans font-bold text-3xl text-foreground leading-none tabular-nums tracking-tight",
-                  stage.accent && "text-success",
-                )}
-              >
-                {stage.value}
+              <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>
-            {conv != null ? <PipelineConnector>{conv}</PipelineConnector> : null}
+            {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>
         );
       })}
@@ -69,30 +82,21 @@ function Pipeline({ stages, conversions = [], className, ...props }: PipelinePro
   );
 }
 
-/**
- * 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({
+/** The conversion pill sitting beside a stage number. */
+function PipelineConversion({
   className,
-  children,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"span">) {
   return (
-    <div
+    <span
       className={cn(
-        "flex flex-none flex-col items-center justify-center gap-1.5 px-1 @max-[560px]:hidden",
+        "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-connector"
+      data-slot="pipeline-conversion"
       {...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, PipelineConnector, type PipelineProps, type PipelineStage };
+export { Pipeline, PipelineConversion, type PipelineProps, type PipelineStage };

package/src/components/ui/segmented-control.tsx

@@ -22,6 +22,17 @@ interface SegmentedControlProps<T extends string> {
   className?: string;
 }
 
+/**
+ * Per-size segment padding. The base toggle sizes are icon-button tight
+ * (~5px), which crowds text labels like "Past 3 months"; a segmented control
+ * reads as text tabs, so it wants room to breathe on both axes.
+ */
+const SEGMENT_SIZE: Record<NonNullable<SegmentedControlProps<string>["size"]>, string> = {
+  sm: "h-8 px-3.5 sm:h-7",
+  default: "h-9 px-4 sm:h-8",
+  lg: "h-10 px-5 sm:h-9",
+};
+
 /**
  * A single-select segmented control — a compact row of mutually-exclusive
  * options (e.g. a time-range switch: Past month / Past 3 months / Overall).
@@ -53,7 +64,11 @@ function SegmentedControl<T extends string>({
       variant={variant}
     >
       {options.map((option) => (
-        <ToggleGroupItem key={option.value} value={option.value}>
+        <ToggleGroupItem
+          key={option.value}
+          value={option.value}
+          className={SEGMENT_SIZE[size]}
+        >
           {option.label}
         </ToggleGroupItem>
       ))}