{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sortable-header",
  "type": "registry:ui",
  "title": "Sortable header",
  "description": "Sortable table header button that shows an up, down or neutral arrow for the current sort direction and calls onToggle on click. Pairs with any Tailwind table.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/sortable-header.tsx",
      "type": "registry:ui",
      "target": "components/ui/sortable-header.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { ArrowDownIcon, ArrowUpIcon, ArrowUpDownIcon } from \"lucide-react\"\n\nfunction SortableHeader({\n  label,\n  direction,\n  onToggle,\n  className,\n}: {\n  label: string\n  direction?: \"asc\" | \"desc\" | false\n  onToggle?: () => void\n  className?: string\n}) {\n  const Icon = direction === \"asc\" ? ArrowUpIcon : direction === \"desc\" ? ArrowDownIcon : ArrowUpDownIcon\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"sortable-header\"\n      onClick={onToggle}\n      className={cn(\n        \"inline-flex items-center gap-1 text-xs font-medium text-fg outline-none hover:text-accent focus-visible:ring-2 focus-visible:ring-accent\",\n        className\n      )}\n    >\n      {label}\n      <Icon className=\"size-3.5 text-fg-muted\" aria-hidden />\n    </button>\n  )\n}\nexport { SortableHeader }\n"
    }
  ]
}