{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cell-type-button",
  "title": "CellTypeButton",
  "description": "Styled buttons for different notebook cell types with color coding. Includes CodeCellButton, MarkdownCellButton, SqlCellButton, and AiCellButton convenience components.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/cell/CellTypeButton.tsx",
      "content": "import { Bot, Code, Database, FileText, Plus } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\n/** Supported cell types for notebook interfaces */\nexport type CellType = \"code\" | \"markdown\" | \"sql\" | \"ai\";\n\n// Colocated cell type color styles that won't be affected by shadcn updates\nexport const cellTypeStyles = {\n  code: \"border-gray-300 dark:border-gray-500 focus-visible:border-gray-500 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 focus:bg-gray-50 dark:focus:bg-gray-800 focus-visible:ring-gray-100 dark:focus-visible:ring-gray-700\",\n  markdown:\n    \"border-yellow-300 focus-visible:border-yellow-500 text-yellow-600 hover:bg-yellow-50 hover:text-yellow-600 focus:bg-yellow-50 focus-visible:ring-yellow-100\",\n  sql: \"border-blue-300 focus-visible:border-blue-500 text-blue-600 hover:bg-blue-50 hover:text-blue-600 focus:bg-blue-50 focus-visible:ring-blue-100\",\n  ai: \"border-purple-300 focus-visible:border-purple-500 text-purple-600 hover:bg-purple-50 hover:text-purple-600 focus:bg-purple-50 focus-visible:ring-purple-100\",\n};\n\ninterface CellTypeButtonProps\n  extends Omit<ComponentProps<typeof Button>, \"children\"> {\n  cellType: CellType;\n  showIcon?: boolean;\n  showPlus?: boolean;\n  label?: string;\n}\n\nexport function CellTypeButton({\n  cellType,\n  showIcon = true,\n  showPlus = false,\n  label,\n  className,\n  ...props\n}: CellTypeButtonProps) {\n  const icons = {\n    code: Code,\n    markdown: FileText,\n    sql: Database,\n    ai: Bot,\n  };\n\n  const defaultLabels = {\n    code: \"Code\",\n    markdown: \"Markdown\",\n    sql: \"SQL\",\n    ai: \"AI\",\n  };\n\n  const Icon = icons[cellType];\n\n  return (\n    <Button\n      data-slot=\"cell-type-button\"\n      variant=\"outline\"\n      className={cn(\n        cellTypeStyles[cellType],\n        \"flex items-center gap-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      {showPlus && (\n        <Plus className={props.size === \"lg\" ? \"h-4 w-4\" : \"h-3 w-3\"} />\n      )}\n      {showIcon && (\n        <Icon className={props.size === \"lg\" ? \"h-4 w-4\" : \"h-3 w-3\"} />\n      )}\n      {label || defaultLabels[cellType]}\n    </Button>\n  );\n}\n\n// Convenience components for specific cell types\nexport function CodeCellButton(props: Omit<CellTypeButtonProps, \"cellType\">) {\n  return <CellTypeButton cellType=\"code\" {...props} />;\n}\n\nexport function MarkdownCellButton(\n  props: Omit<CellTypeButtonProps, \"cellType\">,\n) {\n  return <CellTypeButton cellType=\"markdown\" {...props} />;\n}\n\nexport function SqlCellButton(props: Omit<CellTypeButtonProps, \"cellType\">) {\n  return <CellTypeButton cellType=\"sql\" {...props} />;\n}\n\nexport function AiCellButton(props: Omit<CellTypeButtonProps, \"cellType\">) {\n  return <CellTypeButton cellType=\"ai\" {...props} />;\n}\n",
      "type": "registry:component",
      "target": "components/cell/CellTypeButton.tsx"
    }
  ],
  "type": "registry:component"
}