@cntyclub/ui-react 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.6.0",
+  "version": "0.7.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": [
@@ -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,81 @@
+"use client";
+
+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 after each stage (length = `stages.length - 1`).
+   * Typically a percentage string; any node works.
+   */
+  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.
+ */
+function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
+  return (
+    <div
+      className={cn("flex flex-wrap items-start gap-x-5 gap-y-4", 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}
+            </div>
+          </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";