@dtsports/design-system 0.2.0

package/src/components/drawer.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Drawer / Sheet — side-pushed panel for secondary tasks.
+ *
+ * Use a Drawer (not a Dialog) for:
+ *   - Editing a row inline
+ *   - Viewing details without losing place in the list
+ *   - Mobile filter sheets
+ *   - Audit timelines, side-by-side comparisons
+ *
+ * Per design.md §3.17, drawers replace modal stacks — never nest a
+ * dialog inside a drawer or vice versa.
+ *
+ * Backed by Radix Dialog under the hood, so focus trap, escape close,
+ * and aria semantics work out of the box.
+ */
+export const Drawer = DialogPrimitive.Root;
+export const DrawerTrigger = DialogPrimitive.Trigger;
+export const DrawerClose = DialogPrimitive.Close;
+export const DrawerPortal = DialogPrimitive.Portal;
+
+export const DrawerOverlay = 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}
+  />
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+
+export const drawerVariants = cva(
+  "fixed z-50 flex flex-col bg-background border-border-strong shadow-md outline-none transition-transform",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b max-h-[80vh] data-[state=open]:animate-fade-in",
+        bottom:
+          "inset-x-0 bottom-0 border-t max-h-[80vh] data-[state=open]:animate-fade-in",
+        left: "inset-y-0 left-0 h-full w-80 border-r data-[state=open]:animate-fade-in",
+        right:
+          "inset-y-0 right-0 h-full w-96 border-l data-[state=open]:animate-fade-in",
+      },
+    },
+    defaultVariants: { side: "right" },
+  }
+);
+
+export interface DrawerContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof drawerVariants> {}
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(drawerVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        aria-label="Close drawer"
+        className="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 pointer-coarse:after:absolute pointer-coarse:after:-inset-2.5"
+      >
+        <X className="h-4 w-4" strokeWidth={1.75} />
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+export function DrawerHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("px-5 pt-4 pb-3 border-b border-border", className)}
+      {...props}
+    />
+  );
+}
+
+export const DrawerTitle = 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}
+  />
+));
+DrawerTitle.displayName = "DrawerTitle";
+
+export const DrawerDescription = 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}
+  />
+));
+DrawerDescription.displayName = "DrawerDescription";
+
+export function DrawerBody({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "px-5 py-4 text-sm text-foreground overflow-y-auto flex-1",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerFooter({
+  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}
+    />
+  );
+}

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * DropdownMenu — for actions menus (kebab on table rows, user avatar
+ * menu in topbar). NOT for selecting a value — use Select for that.
+ *
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger asChild><Button>Actions</Button></DropdownMenuTrigger>
+ *     <DropdownMenuContent>
+ *       <DropdownMenuLabel>Game</DropdownMenuLabel>
+ *       <DropdownMenuItem>View roster</DropdownMenuItem>
+ *       <DropdownMenuItem>Broadcast…</DropdownMenuItem>
+ *       <DropdownMenuSeparator />
+ *       <DropdownMenuItem className="text-danger">Cancel game…</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ */
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded border border-border-strong bg-background text-foreground shadow-md p-1",
+        "data-[state=open]:animate-fade-in",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative 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 transition-colors",
+      "focus:bg-bg-subtle focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pointer-coarse:min-h-11 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-bg-subtle focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-3 w-3" strokeWidth={2.5} />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pointer-coarse:min-h-11 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-bg-subtle focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-1.5 w-1.5 fill-current" strokeWidth={0} />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-text-muted",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-[10px] font-mono tracking-widest text-text-subtle tabular",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pointer-coarse:min-h-11 text-sm outline-none transition-colors",
+      "focus:bg-bg-subtle focus:text-foreground",
+      "data-[state=open]:bg-bg-subtle",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-3 w-3" strokeWidth={1.75} />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded border border-border-strong bg-background text-foreground shadow-md p-1",
+      "data-[state=open]:animate-fade-in",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";

package/src/components/empty-state.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * EmptyState — per design.md §10
+ *  - Centered, single line text-sm muted
+ *  - Optional small CTA
+ *  - NO illustrations. A subtle Lucide icon at most.
+ */
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex flex-col items-center justify-center gap-2 px-6 py-10 text-center",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="text-text-subtle mb-1" aria-hidden="true">
+          {icon}
+        </div>
+      )}
+      <div className="text-sm font-medium text-foreground">{title}</div>
+      {description && (
+        <div className="text-xs text-text-muted max-w-xs">{description}</div>
+      )}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}

package/src/components/form-field.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * FormField — composition wrapper that auto-wires Label + control +
+ * helper/error text + the right aria attributes.
+ *
+ *   <FormField label="Email" required helper="We'll send confirmations here.">
+ *     <Input type="email" autoComplete="email" />
+ *   </FormField>
+ *
+ *   <FormField label="Card" required error="Card number is too short.">
+ *     <Input />
+ *   </FormField>
+ *
+ * The child input is cloned with: `id`, `aria-describedby`, `aria-invalid`,
+ * so consumers don't have to remember the a11y plumbing.
+ */
+export interface FormFieldProps {
+  /** Optional explicit id — autogenerated if omitted. */
+  id?: string;
+  label?: React.ReactNode;
+  required?: boolean;
+  helper?: React.ReactNode;
+  error?: React.ReactNode;
+  /** Hide label visually but keep for screen readers */
+  hideLabel?: boolean;
+  /** Inline layout — label sits on the left of the control */
+  inline?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function FormField({
+  id,
+  label,
+  required,
+  helper,
+  error,
+  hideLabel,
+  inline,
+  className,
+  children,
+}: FormFieldProps) {
+  const reactId = React.useId();
+  const fieldId = id ?? reactId;
+  const helperId = `${fieldId}-helper`;
+  const errorId = `${fieldId}-error`;
+
+  const describedBy =
+    [error ? errorId : null, helper && !error ? helperId : null]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  // Clone first valid child so we can inject id + aria props.
+  const child = React.Children.map(children, (c) => {
+    if (!React.isValidElement(c)) return c;
+    const el = c as React.ReactElement<{
+      id?: string;
+      "aria-describedby"?: string;
+      "aria-invalid"?: boolean;
+    }>;
+    return React.cloneElement(el, {
+      id: el.props.id ?? fieldId,
+      "aria-describedby": el.props["aria-describedby"] ?? describedBy,
+      "aria-invalid": el.props["aria-invalid"] ?? (error ? true : undefined),
+    });
+  });
+
+  const labelEl = label && (
+    <label
+      htmlFor={fieldId}
+      className={cn(
+        "block text-xs font-medium uppercase tracking-[0.04em] text-text-muted",
+        hideLabel && "sr-only"
+      )}
+    >
+      {label}
+      {required && (
+        <span aria-hidden="true" className="ml-0.5 text-danger">
+          *
+        </span>
+      )}
+    </label>
+  );
+
+  const messages =
+    error || helper ? (
+      <p
+        id={error ? errorId : helperId}
+        className={cn("text-xs", error ? "text-danger" : "text-text-muted")}
+      >
+        {error ?? helper}
+      </p>
+    ) : null;
+
+  if (inline) {
+    return (
+      <div className={cn("flex items-start gap-3", className)}>
+        {labelEl && <div className="pt-1.5 w-32 shrink-0">{labelEl}</div>}
+        <div className="flex-1 min-w-0 space-y-1">
+          {child}
+          {messages}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      {labelEl}
+      {child}
+      {messages}
+    </div>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Input — per design.md §10
+ * Height 32px, padding 0 10px, 1px border-strong, 2px radius.
+ * Focus: 2px ring in the theme ring color (no border color change).
+ * Error: pass `aria-invalid` true → border + ring switch to danger.
+ */
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex h-8 pointer-coarse:h-11 w-full rounded-sm border border-border-strong bg-background px-2.5 text-sm text-foreground transition-colors duration-150 ease-out",
+        "placeholder:text-text-subtle",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:bg-bg-muted disabled:opacity-60",
+        "aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:ring-danger",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Input.displayName = "Input";

package/src/components/label.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../lib/utils";
+
+/**
+ * Label — per design.md §10
+ * Uppercase, tracking-wide, text-xs, muted color.
+ * Always pair with its input via `htmlFor`.
+ */
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    required?: boolean;
+  }
+>(({ className, children, required, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "block text-xs font-medium uppercase tracking-[0.04em] text-text-muted",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    {required && (
+      <span aria-hidden="true" className="ml-0.5 text-danger">
+        *
+      </span>
+    )}
+  </LabelPrimitive.Root>
+));
+Label.displayName = "Label";

package/src/components/live-pill.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * LivePill — per design.md §10 & §12
+ * The ONE continuously animated element in the system.
+ * Renders a lime pill with a pulsing dot and "LIVE" label.
+ *
+ * Accessibility:
+ *  - aria-live="polite" so SR users hear "Live" without interrupting
+ *  - The pulse animation honors prefers-reduced-motion via globals.css
+ */
+export function LivePill({
+  className,
+  label = "Live",
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & { label?: string }) {
+  return (
+    <span
+      role="status"
+      aria-live="polite"
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full bg-brand-lime px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-brand-lime-foreground",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="block h-1.5 w-1.5 rounded-full bg-brand-lime-foreground animate-live-pulse"
+        aria-hidden="true"
+      />
+      {label}
+    </span>
+  );
+}