{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cell-type-selector",
  "title": "CellTypeSelector",
  "description": "A dropdown selector for changing cell types in notebook interfaces. Supports filtering available types and displays the current type with color-coded styling.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "@nteract/cell-type-button"
  ],
  "files": [
    {
      "path": "registry/cell/CellTypeSelector.tsx",
      "content": "import { Bot, ChevronDown, Code, Database, FileText } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { type CellType, cellTypeStyles } from \"@/registry/cell/CellTypeButton\";\n\nconst allCellTypes: CellType[] = [\"code\", \"markdown\", \"sql\", \"ai\"];\n\nconst cellTypeIcons = {\n  code: Code,\n  markdown: FileText,\n  sql: Database,\n  ai: Bot,\n};\n\nconst cellTypeLabels = {\n  code: \"Code\",\n  markdown: \"Markdown\",\n  sql: \"SQL\",\n  ai: \"AI\",\n};\n\nconst cellTypeMenuItemStyles = {\n  code: \"text-gray-500 dark:text-gray-400 [&_svg]:text-gray-500 dark:[&_svg]:text-gray-400 focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-gray-700 dark:focus:text-gray-200 focus:[&_svg]:text-gray-700 dark:focus:[&_svg]:text-gray-200\",\n  markdown:\n    \"text-yellow-600/70 [&_svg]:text-yellow-600/70 focus:bg-yellow-50 dark:focus:bg-yellow-900/30 focus:text-yellow-600 dark:focus:text-yellow-500 focus:[&_svg]:text-yellow-600 dark:focus:[&_svg]:text-yellow-500\",\n  sql: \"text-blue-600/70 [&_svg]:text-blue-600/70 focus:bg-blue-50 dark:focus:bg-blue-900/30 focus:text-blue-600 dark:focus:text-blue-500 focus:[&_svg]:text-blue-600 dark:focus:[&_svg]:text-blue-500\",\n  ai: \"text-purple-600/70 [&_svg]:text-purple-600/70 focus:bg-purple-50 dark:focus:bg-purple-900/30 focus:text-purple-600 dark:focus:text-purple-500 focus:[&_svg]:text-purple-600 dark:focus:[&_svg]:text-purple-500\",\n};\n\ninterface CellTypeSelectorProps {\n  currentType: CellType;\n  onTypeChange: (type: CellType) => void;\n  enabledTypes?: CellType[];\n}\n\nexport function CellTypeSelector({\n  currentType,\n  onTypeChange,\n  enabledTypes = allCellTypes,\n}: CellTypeSelectorProps) {\n  const Icon = cellTypeIcons[currentType];\n  const availableTypes = allCellTypes.filter((type) =>\n    enabledTypes.includes(type),\n  );\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          data-slot=\"cell-type-selector\"\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            cellTypeStyles[currentType],\n            \"flex items-center gap-1.5\",\n          )}\n        >\n          <Icon className=\"h-3 w-3\" />\n          {cellTypeLabels[currentType]}\n          <ChevronDown className=\"h-3 w-3 opacity-50\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        {availableTypes.map((type) => {\n          const TypeIcon = cellTypeIcons[type];\n          return (\n            <DropdownMenuItem\n              key={type}\n              onClick={() => onTypeChange(type)}\n              className={cn(\n                \"flex items-center gap-2\",\n                cellTypeMenuItemStyles[type],\n                type === currentType && \"bg-accent\",\n              )}\n            >\n              <TypeIcon className=\"h-4 w-4\" />\n              {cellTypeLabels[type]}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/cell/CellTypeSelector.tsx"
    }
  ],
  "type": "registry:component"
}