{
  "name": "button",
  "type": "registry:component",
  "description": "Versatile button component with variants",
  "files": [
    {
      "path": "ui/Button.astro",
      "type": "registry:component",
      "content": "---\ninterface Props {\n  type?: 'primary' | 'secondary';\n  size?: 'sm' | 'md' | 'lg';\n  disabled?: boolean;\n  className?: string;\n}\n\nconst { type = 'primary', size = 'md', disabled = false, className = '' } = Astro.props;\n\nconst sizeClasses: Record<'sm' | 'md' | 'lg', string> = {\n  sm: 'py-2 px-4 text-sm',\n  md: 'py-4 px-6 text-base',\n  lg: 'py-4 px-8 text-lg',\n};\n\nconst sizeKey: 'sm' | 'md' | 'lg' = size;\nconst buttonClasses = [\n  'btn-base',\n  sizeClasses[sizeKey],\n  className,\n  disabled ? 'opacity-50 cursor-not-allowed' : '',\n]\n  .filter(Boolean)\n  .join(' ');\n---\n\n<button class={buttonClasses} disabled={disabled} data-type={type}>\n  <slot />\n</button>\n\n<style>\n  .btn-base {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-weight: 500;\n    border: none;\n  }\n\n  .btn-base[data-type=\"primary\"] {\n    background-color: #3b82f6;\n    color: white;\n  }\n\n  .btn-base[data-type=\"primary\"]:hover:not(:disabled) {\n    background-color: #2563eb;\n  }\n\n  .btn-base[data-type=\"secondary\"] {\n    background-color: #e5e7eb;\n    color: #1f2937;\n  }\n\n  .btn-base[data-type=\"secondary\"]:hover:not(:disabled) {\n    background-color: #d1d5db;\n  }\n\n  .btn-base:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}