@cntyclub/ui-react 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.6.0",
+  "version": "0.7.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": [
@@ -28,33 +28,6 @@
     "dist"
   ],
   "comment-publishConfig": "In-repo (docs/storybook/vue) consume src/ via the exports above. When PUBLISHED to a registry, npm/pnpm swap in these fields so external installs get the compiled, self-contained dist/ (tsup bundles every dependency except react/react-dom) — no transpilePackages, no heavy transitive dep tree.",
-  "publishConfig": {
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
-      },
-      "./form": {
-        "types": "./dist/form.d.ts",
-        "import": "./dist/form.js",
-        "default": "./dist/form.js"
-      },
-      "./styles.css": "./src/styles.css",
-      "./package.json": "./package.json"
-    },
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
-    "prepublishOnly": "tsup"
-  },
   "dependencies": {
     "@base-ui/react": "1.1.0",
     "@headlessui/react": "^2.2.9",
@@ -91,12 +64,18 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@countryclub/typescript-config": "workspace:*",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "@countryclub/typescript-config": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\""
   }
-}
+}

package/src/components/ui/pipeline.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment } from "react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+interface PipelineStage {
+  /** The headline number for the stage. */
+  value: React.ReactNode;
+  /** The stage caption, e.g. "Target accounts". */
+  label: React.ReactNode;
+  /** Render the value in the brand/primary color (e.g. a final stage). */
+  accent?: boolean;
+}
+
+interface PipelineProps extends React.ComponentProps<"div"> {
+  /** Ordered funnel stages, left to right. */
+  stages: PipelineStage[];
+  /**
+   * Conversion markers shown between consecutive stages (length =
+   * `stages.length - 1`). Typically a percentage string; any node works.
+   */
+  conversions?: React.ReactNode[];
+}
+
+/**
+ * A horizontal conversion funnel — a row of headline stages with the
+ * step-to-step conversion shown between them.
+ *
+ * Self-contained responsive: the component establishes its own container, so
+ * it lays out as a horizontal funnel when it has room and stacks vertically
+ * when narrow (e.g. beside a docked panel). When stacked, each conversion sits
+ * attached to the stage number it converts from; when wide, it sits between
+ * the two stages with a chevron.
+ */
+function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
+  return (
+    <div className={cn("@container", className)} data-slot="pipeline" {...props}>
+      <div className="flex flex-col gap-1 @min-[640px]:flex-row @min-[640px]:items-start">
+        {stages.map((stage, i) => {
+          const conv = i < stages.length - 1 ? conversions[i] : undefined;
+          return (
+            <Fragment key={i}>
+              <div
+                className="min-w-0 py-1.5 @min-[640px]:flex-1 @min-[640px]:px-2 @min-[640px]:py-0"
+                data-slot="pipeline-stage"
+              >
+                <div className="flex items-baseline gap-2">
+                  <span
+                    className={cn(
+                      "font-semibold text-2xl text-foreground leading-none tabular-nums tracking-tight",
+                      stage.accent && "text-primary",
+                    )}
+                  >
+                    {stage.value}
+                  </span>
+                  {conv != null ? (
+                    <PipelineConversion className="@min-[640px]:hidden">
+                      {conv}
+                    </PipelineConversion>
+                  ) : null}
+                </div>
+                <div className="mt-1 text-muted-foreground text-xs leading-snug">
+                  {stage.label}
+                </div>
+              </div>
+              {conv != null ? (
+                <div
+                  className="hidden flex-col items-center justify-center gap-1 self-center px-1 @min-[640px]:flex"
+                  data-slot="pipeline-connector"
+                >
+                  <PipelineConversion>{conv}</PipelineConversion>
+                  <ChevronRightIcon
+                    className="size-3.5 text-muted-foreground/50"
+                    strokeWidth={2}
+                  />
+                </div>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** The small pill that carries a stage-to-stage conversion value. */
+function PipelineConversion({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  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",
+        className,
+      )}
+      data-slot="pipeline-conversion"
+      {...props}
+    />
+  );
+}
+
+export { Pipeline, PipelineConversion, type PipelineProps, type PipelineStage };

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

@@ -0,0 +1,68 @@
+"use client";
+
+import type * as React from "react";
+
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+import { cn } from "../../lib/utils/css";
+
+interface SegmentedControlOption<T extends string> {
+  value: T;
+  label: React.ReactNode;
+}
+
+interface SegmentedControlProps<T extends string> {
+  /** The currently-selected option value. */
+  value: T;
+  /** Called with the newly-selected value (never with an empty selection). */
+  onValueChange: (value: T) => void;
+  /** The mutually-exclusive options, left to right. */
+  options: SegmentedControlOption<T>[];
+  size?: "sm" | "default" | "lg";
+  variant?: "default" | "outline";
+  className?: string;
+}
+
+/**
+ * A single-select segmented control — a compact row of mutually-exclusive
+ * options (e.g. a time-range switch: Past month / Past 3 months / Overall).
+ *
+ * A thin, typed wrapper over {@link ToggleGroup} that keeps exactly one option
+ * selected — the active segment can't be toggled off into an empty state — and
+ * hides Base UI's array-value plumbing. Pass `options`, `value`, and
+ * `onValueChange`; the value is a string union you control.
+ */
+function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  size = "sm",
+  variant = "outline",
+  className,
+}: SegmentedControlProps<T>) {
+  return (
+    <ToggleGroup
+      className={cn(className)}
+      data-slot="segmented-control"
+      value={[value]}
+      onValueChange={(groupValue) => {
+        const next = Array.isArray(groupValue) ? groupValue[0] : groupValue;
+        // Ignore the empty-array case so a segment always stays selected.
+        if (next != null) onValueChange(next as T);
+      }}
+      size={size}
+      variant={variant}
+    >
+      {options.map((option) => (
+        <ToggleGroupItem key={option.value} value={option.value}>
+          {option.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export {
+  SegmentedControl,
+  type SegmentedControlOption,
+  type SegmentedControlProps,
+};

package/src/index.ts

@@ -68,6 +68,8 @@ export * from "./components/ui/section-header";
 export * from "./components/ui/smooth-scroll";
 export * from "./components/ui/social-button";
 export * from "./components/ui/stepper";
+export * from "./components/ui/pipeline";
+export * from "./components/ui/segmented-control";
 export * from "./components/ui/select";
 export * from "./components/ui/separator";
 export * from "./components/ui/sheet";