@cntyclub/ui-react 0.7.1 → 0.8.1

package/dist/index.d.ts

@@ -1233,19 +1233,24 @@ interface PipelineProps extends React$1.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$1.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.
  */
 declare function Pipeline({ stages, conversions, className, ...props }: PipelineProps): React$1.JSX.Element;
-/** The small pill that carries a stage-to-stage conversion value. */
+/** The conversion pill sitting beside a stage number. */
 declare function PipelineConversion({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
 
 interface SegmentedControlOption<T extends string> {

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, useSyncExternalStore, isValidElement, useLayoutEffect } from 'react';
+import { createContext, memo, forwardRef, useRef, useState, useMemo, useContext, useEffect, useCallback, Fragment as Fragment$1, 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';
@@ -7409,26 +7409,40 @@ function Pipeline({ stages, conversions = [], className, ...props }) {
   return /* @__PURE__ */ jsx(
     "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,
       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(
-              "span",
-              {
-                className: cn(
-                  "font-sans font-semibold text-3xl text-foreground leading-none tabular-nums tracking-tight",
-                  stage.accent && "text-primary"
-                ),
-                children: stage.value
-              }
-            ),
-            conv != null ? /* @__PURE__ */ jsx(PipelineConversion, { children: conv }) : null
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 px-0.5", "data-slot": "pipeline-stage", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "font-sans font-bold text-3xl text-foreground leading-none tabular-nums tracking-tight",
+                    stage.accent && "text-success"
+                  ),
+                  children: stage.value
+                }
+              ),
+              conv != null ? /* @__PURE__ */ jsx(PipelineConversion, { children: conv }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 text-muted-foreground text-xs leading-snug", children: stage.label })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-muted-foreground text-xs leading-snug", children: stage.label })
+          conv != null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex flex-none items-center px-1 @max-[560px]:hidden",
+              "data-slot": "pipeline-arrow",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground/40" })
+            }
+          ) : null
         ] }, i);
       })
     }
@@ -7442,7 +7456,7 @@ function PipelineConversion({
     "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",