UNPKG

@daveyplate/better-auth-ui

Version:

Plug & play shadcn/ui components for better-auth

908 lines (835 loc) 39.9 kB
import * as react_jsx_runtime from 'react/jsx-runtime'; import { A as AuthLocalization, a as AccountViewPath, b as AuthViewPath, c as AuthViewPaths, O as OrganizationViewPath } from './view-paths-DaSAvCTe.cjs'; export { f as AccountViewPaths, g as OrganizationViewPaths, e as accountViewPaths, h as authLocalization, d as authViewPaths, o as organizationViewPaths } from './view-paths-DaSAvCTe.cjs'; import * as React from 'react'; import { ComponentProps, ReactNode } from 'react'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; import { P as PasswordValidation, F as FieldType } from './auth-ui-provider-CXVVyUUT.cjs'; export { A as AppleIcon, n as AuthUIContext, l as AuthUIContextType, o as AuthUIProvider, m as AuthUIProviderProps, D as DiscordIcon, c as DropboxIcon, d as FacebookIcon, G as GitHubIcon, e as GitLabIcon, f as GoogleIcon, H as HuggingFaceIcon, K as KickIcon, L as LinearIcon, g as LinkedInIcon, M as MicrosoftIcon, N as NotionIcon, p as Provider, b as ProviderIcon, a as ProviderIconProps, R as RedditIcon, h as RobloxIcon, S as SlackIcon, i as SpotifyIcon, q as TeamOptions, r as TeamOptionsContext, T as TikTokIcon, j as TwitchIcon, k as VKIcon, V as VercelIcon, X as XIcon, Z as ZoomIcon, s as socialProviders } from './auth-ui-provider-CXVVyUUT.cjs'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { R as Refetch, T as Team, A as AnyAuthClient } from './auth-hooks-Dfqo571D.cjs'; export { a as AuthHooks, b as TeamMember } from './auth-hooks-Dfqo571D.cjs'; import { Organization } from 'better-auth/plugins/organization'; import * as class_variance_authority_types from 'class-variance-authority/types'; import { VariantProps } from 'class-variance-authority'; import * as better_auth from 'better-auth'; import { Account } from 'better-auth'; import { Team as Team$1 } from 'better-auth/plugins'; import * as _better_fetch_fetch from '@better-fetch/fetch'; export { g as getViewByPath } from './utils-C5R37WDe.cjs'; export { A as AuthMutators } from './auth-mutators-Ci-MWyBx.cjs'; import 'better-auth/social-providers'; import '@better-auth/passkey'; import 'better-auth/react'; import 'better-auth/client/plugins'; import '@better-auth/passkey/client'; declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element; type Profile = { id?: string | number; email?: string | null; name?: string | null; displayUsername?: string | null; username?: string | null; displayName?: string | null; firstName?: string | null; fullName?: string | null; isAnonymous?: boolean | null; emailVerified?: boolean | null; image?: string | null; avatar?: string | null; avatarUrl?: string | null; }; declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element; interface UserAvatarClassNames { base?: string; image?: string; fallback?: string; fallbackIcon?: string; skeleton?: string; } interface UserAvatarProps { classNames?: UserAvatarClassNames; isPending?: boolean; size?: "sm" | "default" | "lg" | "xl" | null; user?: Profile | null; /** * @default authLocalization * @remarks `AuthLocalization` */ localization?: Partial<AuthLocalization>; } /** * Displays a user avatar with image and fallback support * * Renders a user's avatar image when available, with appropriate fallbacks: * - Shows a skeleton when isPending is true * - Displays first two characters of user's name when no image is available * - Falls back to a generic user icon when neither image nor name is available */ declare function UserAvatar({ className, classNames, isPending, size, user, localization: propLocalization, ...props }: UserAvatarProps & ComponentProps<typeof Avatar>): react_jsx_runtime.JSX.Element; type SettingsCardClassNames = { base?: string; avatar?: UserAvatarClassNames; button?: string; cell?: string; checkbox?: string; destructiveButton?: string; content?: string; description?: string; dialog?: { content?: string; footer?: string; header?: string; }; error?: string; footer?: string; header?: string; icon?: string; input?: string; instructions?: string; label?: string; primaryButton?: string; secondaryButton?: string; outlineButton?: string; skeleton?: string; title?: string; }; interface SettingsCardProps extends Omit<ComponentProps<typeof Card>, "title"> { children?: ReactNode; className?: string; classNames?: SettingsCardClassNames; title?: ReactNode; description?: ReactNode; instructions?: ReactNode; actionLabel?: ReactNode; isSubmitting?: boolean; disabled?: boolean; isPending?: boolean; optimistic?: boolean; variant?: "default" | "destructive"; localization?: AuthLocalization; action?: () => Promise<unknown> | unknown; } declare function SettingsCard({ children, className, classNames, title, description, instructions, actionLabel, disabled, isPending, isSubmitting, optimistic, variant, action, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element; interface AccountViewProps { className?: string; classNames?: { base?: string; cards?: string; drawer?: { menuItem?: string; }; sidebar?: { base?: string; button?: string; buttonActive?: string; }; card?: SettingsCardClassNames; }; localization?: AuthLocalization; path?: string; pathname?: string; view?: AccountViewPath; hideNav?: boolean; showTeams?: boolean; } declare function AccountView({ className, classNames, localization: localizationProp, path: pathProp, pathname, view: viewProp, hideNav, showTeams }: AccountViewProps): react_jsx_runtime.JSX.Element | null; declare function AuthCallback({ redirectTo }: { redirectTo?: string; }): react_jsx_runtime.JSX.Element; type AuthFormClassNames = { base?: string; button?: string; checkbox?: string; description?: string; error?: string; forgotPasswordLink?: string; icon?: string; input?: string; label?: string; otpInput?: string; otpInputContainer?: string; outlineButton?: string; primaryButton?: string; providerButton?: string; qrCode?: string; secondaryButton?: string; }; interface AuthFormProps { className?: string; classNames?: AuthFormClassNames; callbackURL?: string; isSubmitting?: boolean; localization?: Partial<AuthLocalization>; pathname?: string; redirectTo?: string; view?: AuthViewPath; otpSeparators?: 0 | 1 | 2; setIsSubmitting?: (isSubmitting: boolean) => void; } /** * Render the appropriate authentication UI view based on component props and AuthUIContext feature flags. * * The component chooses a view from (in priority): the `view` prop, a view resolved from `pathname`, or `"SIGN_IN"`, then validates that the view is allowed given enabled features and credentials before rendering the corresponding form component. * * @param className - Optional base CSS class applied to rendered form components * @param classNames - Optional object of per-element CSS class overrides for rendered form components * @param callbackURL - Optional URL used by flows that require a callback (magic link, email OTP) * @param isSubmitting - Whether a form submission is currently in progress * @param localization - Optional localization strings that override context-provided localization * @param pathname - Optional path to resolve the active auth view when `view` is not provided * @param redirectTo - Optional URL to redirect to after successful authentication * @param view - Optional explicit view to render; takes precedence over `pathname` * @param otpSeparators - Number of visual separators to render between OTP input groups * @param setIsSubmitting - Setter to update the submitting state * @returns The React element for the selected authentication view, or `null` if no suitable view is available. */ declare function AuthForm({ className, classNames, callbackURL, isSubmitting, localization, pathname, redirectTo, view, otpSeparators, setIsSubmitting }: AuthFormProps): false | react_jsx_runtime.JSX.Element | null | undefined; type AuthViewClassNames = { base?: string; content?: string; description?: string; footer?: string; footerLink?: string; continueWith?: string; form?: AuthFormClassNames; header?: string; separator?: string; title?: string; }; interface AuthViewProps { className?: string; classNames?: AuthViewClassNames; callbackURL?: string; cardHeader?: ReactNode; cardFooter?: ReactNode; localization?: AuthLocalization; path?: string; pathname?: string; redirectTo?: string; socialLayout?: "auto" | "horizontal" | "grid" | "vertical"; view?: keyof AuthViewPaths; otpSeparators?: 0 | 1 | 2; } declare function AuthView({ className, classNames, callbackURL, cardHeader, cardFooter, localization, path: pathProp, pathname, redirectTo, socialLayout: socialLayoutProp, view: viewProp, otpSeparators }: AuthViewProps): react_jsx_runtime.JSX.Element; interface ForgotPasswordFormProps { className?: string; classNames?: AuthFormClassNames; isSubmitting?: boolean; localization: Partial<AuthLocalization>; setIsSubmitting?: (value: boolean) => void; } declare function ForgotPasswordForm({ className, classNames, isSubmitting, localization, setIsSubmitting }: ForgotPasswordFormProps): react_jsx_runtime.JSX.Element; interface MagicLinkFormProps { className?: string; classNames?: AuthFormClassNames; callbackURL?: string; isSubmitting?: boolean; localization: Partial<AuthLocalization>; redirectTo?: string; setIsSubmitting?: (value: boolean) => void; } declare function MagicLinkForm({ className, classNames, callbackURL: callbackURLProp, isSubmitting, localization, redirectTo: redirectToProp, setIsSubmitting }: MagicLinkFormProps): react_jsx_runtime.JSX.Element; interface RecoverAccountFormProps { className?: string; classNames?: AuthFormClassNames; isSubmitting?: boolean; localization: Partial<AuthLocalization>; redirectTo?: string; setIsSubmitting?: (value: boolean) => void; } declare function RecoverAccountForm({ className, classNames, isSubmitting, localization, redirectTo, setIsSubmitting }: RecoverAccountFormProps): react_jsx_runtime.JSX.Element; interface ResetPasswordFormProps { className?: string; classNames?: AuthFormClassNames; localization: Partial<AuthLocalization>; passwordValidation?: PasswordValidation; } declare function ResetPasswordForm({ className, classNames, localization, passwordValidation }: ResetPasswordFormProps): react_jsx_runtime.JSX.Element; interface SignInFormProps { className?: string; classNames?: AuthFormClassNames; isSubmitting?: boolean; localization: Partial<AuthLocalization>; redirectTo?: string; setIsSubmitting?: (isSubmitting: boolean) => void; passwordValidation?: PasswordValidation; } declare function SignInForm({ className, classNames, isSubmitting, localization, redirectTo, setIsSubmitting, passwordValidation }: SignInFormProps): react_jsx_runtime.JSX.Element; interface SignUpFormProps { className?: string; classNames?: AuthFormClassNames; callbackURL?: string; isSubmitting?: boolean; localization: Partial<AuthLocalization>; redirectTo?: string; setIsSubmitting?: (value: boolean) => void; passwordValidation?: PasswordValidation; } /** * Render a configurable sign-up form that handles standard and dynamic additional fields, avatar upload, CAPTCHA integration, validation, and submission flow. * * @param className - Additional container className applied to the form element * @param classNames - Optional className overrides for specific form elements (labels, inputs, buttons, etc.) * @param callbackURL - Optional explicit callback URL to include in the sign-up request; if omitted a callback is derived from app configuration and redirectTo * @param isSubmitting - External submitting state to disable inputs and show loading UI * @param localization - Localization overrides for labels, placeholders, and messages used by the form * @param redirectTo - Optional URL to redirect to after successful sign-up (overrides configured redirect) * @param setIsSubmitting - Optional callback invoked with the form's submitting state (useful for parent components) * @param passwordValidation - Optional password validation rules to customize password constraints and messages * @returns A JSX element that renders the fully wired sign-up form UI */ declare function SignUpForm({ className, classNames, callbackURL, isSubmitting, localization, redirectTo, setIsSubmitting, passwordValidation }: SignUpFormProps): react_jsx_runtime.JSX.Element; interface TwoFactorFormProps { className?: string; classNames?: AuthFormClassNames; isSubmitting?: boolean; localization?: Partial<AuthLocalization>; otpSeparators?: 0 | 1 | 2; redirectTo?: string; setIsSubmitting?: (value: boolean) => void; } declare function TwoFactorForm({ className, classNames, isSubmitting, localization, otpSeparators, redirectTo, setIsSubmitting }: TwoFactorFormProps): react_jsx_runtime.JSX.Element; declare function SignOut({ redirectTo }: { redirectTo?: string; }): react_jsx_runtime.JSX.Element; /** * Conditionally renders content during authentication loading state * * Renders its children only when the authentication state is being determined * (during the loading/pending phase). Once the authentication state is resolved, * nothing is rendered. Useful for displaying loading indicators or temporary * content while waiting for the authentication check to complete. */ declare function AuthLoading({ children }: { children: ReactNode; }): ReactNode; interface AcceptInvitationCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: Partial<AuthLocalization>; } declare function AcceptInvitationCard({ className, classNames, localization: localizationProp }: AcceptInvitationCardProps): react_jsx_runtime.JSX.Element; declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element; interface CreateOrganizationDialogProps extends ComponentProps<typeof Dialog> { className?: string; classNames?: SettingsCardClassNames; localization?: AuthLocalization; } declare function CreateOrganizationDialog({ className, classNames, localization: localizationProp, onOpenChange, ...props }: CreateOrganizationDialogProps): react_jsx_runtime.JSX.Element; interface CreateTeamDialogProps extends ComponentProps<typeof Dialog> { classNames?: SettingsCardClassNames; localization?: AuthLocalization; refetch?: Refetch; organizationId?: string; } /** * Renders a dialog containing a form to create a team for a given organization. * * The component validates the team name, submits it to create the team, shows success or error toasts, and manages dialog visibility via `onOpenChange`. * * @param organizationId - The ID of the organization to which the new team will belong; when falsy the create action is disabled. * @param onOpenChange - Callback invoked when the dialog open state changes; called with `false` to close the dialog after a successful create or when cancel is clicked. * @param localization - Optional localization overrides for labels, placeholders, descriptions, and messages used by the dialog. * @returns A React element rendering the create-team dialog and its form. */ declare function CreateTeamDialog({ classNames, localization: localizationProp, refetch, organizationId, onOpenChange, ...props }: CreateTeamDialogProps): react_jsx_runtime.JSX.Element; declare function DeleteOrganizationCard({ className, classNames, localization: localizationProp, slug, ...props }: SettingsCardProps & { slug?: string; }): react_jsx_runtime.JSX.Element; interface DeleteTeamDialogProps extends ComponentProps<typeof Dialog> { classNames?: SettingsCardClassNames; team: Team; localization?: AuthLocalization; refetch?: Refetch; } declare function DeleteTeamDialog({ classNames, team, localization: localizationProp, refetch, onOpenChange, ...props }: DeleteTeamDialogProps): react_jsx_runtime.JSX.Element; interface OrganizationLogoClassNames { base?: string; image?: string; fallback?: string; fallbackIcon?: string; skeleton?: string; } interface OrganizationLogoProps { classNames?: OrganizationLogoClassNames; isPending?: boolean; size?: "sm" | "default" | "lg" | "xl" | null; organization?: Partial<Organization> | null; /** * @default authLocalization * @remarks `AuthLocalization` */ localization?: AuthLocalization; } /** * Displays an organization logo with image and fallback support * * Renders an organization's logo image when available, with appropriate fallbacks: * - Shows a skeleton when isPending is true * - Falls back to a building icon when no logo is available */ declare function OrganizationLogo({ className, classNames, isPending, size, organization, localization: propLocalization, ...props }: OrganizationLogoProps & ComponentProps<typeof Avatar>): react_jsx_runtime.JSX.Element; interface OrganizationViewClassNames { base?: string; avatar?: OrganizationLogoClassNames; content?: string; title?: string; subtitle?: string; skeleton?: string; } interface OrganizationViewProps { className?: string; classNames?: OrganizationViewClassNames; isPending?: boolean; size?: "sm" | "default" | "lg" | null; organization?: Organization | null; /** * @default authLocalization * @remarks `AuthLocalization` */ localization?: AuthLocalization; } declare function OrganizationCellView({ className, classNames, isPending, size, organization, localization: propLocalization }: OrganizationViewProps): react_jsx_runtime.JSX.Element; interface OrganizationInvitationsCardProps extends SettingsCardProps { slug?: string; emptyState?: ReactNode; } declare function OrganizationInvitationsCard({ className, classNames, localization: localizationProp, slug: slugProp, emptyState, ...props }: OrganizationInvitationsCardProps): react_jsx_runtime.JSX.Element | null; interface OrganizationLogoCardProps extends ComponentProps<typeof Card> { className?: string; classNames?: SettingsCardClassNames; localization?: AuthLocalization; slug?: string; } declare function OrganizationLogoCard({ className, classNames, localization: localizationProp, slug, ...props }: OrganizationLogoCardProps): react_jsx_runtime.JSX.Element; declare function OrganizationMembersCard({ className, classNames, localization: localizationProp, slug: slugProp, ...props }: SettingsCardProps & { slug?: string; }): react_jsx_runtime.JSX.Element; interface OrganizationNameCardProps extends SettingsCardProps { slug?: string; } declare function OrganizationNameCard({ className, classNames, localization: localizationProp, slug, ...props }: OrganizationNameCardProps): react_jsx_runtime.JSX.Element; type OrganizationSettingsCardsProps = { className?: string; classNames?: { card?: SettingsCardClassNames; cards?: string; }; localization?: Partial<AuthLocalization>; slug?: string; }; declare function OrganizationSettingsCards({ className, classNames, localization, slug }: OrganizationSettingsCardsProps): react_jsx_runtime.JSX.Element; interface OrganizationSlugCardProps extends SettingsCardProps { slug?: string; } declare function OrganizationSlugCard({ className, classNames, localization: localizationProp, slug: slugProp, ...props }: OrganizationSlugCardProps): react_jsx_runtime.JSX.Element; declare const buttonVariants: (props?: ({ variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined; size?: "default" | "icon" | "sm" | "lg" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & { asChild?: boolean; }): react_jsx_runtime.JSX.Element; interface UserViewClassNames { base?: string; avatar?: UserAvatarClassNames; content?: string; title?: string; subtitle?: string; skeleton?: string; } interface UserViewProps { className?: string; classNames?: UserViewClassNames; isPending?: boolean; size?: "sm" | "default" | "lg" | null; user?: Profile | null; /** * @default authLocalization * @remarks `AuthLocalization` */ localization?: AuthLocalization; } /** * Displays user information with avatar and details in a compact view * * Renders a user's profile information with appropriate fallbacks: * - Shows avatar alongside user name and email when available * - Shows loading skeletons when isPending is true * - Falls back to generic "User" text when neither name nor email is available * - Supports customization through classNames prop */ declare function UserView({ className, classNames, isPending, size, user, localization: propLocalization }: UserViewProps): react_jsx_runtime.JSX.Element; interface OrganizationSwitcherClassNames { base?: string; skeleton?: string; trigger?: { base?: string; avatar?: UserAvatarClassNames; user?: UserViewClassNames; organization?: OrganizationViewClassNames; skeleton?: string; }; content?: { base?: string; user?: UserViewClassNames; organization?: OrganizationViewClassNames; avatar?: UserAvatarClassNames; menuItem?: string; separator?: string; }; } interface OrganizationSwitcherProps extends Omit<ComponentProps<typeof Button>, "trigger"> { classNames?: OrganizationSwitcherClassNames; align?: "center" | "start" | "end"; alignOffset?: number; side?: "top" | "right" | "bottom" | "left"; sideOffset?: number; trigger?: ReactNode; localization?: AuthLocalization; slug?: string; onSetActive?: (organization: Organization | null) => void; /** * Hide the personal organization option from the switcher. * When true, users can only switch between organizations and cannot access their personal account. * If no organization is active, the first available organization will be automatically selected. * @default false */ hidePersonal?: boolean; hideCreate?: boolean; } /** * Displays an interactive user button with dropdown menu functionality * * Renders a user interface element that can be displayed as either an icon or full button: * - Shows a user avatar or placeholder when in icon mode * - Displays user name and email with dropdown indicator in full mode * - Provides dropdown menu with authentication options (sign in/out, settings, etc.) * - Supports multi-session functionality for switching between accounts * - Can be customized with additional links and styling options */ declare function OrganizationSwitcher({ className, classNames, align, alignOffset, side, sideOffset, trigger, localization: localizationProp, slug: slugProp, size, onSetActive, hidePersonal, hideCreate, ...props }: OrganizationSwitcherProps): react_jsx_runtime.JSX.Element; type OrganizationViewPageProps = Omit<AccountViewProps, "view"> & { slug?: string; view?: OrganizationViewPath; }; declare function OrganizationView({ className, classNames, localization: localizationProp, path: pathProp, pathname, view: viewProp, hideNav, slug: slugProp }: OrganizationViewPageProps): react_jsx_runtime.JSX.Element; declare function OrganizationsCard({ className, classNames, localization, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element; interface TeamCellProps { className?: string; classNames?: SettingsCardClassNames; team: Team; localization?: Partial<AuthLocalization>; canDelete: boolean; canUpdate: boolean; refetch?: Refetch; } /** * Render a single-row team cell with a color-coded circular avatar, the team name, and a localized "Team" label. * * @param classNames - Optional class name overrides for component parts * @param team - Team data object containing at least `id` and `name` * @param localization - Localization strings providing `TEAM` label * @returns The rendered team cell element */ declare function TeamCell({ className, classNames, team, localization, canDelete, canUpdate, refetch }: TeamCellProps): react_jsx_runtime.JSX.Element; /** * Render a settings card that lists teams for the current organization and exposes a dialog to create a new team. * * The component merges provided localization with context localization, fetches teams for the current organization, * shows a loading skeleton while data is pending, displays a localized empty message when no teams exist, * and renders a TeamCell for each team. It also controls a CreateTeamDialog tied to the current organization. * * @returns A React element containing the teams settings card and the create-team dialog */ interface TeamsCardProps extends SettingsCardProps { organizationId: string; } declare function TeamsCard({ className, classNames, localization, organizationId, ...props }: TeamsCardProps): react_jsx_runtime.JSX.Element; interface UpdateTeamDialogProps extends ComponentProps<typeof Dialog> { classNames?: SettingsCardClassNames; team: Team; localization?: AuthLocalization; refetch?: Refetch; } declare function UpdateTeamDialog({ classNames, team, localization: localizationProp, refetch, onOpenChange, ...props }: UpdateTeamDialogProps): react_jsx_runtime.JSX.Element; /** * Render a settings card that lists all pending user invitations. * * The card is omitted (returns `null`) when there are no pending invitations. * * @param className - Optional container class name passed to the SettingsCard * @param classNames - Optional classNames map applied to SettingsCard subcomponents * @param localization - Partial localization overrides that are merged with AuthUIContext localization * @returns The SettingsCard element containing a row for each pending invitation, or `null` when none exist */ declare function UserInvitationsCard({ className, classNames, localization: localizationProp, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element | null; declare function Input({ className, type, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element; declare function PasswordInput({ className, enableToggle, onChange, ...props }: ComponentProps<typeof Input> & { enableToggle?: boolean; }): react_jsx_runtime.JSX.Element; /** * Redirects the user to the sign-in page * * Renders nothing and automatically redirects the current user to the authentication * sign-in page. Useful for protecting routes that require authentication or * redirecting users to sign in from various parts of the application. */ declare function RedirectToSignIn(): ReactNode; /** * Redirects the user to the sign-up page * * Renders nothing and automatically redirects the current user to the authentication * sign-up page. Useful for directing new users to create an account or * for redirecting from marketing pages to the registration flow. */ declare function RedirectToSignUp(): ReactNode; interface AccountsCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: Partial<AuthLocalization>; } declare function AccountsCard({ className, classNames, localization }: AccountsCardProps): react_jsx_runtime.JSX.Element; interface DeleteAccountCardProps { className?: string; classNames?: SettingsCardClassNames; accounts?: Account[] | null; isPending?: boolean; localization?: AuthLocalization; skipHook?: boolean; } declare function DeleteAccountCard({ className, classNames, accounts, isPending, localization, skipHook }: DeleteAccountCardProps): react_jsx_runtime.JSX.Element; interface UpdateAvatarCardProps extends ComponentProps<typeof Card> { className?: string; classNames?: SettingsCardClassNames; localization?: AuthLocalization; } declare function UpdateAvatarCard({ className, classNames, localization, ...props }: UpdateAvatarCardProps): react_jsx_runtime.JSX.Element; interface SelectOption { label: string; value: string; } interface UpdateFieldCardProps { className?: string; classNames?: SettingsCardClassNames; description?: ReactNode; instructions?: ReactNode; localization?: Partial<AuthLocalization>; name: string; placeholder?: string; required?: boolean; label?: ReactNode; type?: FieldType; multiline?: boolean; value?: unknown; validate?: (value: string) => boolean | Promise<boolean>; options?: SelectOption[]; } declare function UpdateFieldCard({ className, classNames, description, instructions, localization: localizationProp, name, placeholder, required, label, type, multiline, value, validate, options }: UpdateFieldCardProps): react_jsx_runtime.JSX.Element; declare function UpdateNameCard({ className, classNames, localization, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element; declare function UpdateUsernameCard({ className, classNames, localization, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element; declare function AccountSettingsCards({ className, classNames, localization }: { className?: string; classNames?: { card?: SettingsCardClassNames; cards?: string; }; localization?: Partial<AuthLocalization>; }): react_jsx_runtime.JSX.Element; interface ApiKeysCardProps extends SettingsCardProps { organizationId?: string; } declare function ApiKeysCard({ className, classNames, localization, organizationId, ...props }: ApiKeysCardProps): react_jsx_runtime.JSX.Element; interface PasskeysCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: AuthLocalization; } declare function PasskeysCard({ className, classNames, localization }: PasskeysCardProps): react_jsx_runtime.JSX.Element; interface ProvidersCardProps { className?: string; classNames?: SettingsCardClassNames; accounts?: Account[] | null; isPending?: boolean; localization?: Partial<AuthLocalization>; skipHook?: boolean; refetch?: Refetch; } declare function ProvidersCard({ className, classNames, accounts, isPending, localization, skipHook, refetch }: ProvidersCardProps): react_jsx_runtime.JSX.Element; declare function ChangeEmailCard({ className, classNames, localization, ...props }: SettingsCardProps): react_jsx_runtime.JSX.Element; interface ChangePasswordCardProps { className?: string; classNames?: SettingsCardClassNames; accounts?: { providerId: string; }[] | null; isPending?: boolean; localization?: AuthLocalization; skipHook?: boolean; passwordValidation?: PasswordValidation; } declare function ChangePasswordCard({ className, classNames, accounts, isPending, localization, skipHook, passwordValidation }: ChangePasswordCardProps): react_jsx_runtime.JSX.Element; interface SessionsCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: Partial<AuthLocalization>; } declare function SessionsCard({ className, classNames, localization }: SessionsCardProps): react_jsx_runtime.JSX.Element; declare function SecuritySettingsCards({ className, classNames, localization }: { className?: string; classNames?: { card?: SettingsCardClassNames; cards?: string; }; localization?: Partial<AuthLocalization>; }): react_jsx_runtime.JSX.Element; declare function InputFieldSkeleton({ classNames }: { classNames?: SettingsCardClassNames; }): react_jsx_runtime.JSX.Element; declare function SettingsCellSkeleton({ classNames }: { classNames?: SettingsCardClassNames; }): react_jsx_runtime.JSX.Element; interface UserTeamCellProps { className?: string; classNames?: SettingsCardClassNames; localization?: Partial<AuthLocalization>; team: Team$1; refetch?: Refetch; } declare function UserTeamCell({ className, classNames, team, localization, refetch }: UserTeamCellProps): react_jsx_runtime.JSX.Element; interface UserTeamsCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: Partial<AuthLocalization>; } declare function UserTeamsCard({ className, classNames, localization }: UserTeamsCardProps): react_jsx_runtime.JSX.Element; interface TwoFactorCardProps { className?: string; classNames?: SettingsCardClassNames; localization?: AuthLocalization; } declare function TwoFactorCard({ className, classNames, localization }: TwoFactorCardProps): react_jsx_runtime.JSX.Element; /** * Conditionally renders content for authenticated users only * * Renders its children only when a user is authenticated with a valid session. * If no session exists, nothing is rendered. Useful for displaying protected * content or UI elements that should only be visible to signed-in users. */ declare function SignedIn({ children }: { children: ReactNode; }): ReactNode; /** * Conditionally renders content for unauthenticated users only * * Renders its children only when no user is authenticated and the authentication * state is not pending. If a session exists or is being loaded, nothing is rendered. * Useful for displaying sign-in prompts or content exclusive to guests. */ declare function SignedOut({ children }: { children: ReactNode; }): ReactNode; interface UserButtonClassNames { base?: string; skeleton?: string; trigger?: { base?: string; avatar?: UserAvatarClassNames; user?: UserViewClassNames; skeleton?: string; }; content?: { base?: string; user?: UserViewClassNames; avatar?: UserAvatarClassNames; menuItem?: string; separator?: string; }; } interface UserButtonProps { className?: string; classNames?: UserButtonClassNames; align?: "center" | "start" | "end"; alignOffset?: number; side?: "top" | "right" | "bottom" | "left"; sideOffset?: number; additionalLinks?: ({ href: string; icon?: ReactNode; label: ReactNode; signedIn?: boolean; separator?: boolean; } | ReactNode)[]; trigger?: ReactNode; disableDefaultLinks?: boolean; /** * @default authLocalization * @remarks `AuthLocalization` */ localization?: AuthLocalization; } /** * Displays an interactive user button with dropdown menu functionality * * Renders a user interface element that can be displayed as either an icon or full button: * - Shows a user avatar or placeholder when in icon mode * - Displays user name and email with dropdown indicator in full mode * - Provides dropdown menu with authentication options (sign in/out, settings, etc.) * - Supports multi-session functionality for switching between accounts * - Can be customized with additional links and styling options */ declare function UserButton({ className, classNames, align, alignOffset, side, sideOffset, trigger, additionalLinks, disableDefaultLinks, localization: propLocalization, size, ...props }: UserButtonProps & ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element; type FetchError = { code?: string | undefined; message?: string | undefined; status?: number; statusText?: string; }; declare function useAuthData<T>({ queryFn, cacheKey, staleTime }: { queryFn: () => Promise<{ data: T | null; error?: FetchError | null; }>; cacheKey?: string; staleTime?: number; }): { data: NonNullable<T> | null; isPending: boolean; isRefetching: boolean; error: FetchError | null; refetch: () => Promise<void>; }; interface AuthenticateOptions<TAuthClient extends AnyAuthClient> { authClient?: TAuthClient; authView?: AuthViewPath; enabled?: boolean; } declare function useAuthenticate<TAuthClient extends AnyAuthClient>(options?: AuthenticateOptions<TAuthClient>): { data: { session: TAuthClient["$Infer"]["Session"]["session"]; user: TAuthClient["$Infer"]["Session"]["user"]; } | null | undefined; user: TAuthClient["$Infer"]["Session"]["user"] | undefined; isPending: boolean; error: _better_fetch_fetch.BetterFetchError | null; refetch: (queryParams?: { query?: better_auth.SessionQueryParams; } | undefined) => Promise<void>; }; declare function useCurrentOrganization({ slug: slugProp }?: { slug?: string; }): { data: { id: string; name: string; slug: string; createdAt: Date; logo?: string | null | undefined; metadata?: any; } | null | undefined; isPending: boolean | undefined; isRefetching: boolean | undefined; refetch: (() => void) | undefined; }; export { AcceptInvitationCard, type AcceptInvitationCardProps, AccountSettingsCards, AccountView, AccountViewPath, type AccountViewProps, AccountsCard, type AccountsCardProps, ApiKeysCard, type ApiKeysCardProps, AuthCallback, AuthForm, type AuthFormClassNames, type AuthFormProps, AuthLoading, AuthLocalization, AuthView, type AuthViewClassNames, AuthViewPath, AuthViewPaths, type AuthViewProps, ChangeEmailCard, ChangePasswordCard, type ChangePasswordCardProps, CreateOrganizationDialog, type CreateOrganizationDialogProps, CreateTeamDialog, type CreateTeamDialogProps, DeleteAccountCard, type DeleteAccountCardProps, DeleteOrganizationCard, DeleteTeamDialog, ForgotPasswordForm, type ForgotPasswordFormProps, InputFieldSkeleton, MagicLinkForm, type MagicLinkFormProps, OrganizationCellView, OrganizationInvitationsCard, type OrganizationInvitationsCardProps, OrganizationLogo, OrganizationLogoCard, type OrganizationLogoCardProps, type OrganizationLogoClassNames, type OrganizationLogoProps, OrganizationMembersCard, OrganizationNameCard, type OrganizationNameCardProps, OrganizationSettingsCards, type OrganizationSettingsCardsProps, OrganizationSlugCard, type OrganizationSlugCardProps, OrganizationSwitcher, type OrganizationSwitcherClassNames, type OrganizationSwitcherProps, OrganizationView, type OrganizationViewClassNames, type OrganizationViewPageProps, OrganizationViewPath, type OrganizationViewProps, OrganizationsCard, PasskeysCard, type PasskeysCardProps, PasswordInput, ProvidersCard, type ProvidersCardProps, RecoverAccountForm, type RecoverAccountFormProps, RedirectToSignIn, RedirectToSignUp, ResetPasswordForm, type ResetPasswordFormProps, SecuritySettingsCards, type SelectOption, SessionsCard, type SessionsCardProps, SettingsCard, type SettingsCardClassNames, type SettingsCardProps, SettingsCellSkeleton, SignInForm, type SignInFormProps, SignOut, SignUpForm, type SignUpFormProps, SignedIn, SignedOut, Team, TeamCell, type TeamCellProps, TeamsCard, type TeamsCardProps, TwoFactorCard, type TwoFactorCardProps, TwoFactorForm, type TwoFactorFormProps, UpdateAvatarCard, type UpdateAvatarCardProps, UpdateFieldCard, type UpdateFieldCardProps, UpdateNameCard, UpdateTeamDialog, UpdateUsernameCard, UserAvatar, type UserAvatarClassNames, type UserAvatarProps, UserButton, type UserButtonClassNames, type UserButtonProps, UserInvitationsCard, UserTeamCell, type UserTeamCellProps, UserTeamsCard, type UserTeamsCardProps, UserView, type UserViewClassNames, type UserViewProps, useAuthData, useAuthenticate, useCurrentOrganization };