{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Table",
  "dependencies": [
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Table.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@@directive(\"'use client'\")\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.Types.DomProps.t)\nlet make = (props: BaseUi.Types.DomProps.t) =>\n  <div dataSlot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n    <table\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table\")}\n      className={cn(\"w-full caption-bottom text-sm\", props.className)}\n    />\n  </div>\n\nmodule Header = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <thead\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-header\")}\n      className={cn(\"[&_tr]:border-b\", props.className)}\n    />\n}\n\nmodule Body = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <tbody\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-body\")}\n      className={cn(\"[&_tr:last-child]:border-0\", props.className)}\n    />\n}\n\nmodule Footer = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <tfoot\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-footer\")}\n      className={cn(\"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\", props.className)}\n    />\n}\n\nmodule Row = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <tr\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-row\")}\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50\",\n        props.className,\n      )}\n    />\n}\n\nmodule Head = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <th\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-head\")}\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        props.className,\n      )}\n    />\n}\n\nmodule Cell = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <td\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-cell\")}\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        props.className,\n      )}\n    />\n}\n\nmodule Caption = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <caption\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"table-caption\")}\n      className={cn(\"text-muted-foreground mt-4 text-sm\", props.className)}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Table.res"
    }
  ],
  "type": "registry:ui"
}