{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"native-table","title":"Native Table","description":"Native HTML table in the look of Table, for content that people read and for cells whose inputs and buttons keep their own tab stops. Search terms: static table, report, markdown table.","dependencies":[],"registryDependencies":["@siteplane/base","@siteplane/table"],"files":[{"path":"packages/ui/src/components/native-table/native-table.tsx","content":"\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport {\n  type SiteplaneControlSize,\n  useResolvedControlSize,\n} from \"../../system/provider/siteplane-ui-provider\";\nimport { cn } from \"../../system/utils/cn\";\nimport {\n  tableAlignmentClassName,\n  tableContainerSizeClassName,\n  tableFooterClassName,\n  type TableAlign,\n} from \"../table/table-shared\";\nimport \"../table/table.css\";\nimport \"./native-table.css\";\n\nexport interface NativeTableProps extends ComponentProps<\"table\"> {\n  containerClassName?: string | undefined;\n  hoverable?: boolean | undefined;\n  minWidth?: CSSProperties[\"minWidth\"];\n  size?: SiteplaneControlSize | undefined;\n}\n\n/** Native table semantics: each control keeps its own focus and keyboard behavior. */\nexport function NativeTable({\n  className,\n  containerClassName,\n  hoverable = true,\n  minWidth,\n  size,\n  style,\n  ...props\n}: NativeTableProps) {\n  const resolvedSize = useResolvedControlSize(size);\n  return (\n    <div\n      data-slot=\"table-container\"\n      data-size={resolvedSize}\n      className={cn(\n        \"sp-table-container\",\n        \"relative w-full min-w-0 overflow-x-auto\",\n        tableContainerSizeClassName,\n        containerClassName,\n      )}\n    >\n      <table\n        {...props}\n        data-slot=\"table\"\n        data-hoverable={hoverable}\n        className={cn(\n          \"sp-table\",\n          \"w-full border-collapse caption-bottom text-sm\",\n          className,\n        )}\n        style={{ minWidth, ...style }}\n      />\n    </div>\n  );\n}\n\nexport function NativeTableCaption({\n  className,\n  ...props\n}: ComponentProps<\"caption\">) {\n  return (\n    <caption\n      {...props}\n      data-slot=\"table-caption\"\n      className={cn(\n        \"sp-table-caption\",\n        \"mt-4 text-sm text-muted-foreground\",\n        className,\n      )}\n    />\n  );\n}\nexport function NativeTableHeader(props: ComponentProps<\"thead\">) {\n  return (\n    <thead\n      {...props}\n      className={cn(\"sp-table-header\", props.className)}\n      data-slot=\"table-header\"\n    />\n  );\n}\nexport function NativeTableBody(props: ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      {...props}\n      className={cn(\"sp-table-body\", props.className)}\n      data-slot=\"table-body\"\n    />\n  );\n}\nexport function NativeTableFooter({\n  className,\n  ...props\n}: ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      {...props}\n      data-slot=\"table-footer\"\n      className={cn(\"sp-table-footer\", tableFooterClassName, className)}\n    />\n  );\n}\n\nexport interface NativeTableRowProps extends ComponentProps<\"tr\"> {\n  hoverable?: boolean | undefined;\n  tone?: \"section\" | \"total\" | \"muted\" | undefined;\n}\nexport function NativeTableRow({\n  className,\n  hoverable = true,\n  tone,\n  ...props\n}: NativeTableRowProps) {\n  return (\n    <tr\n      {...props}\n      data-slot=\"table-row\"\n      data-hoverable={hoverable}\n      data-tone={tone}\n      className={cn(\"sp-table-row\", className)}\n    />\n  );\n}\n\nexport interface NativeTableHeadProps extends Omit<\n  ComponentProps<\"th\">,\n  \"align\"\n> {\n  align?: TableAlign | undefined;\n}\nexport interface NativeTableCellProps extends Omit<\n  ComponentProps<\"td\">,\n  \"align\"\n> {\n  align?: TableAlign | undefined;\n}\nexport function NativeTableHead({\n  align = \"start\",\n  className,\n  scope = \"col\",\n  ...props\n}: NativeTableHeadProps) {\n  return (\n    <th\n      {...props}\n      scope={scope}\n      data-slot=\"table-head\"\n      data-align={align}\n      className={cn(\n        \"sp-table-head\",\n        \"whitespace-nowrap align-middle\",\n        tableAlignmentClassName(align),\n        className,\n      )}\n    />\n  );\n}\nexport function NativeTableCell({\n  align = \"start\",\n  className,\n  ...props\n}: NativeTableCellProps) {\n  return (\n    <td\n      {...props}\n      data-slot=\"table-cell\"\n      data-align={align}\n      className={cn(\n        \"sp-table-cell\",\n        \"align-middle\",\n        tableAlignmentClassName(align),\n        className,\n      )}\n    />\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/native-table/native-table.tsx"},{"path":"packages/ui/src/components/native-table/native-table.css","content":"@layer theme, base, components, siteplane, utilities;\n\n@layer siteplane {\n  /* NativeTable shares Table's visual styles (table.css) and adds only the row\n   * tones and row-heading treatment of its native semantics. */\n  .sp-table-row[data-tone=\"section\"] {\n    background: color-mix(in oklab, var(--color-muted) 40%, transparent);\n    font-weight: var(--sp-rw-font-weight-strong);\n  }\n\n  .sp-table-row[data-tone=\"total\"] {\n    background: color-mix(in oklab, var(--color-muted) 70%, transparent);\n    font-weight: var(--sp-rw-font-weight-strong);\n  }\n\n  /* The footer already paints the shared summary fill (table-shared); a total row\n   * inside it only adds weight instead of tinting the band a second time. */\n  .sp-table-footer > .sp-table-row[data-tone=\"total\"] {\n    background: transparent;\n  }\n\n  .sp-table-row[data-tone=\"muted\"] {\n    color: var(--sp-rw-fg-tertiary);\n  }\n\n  .sp-table-head:is([scope=\"row\"], [scope=\"rowgroup\"]) {\n    color: inherit;\n    font-weight: inherit;\n  }\n}\n","type":"registry:ui","target":"~/src/siteplane/components/native-table/native-table.css"},{"path":"packages/ui/src/components/native-table/index.ts","content":"export * from \"./native-table\";\n","type":"registry:ui","target":"~/src/siteplane/components/native-table/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/native-table.md","categories":["Data display"],"meta":{"avoidWhen":["Avoid when people select rows, sort columns or move between cells with the arrow keys; use Table, the React Aria grid.","Avoid for the details of one record as label and value pairs; use Data List."],"description":"Native HTML table in the look of Table, for content that people read and for cells whose inputs and buttons keep their own tab stops.","knownLimitations":["Installing Native Table also installs the Table item with react-aria-components, because the two share the stylesheet of Table.","The table holds no state and renders every row it is given; sorting, filtering, paging and totals stay in the application."],"providerNotes":[],"releaseStatus":"preview","searchTerms":["native-table","native table","html table","static table","report","markdown table"],"useWhen":["Use for tabular content that people read, such as a report, a price list or a table in rendered markdown.","Use when the cells hold inputs or buttons that each keep their own tab stop and keys."]}}