{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-table",
  "title": "SF Table",
  "description": "Brutalist data table with inverted header, mono text",
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "components/sf/sf-table.tsx",
      "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Data table — FRAME layer data primitive.\n *\n * Semantically correct HTML table with SF styling: font-mono at text-xs\n * and 2px foreground outer border. Compose with SFTableHeader,\n * SFTableBody, SFTableRow, SFTableHead, and SFTableCell for full\n * table structure.\n *\n * @param className - Merged via cn() after base classes\n *\n * @example\n * <SFTable>\n *   <SFTableHeader><SFTableRow><SFTableHead>Name</SFTableHead></SFTableRow></SFTableHeader>\n *   <SFTableBody><SFTableRow><SFTableCell>Alice</SFTableCell></SFTableRow></SFTableBody>\n * </SFTable>\n */\nfunction SFTable({\n  className,\n  ...props\n}: React.ComponentProps<typeof Table>) {\n  return (\n    <Table\n      className={cn(\"font-mono text-xs border-2 border-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFTable — inverted header row (foreground background, background text). */\nfunction SFTableHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof TableHeader>) {\n  return (\n    <TableHeader\n      className={cn(\"bg-foreground text-background\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFTable — column heading cell in uppercase tracking-wider at text-xs. */\nfunction SFTableHead({\n  className,\n  ...props\n}: React.ComponentProps<typeof TableHead>) {\n  return (\n    <TableHead\n      className={cn(\n        \"uppercase tracking-wider text-xs text-background font-normal h-9 px-3\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFTable — table row with muted border and subtle hover background. */\nfunction SFTableRow({\n  className,\n  ...props\n}: React.ComponentProps<typeof TableRow>) {\n  return (\n    <TableRow\n      className={cn(\n        \"border-b border-foreground/20 hover:bg-muted/50 transition-colors duration-[var(--duration-fast)]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFTable — data cell with consistent px-3 py-2 padding. */\nfunction SFTableCell({\n  className,\n  ...props\n}: React.ComponentProps<typeof TableCell>) {\n  return (\n    <TableCell className={cn(\"px-3 py-2\", className)} {...props} />\n  );\n}\n\n/** Sub-component of SFTable — table body container wrapping all data rows. */\nfunction SFTableBody({ className, ...props }: React.ComponentProps<typeof TableBody>) {\n  return <TableBody className={cn(className)} {...props} />;\n}\n\nexport {\n  SFTable,\n  SFTableHeader,\n  SFTableHead,\n  SFTableRow,\n  SFTableCell,\n  SFTableBody,\n};\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "A"
  },
  "type": "registry:ui"
}