@dtsports/design-system 0.2.0

package/src/components/badge.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Badge — per design.md §10
+ * Small uppercase pills used as status markers. Always paired with text
+ * (and optionally an icon) so they are NOT color-only signals.
+ *
+ * Sizes:
+ *  - xs (default): 20px tall, 6px horizontal padding
+ *  - sm:           24px tall, 8px horizontal padding
+ *
+ * Shape:
+ *  - rounded-sm (default): square-ish for inline cell badges
+ *  - rounded-full:         pill, reserved for game status (see StatusPill)
+ */
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 font-medium uppercase tracking-[0.04em] whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        neutral: "bg-bg-muted text-foreground",
+        outline: "border border-border-strong bg-transparent text-foreground",
+        forest: "bg-brand-forest text-brand-forest-foreground",
+        lime: "bg-brand-lime text-brand-lime-foreground",
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        danger: "bg-danger text-danger-foreground",
+        info: "bg-info text-info-foreground",
+        "muted-outline":
+          "border border-border-strong bg-transparent text-text-muted",
+      },
+      size: {
+        xs: "h-5 px-1.5 text-[10px] leading-none",
+        sm: "h-6 px-2 text-xs leading-none",
+      },
+      shape: {
+        square: "rounded-sm",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "xs",
+      shape: "square",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  /** Render as the child element (e.g. a link) with badge styling. */
+  asChild?: boolean;
+}
+
+export function Badge({
+  className,
+  variant,
+  size,
+  shape,
+  asChild = false,
+  ...props
+}: BadgeProps) {
+  const Comp = asChild ? Slot : "span";
+  return (
+    <Comp
+      className={cn(badgeVariants({ variant, size, shape }), className)}
+      {...props}
+    />
+  );
+}
+
+export { badgeVariants };

package/src/components/breadcrumb.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Breadcrumb — semantic nav for hierarchical location.
+ *
+ *   <Breadcrumb>
+ *     <BreadcrumbList>
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink href="/admin">Admin</BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>Today</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * For Next.js Link, use `asChild` on BreadcrumbLink:
+ *   <BreadcrumbLink asChild><Link href="/admin">Admin</Link></BreadcrumbLink>
+ */
+export const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => (
+  <nav
+    ref={ref}
+    aria-label="Breadcrumb"
+    className={cn("text-sm", className)}
+    {...props}
+  />
+));
+Breadcrumb.displayName = "Breadcrumb";
+
+export const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 text-text-muted",
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+export const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean;
+}
+
+export const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbLinkProps
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = (asChild ? Slot : "a") as React.ElementType;
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "text-text-muted hover:text-foreground transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+export const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("text-foreground font-medium", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+export const BreadcrumbSeparator = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, children, ...props }, ref) => (
+  <li
+    ref={ref}
+    role="presentation"
+    aria-hidden="true"
+    className={cn(
+      "[&>svg]:h-3.5 [&>svg]:w-3.5 text-text-subtle inline-flex",
+      className
+    )}
+    {...props}
+  >
+    {children ?? <ChevronRight strokeWidth={1.75} />}
+  </li>
+));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/src/components/button.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Button — per design.md §10
+ *
+ * Variants:
+ *  - accent       The single loudest CTA on the screen (Book, Pay, Go Live). Lime, black text.
+ *  - primary      Default primary action. Forest, white text.
+ *  - secondary    Outline button. Cancel, alt actions.
+ *  - ghost        Toolbar / table row actions.
+ *  - destructive  Cancel game, refund, delete.
+ *  - link         In-flow inline link button.
+ *
+ * Sizes: xs (24px) · sm (28px) · default (32px) · lg (36px) · icon (32px
+ * square) · touch (44px — prominent mobile CTAs)
+ *
+ * Accessibility:
+ *  - Visible focus ring (2px theme ring color) via :focus-visible
+ *  - On touch devices (pointer: coarse) every size grows to a 44px
+ *    minimum hit target; visual density is preserved on desktop
+ *  - Disabled state has aria-friendly opacity drop; not interactive
+ *  - Icon-only buttons require aria-label
+ */
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 pointer-coarse:min-h-11",
+  {
+    variants: {
+      variant: {
+        accent:
+          "bg-brand-lime text-brand-lime-foreground hover:bg-brand-lime/90 active:bg-brand-lime/80",
+        primary:
+          "bg-brand-forest text-brand-forest-foreground hover:bg-brand-forest/90 active:bg-brand-forest/80",
+        secondary:
+          "border border-border-strong bg-background text-foreground hover:bg-bg-subtle active:bg-bg-muted",
+        ghost: "text-foreground hover:bg-bg-subtle active:bg-bg-muted",
+        destructive:
+          "bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80",
+        link: "text-brand-forest underline-offset-4 hover:underline px-0",
+      },
+      size: {
+        xs: "h-6 px-2 text-xs rounded-sm",
+        sm: "h-7 px-2.5 text-xs rounded-sm",
+        default: "h-8 px-3 text-sm rounded-sm",
+        lg: "h-9 px-4 text-sm rounded-sm",
+        icon: "h-8 w-8 rounded-sm pointer-coarse:min-w-11",
+        touch: "h-11 px-4 text-md rounded-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, type, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        ref={ref}
+        type={asChild ? undefined : (type ?? "button")}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { buttonVariants };

package/src/components/calendar.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/utils";
+
+/**
+ * Calendar — themed react-day-picker. Usually consumed via DatePicker;
+ * use directly for inline calendars (availability views, embedded
+ * scheduling).
+ *
+ *   <Calendar mode="single" selected={date} onSelect={setDate} />
+ *
+ * Keyboard: arrows move by day/week, PageUp/Down by month, Home/End to
+ * week edges, Enter selects (provided by react-day-picker).
+ */
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export function Calendar({ className, classNames, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      className={cn("p-3", className)}
+      classNames={{
+        root: "relative",
+        months: "flex flex-col gap-4",
+        month: "space-y-3",
+        month_caption: "flex items-center justify-center h-8",
+        caption_label: "text-sm font-semibold",
+        nav: "absolute inset-x-1 top-1 z-10 flex items-center justify-between",
+        button_previous: cn(
+          "inline-flex h-6 w-6 pointer-coarse:h-11 pointer-coarse:w-11 items-center justify-center rounded-sm text-text-muted",
+          "hover:bg-bg-subtle hover:text-foreground transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:opacity-40 disabled:pointer-events-none"
+        ),
+        button_next: cn(
+          "inline-flex h-6 w-6 pointer-coarse:h-11 pointer-coarse:w-11 items-center justify-center rounded-sm text-text-muted",
+          "hover:bg-bg-subtle hover:text-foreground transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:opacity-40 disabled:pointer-events-none"
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday:
+          "w-8 text-[10px] font-semibold uppercase tracking-[0.06em] text-text-subtle",
+        weeks: "space-y-0.5",
+        week: "flex",
+        day: "p-0",
+        day_button: cn(
+          "h-8 w-8 pointer-coarse:h-11 pointer-coarse:w-11 rounded-sm text-sm tabular transition-colors",
+          "hover:bg-bg-subtle",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:opacity-40 disabled:pointer-events-none"
+        ),
+        selected:
+          "[&>button]:bg-brand-forest [&>button]:text-brand-forest-foreground [&>button]:hover:bg-brand-forest",
+        today: "[&>button]:font-bold [&>button]:text-brand-forest",
+        outside: "[&>button]:text-text-subtle",
+        disabled: "[&>button]:opacity-40 [&>button]:pointer-events-none",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation, ...chevronProps }) =>
+          orientation === "left" ? (
+            <ChevronLeft
+              className="h-4 w-4"
+              strokeWidth={1.75}
+              aria-hidden="true"
+              {...chevronProps}
+            />
+          ) : (
+            <ChevronRight
+              className="h-4 w-4"
+              strokeWidth={1.75}
+              aria-hidden="true"
+              {...chevronProps}
+            />
+          ),
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/capacity-bar.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * CapacityBar — the spots-filled visualization used everywhere games
+ * appear (admin row, public card, game detail aside).
+ *
+ *   <CapacityBar filled={8} capacity={10} minToRun={6} />
+ *
+ * Colors:
+ *   - foreground   when 100% full
+ *   - warning      when filled < minToRun (sub-minimum, needs action)
+ *   - brand-forest otherwise
+ */
+const HEIGHT_MAP = {
+  sm: "h-1",
+  default: "h-1.5",
+  lg: "h-2",
+} as const;
+
+export interface CapacityBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  filled: number;
+  capacity: number;
+  /** Below this number, the bar tints warning */
+  minToRun?: number;
+  /** Show the "8/10" count text next to the bar */
+  showCount?: boolean;
+  /** Bar thickness */
+  size?: keyof typeof HEIGHT_MAP;
+  /** Override the accessible label (default: "8 of 10 spots filled") */
+  label?: string;
+}
+
+export function CapacityBar({
+  filled,
+  capacity,
+  minToRun,
+  showCount = true,
+  size = "default",
+  label,
+  className,
+  ...props
+}: CapacityBarProps) {
+  const pct = capacity > 0 ? Math.round((filled / capacity) * 100) : 0;
+  const isFull = filled >= capacity;
+  const belowMin = minToRun !== undefined && filled < minToRun;
+
+  return (
+    <div className={cn("flex items-center gap-2", className)} {...props}>
+      <div
+        className={cn(
+          "flex-1 rounded-full bg-bg-muted overflow-hidden",
+          HEIGHT_MAP[size]
+        )}
+        role="progressbar"
+        aria-valuenow={filled}
+        aria-valuemin={0}
+        aria-valuemax={capacity}
+        aria-label={label ?? `${filled} of ${capacity} spots filled`}
+      >
+        <div
+          className={cn(
+            "h-full transition-all",
+            isFull
+              ? "bg-foreground"
+              : belowMin
+                ? "bg-warning"
+                : "bg-brand-forest"
+          )}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      {showCount && (
+        <span className="tabular text-xs text-text-muted shrink-0">
+          {filled}/{capacity}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/card.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils";
+
+/**
+ * Card primitives — per design.md §10
+ * Border 1px, radius 4px, padding 16–20px. NO shadow at rest.
+ *
+ * Composition:
+ *   <Card>
+ *     <CardHeader>
+ *       <CardTitle>…</CardTitle>
+ *       <CardDescription>…</CardDescription>
+ *     </CardHeader>
+ *     <CardContent>…</CardContent>
+ *     <CardFooter>…</CardFooter>
+ *   </Card>
+ */
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Render as the child element (e.g. a Next.js Link) with card styling. */
+  asChild?: boolean;
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "rounded border border-border bg-background text-foreground",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex items-start justify-between gap-3 px-5 pt-4 pb-3 border-b border-border",
+      className
+    )}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-md font-semibold tracking-[-0.01em]", className)}
+    {...props}
+  >
+    {children}
+  </h3>
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-xs text-text-muted mt-0.5", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("px-5 py-4", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex items-center justify-end gap-2 px-5 py-3 border-t border-border bg-bg-subtle/50",
+      className
+    )}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

package/src/components/checkbox.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Checkbox — square 16px control with brand-forest fill when checked.
+ *
+ * Supports `indeterminate` via Radix (pass `checked="indeterminate"`).
+ * Always pair with a Label (`htmlFor` matching the checkbox `id`) — the
+ * FormField component does this automatically.
+ */
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-border-strong bg-background transition-colors",
+      // Invisible hit-area extension: 24px on desktop (WCAG 2.5.8),
+      // 44px on touch devices — the visual stays 16px.
+      "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]:bg-brand-forest data-[state=checked]:border-brand-forest data-[state=checked]:text-brand-forest-foreground",
+      "data-[state=indeterminate]:bg-brand-forest data-[state=indeterminate]:border-brand-forest data-[state=indeterminate]:text-brand-forest-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      <Check
+        className="h-3 w-3 data-[state=indeterminate]:hidden"
+        strokeWidth={3}
+      />
+      <Minus
+        className="hidden h-3 w-3 data-[state=indeterminate]:block"
+        strokeWidth={3}
+      />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = "Checkbox";

package/src/components/chip.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Chip — small removable token. Use for active filter indicators,
+ * applied tags, selected options in a multi-select summary.
+ *
+ *   <Chip onRemove={() => setVenue("all")}>Astoria Turf</Chip>
+ *   <Chip variant="neutral">Soccer</Chip>
+ *
+ * Distinct from Badge: Chips are interactive (often have a close button)
+ * and represent transient selections, while Badges are static labels.
+ */
+export const chipVariants = cva(
+  "inline-flex items-center gap-1 h-5 px-1.5 rounded-sm text-xs font-medium leading-none whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        accent: "bg-brand-forest/10 text-brand-forest",
+        neutral: "bg-bg-muted text-foreground",
+        outline: "border border-border-strong bg-transparent text-foreground",
+      },
+    },
+    defaultVariants: { variant: "accent" },
+  }
+);
+
+export interface ChipProps
+  extends
+    React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof chipVariants> {
+  /** When provided, renders an × button. */
+  onRemove?: () => void;
+  /** Accessible label for the remove button (default: "Remove {children}") */
+  removeLabel?: string;
+}
+
+export function Chip({
+  className,
+  variant,
+  onRemove,
+  removeLabel,
+  children,
+  ...props
+}: ChipProps) {
+  return (
+    <span className={cn(chipVariants({ variant }), className)} {...props}>
+      <span>{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={
+            removeLabel ??
+            `Remove ${typeof children === "string" ? children : "filter"}`
+          }
+          className={cn(
+            "rounded-sm p-0.5 transition-colors",
+            "hover:bg-current/10",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            // Invisible hit-area extension: 26px desktop / 46px touch.
+            "relative after:absolute after:-inset-1.5 pointer-coarse:after:-inset-4"
+          )}
+        >
+          <X className="h-2.5 w-2.5" strokeWidth={2} />
+        </button>
+      )}
+    </span>
+  );
+}