{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-button",
  "type": "registry:ui",
  "title": "Social Button",
  "description": "Compact branded sign-in button for five core providers (Google, Apple, GitHub, Microsoft, Twitter) with official logos and brand colors. For the full 16-provider OAuth set, see Social Auth Button.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/social-button.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Branded social login button with provider icons.\n * @author Saasflare™\n * Visual-only — renders styled buttons with provider branding.\n * No auth wiring. Wire onClick to your auth provider externally.\n * @module packages/ui/components/ui/social-button\n * @package ui\n *\n * @deprecated Use {@link SocialAuthButton} from `@saasflare/ui` instead — it\n * covers 16 providers via the brand-icon system and follows the token contract.\n *\n * @component\n * @example\n * import { SocialAuthButton } from '@saasflare/ui'; // preferred\n * <SocialAuthButton provider=\"google\" onClick={() => signInWithGoogle()} />\n */\n\nimport { type ComponentProps } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Providers supported by the legacy {@link SocialButton}.\n *\n * @deprecated Use the 16-member `SocialProvider` union exported from\n * `@saasflare/ui` (backed by SocialAuthButton) instead.\n */\nexport type SocialButtonProvider = \"google\" | \"apple\" | \"github\" | \"microsoft\" | \"twitter\"\n\n/** Brand config per provider. */\nconst PROVIDERS: Record<SocialButtonProvider, { label: string; bg: string; fg: string; icon: string }> = {\n  google: {\n    label: \"Google\",\n    bg: \"bg-background hover:bg-muted border border-input\",\n    fg: \"text-foreground\",\n    icon: \"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\",\n  },\n  apple: {\n    label: \"Apple\",\n    bg: \"bg-foreground hover:opacity-90\",\n    fg: \"text-background\",\n    icon: \"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\",\n  },\n  github: {\n    label: \"GitHub\",\n    bg: \"bg-foreground hover:opacity-90\",\n    fg: \"text-background\",\n    icon: \"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\n  },\n  microsoft: {\n    label: \"Microsoft\",\n    bg: \"bg-background hover:bg-muted border border-input\",\n    fg: \"text-foreground\",\n    icon: \"M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z\",\n  },\n  twitter: {\n    label: \"X (Twitter)\",\n    bg: \"bg-foreground hover:opacity-90\",\n    fg: \"text-background\",\n    icon: \"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\",\n  },\n}\n\n/**\n * Props for the SocialButton component.\n *\n * @deprecated Use {@link SocialAuthButton} (`SocialAuthButtonProps`) instead.\n */\nexport interface SocialButtonProps\n  extends Omit<ComponentProps<\"button\">, \"children\" | keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Social provider to render. */\n  provider: SocialButtonProvider\n  /** Override the default label text. */\n  label?: string\n  /** Show only the icon (no text). Default: `false` */\n  iconOnly?: boolean\n}\n\n/**\n * Branded social login button. Visual only — no auth wiring.\n *\n * @deprecated Use {@link SocialAuthButton} from `@saasflare/ui` instead — it\n * covers 16 providers via the brand-icon system and follows the token contract.\n *\n * @component\n * @package ui\n */\nexport function SocialButton({\n  provider,\n  label: labelOverride,\n  iconOnly = false,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: SocialButtonProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const config = PROVIDERS[provider]\n  const displayLabel = labelOverride ?? `Continue with ${config.label}`\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"inline-flex items-center justify-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors\",\n        config.bg,\n        config.fg,\n        iconOnly && \"px-2.5\",\n        className,\n      )}\n      aria-label={displayLabel}\n      data-slot=\"social-button\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      {...props}\n    >\n      <svg className=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d={config.icon} />\n      </svg>\n      {!iconOnly && <span>{displayLabel}</span>}\n    </button>\n  )\n}\n",
      "target": "components/ui/social-button.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/social-button.json"
  }
}