banhaten 0.3.0 → 0.5.0

package/registry/components/social-button.tsx

@@ -1,387 +1,387 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import {
-  AppleIcon,
-  MessageCircleIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { useResolvedDirection } from "@/hooks/use-direction"
-
-type SocialPlatform =
-  | "apple"
-  | "facebook"
-  | "google"
-  | "linkedin"
-  | "twitter"
-  | "whatsapp"
-
-type SocialButtonVariant = "solid" | "outline"
-type SocialButtonSize = "default" | "icon"
-type SocialButtonMessages = Record<SocialPlatform, string>
-type SocialButtonIconComponent = React.ComponentType<
-  React.SVGProps<SVGSVGElement> & {
-    strokeWidth?: number | string
-  }
->
-
-type SocialPlatformConfig = {
-  label: string
-  solidBg: string
-  solidHover: string
-  solidBorder: string
-  solidIconBorder?: string
-  solidFg: string
-  solidIcon: string
-  outlineIcon: string
-  width: {
-    ltr: string
-    rtl: string
-  }
-}
-
-const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
-  apple: {
-    label: "Sign in with Apple",
-    solidBg: "var(--bh-social-apple-bg)",
-    solidHover: "var(--bh-social-apple-hover)",
-    solidBorder: "var(--bh-social-apple-border)",
-    solidIconBorder: "var(--bh-social-apple-icon-border)",
-    solidFg: "var(--bh-social-apple-fg)",
-    solidIcon: "var(--bh-social-apple-icon)",
-    outlineIcon: "var(--bh-social-apple-outline-icon)",
-    width: { ltr: "var(--bh-social-apple-width)", rtl: "var(--bh-social-apple-width-rtl)" },
-  },
-  facebook: {
-    label: "Sign in with Facebook",
-    solidBg: "var(--bh-social-facebook-bg)",
-    solidHover: "var(--bh-social-facebook-hover)",
-    solidBorder: "transparent",
-    solidFg: "var(--bh-social-facebook-fg)",
-    solidIcon: "var(--bh-social-facebook-icon)",
-    outlineIcon: "var(--bh-social-facebook-outline-icon)",
-    width: { ltr: "var(--bh-social-facebook-width)", rtl: "var(--bh-social-facebook-width-rtl)" },
-  },
-  google: {
-    label: "Sign in with Google",
-    solidBg: "var(--bh-social-google-bg)",
-    solidHover: "var(--bh-social-google-hover)",
-    solidBorder: "var(--bh-social-google-border)",
-    solidFg: "var(--bh-social-google-fg)",
-    solidIcon: "currentColor",
-    outlineIcon: "currentColor",
-    width: { ltr: "var(--bh-social-google-width)", rtl: "var(--bh-social-google-width-rtl)" },
-  },
-  linkedin: {
-    label: "Sign in with LinkedIn",
-    solidBg: "var(--bh-social-linkedin-bg)",
-    solidHover: "var(--bh-social-linkedin-hover)",
-    solidBorder: "transparent",
-    solidFg: "var(--bh-social-linkedin-fg)",
-    solidIcon: "var(--bh-social-linkedin-icon)",
-    outlineIcon: "var(--bh-social-linkedin-outline-icon)",
-    width: { ltr: "var(--bh-social-linkedin-width)", rtl: "var(--bh-social-linkedin-width-rtl)" },
-  },
-  twitter: {
-    label: "Sign in with Twitter",
-    solidBg: "var(--bh-social-twitter-bg)",
-    solidHover: "var(--bh-social-twitter-hover)",
-    solidBorder: "var(--bh-social-twitter-border)",
-    solidIconBorder: "var(--bh-social-twitter-icon-border)",
-    solidFg: "var(--bh-social-twitter-fg)",
-    solidIcon: "var(--bh-social-twitter-icon)",
-    outlineIcon: "var(--bh-social-twitter-outline-icon)",
-    width: { ltr: "var(--bh-social-twitter-width)", rtl: "var(--bh-social-twitter-width-rtl)" },
-  },
-  whatsapp: {
-    label: "Sign in with WhatsApp",
-    solidBg: "var(--bh-social-whatsapp-bg)",
-    solidHover: "var(--bh-social-whatsapp-hover)",
-    solidBorder: "transparent",
-    solidFg: "var(--bh-social-whatsapp-fg)",
-    solidIcon: "var(--bh-social-whatsapp-icon)",
-    outlineIcon: "var(--bh-social-whatsapp-outline-icon)",
-    width: { ltr: "var(--bh-social-whatsapp-width)", rtl: "var(--bh-social-whatsapp-width-rtl)" },
-  },
-}
-
-const arabicSocialButtonMessages: SocialButtonMessages = {
-  apple: "تسجيل الدخول بأبل",
-  facebook: "تسجيل الدخول بفيسبوك",
-  google: "تسجيل الدخول بجوجل",
-  linkedin: "تسجيل الدخول باستخدام لينكد إن",
-  twitter: "تسجيل الدخول باستخدام تويتر",
-  whatsapp: "تسجيل الدخول باستخدام واتساب",
-}
-
-const socialButtonVariants = cva(
-  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        solid: "",
-        outline: "",
-      },
-      size: {
-        default:
-          "h-[var(--bh-social-button-height)] w-[var(--bh-social-button-width)] gap-[var(--bh-social-button-gap)] px-[var(--bh-social-button-padding-x)] py-[var(--bh-social-button-padding-y)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)]",
-        icon: "size-[var(--bh-social-button-height)] p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "solid",
-      size: "default",
-    },
-  }
-)
-
-type SocialButtonProps = Omit<React.ComponentProps<"button">, "children"> &
-  VariantProps<typeof socialButtonVariants> & {
-    platform: SocialPlatform
-    asChild?: boolean
-    children?: React.ReactNode
-    label?: string
-    messages?: Partial<SocialButtonMessages>
-  }
-
-const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(function SocialButton({
-  className,
-  platform,
-  variant = "solid",
-  size = "default",
-  label,
-  messages,
-  asChild = false,
-  children,
-  dir,
-  style,
-  type,
-  "aria-label": ariaLabel,
-  ...props
-}, ref) {
-  const rootRef = React.useRef<HTMLButtonElement | null>(null)
-  const resolvedDirection = useResolvedDirection(
-    dir === "ltr" || dir === "rtl" ? dir : undefined,
-    rootRef
-  )
-  const setRootRef = React.useCallback(
-    (node: HTMLButtonElement | null) => {
-      rootRef.current = node
-      if (typeof ref === "function") ref(node)
-      else if (ref) ref.current = node
-    },
-    [ref]
-  )
-  const config = socialPlatformConfig[platform]
-  const selectedVariant = variant || "solid"
-  const selectedSize = size || "default"
-  const isIcon = selectedSize === "icon"
-  const defaultLabel = messages?.[platform] ?? config.label
-  const visibleLabel = label ?? (isSimpleLabel(children) ? children : defaultLabel)
-  const accessibleLabel =
-    typeof visibleLabel === "string" || typeof visibleLabel === "number"
-      ? String(visibleLabel)
-      : defaultLabel
-  const Comp = asChild ? Slot : "button"
-  const cssVars = getSocialButtonVars(
-    config,
-    selectedVariant,
-    isIcon,
-    resolvedDirection
-  )
-  const content = (
-    <>
-      <SocialButtonIcon platform={platform} />
-      {!isIcon && (
-        <span
-          data-slot="social-button-label"
-          dir="auto"
-          title={typeof visibleLabel === "string" ? visibleLabel : undefined}
-          className="min-w-0 overflow-hidden text-ellipsis pe-[var(--bh-social-button-label-padding-inline-end)]"
-        >
-          {visibleLabel}
-        </span>
-      )}
-    </>
-  )
-  const slottedChildren =
-    asChild && React.isValidElement(children)
-      ? React.cloneElement(children, undefined, content)
-      : content
-
-  return (
-    <Comp
-      aria-label={isIcon ? ariaLabel || accessibleLabel : ariaLabel}
-      data-platform={platform}
-      data-size={selectedSize}
-      data-slot="social-button"
-      data-variant={selectedVariant}
-      dir={resolvedDirection}
-      ref={setRootRef}
-      className={cn(
-        socialButtonVariants({
-          variant: selectedVariant,
-          size: selectedSize,
-          className,
-        })
-      )}
-      style={{ ...cssVars, ...style }}
-      {...(!asChild ? { type: type || "button" } : {})}
-      {...props}
-    >
-      {slottedChildren}
-    </Comp>
-  )
-})
-
-function isSimpleLabel(
-  value: React.ReactNode
-): value is string | number {
-  return typeof value === "string" || typeof value === "number"
-}
-
-function getSocialButtonVars(
-  config: SocialPlatformConfig,
-  variant: SocialButtonVariant,
-  isIcon: boolean,
-  direction: "ltr" | "rtl"
-) {
-  const isSolid = variant === "solid"
-  const border = isSolid
-    ? isIcon
-      ? config.solidIconBorder || config.solidBorder
-      : config.solidBorder
-    : "var(--bh-border-default)"
-
-  return {
-    "--bh-social-button-bg": isSolid ? config.solidBg : "var(--bh-bg-raised)",
-    "--bh-social-button-bg-hover": isSolid
-      ? config.solidHover
-      : "var(--bh-bg-raised-hover)",
-    "--bh-social-button-border": border,
-    "--bh-social-button-focus-border": isSolid
-      ? border
-      : "var(--bh-border-focus)",
-    "--bh-social-button-fg": isSolid
-      ? config.solidFg
-      : "var(--bh-content-default)",
-    "--bh-social-button-icon": isSolid ? config.solidIcon : config.outlineIcon,
-    "--bh-social-button-width": isIcon
-      ? "var(--bh-social-button-height)"
-      : config.width[direction],
-    "--bh-social-button-width-rtl": isIcon
-      ? "var(--bh-social-button-height)"
-      : config.width.rtl,
-  } as React.CSSProperties
-}
-
-function SocialButtonIcon({
-  platform,
-}: {
-  platform: SocialPlatform
-}) {
-  const Icon = socialButtonIcons[platform]
-
-  return (
-    <Icon
-      aria-hidden="true"
-      className="size-[var(--bh-social-button-icon-size)]"
-      data-slot="social-button-icon"
-      focusable="false"
-      strokeWidth={
-        platform === "apple"
-          ? "var(--bh-icon-stroke-200)"
-          : "var(--bh-icon-stroke-225)"
-      }
-      style={{ color: "var(--bh-social-button-icon)" }}
-    />
-  )
-}
-
-function FacebookBrandIcon({
-  strokeWidth: _strokeWidth,
-  ...props
-}: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number | string
-}) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M13.5 21v-7h2.35l.45-3h-2.8V9.06c0-.82.4-1.62 1.68-1.62h1.27V4.89S15.3 4.7 14.2 4.7c-2.3 0-3.8 1.39-3.8 3.9V11H7.84v3h2.56v7h3.1Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function GoogleBrandIcon({
-  strokeWidth: _strokeWidth,
-  ...props
-}: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number | string
-}) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M12 4.75a7.25 7.25 0 1 0 5.13 12.37 6.85 6.85 0 0 0 1.87-4.72H12v2.6h4.09a3.96 3.96 0 1 1-1.08-4.1l1.84-1.84A7.2 7.2 0 0 0 12 4.75Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function LinkedinBrandIcon({
-  strokeWidth: _strokeWidth,
-  ...props
-}: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number | string
-}) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M6.7 8.9H3.9V20h2.8V8.9ZM5.3 4A1.65 1.65 0 1 0 5.3 7.3 1.65 1.65 0 0 0 5.3 4Zm14.8 9.85c0-3.05-1.63-4.47-3.8-4.47a3.28 3.28 0 0 0-2.98 1.64h-.04V8.9h-2.69V20h2.8v-5.5c0-1.45.28-2.85 2.07-2.85 1.76 0 1.78 1.65 1.78 2.94V20h2.86v-6.15Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-function TwitterBrandIcon({
-  strokeWidth: _strokeWidth,
-  ...props
-}: React.SVGProps<SVGSVGElement> & {
-  strokeWidth?: number | string
-}) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="m15.3 10.9 5.1-5.9h-1.2l-4.43 5.14L11.23 5H7.15l5.35 7.79L7.15 19h1.2l4.68-5.43L16.77 19h4.08l-5.55-8.1Zm-1.66 1.92-.54-.78-4.31-6.15h1.86l3.49 4.98.54.78 4.52 6.46h-1.86l-3.7-5.29Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
-  apple: AppleIcon,
-  facebook: FacebookBrandIcon,
-  google: GoogleBrandIcon,
-  linkedin: LinkedinBrandIcon,
-  twitter: TwitterBrandIcon,
-  whatsapp: MessageCircleIcon,
-}
-
-export {
-  arabicSocialButtonMessages,
-  SocialButton,
-  socialButtonVariants,
-  socialPlatformConfig,
-}
-export type {
-  SocialButtonMessages,
-  SocialButtonProps,
-  SocialButtonSize,
-  SocialButtonVariant,
-  SocialPlatform,
-}
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  AppleIcon,
+  MessageCircleIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+
+type SocialPlatform =
+  | "apple"
+  | "facebook"
+  | "google"
+  | "linkedin"
+  | "twitter"
+  | "whatsapp"
+
+type SocialButtonVariant = "solid" | "outline"
+type SocialButtonSize = "default" | "icon"
+type SocialButtonMessages = Record<SocialPlatform, string>
+type SocialButtonIconComponent = React.ComponentType<
+  React.SVGProps<SVGSVGElement> & {
+    strokeWidth?: number | string
+  }
+>
+
+type SocialPlatformConfig = {
+  label: string
+  solidBg: string
+  solidHover: string
+  solidBorder: string
+  solidIconBorder?: string
+  solidFg: string
+  solidIcon: string
+  outlineIcon: string
+  width: {
+    ltr: string
+    rtl: string
+  }
+}
+
+const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
+  apple: {
+    label: "Sign in with Apple",
+    solidBg: "var(--bh-social-apple-bg)",
+    solidHover: "var(--bh-social-apple-hover)",
+    solidBorder: "var(--bh-social-apple-border)",
+    solidIconBorder: "var(--bh-social-apple-icon-border)",
+    solidFg: "var(--bh-social-apple-fg)",
+    solidIcon: "var(--bh-social-apple-icon)",
+    outlineIcon: "var(--bh-social-apple-outline-icon)",
+    width: { ltr: "var(--bh-social-apple-width)", rtl: "var(--bh-social-apple-width-rtl)" },
+  },
+  facebook: {
+    label: "Sign in with Facebook",
+    solidBg: "var(--bh-social-facebook-bg)",
+    solidHover: "var(--bh-social-facebook-hover)",
+    solidBorder: "transparent",
+    solidFg: "var(--bh-social-facebook-fg)",
+    solidIcon: "var(--bh-social-facebook-icon)",
+    outlineIcon: "var(--bh-social-facebook-outline-icon)",
+    width: { ltr: "var(--bh-social-facebook-width)", rtl: "var(--bh-social-facebook-width-rtl)" },
+  },
+  google: {
+    label: "Sign in with Google",
+    solidBg: "var(--bh-social-google-bg)",
+    solidHover: "var(--bh-social-google-hover)",
+    solidBorder: "var(--bh-social-google-border)",
+    solidFg: "var(--bh-social-google-fg)",
+    solidIcon: "currentColor",
+    outlineIcon: "currentColor",
+    width: { ltr: "var(--bh-social-google-width)", rtl: "var(--bh-social-google-width-rtl)" },
+  },
+  linkedin: {
+    label: "Sign in with LinkedIn",
+    solidBg: "var(--bh-social-linkedin-bg)",
+    solidHover: "var(--bh-social-linkedin-hover)",
+    solidBorder: "transparent",
+    solidFg: "var(--bh-social-linkedin-fg)",
+    solidIcon: "var(--bh-social-linkedin-icon)",
+    outlineIcon: "var(--bh-social-linkedin-outline-icon)",
+    width: { ltr: "var(--bh-social-linkedin-width)", rtl: "var(--bh-social-linkedin-width-rtl)" },
+  },
+  twitter: {
+    label: "Sign in with Twitter",
+    solidBg: "var(--bh-social-twitter-bg)",
+    solidHover: "var(--bh-social-twitter-hover)",
+    solidBorder: "var(--bh-social-twitter-border)",
+    solidIconBorder: "var(--bh-social-twitter-icon-border)",
+    solidFg: "var(--bh-social-twitter-fg)",
+    solidIcon: "var(--bh-social-twitter-icon)",
+    outlineIcon: "var(--bh-social-twitter-outline-icon)",
+    width: { ltr: "var(--bh-social-twitter-width)", rtl: "var(--bh-social-twitter-width-rtl)" },
+  },
+  whatsapp: {
+    label: "Sign in with WhatsApp",
+    solidBg: "var(--bh-social-whatsapp-bg)",
+    solidHover: "var(--bh-social-whatsapp-hover)",
+    solidBorder: "transparent",
+    solidFg: "var(--bh-social-whatsapp-fg)",
+    solidIcon: "var(--bh-social-whatsapp-icon)",
+    outlineIcon: "var(--bh-social-whatsapp-outline-icon)",
+    width: { ltr: "var(--bh-social-whatsapp-width)", rtl: "var(--bh-social-whatsapp-width-rtl)" },
+  },
+}
+
+const arabicSocialButtonMessages: SocialButtonMessages = {
+  apple: "تسجيل الدخول بأبل",
+  facebook: "تسجيل الدخول بفيسبوك",
+  google: "تسجيل الدخول بجوجل",
+  linkedin: "تسجيل الدخول باستخدام لينكد إن",
+  twitter: "تسجيل الدخول باستخدام تويتر",
+  whatsapp: "تسجيل الدخول باستخدام واتساب",
+}
+
+const socialButtonVariants = cva(
+  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--elevation-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--elevation-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--elevation-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--elevation-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        solid: "",
+        outline: "",
+      },
+      size: {
+        default:
+          "h-[var(--bh-social-button-height)] w-[var(--bh-social-button-width)] gap-[var(--bh-social-button-gap)] px-[var(--bh-social-button-padding-x)] py-[var(--bh-social-button-padding-y)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)]",
+        icon: "size-[var(--bh-social-button-height)] p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "solid",
+      size: "default",
+    },
+  }
+)
+
+type SocialButtonProps = Omit<React.ComponentProps<"button">, "children"> &
+  VariantProps<typeof socialButtonVariants> & {
+    platform: SocialPlatform
+    asChild?: boolean
+    children?: React.ReactNode
+    label?: string
+    messages?: Partial<SocialButtonMessages>
+  }
+
+const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(function SocialButton({
+  className,
+  platform,
+  variant = "solid",
+  size = "default",
+  label,
+  messages,
+  asChild = false,
+  children,
+  dir,
+  style,
+  type,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const rootRef = React.useRef<HTMLButtonElement | null>(null)
+  const resolvedDirection = useResolvedDirection(
+    dir === "ltr" || dir === "rtl" ? dir : undefined,
+    rootRef
+  )
+  const setRootRef = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      rootRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
+  const config = socialPlatformConfig[platform]
+  const selectedVariant = variant || "solid"
+  const selectedSize = size || "default"
+  const isIcon = selectedSize === "icon"
+  const defaultLabel = messages?.[platform] ?? config.label
+  const visibleLabel = label ?? (isSimpleLabel(children) ? children : defaultLabel)
+  const accessibleLabel =
+    typeof visibleLabel === "string" || typeof visibleLabel === "number"
+      ? String(visibleLabel)
+      : defaultLabel
+  const Comp = asChild ? Slot : "button"
+  const cssVars = getSocialButtonVars(
+    config,
+    selectedVariant,
+    isIcon,
+    resolvedDirection
+  )
+  const content = (
+    <>
+      <SocialButtonIcon platform={platform} />
+      {!isIcon && (
+        <span
+          data-slot="social-button-label"
+          dir="auto"
+          title={typeof visibleLabel === "string" ? visibleLabel : undefined}
+          className="min-w-0 overflow-hidden text-ellipsis pe-[var(--bh-social-button-label-padding-inline-end)]"
+        >
+          {visibleLabel}
+        </span>
+      )}
+    </>
+  )
+  const slottedChildren =
+    asChild && React.isValidElement(children)
+      ? React.cloneElement(children, undefined, content)
+      : content
+
+  return (
+    <Comp
+      aria-label={isIcon ? ariaLabel || accessibleLabel : ariaLabel}
+      data-platform={platform}
+      data-size={selectedSize}
+      data-slot="social-button"
+      data-variant={selectedVariant}
+      dir={resolvedDirection}
+      ref={setRootRef}
+      className={cn(
+        socialButtonVariants({
+          variant: selectedVariant,
+          size: selectedSize,
+          className,
+        })
+      )}
+      style={{ ...cssVars, ...style }}
+      {...(!asChild ? { type: type || "button" } : {})}
+      {...props}
+    >
+      {slottedChildren}
+    </Comp>
+  )
+})
+
+function isSimpleLabel(
+  value: React.ReactNode
+): value is string | number {
+  return typeof value === "string" || typeof value === "number"
+}
+
+function getSocialButtonVars(
+  config: SocialPlatformConfig,
+  variant: SocialButtonVariant,
+  isIcon: boolean,
+  direction: "ltr" | "rtl"
+) {
+  const isSolid = variant === "solid"
+  const border = isSolid
+    ? isIcon
+      ? config.solidIconBorder || config.solidBorder
+      : config.solidBorder
+    : "var(--bh-border-default)"
+
+  return {
+    "--bh-social-button-bg": isSolid ? config.solidBg : "var(--bh-bg-raised)",
+    "--bh-social-button-bg-hover": isSolid
+      ? config.solidHover
+      : "var(--bh-bg-raised-hover)",
+    "--bh-social-button-border": border,
+    "--bh-social-button-focus-border": isSolid
+      ? border
+      : "var(--bh-border-focus)",
+    "--bh-social-button-fg": isSolid
+      ? config.solidFg
+      : "var(--bh-content-default)",
+    "--bh-social-button-icon": isSolid ? config.solidIcon : config.outlineIcon,
+    "--bh-social-button-width": isIcon
+      ? "var(--bh-social-button-height)"
+      : config.width[direction],
+    "--bh-social-button-width-rtl": isIcon
+      ? "var(--bh-social-button-height)"
+      : config.width.rtl,
+  } as React.CSSProperties
+}
+
+function SocialButtonIcon({
+  platform,
+}: {
+  platform: SocialPlatform
+}) {
+  const Icon = socialButtonIcons[platform]
+
+  return (
+    <Icon
+      aria-hidden="true"
+      className="size-[var(--bh-social-button-icon-size)]"
+      data-slot="social-button-icon"
+      focusable="false"
+      strokeWidth={
+        platform === "apple"
+          ? "var(--bh-icon-stroke-200)"
+          : "var(--bh-icon-stroke-225)"
+      }
+      style={{ color: "var(--bh-social-button-icon)" }}
+    />
+  )
+}
+
+function FacebookBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number | string
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M13.5 21v-7h2.35l.45-3h-2.8V9.06c0-.82.4-1.62 1.68-1.62h1.27V4.89S15.3 4.7 14.2 4.7c-2.3 0-3.8 1.39-3.8 3.9V11H7.84v3h2.56v7h3.1Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function GoogleBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number | string
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 4.75a7.25 7.25 0 1 0 5.13 12.37 6.85 6.85 0 0 0 1.87-4.72H12v2.6h4.09a3.96 3.96 0 1 1-1.08-4.1l1.84-1.84A7.2 7.2 0 0 0 12 4.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function LinkedinBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number | string
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M6.7 8.9H3.9V20h2.8V8.9ZM5.3 4A1.65 1.65 0 1 0 5.3 7.3 1.65 1.65 0 0 0 5.3 4Zm14.8 9.85c0-3.05-1.63-4.47-3.8-4.47a3.28 3.28 0 0 0-2.98 1.64h-.04V8.9h-2.69V20h2.8v-5.5c0-1.45.28-2.85 2.07-2.85 1.76 0 1.78 1.65 1.78 2.94V20h2.86v-6.15Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function TwitterBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number | string
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="m15.3 10.9 5.1-5.9h-1.2l-4.43 5.14L11.23 5H7.15l5.35 7.79L7.15 19h1.2l4.68-5.43L16.77 19h4.08l-5.55-8.1Zm-1.66 1.92-.54-.78-4.31-6.15h1.86l3.49 4.98.54.78 4.52 6.46h-1.86l-3.7-5.29Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
+  apple: AppleIcon,
+  facebook: FacebookBrandIcon,
+  google: GoogleBrandIcon,
+  linkedin: LinkedinBrandIcon,
+  twitter: TwitterBrandIcon,
+  whatsapp: MessageCircleIcon,
+}
+
+export {
+  arabicSocialButtonMessages,
+  SocialButton,
+  socialButtonVariants,
+  socialPlatformConfig,
+}
+export type {
+  SocialButtonMessages,
+  SocialButtonProps,
+  SocialButtonSize,
+  SocialButtonVariant,
+  SocialPlatform,
+}