@cntyclub/ui-react 0.8.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.8.1",
+  "version": "0.9.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": [

package/src/components/ui/animated-counter.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+interface AnimatedCounterProps extends Omit<React.ComponentProps<"span">, "children"> {
+  /** The target value to animate to. */
+  value: number;
+  /** Tween duration in ms (default 650). */
+  duration?: number;
+  /** Decimal places to render (default 0). */
+  decimals?: number;
+  /** Prefix rendered before the number, e.g. "$". */
+  prefix?: string;
+  /** Suffix rendered after the number, e.g. "%". */
+  suffix?: string;
+  /** Group digits with thousands separators (default true). */
+  separator?: boolean;
+}
+
+/**
+ * A number that tweens smoothly from its previous value to the next whenever
+ * `value` changes — e.g. dashboard stats re-counting when the time range
+ * switches. Dependency-free (requestAnimationFrame), so it stays tiny and works
+ * anywhere. Respects `prefers-reduced-motion` by snapping to the final value.
+ *
+ * The animation is purely visual; the accessible text is always the final
+ * value (via `aria-label`) so screen readers never read the intermediate tween.
+ */
+function AnimatedCounter({
+  value,
+  duration = 650,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  separator = true,
+  className,
+  ...props
+}: AnimatedCounterProps) {
+  const [display, setDisplay] = useState(value);
+  const fromRef = useRef(value);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const from = fromRef.current;
+    const to = value;
+    if (from === to) return;
+
+    const reduce =
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduce || duration <= 0) {
+      fromRef.current = to;
+      setDisplay(to);
+      return;
+    }
+
+    let start: number | null = null;
+    const step = (ts: number) => {
+      if (start === null) start = ts;
+      const t = Math.min(1, (ts - start) / duration);
+      // easeOutCubic — quick then settles, matching a "count up" feel.
+      const eased = 1 - Math.pow(1 - t, 3);
+      const current = from + (to - from) * eased;
+      setDisplay(current);
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(step);
+      } else {
+        fromRef.current = to;
+      }
+    };
+    rafRef.current = requestAnimationFrame(step);
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [value, duration]);
+
+  const rounded = Number(display.toFixed(decimals));
+  const formatted = separator
+    ? rounded.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      })
+    : rounded.toFixed(decimals);
+
+  const finalLabel = `${prefix}${value.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  })}${suffix}`;
+
+  return (
+    <span
+      className={cn("tabular-nums", className)}
+      data-slot="animated-counter"
+      aria-label={finalLabel}
+      {...props}
+    >
+      <span aria-hidden>
+        {prefix}
+        {formatted}
+        {suffix}
+      </span>
+    </span>
+  );
+}
+
+export { AnimatedCounter, type AnimatedCounterProps };

package/src/components/ui/date-picker.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange, Matcher } from "react-day-picker";
+
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../../lib/utils/css";
+
+/** Build react-day-picker `disabled` matchers from optional min/max bounds. */
+function boundsMatcher(fromDate?: Date, toDate?: Date): Matcher[] | undefined {
+  const out: Matcher[] = [];
+  if (fromDate) out.push({ before: fromDate });
+  if (toDate) out.push({ after: toDate });
+  return out.length ? out : undefined;
+}
+
+interface DatePickerProps {
+  /** The selected date (controlled). */
+  value?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  /** Trigger button `disabled`. */
+  disabled?: boolean;
+  /** Restrict selectable days (passed straight to react-day-picker). */
+  fromDate?: Date;
+  toDate?: Date;
+  /** date-fns format for the trigger label (default "LLL dd, y"). */
+  displayFormat?: string;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A single-date picker: a button that opens a calendar in a popover. The
+ * canonical way to take a date in this system — never a native `<input
+ * type="date">`. Controlled via `value` / `onValueChange`.
+ */
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled,
+  fromDate,
+  toDate,
+  displayFormat = "LLL dd, y",
+  align = "start",
+  className,
+  id,
+  ...props
+}: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            className={cn("w-full justify-start font-normal", !value && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+            aria-label={props["aria-label"]}
+          />
+        }
+      >
+        <CalendarIcon aria-hidden />
+        {value ? format(value, displayFormat) : <span>{placeholder}</span>}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0">
+        <Calendar
+          autoFocus
+          disabled={boundsMatcher(fromDate, toDate)}
+          mode="single"
+          onSelect={(d) => onValueChange?.(d)}
+          selected={value}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DateRangePickerProps {
+  value?: DateRange;
+  onValueChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  fromDate?: Date;
+  toDate?: Date;
+  numberOfMonths?: number;
+  displayFormat?: string;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A date-range picker: pick a start and (optionally) end date. Controlled via
+ * `value` / `onValueChange` with react-day-picker's `{from, to}` shape.
+ */
+function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date range",
+  disabled,
+  fromDate,
+  toDate,
+  numberOfMonths = 2,
+  displayFormat = "LLL dd, y",
+  align = "start",
+  className,
+  id,
+  ...props
+}: DateRangePickerProps) {
+  const label = value?.from
+    ? value.to
+      ? `${format(value.from, displayFormat)} – ${format(value.to, displayFormat)}`
+      : format(value.from, displayFormat)
+    : null;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            className={cn("w-full justify-start font-normal", !label && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+            aria-label={props["aria-label"]}
+          />
+        }
+      >
+        <CalendarIcon aria-hidden />
+        {label ?? <span>{placeholder}</span>}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0">
+        <Calendar
+          autoFocus
+          disabled={boundsMatcher(fromDate, toDate)}
+          mode="range"
+          numberOfMonths={numberOfMonths}
+          onSelect={(r) => onValueChange?.(r)}
+          selected={value}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps };

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

@@ -22,6 +22,17 @@ interface SegmentedControlProps<T extends string> {
   className?: string;
 }
 
+/**
+ * Per-size segment padding. The base toggle sizes are icon-button tight
+ * (~5px), which crowds text labels like "Past 3 months"; a segmented control
+ * reads as text tabs, so it wants room to breathe on both axes.
+ */
+const SEGMENT_SIZE: Record<NonNullable<SegmentedControlProps<string>["size"]>, string> = {
+  sm: "h-8 px-3.5 sm:h-7",
+  default: "h-9 px-4 sm:h-8",
+  lg: "h-10 px-5 sm:h-9",
+};
+
 /**
  * A single-select segmented control — a compact row of mutually-exclusive
  * options (e.g. a time-range switch: Past month / Past 3 months / Overall).
@@ -53,7 +64,11 @@ function SegmentedControl<T extends string>({
       variant={variant}
     >
       {options.map((option) => (
-        <ToggleGroupItem key={option.value} value={option.value}>
+        <ToggleGroupItem
+          key={option.value}
+          value={option.value}
+          className={SEGMENT_SIZE[size]}
+        >
           {option.label}
         </ToggleGroupItem>
       ))}

package/src/index.ts

@@ -11,11 +11,13 @@ export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/autocomplete";
 export * from "./components/ui/avatar";
 export * from "./components/ui/avatar-group";
+export * from "./components/ui/animated-counter";
 export * from "./components/ui/badge";
 export * from "./components/ui/badge-group";
 export * from "./components/ui/breadcrumb";
 export * from "./components/ui/button";
 export * from "./components/ui/calendar";
+export * from "./components/ui/date-picker";
 export * from "./components/ui/card";
 export * from "./components/ui/carousel";
 export * from "./components/ui/chart";