{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "table",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/table.ts",
      "content": "import { computed, Directive, input } from '@angular/core'\n\nimport { cn } from '~/lib/utils'\n\n@Directive({\n  selector: 'table[ubTable]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn('w-full caption-bottom text-sm', this.class()),\n  )\n}\n\n@Directive({\n  selector: 'thead[ubTableHeader]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableHeaderDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() => cn('[&_tr]:border-b', this.class()))\n}\n\n@Directive({\n  selector: 'tbody[ubTableBody]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableBodyDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn('[&_tr:last-child]:border-0', this.class()),\n  )\n}\n\n@Directive({\n  selector: 'tfoot[ubTableFooter]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableFooterDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()),\n  )\n}\n\n@Directive({\n  selector: 'tr[ubTableRow]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableRowDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn(\n      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',\n      this.class(),\n    ),\n  )\n}\n\n@Directive({\n  selector: 'th[ubTableHead]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableHeadDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn(\n      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n      this.class(),\n    ),\n  )\n}\n\n@Directive({\n  selector: 'td[ubTableCell]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableCellDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn(\n      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n      this.class(),\n    ),\n  )\n}\n\n@Directive({\n  selector: 'caption[ubTableCaption]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbTableCaptionDirective {\n  readonly class = input<string>('')\n  protected computedClass = computed(() =>\n    cn('mt-4 text-sm text-muted-foreground', this.class()),\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}