{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "A composable data table on a glass container, with row hover and selection.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { forwardRef, type HTMLAttributes, type TableHTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react'\nimport { LiquidSurface, type LiquidSurfaceProps } from '@/components/ui/liquid-surface'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type LiquidTableContainerProps = Omit<LiquidSurfaceProps, 'children'> & {\n  children: React.ReactNode\n}\n\nexport const LiquidTableContainer = forwardRef<HTMLDivElement, LiquidTableContainerProps>(({\n  children,\n  className,\n  ...props\n}, ref) => (\n  <LiquidSurface\n    className={['lq-table-container', className].filter(Boolean).join(' ')}\n    interactive={false}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"lq-table-scroll\">{children}</div>\n  </LiquidSurface>\n))\n\nLiquidTableContainer.displayName = 'LiquidTableContainer'\n\nexport type LiquidTableProps = TableHTMLAttributes<HTMLTableElement> & LiquidStyleProps & {\n  hover?: boolean\n  size?: 'sm' | 'md'\n}\n\nexport const LiquidTable = forwardRef<HTMLTableElement, LiquidTableProps>(({\n  className,\n  hover = true,\n  size = 'md',\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-table', { className, style, styles })\n\n  return (\n    <table\n      className={root.className}\n      data-hover={hover}\n      data-liquid-size={size}\n      ref={ref}\n      style={root.style}\n      {...props}\n    />\n  )\n})\n\nLiquidTable.displayName = 'LiquidTable'\n\nexport const LiquidTableHead = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement> & LiquidStyleProps\n>(({ className, style, styles, ...props }, ref) => {\n  const root = useLiquidStyles('lq-table__head', { className, style, styles })\n\n  return <thead className={root.className} ref={ref} style={root.style} {...props} />\n})\n\nLiquidTableHead.displayName = 'LiquidTableHead'\n\nexport const LiquidTableBody = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement> & LiquidStyleProps\n>(({ className, style, styles, ...props }, ref) => {\n  const root = useLiquidStyles('lq-table__body', { className, style, styles })\n\n  return <tbody className={root.className} ref={ref} style={root.style} {...props} />\n})\n\nLiquidTableBody.displayName = 'LiquidTableBody'\n\nexport type LiquidTableRowProps = HTMLAttributes<HTMLTableRowElement> & LiquidStyleProps & {\n  selected?: boolean\n}\n\nexport const LiquidTableRow = forwardRef<HTMLTableRowElement, LiquidTableRowProps>(\n  ({ className, selected = false, style, styles, ...props }, ref) => {\n    const root = useLiquidStyles('lq-table__row', { className, style, styles })\n\n    return <tr className={root.className} data-selected={selected} ref={ref} style={root.style} {...props} />\n  },\n)\n\nLiquidTableRow.displayName = 'LiquidTableRow'\n\nexport type LiquidTableCellProps = TdHTMLAttributes<HTMLTableCellElement> & LiquidStyleProps & {\n  align?: 'left' | 'center' | 'right'\n}\n\nexport const LiquidTableCell = forwardRef<HTMLTableCellElement, LiquidTableCellProps>(\n  ({ align = 'left', className, style, styles, ...props }, ref) => {\n    const root = useLiquidStyles('lq-table__cell', { className, style, styles })\n\n    return <td className={root.className} data-align={align} ref={ref} style={root.style} {...props} />\n  },\n)\n\nLiquidTableCell.displayName = 'LiquidTableCell'\n\nexport type LiquidTableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement> & LiquidStyleProps & {\n  align?: 'left' | 'center' | 'right'\n}\n\nexport const LiquidTableHeaderCell = forwardRef<HTMLTableCellElement, LiquidTableHeaderCellProps>(\n  ({ align = 'left', className, style, styles, ...props }, ref) => {\n    const root = useLiquidStyles('lq-table__header-cell', { className, style, styles })\n\n    return (\n      <th className={root.className} data-align={align} ref={ref} scope=\"col\" style={root.style} {...props} />\n    )\n  },\n)\n\nLiquidTableHeaderCell.displayName = 'LiquidTableHeaderCell'\n",
      "path": "registry/liquid-table.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-table",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/liquid-surface.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidTableContainer",
  "type": "registry:ui"
}