@dtsports/design-system 0.2.0

package/src/components/collapsible.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Collapsible — a single expandable region. Accordion is for GROUPS of
+ * sections with one-open-at-a-time semantics; Collapsible is one
+ * independent disclosure ("Show advanced options", "View 12 more").
+ *
+ *   <Collapsible>
+ *     <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
+ *     <CollapsibleContent>…</CollapsibleContent>
+ *   </Collapsible>
+ */
+export const Collapsible = CollapsiblePrimitive.Root;
+
+export const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "group flex items-center gap-1.5 text-sm font-medium text-foreground transition-colors hover:text-brand-forest",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+      "pointer-coarse:min-h-11",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown
+      className="h-3.5 w-3.5 text-text-muted transition-transform duration-150 group-data-[state=open]:rotate-180"
+      strokeWidth={1.75}
+      aria-hidden="true"
+    />
+  </CollapsiblePrimitive.Trigger>
+));
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.Content
+    ref={ref}
+    className={cn("pt-2 data-[state=open]:animate-fade-in", className)}
+    {...props}
+  />
+));
+CollapsibleContent.displayName = "CollapsibleContent";

package/src/components/combobox.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../lib/utils";
+
+/**
+ * Combobox — searchable single-select. Use instead of Select when the
+ * option list is long enough that scanning beats scrolling (venues,
+ * players, cities — roughly 10+ options).
+ *
+ *   <Combobox
+ *     options={venues.map(v => ({ value: v.id, label: v.name }))}
+ *     value={venueId}
+ *     onValueChange={setVenueId}
+ *     placeholder="Select venue…"
+ *     aria-label="Venue"
+ *   />
+ *
+ * Keyboard: type to filter, ↑/↓ to move, Enter to select, Esc closes.
+ * Uncontrolled open state; controlled value.
+ */
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  value: string | null;
+  onValueChange: (value: string | null) => void;
+  /** Trigger text when nothing is selected. */
+  placeholder?: string;
+  /** Search input placeholder. */
+  searchPlaceholder?: string;
+  /** Shown when the query matches nothing. */
+  emptyText?: string;
+  /** Accessible name for the trigger + listbox. */
+  "aria-label": string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyText = "No results.",
+  "aria-label": ariaLabel,
+  disabled,
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const listId = React.useId();
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listId}
+          aria-haspopup="listbox"
+          aria-label={ariaLabel}
+          disabled={disabled}
+          className={cn(
+            "flex h-8 pointer-coarse:h-11 w-full items-center justify-between gap-2 rounded-sm border border-border-strong bg-background px-2.5 text-sm",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:cursor-not-allowed disabled:bg-bg-muted disabled:opacity-60",
+            !selected && "text-text-subtle",
+            className
+          )}
+        >
+          <span className="truncate">{selected?.label ?? placeholder}</span>
+          <ChevronsUpDown
+            className="h-3.5 w-3.5 shrink-0 text-text-muted"
+            strokeWidth={1.75}
+            aria-hidden="true"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        aria-label={ariaLabel}
+        align="start"
+        className="w-[--radix-popover-trigger-width] min-w-[12rem] p-0"
+      >
+        <CommandPrimitive label={ariaLabel} className="outline-none">
+          <CommandPrimitive.Input
+            placeholder={searchPlaceholder}
+            className={cn(
+              "w-full border-b border-border bg-transparent px-3 h-8 pointer-coarse:h-11 text-sm text-foreground",
+              "placeholder:text-text-subtle focus:outline-none"
+            )}
+          />
+          <CommandPrimitive.List
+            id={listId}
+            className="max-h-64 overflow-y-auto p-1 scrollbar-thin"
+          >
+            <CommandPrimitive.Empty className="px-3 py-6 text-center text-sm text-text-muted">
+              {emptyText}
+            </CommandPrimitive.Empty>
+            {options.map((option) => (
+              <CommandPrimitive.Item
+                key={option.value}
+                value={option.label}
+                disabled={option.disabled}
+                onSelect={() => {
+                  onValueChange(option.value === value ? null : option.value);
+                  setOpen(false);
+                }}
+                className={cn(
+                  "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 pointer-coarse:min-h-11 text-sm outline-none",
+                  "data-[selected=true]:bg-bg-subtle data-[selected=true]:text-foreground",
+                  "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                )}
+              >
+                <Check
+                  className={cn(
+                    "h-3.5 w-3.5 shrink-0 text-brand-forest",
+                    option.value === value ? "opacity-100" : "opacity-0"
+                  )}
+                  strokeWidth={2}
+                  aria-hidden="true"
+                />
+                {option.label}
+              </CommandPrimitive.Item>
+            ))}
+          </CommandPrimitive.List>
+        </CommandPrimitive>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/confirm-action.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+import { Button, type ButtonProps } from "./button";
+
+/**
+ * ConfirmAction — codifies design.md §3.11 Confirmation discipline.
+ *
+ * Use ONLY for destructive or financially irreversible actions. The body
+ * is required to be concrete ("8 players will be refunded $14 each"),
+ * never abstract ("Are you sure?").
+ *
+ * Wrap your trigger button (works with asChild).
+ *
+ * Example:
+ *   <ConfirmAction
+ *     title="Cancel this game?"
+ *     description="This action is logged and cannot be undone."
+ *     consequence="8 players will be refunded $14.00 each as credit and emailed."
+ *     confirmLabel="Cancel + refund all"
+ *     confirmVariant="destructive"
+ *     onConfirm={async () => await cancelGame(id)}
+ *   >
+ *     <Button variant="destructive">Cancel game…</Button>
+ *   </ConfirmAction>
+ */
+export interface ConfirmActionProps {
+  title: string;
+  description?: string;
+  /** REQUIRED concrete consequence text — never abstract. */
+  consequence: React.ReactNode;
+  confirmLabel: string;
+  cancelLabel?: string;
+  confirmVariant?: ButtonProps["variant"];
+  onConfirm: () => void | Promise<void>;
+  children: React.ReactNode;
+}
+
+export function ConfirmAction({
+  title,
+  description,
+  consequence,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  confirmVariant = "destructive",
+  onConfirm,
+  children,
+}: ConfirmActionProps) {
+  const [open, setOpen] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+
+  const handleConfirm = async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      {/*
+        When no description prop is provided, explicitly opt out of
+        Radix's aria-describedby auto-wiring (passing `undefined`
+        disables the dev warning). The consequence text in the body
+        already explains the action; Radix only auto-wires DialogDescription.
+        When `description` IS provided, omit the prop so Radix can wire it.
+      */}
+      <DialogContent
+        {...(description ? {} : { "aria-describedby": undefined })}
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <DialogBody>
+          <p className="text-sm text-foreground">{consequence}</p>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => setOpen(false)}
+            disabled={busy}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={confirmVariant}
+            onClick={handleConfirm}
+            disabled={busy}
+          >
+            {busy ? "Working…" : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/container.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Container — max-width page wrapper with consistent horizontal padding.
+ * Sizes match the page layouts already used across the app:
+ *   - sm:      max-w-3xl   (768px)  — narrow content pages (FAQ, settings)
+ *   - default: max-w-5xl   (1024px) — design system docs
+ *   - lg:      max-w-7xl   (1280px) — dashboards + game lists
+ *   - full:    max-w-none           — edge-to-edge
+ */
+const SIZE_MAP = {
+  sm: "max-w-3xl",
+  default: "max-w-5xl",
+  lg: "max-w-7xl",
+  full: "max-w-none",
+} as const;
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: keyof typeof SIZE_MAP;
+  /** Drop the horizontal padding (rare — only when nested). */
+  noPadding?: boolean;
+}
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size = "default", noPadding, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "mx-auto w-full",
+        SIZE_MAP[size],
+        !noPadding && "px-6 lg:px-8",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Container.displayName = "Container";

package/src/components/date-picker.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+import { CalendarDays } from "lucide-react";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../lib/utils";
+
+/**
+ * DatePicker — single-date selection in a popover. Closes on pick.
+ *
+ *   <DatePicker
+ *     value={gameDate}
+ *     onValueChange={setGameDate}
+ *     aria-label="Game date"
+ *   />
+ *
+ * Time-zone note (§3.16): the picked Date is midnight LOCAL time —
+ * convert against the venue timezone before persisting.
+ * For ranges or inline calendars, compose Calendar + Popover directly.
+ */
+export interface DatePickerProps {
+  value: Date | undefined;
+  onValueChange: (date: Date | undefined) => void;
+  /** Accessible name for the trigger + dialog. */
+  "aria-label": string;
+  /** Trigger text when nothing is selected. */
+  placeholder?: string;
+  /** Intl date format options (default: weekday, month, day). */
+  formatOptions?: Intl.DateTimeFormatOptions;
+  /** Dates the calendar should refuse (react-day-picker Matcher). */
+  disabledDates?: React.ComponentProps<typeof Calendar>["disabled"];
+  disabled?: boolean;
+  className?: string;
+}
+
+export function DatePicker({
+  value,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder = "Pick a date…",
+  formatOptions = { weekday: "short", month: "short", day: "numeric" },
+  disabledDates,
+  disabled,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          disabled={disabled}
+          className={cn(
+            "flex h-8 pointer-coarse:h-11 w-full items-center gap-2 rounded-sm border border-border-strong bg-background px-2.5 text-sm",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:cursor-not-allowed disabled:bg-bg-muted disabled:opacity-60",
+            !value && "text-text-subtle",
+            className
+          )}
+        >
+          <CalendarDays
+            className="h-3.5 w-3.5 shrink-0 text-text-muted"
+            strokeWidth={1.75}
+            aria-hidden="true"
+          />
+          <span className="truncate tabular">
+            {value
+              ? new Intl.DateTimeFormat(undefined, formatOptions).format(value)
+              : placeholder}
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        aria-label={ariaLabel}
+        align="start"
+        className="w-auto p-0"
+      >
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={(d) => {
+            onValueChange(d);
+            setOpen(false);
+          }}
+          disabled={disabledDates}
+          // react-day-picker's focus-management prop (not DOM autofocus):
+          // moving focus into the grid when the popover opens is the
+          // expected dialog pattern for keyboard users.
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/dialog.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Dialog — per design.md §10
+ *  - Max width 480px default, override via className
+ *  - 6px radius, 1px strong border, shadow-md
+ *  - Backdrop: rgba(0,0,0,0.4) with 4px blur
+ *  - Header text-md semibold, body text-sm
+ *  - Actions right-aligned; accent CTA on the right, secondary on left
+ *
+ * Accessibility (provided by Radix):
+ *  - Focus trap inside dialog
+ *  - Escape closes
+ *  - aria-labelledby / aria-describedby auto-wired via Title / Description
+ *  - Returns focus to trigger on close
+ */
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-[4px]",
+      "data-[state=open]:animate-fade-in",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    {/* Centering wrapper — uses Flexbox instead of the classic
+        `left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`
+        trick. The translate-based approach is fragile because the
+        CSS `transform` property is single-valued: any animation or
+        Radix data-state class that touches `transform` would
+        override the centering and shove the dialog off-screen,
+        which is exactly the bug that previously made dialogs
+        appear as a dimmed-blurred page with no visible content.
+        Flexbox centering has no such conflict. Below sm we leave
+        the wrapper as a plain box so the inner Content can be a
+        full-screen sheet via `inset-0`. */}
+    <div className="fixed inset-0 z-50 flex sm:items-center sm:justify-center pointer-events-none">
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          // Mobile (<sm) — full-screen sheet. Phones don't have the
+          // height for a centered modal once a real form is in it;
+          // the keyboard would push the footer below the fold.
+          // Pointer events restored so the sheet is interactive
+          // even though its wrapper is pointer-events-none.
+          "pointer-events-auto bg-background outline-none flex flex-col",
+          "absolute inset-0",
+          // sm+ — centered modal. The flex wrapper handles
+          // centering; we just size + style the box. max-h prevents
+          // tall forms spilling past the viewport; DialogBody
+          // handles internal scroll.
+          "sm:static sm:w-full sm:max-w-[480px] sm:max-h-[85vh] sm:h-auto",
+          "sm:rounded-md sm:border sm:border-border-strong sm:shadow-md",
+          "data-[state=open]:animate-fade-in-up",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-sm text-text-muted",
+            "transition-colors hover:bg-bg-subtle hover:text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            // 44px hit target on touch devices; visual stays 24px.
+            "pointer-coarse:after:absolute pointer-coarse:after:-inset-2.5"
+          )}
+          aria-label="Close dialog"
+        >
+          <X className="h-4 w-4" strokeWidth={1.75} />
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </div>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+export function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("px-5 pt-4 pb-3 border-b border-border", className)}
+      {...props}
+    />
+  );
+}
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-md font-semibold tracking-[-0.01em] text-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-xs text-text-muted mt-0.5", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export function DialogBody({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  // flex-1 + overflow-y-auto so the body absorbs the dialog's
+  // available height and scrolls internally — keeps the footer
+  // (Cancel / Save) pinned to the bottom of the viewport on phones
+  // and below the max-h cap on desktop. min-h-0 is required for
+  // flex children to scroll inside a flex column parent.
+  return (
+    <div
+      className={cn(
+        "px-5 py-4 text-sm text-foreground flex-1 min-h-0 overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-end gap-2 px-5 py-3 border-t border-border bg-bg-subtle/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}