@tempots/beatui 0.82.1 → 0.83.3

package/dist/types/components/auth/social-login-button.d.ts

@@ -1,45 +1,258 @@
+/**
+ * Social Login Button Component
+ *
+ * Reusable button components for social authentication providers. Includes
+ * a generic `SocialLoginButton`, a multi-button `SocialLoginButtons` container,
+ * and pre-configured convenience variants for each supported provider.
+ *
+ * @module auth/social-login-button
+ */
 import { Renderable, Value } from '@tempots/dom';
 import { SocialLoginButtonOptions, AuthProviderName } from './index';
 import { ControlSize } from '../theme';
 import { ThemeColorName } from '../../tokens';
+/**
+ * Renders a branded social login button for a specific authentication provider.
+ *
+ * Displays the provider's icon and a localized "Continue with {provider}" label.
+ * Handles both redirect and popup OAuth flows via the `onClick` handler.
+ *
+ * @param options - Configuration options for the social login button.
+ * @returns A `Renderable` button element styled for the specified provider.
+ *
+ * @example
+ * ```ts
+ * SocialLoginButton({
+ *   provider: 'google',
+ *   name: 'Google',
+ *   icon: 'logos:google-icon',
+ *   color: 'red',
+ *   onClick: async () => { await authClient.signIn.social({ provider: 'google' }) },
+ * })
+ * ```
+ */
 export declare function SocialLoginButton({ provider, onClick, size, name, icon, color, flow, labels, }: SocialLoginButtonOptions): Renderable;
+/**
+ * Minimal provider configuration passed to social login components.
+ *
+ * Contains the provider name and optional OAuth flow type.
+ */
 export type AuthProviderInfo = {
+    /** The social provider identifier. */
     provider: AuthProviderName;
+    /** The OAuth flow type. @default 'redirect' */
     flow?: 'redirect' | 'popup';
 };
+/**
+ * Renders a vertical stack of social login buttons for multiple providers.
+ *
+ * Iterates over the provided list of providers and renders a {@link SocialLoginButton}
+ * for each, using the provider metadata from {@link socialProviderInfo}.
+ *
+ * @param options - Configuration for the button group.
+ * @param options.providers - Reactive array of provider configurations.
+ * @param options.onProviderClick - Callback invoked when any provider button is clicked.
+ * @param options.size - The size of all buttons. @default 'md'
+ * @param options.className - Additional CSS class names for the container.
+ * @returns A `Renderable` stack of social login buttons.
+ *
+ * @example
+ * ```ts
+ * SocialLoginButtons({
+ *   providers: [{ provider: 'google' }, { provider: 'github' }],
+ *   onProviderClick: async (provider) => { await handleSocialLogin(provider) },
+ * })
+ * ```
+ */
 export declare function SocialLoginButtons({ providers, onProviderClick, size, className, }: {
     providers: Value<Array<AuthProviderInfo>>;
     onProviderClick?: (provider: AuthProviderName) => Promise<void>;
     size?: Value<ControlSize>;
     className?: Value<string>;
 }): Renderable;
+/**
+ * Mapping of all supported social provider names to their display metadata.
+ *
+ * Contains the human-readable name, Iconify icon identifier, and BeatUI theme
+ * color name for each provider. Used internally by social login button components.
+ */
 export declare const socialProviderInfo: Record<AuthProviderName, {
     name: string;
     icon: string;
     color: ThemeColorName | 'black';
 }>;
+/**
+ * Options type for specialized social login button variants.
+ *
+ * Same as {@link SocialLoginButtonOptions} but with `provider`, `name`, `icon`, and `color`
+ * pre-configured for the specific provider.
+ */
 export type SpecialSocialLoginButtonOptions = Omit<SocialLoginButtonOptions, 'provider' | 'name' | 'icon' | 'color'>;
+/**
+ * Pre-configured Google social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Google-branded login button.
+ */
 export declare const GoogleLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured GitHub social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` GitHub-branded login button.
+ */
 export declare const GitHubLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Apple social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Apple-branded login button.
+ */
 export declare const AppleLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Facebook social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Facebook-branded login button.
+ */
 export declare const FacebookLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured X (formerly Twitter) social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` X-branded login button.
+ */
 export declare const XLoginButtin: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Twitter social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Twitter-branded login button.
+ */
 export declare const TwitterLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Microsoft social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Microsoft-branded login button.
+ */
 export declare const MicrosoftLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Discord social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Discord-branded login button.
+ */
 export declare const DiscordLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured LinkedIn social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` LinkedIn-branded login button.
+ */
 export declare const LinkedInLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Instagram social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Instagram-branded login button.
+ */
 export declare const InstagramLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured TikTok social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` TikTok-branded login button.
+ */
 export declare const TiktokLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Snapchat social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Snapchat-branded login button.
+ */
 export declare const SnapchatLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Reddit social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Reddit-branded login button.
+ */
 export declare const RedditLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Pinterest social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Pinterest-branded login button.
+ */
 export declare const PinterestLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Twitch social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Twitch-branded login button.
+ */
 export declare const TwitchLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Steam social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Steam-branded login button.
+ */
 export declare const SteamLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Epic Games social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Epic Games-branded login button.
+ */
 export declare const EpicLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured PlayStation social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` PlayStation-branded login button.
+ */
 export declare const PlayStationLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Xbox social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Xbox-branded login button.
+ */
 export declare const XboxLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured WhatsApp social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` WhatsApp-branded login button.
+ */
 export declare const WhatsAppLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured WeChat social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` WeChat-branded login button.
+ */
 export declare const WeChatLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Amazon social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Amazon-branded login button.
+ */
 export declare const AmazonLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured Yahoo social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` Yahoo-branded login button.
+ */
 export declare const YahooLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;
+/**
+ * Pre-configured PayPal social login button.
+ *
+ * @param options - Button options (provider, name, icon, and color are pre-filled).
+ * @returns A `Renderable` PayPal-branded login button.
+ */
 export declare const PayPalLoginButton: (options: SpecialSocialLoginButtonOptions) => Renderable;

package/dist/types/components/auth/social-providers.d.ts

@@ -1,2 +1,28 @@
+/**
+ * Social Providers Component
+ *
+ * Renders a stack of social login buttons based on the provided configuration.
+ *
+ * @module auth/social-providers
+ */
 import { SocialProvidersOptions } from './types';
-export declare function SocialProviders({ providers, onSocialLogin }: SocialProvidersOptions): import("@tempots/dom").Renderable;
+/**
+ * Renders a vertical stack of social login buttons for the configured providers.
+ *
+ * A thin wrapper around {@link SocialLoginButtons} that maps `onSocialLogin`
+ * to the `onProviderClick` callback.
+ *
+ * @param options - Configuration for which providers to display and how to handle clicks.
+ * @returns A `TNode` containing a stack of social login buttons.
+ *
+ * @example
+ * ```ts
+ * SocialProviders({
+ *   providers: [{ provider: 'google' }, { provider: 'github' }],
+ *   onSocialLogin: async (provider) => {
+ *     await authClient.signIn.social({ provider })
+ *   },
+ * })
+ * ```
+ */
+export declare function SocialProviders({ providers, onSocialLogin, }: SocialProvidersOptions): import("@tempots/dom").Renderable;