{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-card",
  "title": "Data Table Card",
  "description": "Table-engine-neutral card shell with toolbar, content, footer, and valid empty-table states.",
  "registryDependencies": [
    "askyourpolicy/ss-registry/stitch-base",
    "askyourpolicy/ss-registry/card",
    "askyourpolicy/ss-registry/empty",
    "askyourpolicy/ss-registry/spinner",
    "askyourpolicy/ss-registry/table"
  ],
  "files": [
    {
      "path": "src/components/ui/data-table-card.tsx",
      "content": "import * as React from \"react\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { Empty } from \"@/components/ui/empty\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport { Table, TableCell, TableRow } from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\nfunction DataTableCard({ className, ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card\n      data-component=\"data-table-card\"\n      className={cn(\n        \"gap-0 bg-muted/20 py-0 ring-border-subtle has-data-[empty-state]:border has-data-[empty-state]:border-dashed has-data-[empty-state]:border-border-subtle has-data-[empty-state]:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardToolbar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-table-card-toolbar\"\n      className={cn(\n        \"flex min-h-14 flex-col gap-4 border-b border-border-subtle bg-muted/30 p-4 sm:flex-row sm:items-start sm:justify-between\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardHeading({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-table-card-heading\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"data-table-card-title\"\n      className={cn(\"font-heading text-base leading-snug font-medium text-balance\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"data-table-card-description\"\n      className={cn(\n        \"max-w-prose text-sm leading-snug text-balance text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardControls({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-table-card-controls\"\n      className={cn(\n        \"flex min-w-0 shrink-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-table-card-content\"\n      className={cn(\"min-w-0 bg-card/80\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardTable({ className, ...props }: React.ComponentProps<typeof Table>) {\n  return (\n    <Table\n      data-component=\"data-table-card-table\"\n      className={cn(\n        \"min-w-full [&_td:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:first-child]:pl-4 [&_th:last-child]:pr-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DataTableCardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-table-card-footer\"\n      className={cn(\n        \"flex min-h-12 flex-col gap-3 border-t border-border-subtle bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DataTableCardEmptyRowProps = Omit<React.ComponentProps<typeof TableRow>, \"children\"> & {\n  cellClassName?: string;\n  children: React.ReactNode;\n  colSpan: number;\n};\n\nfunction DataTableCardEmptyRow({\n  cellClassName,\n  children,\n  className,\n  colSpan,\n  ...props\n}: DataTableCardEmptyRowProps) {\n  return (\n    <TableRow className={cn(\"hover:bg-transparent\", className)} {...props}>\n      <TableCell className={cn(\"h-40 p-0 whitespace-normal\", cellClassName)} colSpan={colSpan}>\n        {children}\n      </TableCell>\n    </TableRow>\n  );\n}\n\n// A card holding an empty state trades its ring for a dashed border, which reads as \"nothing here\"\n// rather than a surface with content. A card still waiting on data must not read that way, so the two\n// are separate components: naming the state at the call site is what selects the treatment.\nfunction DataTableCardEmptyState({ className, ...props }: React.ComponentProps<typeof Empty>) {\n  return (\n    <Empty\n      data-component=\"data-table-card-empty-state\"\n      data-empty-state=\"\"\n      className={cn(\"min-h-40 rounded-none border-0 px-4 py-10\", className)}\n      {...props}\n    />\n  );\n}\n\ntype DataTableCardLoadingStateProps = Omit<React.ComponentProps<typeof Empty>, \"children\"> & {\n  label?: string;\n};\n\nfunction DataTableCardLoadingState({\n  className,\n  label = \"Loading\",\n  ...props\n}: DataTableCardLoadingStateProps) {\n  return (\n    <Empty\n      aria-live=\"polite\"\n      data-component=\"data-table-card-loading-state\"\n      className={cn(\"min-h-40 gap-2 rounded-none border-0 px-4 py-10\", className)}\n      role=\"status\"\n      {...props}\n    >\n      <Spinner aria-hidden=\"true\" className=\"text-muted-foreground\" />\n      <span className=\"text-sm text-muted-foreground\">{label}</span>\n    </Empty>\n  );\n}\n\nexport {\n  DataTableCard,\n  DataTableCardContent,\n  DataTableCardControls,\n  DataTableCardDescription,\n  DataTableCardEmptyRow,\n  DataTableCardEmptyState,\n  DataTableCardFooter,\n  DataTableCardHeading,\n  DataTableCardLoadingState,\n  DataTableCardTable,\n  DataTableCardTitle,\n  DataTableCardToolbar,\n  type DataTableCardEmptyRowProps,\n  type DataTableCardLoadingStateProps,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}