{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-resize-handle",
  "title": "Data Table Resize Handle",
  "description": "Slot-mounted resize handle for column headers.",
  "dependencies": [
    "@virtuoso.dev/data-table"
  ],
  "registryDependencies": [
    "petyosi/react-virtuoso/data-table"
  ],
  "files": [
    {
      "path": "registry/new-york/data-table/column-resize/index.ts",
      "content": "export { ResizeHandle } from './resize-handle'\n",
      "type": "registry:component",
      "target": "@ui/data-table/column-resize/index.ts"
    },
    {
      "path": "registry/new-york/data-table/column-resize/resize-handle.tsx",
      "content": "'use client'\n\nimport { useState, type CSSProperties } from 'react'\n\nimport { usePublisher } from '@virtuoso.dev/data-table'\nimport { clearColumnWidthOverride$, resizeColumn$ } from '@virtuoso.dev/data-table/column-resize'\n\nimport type { HeaderSlotCustomComponent } from '@virtuoso.dev/data-table'\n\nconst MIN_WIDTH = 50\nconst HANDLE_HIT_AREA = 10\nconst HANDLE_STYLE: CSSProperties = {\n  position: 'relative',\n  display: 'flex',\n  width: HANDLE_HIT_AREA,\n  minWidth: HANDLE_HIT_AREA,\n  alignSelf: 'stretch',\n  justifyContent: 'center',\n  cursor: 'col-resize',\n  touchAction: 'none',\n  userSelect: 'none',\n  zIndex: 1,\n}\nconst HANDLE_LINE_STYLE: CSSProperties = {\n  position: 'absolute',\n  right: 0,\n  top: '50%',\n  borderRadius: 9999,\n  transform: 'translateY(-50%)',\n}\n\nexport const ResizeHandle: HeaderSlotCustomComponent = ({ columnKey, headerRef }) => {\n  const resizeColumn = usePublisher(resizeColumn$)\n  const clearColumnWidthOverride = usePublisher(clearColumnWidthOverride$)\n  const [isResizing, setIsResizing] = useState(false)\n\n  return (\n    <div\n      data-table-element-role=\"resize-handle\"\n      data-resizing={isResizing ? 'true' : undefined}\n      className=\"group flex cursor-col-resize touch-none items-stretch\"\n      style={HANDLE_STYLE}\n      onDoubleClick={(event) => {\n        event.preventDefault()\n        clearColumnWidthOverride({ key: columnKey })\n      }}\n      onPointerDown={(event) => {\n        event.preventDefault()\n        const handle = event.currentTarget\n        const ownerDocument = handle.ownerDocument\n        const startWidth = headerRef.current?.getBoundingClientRect().width\n        if (startWidth === undefined) {\n          return\n        }\n\n        const startX = event.clientX\n        const pointerId = event.pointerId\n        handle.setPointerCapture(pointerId)\n        setIsResizing(true)\n\n        const handlePointerMove = (moveEvent: PointerEvent) => {\n          resizeColumn({\n            key: columnKey,\n            width: Math.max(MIN_WIDTH, startWidth + moveEvent.clientX - startX),\n          })\n        }\n\n        const handlePointerEnd = () => {\n          if (handle.hasPointerCapture(pointerId)) {\n            handle.releasePointerCapture(pointerId)\n          }\n          setIsResizing(false)\n          ownerDocument.removeEventListener('pointermove', handlePointerMove)\n          ownerDocument.removeEventListener('pointerup', handlePointerEnd)\n          ownerDocument.removeEventListener('pointercancel', handlePointerEnd)\n        }\n\n        ownerDocument.addEventListener('pointermove', handlePointerMove)\n        ownerDocument.addEventListener('pointerup', handlePointerEnd, { once: true })\n        ownerDocument.addEventListener('pointercancel', handlePointerEnd, { once: true })\n      }}\n    >\n      <div\n        data-resizing={isResizing ? 'true' : undefined}\n        className=\"pointer-events-none absolute h-4 w-0.5 rounded-full bg-border opacity-80 transition-[height,width,background-color,opacity] duration-150 ease-out group-hover:h-5 group-hover:bg-foreground/30 group-hover:opacity-100 data-[resizing=true]:h-6 data-[resizing=true]:w-[3px] data-[resizing=true]:bg-primary data-[resizing=true]:opacity-100\"\n        style={HANDLE_LINE_STYLE}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/data-table/column-resize/resize-handle.tsx"
    }
  ],
  "type": "registry:component"
}