{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table",
  "description": "Responsive data table for lists, comparisons, and structured records.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/table-knobs.ts",
      "target": "@components/control-ui/knob-contracts/table-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/table.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const tableKnobs = [\n  \"--cui-table-background\",\n  \"--cui-table-foreground\",\n  \"--cui-table-border-color\",\n  \"--cui-table-row-hover-background\",\n  \"--cui-table-row-selected-background\",\n  \"--cui-table-header-foreground\",\n  \"--cui-table-footer-background\",\n] as const;\nexport type TableKnobStyle = Partial<Record<(typeof tableKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/table.css",
      "target": "@components/control-ui/styles/recipes/table.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"table\"][data-slot=\"root\"]) {\n    --cui-table-background: transparent;\n    --cui-table-foreground: var(--foreground);\n    --cui-table-border-color: var(--border);\n    --cui-table-footer-background: oklch(from var(--foreground) l c h / 0.03);\n    --cui-table-header-foreground: var(--muted-foreground);\n    --cui-table-row-hover-background: oklch(from var(--foreground) l c h / 0.03);\n    --cui-table-row-selected-background: oklch(from var(--foreground) l c h / 0.05);\n    background: var(--cui-table-background);\n    color: var(--cui-table-foreground);\n    border-collapse: collapse;\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"header\"] [data-slot=\"row\"]) {\n    border-bottom-color: var(--cui-table-border-color);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"footer\"]) {\n    border-top-color: var(--cui-table-border-color);\n    background: var(--cui-table-footer-background);\n    border-top-style: solid;\n    border-top-width: 1px;\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"row\"]) {\n    border-bottom-color: var(--cui-table-border-color);\n    transition: background-color var(--duration-fast) var(--ease-standard);\n    border-bottom-style: solid;\n    border-bottom-width: 1px;\n  }\n\n  :where(\n    [data-control-family=\"table\"][data-slot=\"row\"]:is(\n      [data-interactive],\n      [tabindex],\n      [role=\"button\"],\n      :has(a, button, [role=\"checkbox\"])\n    ):hover\n  ) {\n    background: var(--cui-table-row-hover-background);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"row\"][data-state=\"selected\"]) {\n    background: var(--cui-table-row-selected-background);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"head\"]) {\n    color: var(--cui-table-header-foreground);\n    text-align: left;\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"caption\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"footer\"] > tr:last-child) {\n    border-bottom-style: solid;\n    border-bottom-width: 0px;\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"body\"] tr:last-child) {\n    border-style: solid;\n    border-width: 0px;\n  }\n\n  :where([data-control-family=\"table\"][data-slot=\"header\"] tr) {\n    border-bottom-style: solid;\n    border-bottom-width: 1px;\n  }\n}\n\n@property --cui-table-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-row-hover-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-row-selected-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-header-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-table-footer-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/table.tsx",
      "target": "@components/control-ui/ui/table.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\nimport type { TableKnobStyle } from \"@/components/control-ui/knob-contracts/table-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type TableProps = Omit<ComponentProps<\"table\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableHeaderProps = Omit<ComponentProps<\"thead\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableBodyProps = Omit<ComponentProps<\"tbody\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableFooterProps = Omit<ComponentProps<\"tfoot\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableRowProps = Omit<ComponentProps<\"tr\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableHeadProps = Omit<ComponentProps<\"th\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableCellProps = ComponentProps<\"td\"> & { style?: CSSProperties & TableKnobStyle };\n\nexport type TableCaptionProps = Omit<ComponentProps<\"caption\">, \"style\"> & { style?: CSSProperties & TableKnobStyle };\n\n// wrapped in overflow-x-auto so wide tables scroll instead of blowing out layout\nexport function Table({ className, ...props }: TableProps) {\n  return (\n    <div data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-control-ui=\"table\"\n        data-control-family=\"table\"\n        data-slot=\"root\"\n        className={cn(\"w-full caption-bottom\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({ className, ...props }: TableHeaderProps) {\n  return <thead data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"header\" className={className} {...props} />;\n}\n\nexport function TableBody({ className, ...props }: TableBodyProps) {\n  return <tbody data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"body\" className={className} {...props} />;\n}\n\nexport function TableFooter({ className, ...props }: TableFooterProps) {\n  return <tfoot data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"footer\" className={className} {...props} />;\n}\n\nexport function TableRow({ className, ...props }: TableRowProps) {\n  return <tr data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"row\" className={className} {...props} />;\n}\n\nexport function TableHead({ className, ...props }: TableHeadProps) {\n  return (\n    <th\n      data-control-ui=\"table\"\n      data-control-family=\"table\"\n      data-slot=\"head\"\n      className={cn(\"h-10 whitespace-nowrap px-2 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({ className, ...props }: TableCellProps) {\n  return (\n    <td\n      data-control-ui=\"table\"\n      data-control-family=\"table\"\n      data-slot=\"cell\"\n      className={cn(\"whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function TableCaption({ className, ...props }: TableCaptionProps) {\n  return <caption data-control-ui=\"table\" data-control-family=\"table\" data-slot=\"caption\" className={cn(\"mt-4\", className)} {...props} />;\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/table.css\"": {}
  },
  "meta": {}
}