@erikey/react 0.2.7 → 0.3.0

package/dist/ui/index.d.mts

@@ -1,22 +1,704 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AuthUIProviderProps } from '@daveyplate/better-auth-ui';
-export { AuthCard, AuthForm, AuthUIProviderProps, ForgotPasswordForm, RedirectToSignIn, RedirectToSignUp, ResetPasswordForm, SettingsCard, SettingsCards, SignInForm, SignUpForm, SignedIn, SignedOut, UserAvatar, UserButton, UserView } from '@daveyplate/better-auth-ui';
+import React, { ComponentType, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { ClassValue } from 'clsx';
+import { z } from 'zod';
 
-type AuthProviderProps = AuthUIProviderProps;
 /**
- * Auth provider wrapper - pass your authClient and router functions
+ * Auth client interface - matches what createAuthClient returns
+ */
+interface AuthClient {
+    signIn: {
+        email: (params: {
+            email: string;
+            password: string;
+            rememberMe?: boolean;
+        }) => Promise<any>;
+        social?: (params: {
+            provider: string;
+            callbackURL?: string;
+        }) => Promise<any>;
+    };
+    signUp: {
+        email: (params: {
+            email: string;
+            password: string;
+            name: string;
+        }) => Promise<any>;
+    };
+    signOut: () => Promise<any>;
+    useSession: () => {
+        data: {
+            session: any;
+            user: any;
+        } | null;
+        isPending: boolean;
+        error: any;
+        refetch?: () => Promise<void>;
+    };
+    forgetPassword?: (params: {
+        email: string;
+        redirectTo?: string;
+    }) => Promise<any>;
+    resetPassword?: (params: {
+        newPassword: string;
+        token?: string;
+    }) => Promise<any>;
+    getSession?: () => Promise<any>;
+}
+/**
+ * Link component type - for custom routing
+ */
+type LinkComponent = ComponentType<{
+    href: string;
+    children: ReactNode;
+    className?: string;
+}>;
+/**
+ * Social provider configuration
+ */
+interface SocialProvider {
+    id: string;
+    name: string;
+    icon?: ReactNode;
+}
+/**
+ * Toast notification function type
+ */
+type ToastFn = (options: {
+    title?: string;
+    description?: string;
+    variant?: 'default' | 'destructive';
+}) => void;
+/**
+ * Auth view paths configuration
+ */
+interface AuthViewPaths {
+    signIn: string;
+    signUp: string;
+    forgotPassword: string;
+    resetPassword: string;
+    twoFactor: string;
+    callback: string;
+    settings: string;
+    signOut: string;
+}
+/**
+ * Auth UI configuration options
+ */
+interface AuthUIConfig {
+    /**
+     * The auth client from createAuthClient()
+     */
+    authClient: AuthClient;
+    /**
+     * Base path for auth routes
+     * @default '/auth'
+     */
+    basePath?: string;
+    /**
+     * URL to redirect to after successful auth
+     * @default '/'
+     */
+    redirectTo?: string;
+    /**
+     * Custom navigation function
+     * @default window.location.href = href
+     */
+    navigate?: (href: string) => void;
+    /**
+     * Custom Link component for routing
+     * @default <a href={href}>
+     */
+    Link?: LinkComponent;
+    /**
+     * Enable social OAuth providers
+     */
+    providers?: SocialProvider[];
+    /**
+     * Enable forgot password flow
+     * @default true
+     */
+    forgotPassword?: boolean;
+    /**
+     * Require name field in sign up
+     * @default true
+     */
+    nameRequired?: boolean;
+    /**
+     * Show confirm password field in sign up
+     * @default false
+     */
+    confirmPassword?: boolean;
+    /**
+     * Show remember me checkbox in sign in
+     * @default false
+     */
+    rememberMe?: boolean;
+    /**
+     * Custom view paths
+     */
+    viewPaths?: Partial<AuthViewPaths>;
+    /**
+     * Toast notification function
+     */
+    toast?: ToastFn;
+    /**
+     * Callback after session changes
+     */
+    onSessionChange?: () => void | Promise<void>;
+}
+/**
+ * Auth UI context value
+ */
+interface AuthUIContextValue extends Required<Omit<AuthUIConfig, 'viewPaths' | 'toast' | 'onSessionChange' | 'providers'>> {
+    viewPaths: AuthViewPaths;
+    toast: ToastFn;
+    onSessionChange?: () => void | Promise<void>;
+    providers: SocialProvider[];
+}
+
+/**
+ * Hook to access auth UI context
+ */
+declare function useAuthUI(): AuthUIContextValue;
+/**
+ * Props for AuthUIProvider
+ */
+interface AuthUIProviderProps extends AuthUIConfig {
+    children: ReactNode;
+}
+/**
+ * Auth UI Provider
+ *
+ * Provides configuration and utilities to all auth UI components.
+ *
+ * @example
+ * ```tsx
+ * import { AuthUIProvider } from '@erikey/react/ui';
+ * import { authClient } from './auth-client';
+ *
+ * function App() {
+ *   return (
+ *     <AuthUIProvider
+ *       authClient={authClient}
+ *       navigate={(href) => router.push(href)}
+ *     >
+ *       <YourApp />
+ *     </AuthUIProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function AuthUIProvider({ children, authClient, basePath, redirectTo, navigate, Link, providers, forgotPassword, nameRequired, confirmPassword, rememberMe, viewPaths, toast, onSessionChange, }: AuthUIProviderProps): React.JSX.Element;
+
+interface SignInFormProps {
+    className?: string;
+    /**
+     * URL to redirect to after successful sign in
+     */
+    redirectTo?: string;
+    /**
+     * Callback after successful sign in
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Sign In Form Component
+ *
+ * A complete email/password sign in form with validation and error handling.
+ *
+ * @example
+ * ```tsx
+ * <SignInForm redirectTo="/dashboard" />
+ * ```
+ */
+declare function SignInForm({ className, redirectTo, onSuccess, onError }: SignInFormProps): React.JSX.Element;
+
+interface SignUpFormProps {
+    className?: string;
+    /**
+     * URL to redirect to after successful sign up
+     */
+    redirectTo?: string;
+    /**
+     * Callback after successful sign up
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Sign Up Form Component
+ *
+ * A complete email/password sign up form with validation and error handling.
+ *
+ * @example
+ * ```tsx
+ * <SignUpForm redirectTo="/onboarding" />
+ * ```
+ */
+declare function SignUpForm({ className, redirectTo, onSuccess, onError }: SignUpFormProps): React.JSX.Element;
+
+interface ForgotPasswordFormProps {
+    className?: string;
+    /**
+     * Callback after successful password reset request
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Forgot Password Form Component
+ *
+ * Allows users to request a password reset link.
  *
  * @example
  * ```tsx
- * <AuthProvider
- *   authClient={authClient}
- *   navigate={(href) => router.push(href)}
- *   Link={NextLink}
- * >
- *   {children}
- * </AuthProvider>
+ * <ForgotPasswordForm />
+ * ```
+ */
+declare function ForgotPasswordForm({ className, onSuccess, onError }: ForgotPasswordFormProps): React.JSX.Element;
+
+interface ResetPasswordFormProps {
+    className?: string;
+    /**
+     * Reset token from URL
+     */
+    token?: string;
+    /**
+     * Callback after successful password reset
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Reset Password Form Component
+ *
+ * Allows users to set a new password using a reset token.
+ *
+ * @example
+ * ```tsx
+ * <ResetPasswordForm token={tokenFromUrl} />
+ * ```
+ */
+declare function ResetPasswordForm({ className, token, onSuccess, onError, }: ResetPasswordFormProps): React.JSX.Element;
+
+type AuthView = 'sign-in' | 'sign-up' | 'forgot-password' | 'reset-password';
+interface AuthCardProps {
+    className?: string;
+    /**
+     * The auth view to display
+     */
+    view?: AuthView;
+    /**
+     * The current pathname (alternative to view prop)
+     * Will be parsed to determine the view
+     */
+    pathname?: string;
+    /**
+     * URL to redirect to after successful auth
+     */
+    redirectTo?: string;
+    /**
+     * Reset token for password reset view
+     */
+    resetToken?: string;
+    /**
+     * Callback after successful auth action
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Auth Card Component
+ *
+ * A router component that displays the appropriate auth form based on
+ * the current view or pathname.
+ *
+ * @example
+ * ```tsx
+ * // Using view prop
+ * <AuthCard view="sign-in" />
+ *
+ * // Using pathname (parsed from URL)
+ * <AuthCard pathname="/auth/sign-up" />
  * ```
  */
-declare const AuthProvider: ({ children, authClient, avatarExtension, avatarSize, basePath, baseURL, captcha, redirectTo, credentials, changeEmail, forgotPassword, freshAge, hooks: hooksProp, mutators: mutatorsProp, localization: localizationProp, nameRequired, settingsFields, signUp, signUpFields, toast, viewPaths: viewPathsProp, navigate, replace, uploadAvatar, Link, ...props }: AuthUIProviderProps) => react_jsx_runtime.JSX.Element;
+declare function AuthCard({ className, view, pathname, redirectTo, resetToken, onSuccess, onError, }: AuthCardProps): React.JSX.Element;
+
+interface UserAvatarProps {
+    className?: string;
+    /**
+     * User's profile image URL
+     */
+    src?: string | null;
+    /**
+     * User's name (used for fallback initials)
+     */
+    name?: string | null;
+    /**
+     * User's email (used for fallback if no name)
+     */
+    email?: string | null;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * User Avatar Component
+ *
+ * Displays a user's profile picture with fallback to initials.
+ *
+ * @example
+ * ```tsx
+ * <UserAvatar src={user.image} name={user.name} />
+ * ```
+ */
+declare const UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface UserButtonProps {
+    className?: string;
+    /**
+     * Show settings link in dropdown
+     * @default true
+     */
+    showSettings?: boolean;
+    /**
+     * Custom settings URL
+     */
+    settingsUrl?: string;
+}
+/**
+ * User Button Component
+ *
+ * A dropdown button showing the user's avatar with sign out and settings options.
+ *
+ * @example
+ * ```tsx
+ * <UserButton />
+ * ```
+ */
+declare function UserButton({ className, showSettings, settingsUrl }: UserButtonProps): React.JSX.Element | null;
+
+interface UserViewProps {
+    className?: string;
+    /**
+     * Show user's email
+     * @default true
+     */
+    showEmail?: boolean;
+}
+/**
+ * User View Component
+ *
+ * Displays the current user's avatar and information.
+ *
+ * @example
+ * ```tsx
+ * <UserView />
+ * ```
+ */
+declare function UserView({ className, showEmail }: UserViewProps): React.JSX.Element | null;
+
+interface SignedInProps {
+    children: ReactNode;
+    /**
+     * Fallback to show while session is loading
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Signed In Component
+ *
+ * Only renders children when the user is authenticated.
+ *
+ * @example
+ * ```tsx
+ * <SignedIn>
+ *   <p>Welcome back!</p>
+ *   <UserButton />
+ * </SignedIn>
+ * ```
+ */
+declare function SignedIn({ children, fallback }: SignedInProps): React.JSX.Element | null;
+
+interface SignedOutProps {
+    children: ReactNode;
+    /**
+     * Fallback to show while session is loading
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Signed Out Component
+ *
+ * Only renders children when the user is NOT authenticated.
+ *
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <Link href="/auth/sign-in">Sign In</Link>
+ * </SignedOut>
+ * ```
+ */
+declare function SignedOut({ children, fallback }: SignedOutProps): React.JSX.Element | null;
+
+interface RedirectToSignInProps {
+    /**
+     * Custom redirect URL
+     */
+    redirectTo?: string;
+}
+/**
+ * Redirect to Sign In Component
+ *
+ * Redirects unauthenticated users to the sign in page.
+ *
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <RedirectToSignIn />
+ * </SignedOut>
+ * ```
+ */
+declare function RedirectToSignIn({ redirectTo }: RedirectToSignInProps): null;
+
+interface RedirectToSignUpProps {
+    /**
+     * Custom redirect URL
+     */
+    redirectTo?: string;
+}
+/**
+ * Redirect to Sign Up Component
+ *
+ * Redirects users to the sign up page.
+ *
+ * @example
+ * ```tsx
+ * <RedirectToSignUp />
+ * ```
+ */
+declare function RedirectToSignUp({ redirectTo }: RedirectToSignUpProps): null;
+
+interface SettingsCardProps {
+    className?: string;
+    title: string;
+    description?: string;
+    children: ReactNode;
+}
+/**
+ * Settings Card Component
+ *
+ * A card wrapper for settings sections.
+ *
+ * @example
+ * ```tsx
+ * <SettingsCard title="Profile" description="Manage your profile settings">
+ *   <form>...</form>
+ * </SettingsCard>
+ * ```
+ */
+declare function SettingsCard({ className, title, description, children }: SettingsCardProps): React.JSX.Element;
+interface SettingsCardsProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Settings Cards Container
+ *
+ * A container for multiple settings cards.
+ *
+ * @example
+ * ```tsx
+ * <SettingsCards>
+ *   <SettingsCard title="Profile">...</SettingsCard>
+ *   <SettingsCard title="Security">...</SettingsCard>
+ * </SettingsCards>
+ * ```
+ */
+declare function SettingsCards({ className, children }: SettingsCardsProps): React.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Email validation schema
+ */
+declare const emailSchema: z.ZodString;
+/**
+ * Password validation schema with configurable constraints
+ */
+declare function createPasswordSchema(options?: {
+    minLength?: number;
+    maxLength?: number;
+    requireUppercase?: boolean;
+    requireLowercase?: boolean;
+    requireNumber?: boolean;
+    requireSpecial?: boolean;
+}): z.ZodString;
+/**
+ * Default password schema (8 chars minimum)
+ */
+declare const passwordSchema: z.ZodString;
+/**
+ * Name validation schema
+ */
+declare const nameSchema: z.ZodString;
+/**
+ * Sign in form schema
+ */
+declare const signInSchema: z.ZodObject<{
+    email: z.ZodString;
+    password: z.ZodString;
+    rememberMe: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    email: string;
+    password: string;
+    rememberMe?: boolean | undefined;
+}, {
+    email: string;
+    password: string;
+    rememberMe?: boolean | undefined;
+}>;
+type SignInFormData = z.infer<typeof signInSchema>;
+/**
+ * Sign up form schema
+ */
+declare const signUpSchema: z.ZodObject<{
+    name: z.ZodString;
+    email: z.ZodString;
+    password: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    email: string;
+    password: string;
+    name: string;
+}, {
+    email: string;
+    password: string;
+    name: string;
+}>;
+type SignUpFormData = z.infer<typeof signUpSchema>;
+/**
+ * Sign up with confirm password schema
+ */
+declare const signUpWithConfirmSchema: z.ZodEffects<z.ZodObject<{
+    name: z.ZodString;
+    email: z.ZodString;
+    password: z.ZodString;
+} & {
+    confirmPassword: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    confirmPassword: string;
+    email: string;
+    password: string;
+    name: string;
+}, {
+    confirmPassword: string;
+    email: string;
+    password: string;
+    name: string;
+}>, {
+    confirmPassword: string;
+    email: string;
+    password: string;
+    name: string;
+}, {
+    confirmPassword: string;
+    email: string;
+    password: string;
+    name: string;
+}>;
+type SignUpWithConfirmFormData = z.infer<typeof signUpWithConfirmSchema>;
+/**
+ * Forgot password form schema
+ */
+declare const forgotPasswordSchema: z.ZodObject<{
+    email: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    email: string;
+}, {
+    email: string;
+}>;
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+/**
+ * Reset password form schema
+ */
+declare const resetPasswordSchema: z.ZodEffects<z.ZodObject<{
+    password: z.ZodString;
+    confirmPassword: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    confirmPassword: string;
+    password: string;
+}, {
+    confirmPassword: string;
+    password: string;
+}>, {
+    confirmPassword: string;
+    password: string;
+}, {
+    confirmPassword: string;
+    password: string;
+}>;
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+/**
+ * Two-factor authentication schema
+ */
+declare const twoFactorSchema: z.ZodObject<{
+    code: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    code: string;
+}, {
+    code: string;
+}>;
+type TwoFactorFormData = z.infer<typeof twoFactorSchema>;
 
-export { AuthProvider, type AuthProviderProps };
+export { AuthCard, type AuthCardProps, type AuthClient, AuthCard as AuthForm, AuthUIProvider as AuthProvider, type AuthUIProviderProps as AuthProviderProps, type AuthUIConfig, type AuthUIContextValue, AuthUIProvider, type AuthUIProviderProps, type AuthView, type AuthViewPaths, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ForgotPasswordForm, type ForgotPasswordFormData, type ForgotPasswordFormProps, Input, type InputProps, Label, type LinkComponent, RedirectToSignIn, type RedirectToSignInProps, RedirectToSignUp, type RedirectToSignUpProps, ResetPasswordForm, type ResetPasswordFormData, type ResetPasswordFormProps, Separator, SettingsCard, type SettingsCardProps, SettingsCards, type SettingsCardsProps, SignInForm, type SignInFormData, type SignInFormProps, SignUpForm, type SignUpFormData, type SignUpFormProps, type SignUpWithConfirmFormData, SignedIn, type SignedInProps, SignedOut, type SignedOutProps, type SocialProvider, type ToastFn, type TwoFactorFormData, UserAvatar, type UserAvatarProps, UserButton, type UserButtonProps, UserView, type UserViewProps, buttonVariants, cn, createPasswordSchema, emailSchema, forgotPasswordSchema, nameSchema, passwordSchema, resetPasswordSchema, signInSchema, signUpSchema, signUpWithConfirmSchema, twoFactorSchema, useAuthUI };