{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "author": "AniBT <https://anibt.net>",
  "description": "AniBT data table on a real <table>: 36px head of muted labels, 48px rows parted by the stitch, pink-washed selected rows, numeric cells in the round face, an optional sticky head and a two-line identity cell.",
  "registryDependencies": [
    "@anibt/theme"
  ],
  "files": [
    {
      "path": "registry/anibt/ui/table.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Table — the AniBT 「贴纸手账」 data table, on a real `<table>`.\n *\n * It draws no box of its own: a table sits straight on the panel it is placed\n * in (put it in a `Card`, with the card's padding off). The head row is 36px\n * of 12/600 muted labels; body rows are at least 48px, parted by the dashed\n * stitch; the pointer presses a row to the sunk tone and a selected row\n * (`data-state=\"selected\"`) takes the pink wash. Numbers set `numeric` on the\n * head and the cell: right-aligned, in the round face, tabular.\n *\n * `TableHeader sticky` pins the head to the top of a height-capped container\n * (`containerClassName=\"max-h-80\"`); the pinned cells repeat the card's paper\n * so rows scrolling under them do not show through.\n *\n * `TableIdentity` is the first cell of an entity row: an optional picture, the\n * name on one line and a muted line under it, always 32px tall.\n *\n * The parts and props are shadcn's, plus `containerClassName`, `sticky`,\n * `numeric` and `TableIdentity`.\n */\nfunction Table({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"table\"> & { containerClassName?: string }) {\n  return (\n    <div data-slot=\"table-container\" className={cn(\"relative w-full overflow-x-auto\", containerClassName)}>\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom border-separate border-spacing-0 text-[13px]\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({\n  className,\n  sticky = false,\n  ...props\n}: React.ComponentProps<\"thead\"> & { sticky?: boolean }) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      data-sticky={sticky ? \"true\" : undefined}\n      className={cn(\n        \"[&_th]:bg-(image:--anibt-stitch) [&_th]:bg-size-[8px_1px] [&_th]:bg-bottom [&_th]:bg-repeat-x [&_tr]:h-auto [&_tr]:bg-none [&_tr]:hover:bg-transparent\",\n        sticky && \"[&_th]:sticky [&_th]:top-0 [&_th]:z-10 [&_th]:bg-card\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return <tbody data-slot=\"table-body\" className={cn(\"[&_tr:last-child]:bg-none\", className)} {...props} />\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"font-semibold text-foreground [&_td]:bg-muted [&_td]:bg-(image:--anibt-stitch) [&_td]:bg-size-[8px_1px] [&_td]:bg-top [&_td]:bg-repeat-x [&_tr]:bg-none [&_tr]:hover:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"h-12 bg-(image:--anibt-stitch) bg-size-[8px_1px] bg-bottom bg-repeat-x transition-colors duration-150 hover:bg-muted data-[state=selected]:bg-accent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst NUMERIC = \"data-[numeric=true]:text-right data-[numeric=true]:anibt-num\"\n\nfunction TableHead({ className, numeric, ...props }: React.ComponentProps<\"th\"> & { numeric?: boolean }) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      data-numeric={numeric ? \"true\" : undefined}\n      className={cn(\n        \"h-9 px-3 text-left align-middle text-[12px] leading-4 font-semibold whitespace-nowrap text-muted-foreground first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0\",\n        NUMERIC,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, numeric, ...props }: React.ComponentProps<\"td\"> & { numeric?: boolean }) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      data-numeric={numeric ? \"true\" : undefined}\n      className={cn(\n        \"px-3 py-2 align-middle text-[13px] leading-5 text-anibt-ink2 first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0\",\n        NUMERIC,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption data-slot=\"table-caption\" className={cn(\"mt-3 text-[12px] text-muted-foreground\", className)} {...props} />\n  )\n}\n\n/** Picture, name and a muted line: the first cell of an entity row. */\nfunction TableIdentity({\n  className,\n  media,\n  title,\n  meta,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  media?: React.ReactNode\n  title: React.ReactNode\n  meta?: React.ReactNode\n}) {\n  return (\n    <div data-slot=\"table-identity\" className={cn(\"flex min-w-0 items-center gap-2.5\", className)} {...props}>\n      {media}\n      <div className=\"flex h-8 min-w-0 flex-col justify-center\">\n        <span className=\"anibt-ell text-[14px] leading-4 font-semibold text-foreground\">{title}</span>\n        {meta ? <span className=\"anibt-ell mt-0.5 text-[12px] leading-4 text-muted-foreground\">{meta}</span> : null}\n      </div>\n    </div>\n  )\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableIdentity }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}