{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "A data table where row separators are hand-drawn rough lines instead of CSS borders.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/table.tsx",
      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { createContext } from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CrumbleContext,\n  resolveRoughVars,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\ninterface TableContextValue {\n  rowIndex: number;\n  theme: CrumbleTheme;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  rowIndex: 0,\n  theme: \"pencil\",\n});\n\nexport interface TableProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CrumbleColorProps {\n  theme?: CrumbleTheme;\n}\n\nexport function Table({\n  children,\n  className,\n  fill,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n  ...props\n}: TableProps) {\n  const { theme: contextTheme } = useContext(CrumbleContext);\n  const theme = themeProp ?? contextTheme;\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  return (\n    <div\n      className={cn(\"w-full overflow-auto\", className)}\n      style={roughStyle}\n      {...props}\n    >\n      <table className=\"w-full border-collapse\">\n        <TableContext.Provider value={{ rowIndex: 0, theme }}>\n          {children}\n        </TableContext.Provider>\n      </table>\n    </div>\n  );\n}\n\nexport function TableHeader({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <thead className={cn(\"\", className)} {...(props as object)}>\n      {children}\n    </thead>\n  );\n}\n\nexport function TableBody({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableSectionElement>) {\n  return (\n    <tbody className={cn(\"\", className)} {...(props as object)}>\n      {children}\n    </tbody>\n  );\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  index?: number;\n}\n\nexport function TableRow({\n  children,\n  className,\n  index = 0,\n  ...props\n}: TableRowProps) {\n  const { theme } = useContext(TableContext);\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const externalSvgRef = useRef<SVGSVGElement>(null);\n  const { drawLine, svgRef } = useRough({\n    stableId: `table-row-${index}`,\n    svgRef: externalSvgRef,\n    theme,\n    variant: \"border\",\n  });\n\n  const draw = useCallback(() => {\n    const row = rowRef.current;\n    const svg = svgRef.current;\n    if (!row || !svg) return;\n\n    const w = row.offsetWidth;\n    svg.replaceChildren();\n    svg.setAttribute(\"width\", String(w));\n    svg.setAttribute(\"height\", \"6\");\n    svg.setAttribute(\"viewBox\", `0 0 ${w} 6`);\n\n    const line = drawLine(0, 3, w, 3, {\n      stroke: \"var(--cr-stroke-muted)\",\n      strokeWidth: theme === \"crayon\" ? 1.5 : 0.8,\n    });\n    if (line) svg.appendChild(line);\n  }, [drawLine, svgRef, theme]);\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => draw());\n    return () => cancelAnimationFrame(id);\n  }, [draw]);\n\n  useEffect(() => {\n    const row = rowRef.current;\n    if (!row) return;\n    const ro = new ResizeObserver(() => draw());\n    ro.observe(row);\n    return () => ro.disconnect();\n  }, [draw]);\n\n  return (\n    <TableContext.Provider value={{ rowIndex: index, theme }}>\n      <tr\n        ref={rowRef}\n        className={cn(\"relative group\", className)}\n        {...(props as object)}\n      >\n        {children}\n        <td\n          className=\"p-0 absolute bottom-0 left-0 right-0 pointer-events-none\"\n          style={{ height: 6 }}\n          aria-hidden=\"true\"\n        >\n          <svg\n            ref={externalSvgRef}\n            aria-hidden=\"true\"\n            className=\"overflow-visible absolute inset-0\"\n          />\n        </td>\n      </tr>\n    </TableContext.Provider>\n  );\n}\n\nexport function TableHead({\n  children,\n  className,\n  ...props\n}: ThHTMLAttributes<HTMLTableCellElement>) {\n  return (\n    <th\n      className={cn(\n        \"px-3 py-3 text-left text-[11px] font-medium uppercase tracking-wider text-muted-foreground\",\n        className,\n      )}\n      {...(props as object)}\n    >\n      {children}\n    </th>\n  );\n}\n\nexport function TableCell({\n  children,\n  className,\n  ...props\n}: TdHTMLAttributes<HTMLTableCellElement>) {\n  return (\n    <td\n      className={cn(\"px-3 py-3 text-sm text-foreground\", className)}\n      {...(props as object)}\n    >\n      {children}\n    </td>\n  );\n}\n\nexport function TableCaption({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableCaptionElement>) {\n  return (\n    <caption\n      className={cn(\"mt-2 text-xs text-muted-foreground text-center\", className)}\n      {...(props as object)}\n    >\n      {children}\n    </caption>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/table.tsx"
    }
  ],
  "type": "registry:ui"
}