{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-table",
  "title": "RetroTable",
  "description": "A Mac OS 9 styled data table with raised bevel column headers, hover highlight, azul selected row, and Finder list-view appearance.",
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableHeader                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableHeader(\n  { className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>,\n  ref: React.ForwardedRef<HTMLTableSectionElement>\n) {\n  return (\n    <thead\n      ref={ref}\n      className={cn(\"[&_tr]:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableHeader = React.forwardRef(RetroTableHeader)\nForwardedRetroTableHeader.displayName = \"RetroTableHeader\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableBody                                                     */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableBody(\n  { className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>,\n  ref: React.ForwardedRef<HTMLTableSectionElement>\n) {\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableBody = React.forwardRef(RetroTableBody)\nForwardedRetroTableBody.displayName = \"RetroTableBody\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableFooter                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableFooter(\n  { className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>,\n  ref: React.ForwardedRef<HTMLTableSectionElement>\n) {\n  return (\n    <tfoot\n      ref={ref}\n      className={cn(\n        \"bg-os9-gray-400 font-[family-name:var(--os9-font-sans)] text-[10px] font-bold\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableFooter = React.forwardRef(RetroTableFooter)\nForwardedRetroTableFooter.displayName = \"RetroTableFooter\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableRow                                                      */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableRow(\n  { className, ...props }: React.HTMLAttributes<HTMLTableRowElement>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  return (\n    <tr\n      ref={ref}\n      className={cn(\"transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableRow = React.forwardRef(RetroTableRow)\nForwardedRetroTableRow.displayName = \"RetroTableRow\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableHead (th)                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableHead(\n  { className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>,\n  ref: React.ForwardedRef<HTMLTableCellElement>\n) {\n  return (\n    <th\n      ref={ref}\n      className={cn(\n        \"text-left select-none\",\n        \"bg-os9-gray-400 border border-[#484848] px-[8px] py-[4px]\",\n        \"font-[family-name:var(--os9-font-sans)] text-[10px] font-bold\",\n        /* Raised bevel */\n        \"shadow-[inset_-2px_0_0_var(--os9-gray-700),inset_0_-2px_0_var(--os9-gray-700),inset_2px_0_0_var(--os9-white),inset_0_2px_0_var(--os9-white)]\",\n        /* Pressed bevel while clicking (e.g. sortable headers) */\n        \"active:bg-os9-gray-600\",\n        \"active:shadow-[inset_2px_0_0_var(--os9-gray-700),inset_0_2px_0_var(--os9-gray-700),inset_-2px_0_0_var(--os9-white),inset_0_-2px_0_var(--os9-white)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableHead = React.forwardRef(RetroTableHead)\nForwardedRetroTableHead.displayName = \"RetroTableHead\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableCell (td)                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableCell(\n  { className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>,\n  ref: React.ForwardedRef<HTMLTableCellElement>\n) {\n  return (\n    <td\n      ref={ref}\n      className={cn(\n        \"align-middle px-[8px] py-[4px]\",\n        \"font-[family-name:var(--os9-font-sans)] text-[10px]\",\n        \"border-b border-b-os9-gray-400\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableCell = React.forwardRef(RetroTableCell)\nForwardedRetroTableCell.displayName = \"RetroTableCell\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTableCaption                                                  */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableCaption(\n  { className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>,\n  ref: React.ForwardedRef<HTMLTableCaptionElement>\n) {\n  return (\n    <caption\n      ref={ref}\n      className={cn(\n        \"mt-1 p-[4px]\",\n        \"font-[family-name:var(--os9-font-sans)] text-[10px] text-os9-gray-800\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroTableCaption = React.forwardRef(RetroTableCaption)\nForwardedRetroTableCaption.displayName = \"RetroTableCaption\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroTable (root)                                                  */\n/* ------------------------------------------------------------------ */\n\nfunction RetroTableRoot(\n  { className, ...props }: React.HTMLAttributes<HTMLTableElement>,\n  ref: React.ForwardedRef<HTMLTableElement>\n) {\n  return (\n    <div className=\"w-full overflow-auto\">\n      <table\n        ref={ref}\n        data-retro-table=\"\"\n        className={cn(\n          \"w-full caption-bottom\",\n          \"border border-os9-black border-separate border-spacing-0\",\n          \"font-[family-name:var(--os9-font-sans)] text-[10px]\",\n          /* Body row hover (lavender) and selected (azul) highlights */\n          \"[&_tbody_tr:not([data-state=selected]):hover]:bg-os9-lavender\",\n          \"[&_tbody_tr[data-state=selected]]:bg-os9-azul [&_tbody_tr[data-state=selected]]:text-os9-white\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nconst ForwardedRetroTableRoot = React.forwardRef(RetroTableRoot)\nForwardedRetroTableRoot.displayName = \"RetroTable\"\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                            */\n/* ------------------------------------------------------------------ */\n\nexport {\n  ForwardedRetroTableRoot as RetroTable,\n  ForwardedRetroTableHeader as RetroTableHeader,\n  ForwardedRetroTableBody as RetroTableBody,\n  ForwardedRetroTableRow as RetroTableRow,\n  ForwardedRetroTableHead as RetroTableHead,\n  ForwardedRetroTableCell as RetroTableCell,\n  ForwardedRetroTableCaption as RetroTableCaption,\n  ForwardedRetroTableFooter as RetroTableFooter,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}