banhaten 0.1.2 → 0.2.0

package/registry/components/sidebar.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { PanelLeftIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type SidebarContextValue = {
+  collapsed: boolean
+  dir?: "ltr" | "rtl"
+  setCollapsed: (collapsed: boolean) => void
+  toggle: () => void
+}
+
+type SidebarProviderProps = React.ComponentProps<"div"> & {
+  collapsed?: boolean
+  defaultCollapsed?: boolean
+  dir?: "ltr" | "rtl"
+  onCollapsedChange?: (collapsed: boolean) => void
+}
+type SidebarProps = React.ComponentProps<"aside"> & {
+  side?: "start" | "end"
+}
+type SidebarSectionProps = React.ComponentProps<"div">
+type SidebarGroupLabelProps = React.ComponentProps<"div">
+type SidebarMenuProps = React.ComponentProps<"ul">
+type SidebarMenuItemProps = React.ComponentProps<"li">
+type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
+  active?: boolean
+  asChild?: boolean
+  icon?: React.ReactNode
+}
+type SidebarToggleProps = React.ComponentProps<"button">
+type SidebarTriggerProps = SidebarToggleProps
+type SidebarRailProps = React.ComponentProps<"button">
+type SidebarInsetProps = React.ComponentProps<"main">
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+function SidebarProvider({
+  children,
+  className,
+  collapsed,
+  defaultCollapsed = false,
+  dir,
+  onCollapsedChange,
+  ...props
+}: SidebarProviderProps) {
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] =
+    React.useState(defaultCollapsed)
+  const isControlled = collapsed !== undefined
+  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed
+
+  const setCollapsed = React.useCallback(
+    (nextCollapsed: boolean) => {
+      if (!isControlled) {
+        setUncontrolledCollapsed(nextCollapsed)
+      }
+      onCollapsedChange?.(nextCollapsed)
+    },
+    [isControlled, onCollapsedChange]
+  )
+
+  const context = React.useMemo<SidebarContextValue>(
+    () => ({
+      collapsed: resolvedCollapsed,
+      dir,
+      setCollapsed,
+      toggle: () => setCollapsed(!resolvedCollapsed),
+    }),
+    [dir, resolvedCollapsed, setCollapsed]
+  )
+
+  return (
+    <SidebarContext.Provider value={context}>
+      <div
+        data-collapsed={resolvedCollapsed ? "true" : undefined}
+        data-slot="sidebar-provider"
+        dir={dir}
+        className={cn("min-w-0", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
+  { className, side = "start", ...props },
+  ref
+) {
+  const { collapsed, dir } = useSidebarContext()
+
+  return (
+    <aside
+      data-collapsed={collapsed ? "true" : undefined}
+      data-side={side}
+      data-slot="sidebar"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "group/sidebar flex h-full min-h-[var(--bh-space-19xl-384)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] shadow-[var(--shadow-sidebar)] transition-[width,background-color]",
+        "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
+        side === "end" && "ms-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function SidebarHeader({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      className={cn(
+        "flex min-h-[var(--bh-sidebar-item-height)] shrink-0 items-center gap-[var(--bh-sidebar-item-gap)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarBody({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-body"
+      className={cn(
+        "min-h-0 flex-1 overflow-auto px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      className={cn(
+        "shrink-0 border-t border-[var(--bh-sidebar-border)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      className={cn("grid gap-[var(--bh-space-md-8)]", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {
+  const { collapsed } = useSidebarContext()
+
+  if (collapsed) return null
+
+  return (
+    <div
+      data-slot="sidebar-group-label"
+      dir="auto"
+      className={cn(
+        "px-[var(--bh-sidebar-item-padding-x)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: SidebarMenuProps) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      className={cn("m-0 grid list-none gap-[var(--bh-space-xs-4)] p-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+}
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuButtonProps
+>(function SidebarMenuButton(
+  { active = false, asChild = false, children, className, icon, ...props },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      aria-current={active ? "page" : undefined}
+      data-active={active ? "true" : undefined}
+      data-slot="sidebar-menu-button"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-sidebar-item-height)] w-full min-w-0 items-center gap-[var(--bh-sidebar-item-gap)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-sidebar-item-content)] outline-none transition-[background-color,box-shadow,color]",
+        "hover:bg-[var(--bh-sidebar-item-bg-hover)] focus-visible:shadow-[var(--shadow-button-focus)] data-[active=true]:bg-[var(--bh-sidebar-item-bg-active)] data-[active=true]:text-[var(--bh-sidebar-item-content-active)]",
+        collapsed && "justify-center px-[var(--bh-space-md-8)]",
+        className
+      )}
+      {...props}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-icon"
+          className="inline-flex size-[var(--bh-sidebar-icon-size)] shrink-0 items-center justify-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      {collapsed ? null : (
+        <span data-slot="sidebar-menu-label" dir="auto" className="min-w-0 flex-1 truncate">
+          {children}
+        </span>
+      )}
+    </Comp>
+  )
+})
+
+const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
+  function SidebarToggle({ children, className, onClick, type = "button", ...props }, ref) {
+    const { collapsed, toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-pressed={collapsed}
+        data-slot="sidebar-toggle"
+        ref={ref}
+        type={type}
+        className={cn(
+          "inline-flex size-[var(--bh-sidebar-item-height)] items-center justify-center rounded-[var(--bh-radius-lg-8)] text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      >
+        {children ?? (
+          <PanelLeftIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)] rtl:-scale-x-100"
+            strokeWidth="var(--bh-icon-stroke-200)"
+          />
+        )}
+      </button>
+    )
+  }
+)
+
+const SidebarTrigger = SidebarToggle
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
+  function SidebarRail({ className, onClick, type = "button", ...props }, ref) {
+    const { toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label="Toggle sidebar"
+        data-slot="sidebar-rail"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute inset-y-0 end-[calc(var(--bh-sidebar-rail-width)*-1)] hidden w-[var(--bh-sidebar-rail-width)] cursor-ew-resize bg-transparent outline-none lg:block",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
+  function SidebarInset({ className, ...props }, ref) {
+    return (
+      <main
+        data-slot="sidebar-inset"
+        ref={ref}
+        className={cn("min-w-0 flex-1", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+function useSidebarContext() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("Sidebar components must be used within SidebarProvider")
+  }
+
+  return context
+}
+
+export {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  SidebarToggle,
+}
+export type {
+  SidebarGroupLabelProps,
+  SidebarInsetProps,
+  SidebarMenuButtonProps,
+  SidebarMenuItemProps,
+  SidebarMenuProps,
+  SidebarProps,
+  SidebarProviderProps,
+  SidebarRailProps,
+  SidebarTriggerProps,
+  SidebarSectionProps,
+  SidebarToggleProps,
+}

package/registry/components/skeleton.css

@@ -1,10 +1,7 @@
 [data-slot="skeleton"] {
   --bh-skeleton-bg: var(--bh-bg-muted);
   --bh-skeleton-highlight: var(--bh-bg-raised-subtle);
-  --bh-skeleton-duration: 1.4s;
   --bh-skeleton-radius: var(--bh-radius-md-6);
-  --bh-skeleton-shimmer-width: 62%;
-  --bh-skeleton-width: 100%;
   --bh-skeleton-height: var(--bh-space-4xl-20);
 }
 

package/registry/components/social-button.tsx

@@ -3,15 +3,11 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import {
   AppleIcon,
-  ChromeIcon,
-  FacebookIcon,
-  LinkedinIcon,
   MessageCircleIcon,
-  TwitterIcon,
-  type LucideIcon,
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type SocialPlatform =
   | "apple"
@@ -23,10 +19,15 @@ type SocialPlatform =
 
 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
-  labelAr: string
   solidBg: string
   solidHover: string
   solidBorder: string
@@ -43,7 +44,6 @@ type SocialPlatformConfig = {
 const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   apple: {
     label: "Sign in with Apple",
-    labelAr: "تسجيل الدخول بأبل",
     solidBg: "var(--bh-social-apple-bg)",
     solidHover: "var(--bh-social-apple-hover)",
     solidBorder: "var(--bh-social-apple-border)",
@@ -55,7 +55,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   facebook: {
     label: "Sign in with Facebook",
-    labelAr: "تسجيل الدخول بفيسبوك",
     solidBg: "var(--bh-social-facebook-bg)",
     solidHover: "var(--bh-social-facebook-hover)",
     solidBorder: "transparent",
@@ -66,7 +65,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   google: {
     label: "Sign in with Google",
-    labelAr: "تسجيل الدخول بجوجل",
     solidBg: "var(--bh-social-google-bg)",
     solidHover: "var(--bh-social-google-hover)",
     solidBorder: "var(--bh-social-google-border)",
@@ -77,7 +75,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   linkedin: {
     label: "Sign in with LinkedIn",
-    labelAr: "تسجيل الدخول باستخدام لينكد إن",
     solidBg: "var(--bh-social-linkedin-bg)",
     solidHover: "var(--bh-social-linkedin-hover)",
     solidBorder: "transparent",
@@ -88,7 +85,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   twitter: {
     label: "Sign in with Twitter",
-    labelAr: "تسجيل الدخول باستخدام تويتر",
     solidBg: "var(--bh-social-twitter-bg)",
     solidHover: "var(--bh-social-twitter-hover)",
     solidBorder: "var(--bh-social-twitter-border)",
@@ -100,7 +96,6 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
   whatsapp: {
     label: "Sign in with WhatsApp",
-    labelAr: "تسجيل الدخول باستخدام واتساب",
     solidBg: "var(--bh-social-whatsapp-bg)",
     solidHover: "var(--bh-social-whatsapp-hover)",
     solidBorder: "transparent",
@@ -111,6 +106,15 @@ const socialPlatformConfig: Record<SocialPlatform, SocialPlatformConfig> = {
   },
 }
 
+const arabicSocialButtonMessages: SocialButtonMessages = {
+  apple: "تسجيل الدخول بأبل",
+  facebook: "تسجيل الدخول بفيسبوك",
+  google: "تسجيل الدخول بجوجل",
+  linkedin: "تسجيل الدخول باستخدام لينكد إن",
+  twitter: "تسجيل الدخول باستخدام تويتر",
+  whatsapp: "تسجيل الدخول باستخدام واتساب",
+}
+
 const socialButtonVariants = cva(
   "group/social-button relative inline-flex 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)] rtl:[--bh-social-button-width:var(--bh-social-button-width-rtl)] 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",
   {
@@ -138,6 +142,7 @@ type SocialButtonProps = Omit<React.ComponentProps<"button">, "children"> &
     asChild?: boolean
     children?: React.ReactNode
     label?: string
+    messages?: Partial<SocialButtonMessages>
   }
 
 const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(function SocialButton({
@@ -146,6 +151,7 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
   variant = "solid",
   size = "default",
   label,
+  messages,
   asChild = false,
   children,
   dir,
@@ -154,12 +160,25 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
   "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 = getDefaultLabel(config, dir)
-  const visibleLabel = label || (isSimpleLabel(children) ? children : defaultLabel)
+  const defaultLabel = messages?.[platform] ?? config.label
+  const visibleLabel = label ?? (isSimpleLabel(children) ? children : defaultLabel)
   const accessibleLabel =
     typeof visibleLabel === "string" || typeof visibleLabel === "number"
       ? String(visibleLabel)
@@ -192,8 +211,8 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
       data-size={selectedSize}
       data-slot="social-button"
       data-variant={selectedVariant}
-      dir={dir}
-      ref={ref}
+      dir={resolvedDirection}
+      ref={setRootRef}
       className={cn(
         socialButtonVariants({
           variant: selectedVariant,
@@ -216,13 +235,6 @@ function isSimpleLabel(
   return typeof value === "string" || typeof value === "number"
 }
 
-function getDefaultLabel(
-  config: SocialPlatformConfig,
-  dir: React.HTMLAttributes<HTMLElement>["dir"]
-) {
-  return dir === "rtl" ? config.labelAr : config.label
-}
-
 function getSocialButtonVars(
   config: SocialPlatformConfig,
   variant: SocialButtonVariant,
@@ -270,23 +282,97 @@ function SocialButtonIcon({
       className="size-[var(--bh-social-button-icon-size)]"
       data-slot="social-button-icon"
       focusable="false"
-      strokeWidth={platform === "apple" ? 2 : 2.25}
+      strokeWidth={
+        platform === "apple"
+          ? "var(--bh-icon-stroke-200)"
+          : "var(--bh-icon-stroke-225)"
+      }
       style={{ color: "var(--bh-social-button-icon)" }}
     />
   )
 }
 
-const socialButtonIcons: Record<SocialPlatform, LucideIcon> = {
+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: FacebookIcon,
-  google: ChromeIcon,
-  linkedin: LinkedinIcon,
-  twitter: TwitterIcon,
+  facebook: FacebookBrandIcon,
+  google: GoogleBrandIcon,
+  linkedin: LinkedinBrandIcon,
+  twitter: TwitterBrandIcon,
   whatsapp: MessageCircleIcon,
 }
 
-export { SocialButton, socialButtonVariants, socialPlatformConfig }
+export {
+  arabicSocialButtonMessages,
+  SocialButton,
+  socialButtonVariants,
+  socialPlatformConfig,
+}
 export type {
+  SocialButtonMessages,
   SocialButtonProps,
   SocialButtonSize,
   SocialButtonVariant,