@cntyclub/ui-react 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +14 -12
- package/dist/index.js +38 -48
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/pipeline.tsx +52 -60
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntyclub/ui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { ChevronRightIcon } from "lucide-react";
|
|
4
3
|
import { Fragment } from "react";
|
|
5
4
|
import type * as React from "react";
|
|
5
|
+
import { ChevronRight } from "lucide-react";
|
|
6
6
|
|
|
7
7
|
import { cn } from "../../lib/utils/css";
|
|
8
8
|
|
|
@@ -19,88 +19,80 @@ interface PipelineProps extends React.ComponentProps<"div"> {
|
|
|
19
19
|
/** Ordered funnel stages, left to right. */
|
|
20
20
|
stages: PipelineStage[];
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
23
|
-
* `stages.length - 1`). Typically a percentage string; any node works.
|
|
22
|
+
* Step-to-step conversion markers shown in the connector *between* stages
|
|
23
|
+
* (length = `stages.length - 1`). Typically a percentage string; any node works.
|
|
24
24
|
*/
|
|
25
25
|
conversions?: React.ReactNode[];
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
|
-
* A
|
|
30
|
-
* step-to-step conversion
|
|
29
|
+
* A conversion funnel — equal-width stages laid left to right, joined by
|
|
30
|
+
* connectors that carry the step-to-step conversion and a chevron pointing to
|
|
31
|
+
* the next stage, so the row reads as a flow rather than a set of loose stats.
|
|
31
32
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* attached to the stage number it converts from; when wide, it sits between
|
|
36
|
-
* the two stages with a chevron.
|
|
33
|
+
* The component is its own container query context: when it gets narrow (e.g.
|
|
34
|
+
* beside a docked panel) the connectors hide and the stages reflow into a
|
|
35
|
+
* two-column grid, staying readable without squashing the numbers.
|
|
37
36
|
*/
|
|
38
37
|
function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
|
|
39
38
|
return (
|
|
40
|
-
<div
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
<div
|
|
40
|
+
className={cn(
|
|
41
|
+
"@container flex items-stretch @max-[560px]:grid @max-[560px]:grid-cols-2 @max-[560px]:gap-x-6 @max-[560px]:gap-y-5",
|
|
42
|
+
className,
|
|
43
|
+
)}
|
|
44
|
+
data-slot="pipeline"
|
|
45
|
+
{...props}
|
|
46
|
+
>
|
|
47
|
+
{stages.map((stage, i) => {
|
|
48
|
+
const conv = i < stages.length - 1 ? conversions[i] : undefined;
|
|
49
|
+
return (
|
|
50
|
+
<Fragment key={i}>
|
|
51
|
+
<div className="min-w-0 flex-1 px-0.5" data-slot="pipeline-stage">
|
|
46
52
|
<div
|
|
47
|
-
className=
|
|
48
|
-
|
|
53
|
+
className={cn(
|
|
54
|
+
"font-sans font-bold text-3xl text-foreground leading-none tabular-nums tracking-tight",
|
|
55
|
+
stage.accent && "text-success",
|
|
56
|
+
)}
|
|
49
57
|
>
|
|
50
|
-
|
|
51
|
-
<span
|
|
52
|
-
className={cn(
|
|
53
|
-
"font-semibold text-2xl text-foreground leading-none tabular-nums tracking-tight",
|
|
54
|
-
stage.accent && "text-primary",
|
|
55
|
-
)}
|
|
56
|
-
>
|
|
57
|
-
{stage.value}
|
|
58
|
-
</span>
|
|
59
|
-
{conv != null ? (
|
|
60
|
-
<PipelineConversion className="@min-[640px]:hidden">
|
|
61
|
-
{conv}
|
|
62
|
-
</PipelineConversion>
|
|
63
|
-
) : null}
|
|
64
|
-
</div>
|
|
65
|
-
<div className="mt-1 text-muted-foreground text-xs leading-snug">
|
|
66
|
-
{stage.label}
|
|
67
|
-
</div>
|
|
58
|
+
{stage.value}
|
|
68
59
|
</div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
strokeWidth={2}
|
|
78
|
-
/>
|
|
79
|
-
</div>
|
|
80
|
-
) : null}
|
|
81
|
-
</Fragment>
|
|
82
|
-
);
|
|
83
|
-
})}
|
|
84
|
-
</div>
|
|
60
|
+
<div className="mt-2 text-muted-foreground text-xs leading-snug">
|
|
61
|
+
{stage.label}
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
{conv != null ? <PipelineConnector>{conv}</PipelineConnector> : null}
|
|
65
|
+
</Fragment>
|
|
66
|
+
);
|
|
67
|
+
})}
|
|
85
68
|
</div>
|
|
86
69
|
);
|
|
87
70
|
}
|
|
88
71
|
|
|
89
|
-
/**
|
|
90
|
-
|
|
72
|
+
/**
|
|
73
|
+
* The between-stages connector: a conversion pill above a chevron pointing to
|
|
74
|
+
* the next stage. Hidden when the funnel collapses to a grid.
|
|
75
|
+
*/
|
|
76
|
+
function PipelineConnector({
|
|
91
77
|
className,
|
|
78
|
+
children,
|
|
92
79
|
...props
|
|
93
|
-
}: React.ComponentProps<"
|
|
80
|
+
}: React.ComponentProps<"div">) {
|
|
94
81
|
return (
|
|
95
|
-
<
|
|
82
|
+
<div
|
|
96
83
|
className={cn(
|
|
97
|
-
"
|
|
84
|
+
"flex flex-none flex-col items-center justify-center gap-1.5 px-1 @max-[560px]:hidden",
|
|
98
85
|
className,
|
|
99
86
|
)}
|
|
100
|
-
data-slot="pipeline-
|
|
87
|
+
data-slot="pipeline-connector"
|
|
101
88
|
{...props}
|
|
102
|
-
|
|
89
|
+
>
|
|
90
|
+
<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">
|
|
91
|
+
{children}
|
|
92
|
+
</span>
|
|
93
|
+
<ChevronRight className="size-3.5 text-muted-foreground/40" aria-hidden />
|
|
94
|
+
</div>
|
|
103
95
|
);
|
|
104
96
|
}
|
|
105
97
|
|
|
106
|
-
export { Pipeline,
|
|
98
|
+
export { Pipeline, PipelineConnector, type PipelineProps, type PipelineStage };
|