@dtsports/design-system 0.2.0

package/src/components/metric-tile.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * MetricTile — per design.md §10
+ *
+ * Three lines exactly: label / value / delta.
+ *  - label: text-xs uppercase muted
+ *  - value: text-2xl semibold tabular
+ *  - delta: text-xs forest (up) / danger (down) / muted (flat)
+ *
+ * Use 3–4 across in dashboard rows.
+ */
+export interface MetricTileProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  value: React.ReactNode;
+  /** Numeric delta vs prior period. Sign and direction are derived. */
+  delta?: number;
+  /** Human-readable suffix appended to the delta, e.g. "vs last week" */
+  deltaLabel?: string;
+  /** Override the delta direction (e.g. when "up" is bad like refunds) */
+  invertDelta?: boolean;
+}
+
+export function MetricTile({
+  label,
+  value,
+  delta,
+  deltaLabel = "vs last week",
+  invertDelta = false,
+  className,
+  ...props
+}: MetricTileProps) {
+  const direction: "up" | "down" | "flat" =
+    delta === undefined || delta === 0 ? "flat" : delta > 0 ? "up" : "down";
+
+  const positive =
+    direction === "up"
+      ? !invertDelta
+      : direction === "down"
+        ? invertDelta
+        : null;
+
+  return (
+    <div
+      className={cn(
+        "rounded border border-border bg-background p-4",
+        className
+      )}
+      {...props}
+    >
+      <div className="text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+        {label}
+      </div>
+      <div className="tabular mt-1 text-2xl font-semibold tracking-[-0.01em] text-foreground">
+        {value}
+      </div>
+      {delta !== undefined && (
+        <div
+          className={cn(
+            "mt-1 inline-flex items-center gap-1 text-xs",
+            positive === null
+              ? "text-text-muted"
+              : positive
+                ? "text-brand-forest"
+                : "text-danger"
+          )}
+        >
+          {direction === "up" ? (
+            <ArrowUp className="h-3 w-3" strokeWidth={2} />
+          ) : direction === "down" ? (
+            <ArrowDown className="h-3 w-3" strokeWidth={2} />
+          ) : (
+            <Minus className="h-3 w-3" strokeWidth={2} />
+          )}
+          <span className="tabular">{Math.abs(delta)}%</span>
+          <span className="text-text-muted">{deltaLabel}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/money-breakdown.tsx

@@ -0,0 +1,92 @@
+import { cn } from "../lib/utils";
+
+/**
+ * MoneyBreakdown — implements design.md §3.15 Money UX.
+ *
+ * Always shown before any charge. Every line is named, signed, and
+ * tabular-aligned. The receipt component should render the same lines
+ * in the same order.
+ *
+ * Usage:
+ *   <MoneyBreakdown
+ *     lines={[
+ *       { label: "Game fee",      cents: 1400 },
+ *       { label: "Credit applied", cents: -600, muted: true },
+ *       { label: "Sales tax",      cents: 70 },
+ *     ]}
+ *     totalLabel="Charged to card"
+ *     totalCents={870}
+ *   />
+ */
+export interface MoneyLine {
+  label: string;
+  cents: number;
+  /** Render in muted text (for credit applied, taxes, etc.). */
+  muted?: boolean;
+  /** Optional hint shown under the label. */
+  hint?: string;
+}
+
+export interface MoneyBreakdownProps {
+  lines: MoneyLine[];
+  totalLabel?: string;
+  totalCents: number;
+  /** Currency code; default USD. */
+  currency?: string;
+  className?: string;
+}
+
+function fmt(cents: number, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(cents / 100);
+}
+
+export function MoneyBreakdown({
+  lines,
+  totalLabel = "Total",
+  totalCents,
+  currency = "USD",
+  className,
+}: MoneyBreakdownProps) {
+  return (
+    <dl className={cn("rounded border border-border bg-background", className)}>
+      {lines.map((line, i) => (
+        <div
+          key={i}
+          className="flex items-start justify-between gap-4 px-4 py-2.5 border-b border-border last:border-b-0"
+        >
+          <dt
+            className={cn(
+              "text-sm",
+              line.muted ? "text-text-muted" : "text-foreground"
+            )}
+          >
+            {line.label}
+            {line.hint && (
+              <span className="block text-xs text-text-subtle mt-0.5">
+                {line.hint}
+              </span>
+            )}
+          </dt>
+          <dd
+            className={cn(
+              "tabular text-sm",
+              line.muted ? "text-text-muted" : "text-foreground"
+            )}
+          >
+            {line.cents < 0 ? "−" : ""}
+            {fmt(Math.abs(line.cents), currency)}
+          </dd>
+        </div>
+      ))}
+      <div className="flex items-center justify-between gap-4 px-4 py-3 bg-bg-subtle border-t border-border">
+        <dt className="text-sm font-semibold">{totalLabel}</dt>
+        <dd className="tabular text-md font-semibold">
+          {fmt(totalCents, currency)}
+        </dd>
+      </div>
+    </dl>
+  );
+}

package/src/components/number-input.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * NumberInput — stepper-style numeric input with explicit +/− buttons.
+ * Use for: capacity, min-to-run, price (in cents or units), quantity.
+ *
+ * Decimals: pass `step={0.5}` etc. Always set min/max for safe bounds.
+ */
+export interface NumberInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange" | "value" | "type"
+> {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      value,
+      onChange,
+      min,
+      max,
+      step = 1,
+      className,
+      disabled,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const clamp = (v: number) => {
+      let next = v;
+      if (min !== undefined && next < min) next = min;
+      if (max !== undefined && next > max) next = max;
+      return next;
+    };
+
+    const handleChange = (next: number) => {
+      onChange?.(clamp(next));
+    };
+
+    const cur = value ?? 0;
+    const decDisabled = disabled || (min !== undefined && cur <= min);
+    const incDisabled = disabled || (max !== undefined && cur >= max);
+
+    return (
+      <div
+        className={cn(
+          "inline-flex h-8 items-stretch rounded-sm border border-border-strong overflow-hidden",
+          // 44px control height + stepper width on touch devices.
+          "pointer-coarse:h-11",
+          "aria-[invalid=true]:border-danger",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        )}
+        aria-invalid={ariaInvalid}
+      >
+        <button
+          type="button"
+          aria-label="Decrease"
+          onClick={() => handleChange(cur - step)}
+          disabled={decDisabled}
+          className="w-7 pointer-coarse:w-11 grid place-items-center text-text-muted hover:bg-bg-subtle hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed border-r border-border-strong"
+        >
+          <Minus className="h-3.5 w-3.5" strokeWidth={1.75} />
+        </button>
+        <input
+          ref={ref}
+          id={id}
+          type="number"
+          inputMode="numeric"
+          value={value ?? ""}
+          onChange={(e) => {
+            const n = e.target.value === "" ? NaN : Number(e.target.value);
+            if (!Number.isNaN(n)) handleChange(n);
+          }}
+          min={min}
+          max={max}
+          step={step}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          className={cn(
+            "w-16 text-center text-sm font-medium tabular bg-background text-foreground",
+            "focus:outline-none focus-visible:bg-bg-subtle",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          )}
+          {...rest}
+        />
+        <button
+          type="button"
+          aria-label="Increase"
+          onClick={() => handleChange(cur + step)}
+          disabled={incDisabled}
+          className="w-7 pointer-coarse:w-11 grid place-items-center text-text-muted hover:bg-bg-subtle hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed border-l border-border-strong"
+        >
+          <Plus className="h-3.5 w-3.5" strokeWidth={1.75} />
+        </button>
+      </div>
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";

package/src/components/pagination.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Pagination — page navigation for tables and lists.
+ *
+ *   <Pagination
+ *     currentPage={page}
+ *     totalPages={totalPages}
+ *     onPageChange={setPage}
+ *   />
+ *
+ * Renders previous / page numbers (with ellipses for large counts) / next.
+ * Use only when total > 1; for <= 10 pages no ellipses are inserted.
+ *
+ * For URL-driven pagination (per design.md §3.9), pass an onPageChange
+ * that calls router.replace(?page=N).
+ */
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  /** Number of pages to show on each side of the current page. */
+  siblingCount?: number;
+  /** Disable interaction (e.g., while fetching). */
+  disabled?: boolean;
+}
+
+export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      siblingCount = 1,
+      disabled,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    if (totalPages <= 1) return null;
+
+    const pages = buildPageList(currentPage, totalPages, siblingCount);
+
+    const go = (p: number) => {
+      if (disabled) return;
+      const clamped = Math.max(1, Math.min(totalPages, p));
+      if (clamped !== currentPage) onPageChange(clamped);
+    };
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Pagination"
+        className={cn("flex items-center gap-1", className)}
+        {...rest}
+      >
+        <PageButton
+          aria-label="Previous page"
+          onClick={() => go(currentPage - 1)}
+          disabled={disabled || currentPage <= 1}
+        >
+          <ChevronLeft className="h-3.5 w-3.5" strokeWidth={1.75} />
+        </PageButton>
+
+        {pages.map((p, i) =>
+          p === "…" ? (
+            <span
+              key={`ellipsis-${i}`}
+              role="presentation"
+              aria-hidden="true"
+              className="h-7 w-7 grid place-items-center text-text-subtle"
+            >
+              <MoreHorizontal className="h-3 w-3" strokeWidth={1.75} />
+            </span>
+          ) : (
+            <PageButton
+              key={p}
+              aria-label={`Page ${p}`}
+              aria-current={p === currentPage ? "page" : undefined}
+              active={p === currentPage}
+              onClick={() => go(p)}
+              disabled={disabled}
+            >
+              {p}
+            </PageButton>
+          )
+        )}
+
+        <PageButton
+          aria-label="Next page"
+          onClick={() => go(currentPage + 1)}
+          disabled={disabled || currentPage >= totalPages}
+        >
+          <ChevronRight className="h-3.5 w-3.5" strokeWidth={1.75} />
+        </PageButton>
+      </nav>
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+
+function PageButton({
+  active,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "min-w-7 h-7 px-2 rounded-sm text-xs font-medium tabular transition-colors",
+        // 44px targets on touch devices; dense 28px on desktop.
+        "pointer-coarse:min-w-11 pointer-coarse:h-11",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        active
+          ? "bg-brand-forest text-brand-forest-foreground"
+          : "text-text-muted hover:bg-bg-subtle hover:text-foreground",
+        "disabled:opacity-40 disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function buildPageList(
+  current: number,
+  total: number,
+  siblings: number
+): Array<number | "…"> {
+  // Always include first + last; show ellipsis when there's a gap.
+  const range = (a: number, b: number): number[] => {
+    const out: number[] = [];
+    for (let i = a; i <= b; i++) out.push(i);
+    return out;
+  };
+
+  const totalShown = siblings * 2 + 5; // first + last + current + 2 ellipses
+  if (total <= totalShown) return range(1, total);
+
+  const leftBound = Math.max(2, current - siblings);
+  const rightBound = Math.min(total - 1, current + siblings);
+  const showLeftDots = leftBound > 2;
+  const showRightDots = rightBound < total - 1;
+
+  const list: Array<number | "…"> = [1];
+  if (showLeftDots) list.push("…");
+  for (const p of range(leftBound, rightBound)) list.push(p);
+  if (showRightDots) list.push("…");
+  list.push(total);
+  return list;
+}

package/src/components/popover.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../lib/utils";
+
+/**
+ * Popover — generic click-to-open floating panel.
+ *
+ * Use for:
+ *  - Date pickers
+ *  - Filter mini-menus
+ *  - "Quick edit" inline form panels
+ *  - Help text that's too long for a Tooltip
+ *
+ * Tooltip is hover-only and small; Popover is click + can hold any
+ * content (form, list, mini-chart). DropdownMenu is for action menus —
+ * if your popover content is "items you click," use DropdownMenu instead.
+ *
+ * Accessibility: PopoverContent renders with role="dialog", which needs
+ * an accessible name — always pass `aria-label` (or `aria-labelledby`
+ * pointing at a heading inside). The a11y test suite enforces this shape.
+ */
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded border border-border-strong bg-background p-3 text-sm text-foreground shadow-md outline-none",
+        "data-[state=open]:animate-fade-in",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = "PopoverContent";

package/src/components/progress.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../lib/utils";
+
+/**
+ * Progress — for multi-step flows (waiver → emergency contact → done),
+ * upload bars, anything with a known percent completion.
+ *
+ * If you don't know the percent (indeterminate), use Skeleton or Spinner.
+ *
+ * For "spots filled" use CapacityBar — same shape but with a min-to-run
+ * warning color and tabular count alongside.
+ */
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-1.5 w-full overflow-hidden rounded-full bg-bg-muted",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-brand-forest transition-transform duration-150"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = "Progress";

package/src/components/radio-group.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../lib/utils";
+
+/**
+ * RadioGroup + RadioGroupItem — Radix-backed, keyboard-navigable
+ * (Arrow / Home / End). Always wrap items in a <RadioGroup> with a
+ * matching set of <Label htmlFor=> wiring.
+ */
+export const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    className={cn("grid gap-2", className)}
+    {...props}
+  />
+));
+RadioGroup.displayName = "RadioGroup";
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "aspect-square h-4 w-4 rounded-full border border-border-strong bg-background transition-colors",
+      // Invisible hit-area extension: 24px desktop / 44px touch.
+      "relative after:absolute after:-inset-1 pointer-coarse:after:-inset-3.5",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-brand-forest",
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <span className="h-2 w-2 rounded-full bg-brand-forest" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = "RadioGroupItem";

package/src/components/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../lib/utils";
+
+/**
+ * ScrollArea — styled, consistent custom scrollbars across browsers.
+ * Wraps content that needs to scroll within a bounded region.
+ *
+ *   <ScrollArea className="h-72 w-48 rounded border">
+ *     <div className="p-4">… long content …</div>
+ *   </ScrollArea>
+ *
+ * For full-page scroll, use the browser default — don't wrap <body>.
+ */
+export const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = "ScrollArea";
+
+export const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border-strong" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = "ScrollBar";