{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-buttons",
  "title": "Auth Buttons",
  "description": "A set of authentication buttons (Google, Github) based on shadcn Button.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/flowui/components/auth-buttons.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ComponentProps, ComponentType } from \"react\";\r\n\r\ntype Provider = \"google\" | \"github\" | \"facebook\" | \"apple\" | \"linkedin\";\r\ntype IconType = ComponentType<{ className?: string }>;\r\n\r\ntype AuthButtonProps = {\r\n    provider?: Provider;\r\n    text?: string;\r\n    iconClassName?: string;\r\n} & ComponentProps<typeof Button>;\r\n\r\nconst icons: Record<Provider, IconType> = {\r\n    google: ({ className }) => <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn(className)} width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"><path fill=\"#ffc107\" d=\"M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917\" /><path fill=\"#ff3d00\" d=\"m6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691\" /><path fill=\"#4caf50\" d=\"M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44\" /><path fill=\"#1976d2\" d=\"M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917\" /></svg>,\r\n    github: ({ className }) => <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn(className)} width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2\" /></svg>,\r\n    facebook: ({ className }) => <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn(className)} width=\"256\" height=\"256\" viewBox=\"0 0 256 256\"><path fill=\"#1877f2\" d=\"M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445\" /><path fill=\"#fff\" d=\"m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z\" /></svg>,\r\n    apple: ({ className }) => <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn(className)} width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25\" /></svg>,\r\n    linkedin: ({ className }) => <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn(className)} width=\"128\" height=\"128\" viewBox=\"0 0 128 128\"><path fill=\"#0076b2\" d=\"M116 3H12a8.91 8.91 0 0 0-9 8.8v104.42a8.91 8.91 0 0 0 9 8.78h104a8.93 8.93 0 0 0 9-8.81V11.77A8.93 8.93 0 0 0 116 3\" /><path fill=\"#fff\" d=\"M21.06 48.73h18.11V107H21.06zm9.06-29a10.5 10.5 0 1 1-10.5 10.49a10.5 10.5 0 0 1 10.5-10.49m20.41 29h17.36v8h.24c2.42-4.58 8.32-9.41 17.13-9.41C103.6 47.28 107 59.35 107 75v32H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87 7.36-10.87 15V107H50.53z\" /></svg>\r\n}\r\n\r\nexport const AuthButton = ({\r\n    provider = \"google\",\r\n    text = \"Google\",\r\n    iconClassName,\r\n    className,\r\n    ...props\r\n}: AuthButtonProps) => {\r\n    const Icon = icons[provider];\r\n    return (\r\n        <Button\r\n            className={cn(\r\n                \"flex items-center gap-2\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            <Icon className={cn(iconClassName)} />\r\n            {text}\r\n        </Button>\r\n    )\r\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}