{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-table",
  "type": "registry:ui",
  "title": "Table",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwind-merge",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-checkbox.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Table.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {ArrowUp, ChevronRight} from 'lucide-react';\nimport React from 'react';\nimport {\n  Cell as AriaCell,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableHeader as AriaTableHeader,\n  TableBody as AriaTableBody,\n  Button,\n  type CellProps,\n  Collection,\n  type ColumnProps,\n  ColumnResizer,\n  ResizableTableContainer,\n  type RowProps,\n  type TableHeaderProps,\n  type TableProps as AriaTableProps,\n  useTableOptions,\n  type TableBodyProps,\n  TableFooter as AriaTableFooter,\n  type TableFooterProps\n} from 'react-aria-components/Table';\nimport {Group} from 'react-aria-components/Group';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {twMerge} from 'tailwind-merge';\nimport {tv} from 'tailwind-variants';\nimport {Checkbox} from '@/registry/react-aria/ui/Checkbox';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\ninterface TableProps extends Omit<AriaTableProps, 'className'> {\n  className?: string;\n}\n\nexport function Table(props: TableProps) {\n  return (\n    <ResizableTableContainer\n      onScroll={props.onScroll}\n      className={twMerge(\n        'w-full max-h-[320px] overflow-auto scroll-pt-[2.281rem] relative bg-white dark:bg-neutral-900 box-border border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans',\n        props.className\n      )}>\n      <AriaTable\n        {...props}\n        className=\"border-separate border-spacing-0 box-border overflow-hidden has-[>[data-empty]]:h-full\"\n      />\n    </ResizableTableContainer>\n  );\n}\n\nconst columnStyles = tv({\n  extend: focusRing,\n  base: 'px-2 h-5 box-border flex-1 flex gap-1 items-center overflow-hidden'\n});\n\nconst resizerStyles = tv({\n  extend: focusRing,\n  base: 'w-px px-[8px] translate-x-[8px] box-content py-1 h-5 bg-clip-content bg-neutral-400 dark:bg-neutral-500 forced-colors:bg-[ButtonBorder] cursor-col-resize rounded-xs resizing:bg-blue-600 forced-colors:resizing:bg-[Highlight] resizing:w-[2px] resizing:pl-[7px] -outline-offset-2'\n});\n\nexport function Column(props: ColumnProps) {\n  return (\n    <AriaColumn\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'box-border h-1 [&:hover]:z-20 focus-within:z-20 text-start text-sm font-semibold text-neutral-700 dark:text-neutral-300 cursor-default'\n      )}>\n      {composeRenderProps(props.children, (children, {allowsSorting, sortDirection}) => (\n        <div className=\"flex items-center\">\n          <Group role=\"presentation\" tabIndex={-1} className={columnStyles}>\n            <span className=\"truncate\">{children}</span>\n            {allowsSorting && (\n              <span\n                className={`w-4 h-4 flex items-center justify-center transition ${\n                  sortDirection === 'descending' ? 'rotate-180' : ''\n                }`}>\n                {sortDirection && (\n                  <ArrowUp\n                    aria-hidden\n                    className=\"w-4 h-4 text-neutral-500 dark:text-neutral-400 forced-colors:text-[ButtonText]\"\n                  />\n                )}\n              </span>\n            )}\n          </Group>\n          {!props.width && <ColumnResizer className={resizerStyles} />}\n        </div>\n      ))}\n    </AriaColumn>\n  );\n}\n\nexport function TableHeader<T>(props: TableHeaderProps<T>) {\n  let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions();\n\n  return (\n    <AriaTableHeader\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'sticky top-0 z-10 bg-neutral-100/60 dark:bg-neutral-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 dark:supports-[-moz-appearance:none]:bg-neutral-700 forced-colors:bg-[Canvas] rounded-t-lg border-b border-b-neutral-200 dark:border-b-neutral-700'\n      )}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <Column />}\n      {selectionBehavior === 'toggle' && (\n        <AriaColumn\n          width={36}\n          minWidth={36}\n          className=\"box-border p-2 text-sm font-semibold cursor-default text-start\">\n          {selectionMode === 'multiple' && <Checkbox slot=\"selection\" />}\n        </AriaColumn>\n      )}\n      <Collection items={props.columns}>{props.children}</Collection>\n    </AriaTableHeader>\n  );\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n  return <AriaTableBody {...props} className=\"empty:italic empty:text-center empty:text-sm\" />;\n}\n\nexport function TableFooter<T>(props: TableFooterProps<T>) {\n  return <AriaTableFooter {...props} className=\"bg-neutral-200 dark:bg-neutral-700 font-bold\" />;\n}\n\nconst rowStyles = tv({\n  extend: focusRing,\n  base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 selected:pressed:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40 dark:selected:pressed:bg-blue-700/40 last:rounded-b-lg'\n});\n\nexport function Row<T>({id, columns, children, ...otherProps}: RowProps<T>) {\n  let {selectionBehavior, allowsDragging} = useTableOptions();\n\n  return (\n    <AriaRow id={id} {...otherProps} className={rowStyles}>\n      {allowsDragging && (\n        <Cell>\n          <Button slot=\"drag\">≡</Button>\n        </Cell>\n      )}\n      {selectionBehavior === 'toggle' && (\n        <Cell>\n          <Checkbox slot=\"selection\" />\n        </Cell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </AriaRow>\n  );\n}\n\nconst cellStyles = tv({\n  extend: focusRing,\n  base: 'box-border [-webkit-tap-highlight-color:transparent] border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) [:is(:has(+[data-selected])_*)]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'\n});\n\nconst expandButton = tv({\n  extend: focusRing,\n  base: 'border-0 p-0 pr-1 bg-transparent shrink-0 align-middle cursor-default [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nconst chevron = tv({\n  base: 'w-4.5 h-4.5 text-neutral-500 dark:text-neutral-400 transition-transform duration-200 ease-in-out',\n  variants: {\n    isExpanded: {\n      true: 'transform rotate-90'\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nexport function Cell(props: CellProps) {\n  return (\n    <AriaCell\n      {...props}\n      className={cellStyles}\n      style={({hasChildItems, isTreeColumn, level}) => ({\n        paddingInlineStart: isTreeColumn\n          ? 4 + (hasChildItems ? 0 : 20) + (level - 1) * 16\n          : undefined\n      })}>\n      {composeRenderProps(\n        props.children,\n        (children, {hasChildItems, isTreeColumn, isExpanded, isDisabled}) => (\n          <>\n            {hasChildItems && isTreeColumn && (\n              <Button slot=\"chevron\" className={expandButton({isDisabled})}>\n                <ChevronRight aria-hidden className={chevron({isExpanded, isDisabled})} />\n              </Button>\n            )}\n            {children}\n          </>\n        )\n      )}\n    </AriaCell>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}