{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-grid-view-menu",
  "title": "Data Grid View Menu",
  "description": "A view menu component for the data grid to toggle column visibility",
  "dependencies": [
    "@tanstack/react-table",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "command",
    "popover"
  ],
  "files": [
    {
      "path": "src/components/data-grid/data-grid-view-menu.tsx",
      "content": "\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { Settings2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { useDirection } from \"@/components/ui/direction\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataGridViewMenuProps<TData>\n  extends React.ComponentProps<typeof PopoverContent> {\n  table: Table<TData>;\n  disabled?: boolean;\n}\n\nexport function DataGridViewMenu<TData>({\n  table,\n  disabled,\n  className,\n  ...props\n}: DataGridViewMenuProps<TData>) {\n  const dir = useDirection();\n\n  const columns = React.useMemo(\n    () =>\n      table\n        .getAllColumns()\n        .filter(\n          (column) =>\n            typeof column.accessorFn !== \"undefined\" && column.getCanHide(),\n        ),\n    [table],\n  );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label=\"Toggle columns\"\n          role=\"combobox\"\n          dir={dir}\n          variant=\"outline\"\n          className=\"ms-auto hidden h-8 font-normal lg:flex\"\n          disabled={disabled}\n        >\n          <Settings2 className=\"text-muted-foreground\" />\n          View\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        dir={dir}\n        className={cn(\"w-44 p-0\", className)}\n        {...props}\n      >\n        <Command>\n          <CommandInput placeholder=\"Search columns...\" />\n          <CommandList>\n            <CommandEmpty>No columns found.</CommandEmpty>\n            <CommandGroup>\n              {columns.map((column) => (\n                <CommandItem\n                  key={column.id}\n                  data-checked={column.getIsVisible()}\n                  onSelect={() =>\n                    column.toggleVisibility(!column.getIsVisible())\n                  }\n                >\n                  <span className=\"truncate\">\n                    {column.columnDef.meta?.label ?? column.id}\n                  </span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component",
      "target": "src/components/data-grid/data-grid-view-menu.tsx"
    },
    {
      "path": "src/components/ui/direction.tsx",
      "content": "\"use client\";\n\nimport { Direction } from \"radix-ui\";\nimport type * as React from \"react\";\n\nfunction DirectionProvider({\n  dir,\n  direction,\n  children,\n}: React.ComponentProps<typeof Direction.DirectionProvider> & {\n  direction?: React.ComponentProps<typeof Direction.DirectionProvider>[\"dir\"];\n}) {\n  return (\n    <Direction.DirectionProvider dir={direction ?? dir}>\n      {children}\n    </Direction.DirectionProvider>\n  );\n}\n\nconst useDirection = Direction.useDirection;\n\nexport { DirectionProvider, useDirection };\n",
      "type": "registry:ui",
      "target": "src/components/ui/direction.tsx"
    }
  ],
  "type": "registry:component"
}