{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table",
  "description": "Composable React table primitives for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/table/table.tsx",
      "type": "registry:ui",
      "target": "components/ui/table/table.tsx",
      "content": "import React from 'react';\nimport { tableStyleKeys } from '../lib/core';\nimport styles from './table.module.scss';\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div className={styles[tableStyleKeys.container]}>\n\t\t\t<table ref={ref} className={`${styles[tableStyleKeys.table]} ${className}`} {...props}>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t</div>\n\t);\n});\nTable.displayName = 'Table';\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<thead ref={ref} className={`${styles[tableStyleKeys.header]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</thead>\n\t);\n});\nTableHeader.displayName = 'TableHeader';\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<tbody ref={ref} className={`${styles[tableStyleKeys.body]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</tbody>\n\t);\n});\nTableBody.displayName = 'TableBody';\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<tfoot ref={ref} className={`${styles[tableStyleKeys.footer]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</tfoot>\n\t);\n});\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<tr ref={ref} className={`${styles[tableStyleKeys.row]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</tr>\n\t);\n});\nTableRow.displayName = 'TableRow';\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<th ref={ref} className={`${styles[tableStyleKeys.head]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</th>\n\t);\n});\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<td ref={ref} className={`${styles[tableStyleKeys.cell]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</td>\n\t);\n});\nTableCell.displayName = 'TableCell';\n\nexport interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {}\n\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<caption ref={ref} className={`${styles[tableStyleKeys.caption]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</caption>\n\t);\n});\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };\nexport default Table;\n"
    },
    {
      "path": "packages/styles/scss/components/table.module.scss",
      "type": "registry:file",
      "target": "components/ui/table/table.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.container {\n\tposition: relative;\n\twidth: 100%;\n\toverflow-x: auto;\n}\n\n.table {\n\twidth: 100%;\n\tborder-collapse: collapse;\n\tfont-size: var(--tile-table-font-size, $text-sm);\n\ttext-align: left;\n\tcaption-side: bottom;\n}\n\n.header {\n\ttr {\n\t\tborder-bottom: 1px solid var(--tile-table-header-border, $border);\n\t}\n}\n\n.body {\n\ttr:last-child {\n\t\tborder-bottom: 0;\n\t}\n}\n\n.footer {\n\tborder-top: 1px solid var(--tile-table-border, $border);\n\tbackground-color: var(--tile-table-footer-background, color-mix(in srgb, $muted 50%, transparent));\n\tfont-weight: $font-medium;\n\n\t> tr {\n\t\tborder-bottom-width: 0;\n\t}\n}\n\n.row {\n\tborder-bottom: 1px solid var(--tile-table-border, $border);\n\tbackground-color: var(--tile-table-row-background, transparent);\n\ttransition: background-color $transition-fast;\n\n\t&:nth-child(even) {\n\t\tbackground-color: var(--tile-table-row-even-background, var(--tile-table-row-background, transparent));\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--tile-table-row-hover-background, color-mix(in srgb, $muted 50%, transparent));\n\t}\n\n\t&:where(:nth-child(even)):hover {\n\t\tbackground-color: var(--tile-table-row-even-hover-background, color-mix(in srgb, $muted 50%, transparent));\n\t}\n\n\t&:has([aria-expanded='true']) {\n\t\tbackground-color: var(--tile-table-row-expanded-background, color-mix(in srgb, $muted 50%, transparent));\n\t}\n\n\t&[data-state='selected'] {\n\t\tbackground-color: var(--tile-table-row-selected-background, $muted);\n\t}\n}\n\n.head {\n\theight: 2.5rem;\n\tpadding: var(--tile-table-head-padding, 0 $spacing-2);\n\tbackground-color: var(--tile-table-head-background, transparent);\n\ttext-align: left;\n\tvertical-align: middle;\n\tfont-weight: var(--tile-table-head-weight, $font-medium);\n\tcolor: $foreground;\n\twhite-space: nowrap;\n\n\t&:has([role='checkbox']) {\n\t\tpadding-right: 0;\n\t}\n\n\t> [role='checkbox'] {\n\t\ttransform: translateY(2px);\n\t}\n}\n\n.cell {\n\tpadding: var(--tile-table-cell-padding, $spacing-2);\n\tvertical-align: middle;\n\twhite-space: nowrap;\n\n\t&:has([role='checkbox']) {\n\t\tpadding-right: 0;\n\t}\n\n\t> [role='checkbox'] {\n\t\ttransform: translateY(2px);\n\t}\n}\n\n.caption {\n\tmargin-top: $spacing-4;\n\tfont-size: $text-sm;\n\tcolor: $muted-foreground;\n}\n"
    },
    {
      "path": "packages/react/src/components/table/index.ts",
      "type": "registry:ui",
      "target": "components/ui/table/index.ts",
      "content": "export {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableRow,\n\tTableHead,\n\tTableCell,\n\tTableCaption,\n\ttype TableProps,\n\ttype TableHeaderProps,\n\ttype TableBodyProps,\n\ttype TableFooterProps,\n\ttype TableRowProps,\n\ttype TableHeadProps,\n\ttype TableCellProps,\n\ttype TableCaptionProps,\n} from './table';\n"
    }
  ]
}