{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-login-button-shadcnui",
  "type": "registry:component",
  "title": "Social Login Button",
  "description": "A set of animated social login buttons for major platforms (Github, Google, X, etc.) with various effects.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/social-login-button-shadcnui.tsx",
      "content": "import { Button, ButtonProps } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Chrome, Github, Linkedin, Triangle, Twitter } from \"lucide-react\";\nimport { ReactNode } from \"react\";\n\nexport type SocialProvider = \"github\" | \"google\" | \"x\" | \"vercel\" | \"linkedin\";\nexport type SocialAnimation = \"slide\" | \"scale\" | \"glow\" | \"shine\" | \"none\";\n\nexport interface SocialLoginButtonProps extends ButtonProps {\n  provider: SocialProvider;\n  animation?: SocialAnimation;\n  children?: ReactNode; // Optional, defaults to \"Continue with [Provider]\"\n}\n\nconst providerConfig: Record<\n  SocialProvider,\n  {\n    icon: React.ComponentType<{ className?: string }>;\n    label: string;\n    bgClass: string;\n    textClass?: string;\n  }\n> = {\n  github: {\n    icon: Github,\n    label: \"Verify with Github\",\n    bgClass:\n      \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\",\n  },\n  google: {\n    icon: Chrome,\n    label: \"Continue with Google\",\n    bgClass:\n      \"bg-white text-black border border-input hover:bg-accent hover:text-accent-foreground dark:bg-neutral-900 dark:text-white dark:border-neutral-800\",\n  },\n  x: {\n    icon: Twitter,\n    label: \"Sign in with X\",\n    bgClass:\n      \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\",\n  },\n  vercel: {\n    icon: Triangle,\n    label: \"Continue with Vercel\",\n    bgClass:\n      \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\",\n  },\n  linkedin: {\n    icon: Linkedin,\n    label: \"Connect with LinkedIn\",\n    bgClass:\n      \"bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90\",\n  },\n};\n\nconst slideEase = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\n\nconst SocialLoginButton = ({\n  className,\n  provider,\n  animation = \"none\",\n  children,\n  ...props\n}: SocialLoginButtonProps) => {\n  const config = providerConfig[provider];\n  const Icon = config.icon;\n\n  const baseStyles = cn(\n    \"cursor-pointer relative h-12 rounded-md px-8 text-sm font-medium w-full md:w-auto min-w-[240px]\",\n    \"transition-[scale,background-color,border-color,color] duration-200\",\n    \"motion-safe:active:scale-[0.98]\",\n    animation === \"scale\" && \"motion-safe:hover:scale-[1.02]\",\n    config.bgClass,\n    className\n  );\n\n  return (\n    <div className=\"relative group/social inline-block w-full md:w-auto\">\n      {/* Glow Effect */}\n      {animation === \"glow\" && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 rounded-md bg-current opacity-0 blur-lg group-hover/social:opacity-40 transition-opacity duration-500 text-inherit\"\n        />\n      )}\n\n      <Button type=\"button\" className={cn(baseStyles, \"overflow-hidden\")} {...props}>\n        {/* Shine Effect */}\n        {animation === \"shine\" && (\n          <div\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 -translate-x-full motion-safe:group-hover/social:translate-x-full transition-transform duration-1000 bg-gradient-to-r from-transparent via-white/20 to-transparent z-10 ease-in-out\"\n          />\n        )}\n\n        <div className=\"flex items-center justify-center gap-3 w-full relative z-10\">\n          <span\n            className={cn(\n              \"flex-shrink-0\",\n              animation === \"slide\" &&\n                `transition-transform duration-200 ${slideEase} motion-safe:group-hover/social:-translate-x-1`\n            )}\n          >\n            <Icon aria-hidden=\"true\" className=\"w-5 h-5\" />\n          </span>\n          <span\n            className={cn(\n              animation === \"slide\" &&\n                `transition-transform duration-200 ${slideEase} motion-safe:group-hover/social:translate-x-1`\n            )}\n          >\n            {children || config.label}\n          </span>\n        </div>\n      </Button>\n    </div>\n  );\n};\n\nexport { SocialLoginButton };\n",
      "type": "registry:component",
      "target": "components/uitripled/social-login-button-shadcnui.tsx"
    }
  ]
}