{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-toolbar",
  "title": "Data Table Toolbar",
  "description": "Search, filters and column visibility for a list.",
  "dependencies": [
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/button",
    "@waimakers/badge",
    "@waimakers/input-group",
    "@waimakers/dropdown-menu"
  ],
  "files": [
    {
      "path": "src/components/ui/data-table-toolbar.tsx",
      "content": "import { Columns3, Search, X } from \"lucide-react\";\nimport { useId, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { Badge } from \"./badge\";\nimport { InputGroup, InputGroupAddon, InputGroupClear, InputGroupInput } from \"./input-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\";\n\nconst emptyFilters: readonly { id: string; label: string; onRemove: () => void }[] = [];\nconst emptyColumns: readonly { id: string; header: string; hideable?: boolean }[] = [];\nconst emptyVisibility: Record<string, boolean> = {};\n\nfunction DataTableToolbar({\n  search,\n  onSearchChange,\n  searchLabel = \"Search\",\n  searchAction,\n  searchMaxLength,\n  searchHint,\n  onSearchSubmit,\n  filters,\n  activeFilters = emptyFilters,\n  onClearFilters,\n  columns = emptyColumns,\n  columnVisibility = emptyVisibility,\n  onColumnVisibilityChange,\n  children,\n}: {\n  search: string;\n  onSearchChange: (value: string) => void;\n  searchLabel?: string;\n  searchAction?: ReactNode;\n  searchMaxLength?: number;\n  searchHint?: ReactNode;\n  onSearchSubmit?: () => void;\n  filters?: ReactNode;\n  activeFilters?: readonly { id: string; label: string; onRemove: () => void }[];\n  onClearFilters?: () => void;\n  columns?: readonly { id: string; header: string; hideable?: boolean }[];\n  columnVisibility?: Record<string, boolean>;\n  onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;\n  children?: ReactNode;\n}) {\n  const id = useId();\n  const searchControl = (\n    <>\n      <label htmlFor={id} className=\"sr-only\">\n        {searchLabel}\n      </label>\n      <InputGroup className=\"h-11 rounded-lg\">\n        <InputGroupAddon>\n          <Search aria-hidden className=\"size-4\" />\n        </InputGroupAddon>\n        <InputGroupInput\n          className=\"h-full\"\n          id={id}\n          type=\"search\"\n          maxLength={searchMaxLength}\n          value={search}\n          placeholder={searchLabel}\n          onChange={(event) => onSearchChange(event.target.value)}\n        />\n        {search && (\n          <InputGroupAddon align=\"inline-end\">\n            <InputGroupClear aria-label=\"Clear search\" onClear={() => onSearchChange(\"\")} />\n          </InputGroupAddon>\n        )}\n        {searchAction && <InputGroupAddon align=\"inline-end\">{searchAction}</InputGroupAddon>}\n      </InputGroup>\n      {searchHint && <div className=\"mt-1 text-xs text-muted-foreground\">{searchHint}</div>}\n    </>\n  );\n  return (\n    <div data-slot=\"data-table-toolbar\" className=\"@container flex min-w-0 flex-col gap-3\">\n      <div className=\"flex min-w-0 flex-wrap items-end gap-3\">\n        <div className=\"min-w-0 flex-1 basis-64 sm:max-w-sm\">\n          {onSearchSubmit ? (\n            <form\n              onSubmit={(event) => {\n                event.preventDefault();\n                onSearchSubmit();\n              }}\n            >\n              {searchControl}\n            </form>\n          ) : (\n            searchControl\n          )}\n        </div>\n        {filters}\n        {onColumnVisibilityChange && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              className=\"hidden @min-[770px]:inline-flex\"\n              render={<Button type=\"button\" variant=\"outline\" className=\"rounded-lg\" />}\n            >\n              <Columns3 aria-hidden />\n              Columns\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {columns.map((column) => (\n                <DropdownMenuCheckboxItem\n                  key={column.id}\n                  disabled={column.hideable === false}\n                  checked={columnVisibility[column.id] !== false}\n                  onCheckedChange={(checked) =>\n                    onColumnVisibilityChange({ ...columnVisibility, [column.id]: checked })\n                  }\n                >\n                  {column.header}\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n        {children}\n      </div>\n      {activeFilters.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {activeFilters.map((filter) => (\n            <Badge key={filter.id} variant=\"secondary\" className=\"gap-1\">\n              {filter.label}\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"size-7\"\n                aria-label={`Remove ${filter.label} filter`}\n                onClick={filter.onRemove}\n              >\n                <X aria-hidden className=\"size-3\" />\n              </Button>\n            </Badge>\n          ))}\n          {onClearFilters && (\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClearFilters}>\n              Clear filters\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\nexport { DataTableToolbar };\n",
      "type": "registry:ui",
      "target": "components/ui/data-table-toolbar.tsx"
    }
  ],
  "type": "registry:ui"
}