{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/ui/table.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TableVariant = \"default\" | \"card\";\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n  variant?: TableVariant;\n  render?: useRender.ComponentProps<\"div\">[\"render\"];\n};\n\nexport function Table({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: TableProps): React.ReactElement {\n  const defaultProps = {\n    children: (\n      <table\n        className={cn(\n          \"w-full caption-bottom in-data-[variant=card]:border-separate in-data-[variant=card]:border-spacing-0 text-sm\",\n          className,\n        )}\n        data-slot=\"table\"\n        {...props}\n      />\n    ),\n    className: \"relative w-full overflow-x-auto\",\n    \"data-slot\": \"table-container\",\n    \"data-variant\": variant,\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, {}),\n    render,\n  });\n}\n\nexport function TableHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"thead\">): React.ReactElement {\n  return (\n    <thead\n      className={cn(\"[&_tr]:border-b\", className)}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  );\n}\n\nexport function TableBody({\n  className,\n  ...props\n}: React.ComponentProps<\"tbody\">): React.ReactElement {\n  return (\n    <tbody\n      className={cn(\n        \"relative in-data-[variant=card]:rounded-xl in-data-[variant=card]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[variant=card]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[variant=card]:*:[tr]:border-0 in-data-[variant=card]:*:[tr]:*:[td]:border-b in-data-[variant=card]:*:[tr]:*:[td]:bg-card in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[variant=card]:*:[tr]:*:[td]:first:border-s in-data-[variant=card]:*:[tr]:first:*:[td]:border-t in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[variant=card]:*:[tr]:*:[td]:last:border-e in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] dark:in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_4%)] dark:in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)]\",\n        className,\n      )}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  );\n}\n\nexport function TableFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"tfoot\">): React.ReactElement {\n  return (\n    <tfoot\n      className={cn(\n        \"border-t in-data-[variant=card]:border-none bg-transparent not-in-data-[variant=card]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] font-medium dark:not-in-data-[variant=card]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] [&>tr]:last:border-b-0\",\n        className,\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({\n  className,\n  ...props\n}: React.ComponentProps<\"tr\">): React.ReactElement {\n  return (\n    <tr\n      className={cn(\n        \"relative border-b not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-black)_2%)] not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-black)_4%)] dark:not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-white)_4%)] dark:not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-white)_2%)]\",\n        className,\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({\n  className,\n  ...props\n}: React.ComponentProps<\"th\">): React.ReactElement {\n  return (\n    <th\n      className={cn(\n        \"h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({\n  className,\n  ...props\n}: React.ComponentProps<\"td\">): React.ReactElement {\n  return (\n    <td\n      className={cn(\n        \"whitespace-nowrap bg-clip-padding p-2.5 in-data-[slot=table-footer]:py-3.5 align-middle leading-none in-data-[variant=card]:first:ps-[calc(--spacing(2.5)-1px)] in-data-[variant=card]:last:pe-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">): React.ReactElement {\n  return (\n    <caption\n      className={cn(\n        \"in-data-[variant=card]:my-4 mt-4 text-muted-foreground text-sm\",\n        className,\n      )}\n      data-slot=\"table-caption\"\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}