@cntyclub/ui-react 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.5.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/components/ui/sidebar.tsx

@@ -58,6 +58,7 @@ function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
+  persistKey,
   className,
   style,
   children,
@@ -66,6 +67,14 @@ function SidebarProvider({
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Remember the expanded/collapsed state in `localStorage` under this key and
+   * restore it on the next load (desktop rail only; the mobile sheet is always
+   * closed on load). Opt-in — omit to keep the sidebar un-persisted. Ignored in
+   * controlled mode (when `open` is provided). The restore runs before first
+   * paint, so there's no expand→collapse flash.
+   */
+  persistKey?: string;
 }) {
   // Self-contained breakpoint check (md = 48rem). Resolved in a layout effect
   // before the first paint so the sidebar never flashes from mobile to desktop.
@@ -93,16 +102,38 @@ function SidebarProvider({
       }
 
       // Persist the sidebar state. document.cookie works in every browser
-      // (cookieStore is Chromium-only and throws elsewhere).
+      // (cookieStore is Chromium-only and throws elsewhere). When `persistKey`
+      // is set we also mirror it to localStorage so a client-only app (no SSR
+      // cookie read) can restore it on load.
       try {
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        if (persistKey) {
+          window.localStorage.setItem(persistKey, openState ? "true" : "false");
+        }
       } catch {
         // Ignore — persistence is best-effort.
       }
     },
-    [setOpenProp, open],
+    [setOpenProp, open, persistKey],
   );
 
+  // Restore the persisted (localStorage) open state on mount — uncontrolled use
+  // only. Runs in a layout effect so the restore lands before first paint (no
+  // expand→collapse flash). SSR renders `defaultOpen` and the client's first
+  // render matches it, so this reconciles afterwards without a hydration
+  // mismatch.
+  useIsomorphicLayoutEffect(() => {
+    if (!persistKey || openProp !== undefined) return;
+    try {
+      const stored = window.localStorage.getItem(persistKey);
+      if (stored === "true" || stored === "false") {
+        _setOpen(stored === "true");
+      }
+    } catch {
+      // Ignore — restore is best-effort.
+    }
+  }, [persistKey, openProp]);
+
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);

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";