{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "Flag data table: bordered wrapper, uppercase muted head, tabular figures, opt-in row hover.",
  "registryDependencies": [
    "@flag/utils"
  ],
  "files": [
    {
      "path": "registry/flag/ui/table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Flag COMPONENTS.md \"Tables and List Rows\": bordered, radius-md wrapper;\n// uppercase caption-size muted head; 0.625rem cells; tabular figures; row\n// hover only for clickable rows (pass `interactive`). Tier A: .table-wrap >\n// table, tr.is-interactive.\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      // Focusable so a table wider than the screen scrolls from the keyboard.\n      tabIndex={0}\n      className=\"relative w-full overflow-x-auto rounded-md border border-border outline-none focus-visible:shadow-(--focus-ring)\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          \"w-full caption-bottom border-collapse text-body-md tabular-nums\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-surface-inset font-semibold [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({\n  className,\n  interactive = false,\n  ...props\n}: React.ComponentProps<\"tr\"> & { interactive?: boolean }) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      data-interactive={interactive || undefined}\n      className={cn(\n        \"border-b border-border [transition:background-color_var(--transition-fast)] data-[interactive]:cursor-pointer data-[interactive]:hover:bg-(--color-overlay-soft) data-[interactive]:active:bg-accent data-[state=selected]:bg-accent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      scope=\"col\"\n      className={cn(\n        \"h-10 px-2.5 text-left align-middle text-caption font-normal whitespace-nowrap text-muted-foreground uppercase [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"my-3 text-caption text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}