{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table",
  "description": "Ledger paper with a red margin and double-ruled totals.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/table.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nconst type = { fontFamily: \"var(--font-type, 'Courier New', ui-monospace, monospace)\" };\n\n/** Ledger paper: ruled rows, a red margin after the first column, double rules for totals. */\nexport function Table({ className = \"\", ...props }: React.TableHTMLAttributes<HTMLTableElement>) {\n  return (\n    <div className=\"paper relative w-full overflow-x-auto rounded-[3px] border border-(--edge) bg-(--paper-raised) shadow-[0_8px_18px_-10px_rgb(0_0_0/.3)]\">\n      <table className={`w-full border-collapse text-[14px] text-(--ink) ${className}`} {...props} />\n    </div>\n  );\n}\n\nexport function TableHeader({ className = \"\", ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={`border-b-[3px] border-double border-(--margin) ${className}`} {...props} />;\n}\n\nexport function TableBody({ className = \"\", ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={`[&>tr:last-child]:border-b-0 ${className}`} {...props} />;\n}\n\nexport function TableFooter({ className = \"\", ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tfoot\n      className={`border-t-[3px] border-double border-(--ink) font-bold [&>tr]:border-b-0 ${className}`}\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({ className = \"\", ...props }: React.HTMLAttributes<HTMLTableRowElement>) {\n  return (\n    <tr\n      className={`border-b border-(--rule) transition-colors hover:bg-[color-mix(in_srgb,var(--pen)_5%,transparent)] data-[state=selected]:bg-[color-mix(in_srgb,var(--pen)_9%,transparent)] [&>*:first-child]:border-r [&>*:first-child]:border-(--margin) ${className}`}\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({\n  className = \"\",\n  style,\n  numeric,\n  ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement> & { numeric?: boolean }) {\n  return (\n    <th\n      className={`h-10 whitespace-nowrap px-4 align-middle text-[10.5px] font-bold uppercase tracking-[0.18em] text-(--ink-muted) ${numeric ? \"text-right\" : \"text-left\"} ${className}`}\n      style={{ ...type, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({\n  className = \"\",\n  style,\n  numeric,\n  ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement> & { numeric?: boolean }) {\n  return (\n    <td\n      className={`h-11 px-4 align-middle ${numeric ? \"whitespace-nowrap text-right tabular-nums\" : \"\"} ${className}`}\n      style={numeric ? { ...type, ...style } : style}\n      {...props}\n    />\n  );\n}\n\nexport function TableCaption({ className = \"\", style, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) {\n  return (\n    <caption\n      className={`caption-bottom px-4 py-3 text-left text-[18px] text-(--ink-muted) ${className}`}\n      style={{ fontFamily: \"var(--font-hand, 'Bradley Hand', cursive)\", ...style }}\n      {...props}\n    />\n  );\n}\n"
    }
  ]
}