@erikey/react 0.3.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,729 +0,0 @@
1
- import React, { ComponentType, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
2
- import * as class_variance_authority_types from 'class-variance-authority/types';
3
- import { VariantProps } from 'class-variance-authority';
4
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
5
- import * as SeparatorPrimitive from '@radix-ui/react-separator';
6
- import { ClassValue } from 'clsx';
7
- import { z } from 'zod';
8
-
9
- /**
10
- * Auth client interface - matches what createAuthClient returns
11
- */
12
- interface AuthClient {
13
- signIn: {
14
- email: (params: {
15
- email: string;
16
- password: string;
17
- rememberMe?: boolean;
18
- }) => Promise<any>;
19
- social?: (params: {
20
- provider: string;
21
- callbackURL?: string;
22
- }) => Promise<any>;
23
- };
24
- signUp: {
25
- email: (params: {
26
- email: string;
27
- password: string;
28
- name: string;
29
- }) => Promise<any>;
30
- };
31
- signOut: () => Promise<any>;
32
- useSession: () => {
33
- data: {
34
- session: any;
35
- user: any;
36
- } | null;
37
- isPending: boolean;
38
- error: any;
39
- refetch?: () => Promise<void>;
40
- };
41
- forgetPassword?: (params: {
42
- email: string;
43
- redirectTo?: string;
44
- }) => Promise<any>;
45
- resetPassword?: (params: {
46
- newPassword: string;
47
- token?: string;
48
- }) => Promise<any>;
49
- getSession?: () => Promise<any>;
50
- }
51
- /**
52
- * Link component type - for custom routing
53
- */
54
- type LinkComponent = ComponentType<{
55
- href: string;
56
- children: ReactNode;
57
- className?: string;
58
- }>;
59
- /**
60
- * Supported social OAuth providers
61
- * These match better-auth's built-in providers
62
- */
63
- type SocialProvider = 'google' | 'github' | 'apple' | 'discord' | 'twitter' | 'facebook' | 'microsoft';
64
- /**
65
- * Toast notification function type
66
- */
67
- type ToastFn = (options: {
68
- title?: string;
69
- description?: string;
70
- variant?: 'default' | 'destructive';
71
- }) => void;
72
- /**
73
- * Auth view paths configuration
74
- */
75
- interface AuthViewPaths {
76
- signIn: string;
77
- signUp: string;
78
- forgotPassword: string;
79
- resetPassword: string;
80
- twoFactor: string;
81
- callback: string;
82
- settings: string;
83
- signOut: string;
84
- }
85
- /**
86
- * Auth UI configuration options
87
- */
88
- interface AuthUIConfig {
89
- /**
90
- * The auth client from createAuthClient()
91
- */
92
- authClient: AuthClient;
93
- /**
94
- * Base path for auth routes
95
- * @default '/auth'
96
- */
97
- basePath?: string;
98
- /**
99
- * URL to redirect to after successful auth
100
- * @default '/'
101
- */
102
- redirectTo?: string;
103
- /**
104
- * Custom navigation function
105
- * @default window.location.href = href
106
- */
107
- navigate?: (href: string) => void;
108
- /**
109
- * Custom Link component for routing
110
- * @default <a href={href}>
111
- */
112
- Link?: LinkComponent;
113
- /**
114
- * Enable social OAuth providers
115
- */
116
- providers?: SocialProvider[];
117
- /**
118
- * Enable forgot password flow
119
- * @default true
120
- */
121
- forgotPassword?: boolean;
122
- /**
123
- * Require name field in sign up
124
- * @default true
125
- */
126
- nameRequired?: boolean;
127
- /**
128
- * Show confirm password field in sign up
129
- * @default false
130
- */
131
- confirmPassword?: boolean;
132
- /**
133
- * Show remember me checkbox in sign in
134
- * @default false
135
- */
136
- rememberMe?: boolean;
137
- /**
138
- * Custom view paths
139
- */
140
- viewPaths?: Partial<AuthViewPaths>;
141
- /**
142
- * Toast notification function
143
- */
144
- toast?: ToastFn;
145
- /**
146
- * Callback after session changes
147
- */
148
- onSessionChange?: () => void | Promise<void>;
149
- }
150
- /**
151
- * Auth UI context value
152
- */
153
- interface AuthUIContextValue extends Required<Omit<AuthUIConfig, 'viewPaths' | 'toast' | 'onSessionChange' | 'providers'>> {
154
- viewPaths: AuthViewPaths;
155
- toast: ToastFn;
156
- onSessionChange?: () => void | Promise<void>;
157
- providers: SocialProvider[];
158
- }
159
-
160
- /**
161
- * Hook to access auth UI context
162
- */
163
- declare function useAuthUI(): AuthUIContextValue;
164
- /**
165
- * Props for AuthUIProvider
166
- */
167
- interface AuthUIProviderProps extends AuthUIConfig {
168
- children: ReactNode;
169
- }
170
- /**
171
- * Auth UI Provider
172
- *
173
- * Provides configuration and utilities to all auth UI components.
174
- *
175
- * @example
176
- * ```tsx
177
- * import { AuthUIProvider } from '@erikey/react/ui';
178
- * import { authClient } from './auth-client';
179
- *
180
- * function App() {
181
- * return (
182
- * <AuthUIProvider
183
- * authClient={authClient}
184
- * navigate={(href) => router.push(href)}
185
- * >
186
- * <YourApp />
187
- * </AuthUIProvider>
188
- * );
189
- * }
190
- * ```
191
- */
192
- declare function AuthUIProvider({ children, authClient, basePath, redirectTo, navigate, Link, providers, forgotPassword, nameRequired, confirmPassword, rememberMe, viewPaths, toast, onSessionChange, }: AuthUIProviderProps): React.JSX.Element;
193
-
194
- interface SignInFormProps {
195
- className?: string;
196
- /**
197
- * URL to redirect to after successful sign in
198
- */
199
- redirectTo?: string;
200
- /**
201
- * Callback after successful sign in
202
- */
203
- onSuccess?: () => void;
204
- /**
205
- * Callback on error
206
- */
207
- onError?: (error: Error) => void;
208
- }
209
- /**
210
- * Sign In Form Component
211
- *
212
- * A complete email/password sign in form with validation and error handling.
213
- *
214
- * @example
215
- * ```tsx
216
- * <SignInForm redirectTo="/dashboard" />
217
- * ```
218
- */
219
- declare function SignInForm({ className, redirectTo, onSuccess, onError }: SignInFormProps): React.JSX.Element;
220
-
221
- interface SignUpFormProps {
222
- className?: string;
223
- /**
224
- * URL to redirect to after successful sign up
225
- */
226
- redirectTo?: string;
227
- /**
228
- * Callback after successful sign up
229
- */
230
- onSuccess?: () => void;
231
- /**
232
- * Callback on error
233
- */
234
- onError?: (error: Error) => void;
235
- }
236
- /**
237
- * Sign Up Form Component
238
- *
239
- * A complete email/password sign up form with validation and error handling.
240
- *
241
- * @example
242
- * ```tsx
243
- * <SignUpForm redirectTo="/onboarding" />
244
- * ```
245
- */
246
- declare function SignUpForm({ className, redirectTo, onSuccess, onError }: SignUpFormProps): React.JSX.Element;
247
-
248
- interface ForgotPasswordFormProps {
249
- className?: string;
250
- /**
251
- * Callback after successful password reset request
252
- */
253
- onSuccess?: () => void;
254
- /**
255
- * Callback on error
256
- */
257
- onError?: (error: Error) => void;
258
- }
259
- /**
260
- * Forgot Password Form Component
261
- *
262
- * Allows users to request a password reset link.
263
- *
264
- * @example
265
- * ```tsx
266
- * <ForgotPasswordForm />
267
- * ```
268
- */
269
- declare function ForgotPasswordForm({ className, onSuccess, onError }: ForgotPasswordFormProps): React.JSX.Element;
270
-
271
- interface ResetPasswordFormProps {
272
- className?: string;
273
- /**
274
- * Reset token from URL
275
- */
276
- token?: string;
277
- /**
278
- * Callback after successful password reset
279
- */
280
- onSuccess?: () => void;
281
- /**
282
- * Callback on error
283
- */
284
- onError?: (error: Error) => void;
285
- }
286
- /**
287
- * Reset Password Form Component
288
- *
289
- * Allows users to set a new password using a reset token.
290
- *
291
- * @example
292
- * ```tsx
293
- * <ResetPasswordForm token={tokenFromUrl} />
294
- * ```
295
- */
296
- declare function ResetPasswordForm({ className, token, onSuccess, onError, }: ResetPasswordFormProps): React.JSX.Element;
297
-
298
- type AuthView = 'sign-in' | 'sign-up' | 'forgot-password' | 'reset-password';
299
- interface AuthCardProps {
300
- className?: string;
301
- /**
302
- * The auth view to display
303
- */
304
- view?: AuthView;
305
- /**
306
- * The current pathname (alternative to view prop)
307
- * Will be parsed to determine the view
308
- */
309
- pathname?: string;
310
- /**
311
- * URL to redirect to after successful auth
312
- */
313
- redirectTo?: string;
314
- /**
315
- * Reset token for password reset view
316
- */
317
- resetToken?: string;
318
- /**
319
- * Callback after successful auth action
320
- */
321
- onSuccess?: () => void;
322
- /**
323
- * Callback on error
324
- */
325
- onError?: (error: Error) => void;
326
- }
327
- /**
328
- * Auth Card Component
329
- *
330
- * A router component that displays the appropriate auth form based on
331
- * the current view or pathname.
332
- *
333
- * @example
334
- * ```tsx
335
- * // Using view prop
336
- * <AuthCard view="sign-in" />
337
- *
338
- * // Using pathname (parsed from URL)
339
- * <AuthCard pathname="/auth/sign-up" />
340
- * ```
341
- */
342
- declare function AuthCard({ className, view, pathname, redirectTo, resetToken, onSuccess, onError, }: AuthCardProps): React.JSX.Element;
343
-
344
- interface SocialAuthButtonsProps {
345
- className?: string;
346
- /**
347
- * Mode affects the button text ("Sign in with X" vs "Sign up with X")
348
- */
349
- mode?: 'sign-in' | 'sign-up';
350
- /**
351
- * Called on successful OAuth
352
- */
353
- onSuccess?: () => void;
354
- /**
355
- * Called on error
356
- */
357
- onError?: (error: Error) => void;
358
- }
359
- /**
360
- * Social Auth Buttons Component
361
- *
362
- * Renders OAuth buttons for configured social providers.
363
- * Gets the list of providers from AuthUIContext.
364
- *
365
- * @example
366
- * ```tsx
367
- * <SocialAuthButtons mode="sign-in" />
368
- * ```
369
- */
370
- declare function SocialAuthButtons({ className, mode, onSuccess, onError, }: SocialAuthButtonsProps): React.JSX.Element | null;
371
-
372
- interface UserAvatarProps {
373
- className?: string;
374
- /**
375
- * User's profile image URL
376
- */
377
- src?: string | null;
378
- /**
379
- * User's name (used for fallback initials)
380
- */
381
- name?: string | null;
382
- /**
383
- * User's email (used for fallback if no name)
384
- */
385
- email?: string | null;
386
- /**
387
- * Size of the avatar
388
- * @default 'md'
389
- */
390
- size?: 'sm' | 'md' | 'lg';
391
- }
392
- /**
393
- * User Avatar Component
394
- *
395
- * Displays a user's profile picture with fallback to initials.
396
- *
397
- * @example
398
- * ```tsx
399
- * <UserAvatar src={user.image} name={user.name} />
400
- * ```
401
- */
402
- declare const UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLSpanElement>>;
403
-
404
- interface UserButtonProps {
405
- className?: string;
406
- /**
407
- * Show settings link in dropdown
408
- * @default true
409
- */
410
- showSettings?: boolean;
411
- /**
412
- * Custom settings URL
413
- */
414
- settingsUrl?: string;
415
- }
416
- /**
417
- * User Button Component
418
- *
419
- * A dropdown button showing the user's avatar with sign out and settings options.
420
- *
421
- * @example
422
- * ```tsx
423
- * <UserButton />
424
- * ```
425
- */
426
- declare function UserButton({ className, showSettings, settingsUrl }: UserButtonProps): React.JSX.Element | null;
427
-
428
- interface UserViewProps {
429
- className?: string;
430
- /**
431
- * Show user's email
432
- * @default true
433
- */
434
- showEmail?: boolean;
435
- }
436
- /**
437
- * User View Component
438
- *
439
- * Displays the current user's avatar and information.
440
- *
441
- * @example
442
- * ```tsx
443
- * <UserView />
444
- * ```
445
- */
446
- declare function UserView({ className, showEmail }: UserViewProps): React.JSX.Element | null;
447
-
448
- interface SignedInProps {
449
- children: ReactNode;
450
- /**
451
- * Fallback to show while session is loading
452
- */
453
- fallback?: ReactNode;
454
- }
455
- /**
456
- * Signed In Component
457
- *
458
- * Only renders children when the user is authenticated.
459
- *
460
- * @example
461
- * ```tsx
462
- * <SignedIn>
463
- * <p>Welcome back!</p>
464
- * <UserButton />
465
- * </SignedIn>
466
- * ```
467
- */
468
- declare function SignedIn({ children, fallback }: SignedInProps): React.JSX.Element | null;
469
-
470
- interface SignedOutProps {
471
- children: ReactNode;
472
- /**
473
- * Fallback to show while session is loading
474
- */
475
- fallback?: ReactNode;
476
- }
477
- /**
478
- * Signed Out Component
479
- *
480
- * Only renders children when the user is NOT authenticated.
481
- *
482
- * @example
483
- * ```tsx
484
- * <SignedOut>
485
- * <Link href="/auth/sign-in">Sign In</Link>
486
- * </SignedOut>
487
- * ```
488
- */
489
- declare function SignedOut({ children, fallback }: SignedOutProps): React.JSX.Element | null;
490
-
491
- interface RedirectToSignInProps {
492
- /**
493
- * Custom redirect URL
494
- */
495
- redirectTo?: string;
496
- }
497
- /**
498
- * Redirect to Sign In Component
499
- *
500
- * Redirects unauthenticated users to the sign in page.
501
- *
502
- * @example
503
- * ```tsx
504
- * <SignedOut>
505
- * <RedirectToSignIn />
506
- * </SignedOut>
507
- * ```
508
- */
509
- declare function RedirectToSignIn({ redirectTo }: RedirectToSignInProps): null;
510
-
511
- interface RedirectToSignUpProps {
512
- /**
513
- * Custom redirect URL
514
- */
515
- redirectTo?: string;
516
- }
517
- /**
518
- * Redirect to Sign Up Component
519
- *
520
- * Redirects users to the sign up page.
521
- *
522
- * @example
523
- * ```tsx
524
- * <RedirectToSignUp />
525
- * ```
526
- */
527
- declare function RedirectToSignUp({ redirectTo }: RedirectToSignUpProps): null;
528
-
529
- interface SettingsCardProps {
530
- className?: string;
531
- title: string;
532
- description?: string;
533
- children: ReactNode;
534
- }
535
- /**
536
- * Settings Card Component
537
- *
538
- * A card wrapper for settings sections.
539
- *
540
- * @example
541
- * ```tsx
542
- * <SettingsCard title="Profile" description="Manage your profile settings">
543
- * <form>...</form>
544
- * </SettingsCard>
545
- * ```
546
- */
547
- declare function SettingsCard({ className, title, description, children }: SettingsCardProps): React.JSX.Element;
548
- interface SettingsCardsProps {
549
- className?: string;
550
- children: ReactNode;
551
- }
552
- /**
553
- * Settings Cards Container
554
- *
555
- * A container for multiple settings cards.
556
- *
557
- * @example
558
- * ```tsx
559
- * <SettingsCards>
560
- * <SettingsCard title="Profile">...</SettingsCard>
561
- * <SettingsCard title="Security">...</SettingsCard>
562
- * </SettingsCards>
563
- * ```
564
- */
565
- declare function SettingsCards({ className, children }: SettingsCardsProps): React.JSX.Element;
566
-
567
- declare const buttonVariants: (props?: ({
568
- variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
569
- size?: "default" | "sm" | "lg" | "icon" | null | undefined;
570
- } & class_variance_authority_types.ClassProp) | undefined) => string;
571
- interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
572
- asChild?: boolean;
573
- }
574
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
575
-
576
- interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
577
- }
578
- declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
579
-
580
- declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
581
-
582
- declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
583
- declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
584
- declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
585
- declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
586
- declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
587
- declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
588
-
589
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
590
-
591
- declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
592
-
593
- /**
594
- * Merge Tailwind CSS classes with proper precedence
595
- */
596
- declare function cn(...inputs: ClassValue[]): string;
597
-
598
- /**
599
- * Email validation schema
600
- */
601
- declare const emailSchema: z.ZodString;
602
- /**
603
- * Password validation schema with configurable constraints
604
- */
605
- declare function createPasswordSchema(options?: {
606
- minLength?: number;
607
- maxLength?: number;
608
- requireUppercase?: boolean;
609
- requireLowercase?: boolean;
610
- requireNumber?: boolean;
611
- requireSpecial?: boolean;
612
- }): z.ZodString;
613
- /**
614
- * Default password schema (8 chars minimum)
615
- */
616
- declare const passwordSchema: z.ZodString;
617
- /**
618
- * Name validation schema
619
- */
620
- declare const nameSchema: z.ZodString;
621
- /**
622
- * Sign in form schema
623
- */
624
- declare const signInSchema: z.ZodObject<{
625
- email: z.ZodString;
626
- password: z.ZodString;
627
- rememberMe: z.ZodOptional<z.ZodBoolean>;
628
- }, "strip", z.ZodTypeAny, {
629
- email: string;
630
- password: string;
631
- rememberMe?: boolean | undefined;
632
- }, {
633
- email: string;
634
- password: string;
635
- rememberMe?: boolean | undefined;
636
- }>;
637
- type SignInFormData = z.infer<typeof signInSchema>;
638
- /**
639
- * Sign up form schema
640
- */
641
- declare const signUpSchema: z.ZodObject<{
642
- name: z.ZodString;
643
- email: z.ZodString;
644
- password: z.ZodString;
645
- }, "strip", z.ZodTypeAny, {
646
- email: string;
647
- password: string;
648
- name: string;
649
- }, {
650
- email: string;
651
- password: string;
652
- name: string;
653
- }>;
654
- type SignUpFormData = z.infer<typeof signUpSchema>;
655
- /**
656
- * Sign up with confirm password schema
657
- */
658
- declare const signUpWithConfirmSchema: z.ZodEffects<z.ZodObject<{
659
- name: z.ZodString;
660
- email: z.ZodString;
661
- password: z.ZodString;
662
- } & {
663
- confirmPassword: z.ZodString;
664
- }, "strip", z.ZodTypeAny, {
665
- confirmPassword: string;
666
- email: string;
667
- password: string;
668
- name: string;
669
- }, {
670
- confirmPassword: string;
671
- email: string;
672
- password: string;
673
- name: string;
674
- }>, {
675
- confirmPassword: string;
676
- email: string;
677
- password: string;
678
- name: string;
679
- }, {
680
- confirmPassword: string;
681
- email: string;
682
- password: string;
683
- name: string;
684
- }>;
685
- type SignUpWithConfirmFormData = z.infer<typeof signUpWithConfirmSchema>;
686
- /**
687
- * Forgot password form schema
688
- */
689
- declare const forgotPasswordSchema: z.ZodObject<{
690
- email: z.ZodString;
691
- }, "strip", z.ZodTypeAny, {
692
- email: string;
693
- }, {
694
- email: string;
695
- }>;
696
- type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
697
- /**
698
- * Reset password form schema
699
- */
700
- declare const resetPasswordSchema: z.ZodEffects<z.ZodObject<{
701
- password: z.ZodString;
702
- confirmPassword: z.ZodString;
703
- }, "strip", z.ZodTypeAny, {
704
- confirmPassword: string;
705
- password: string;
706
- }, {
707
- confirmPassword: string;
708
- password: string;
709
- }>, {
710
- confirmPassword: string;
711
- password: string;
712
- }, {
713
- confirmPassword: string;
714
- password: string;
715
- }>;
716
- type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
717
- /**
718
- * Two-factor authentication schema
719
- */
720
- declare const twoFactorSchema: z.ZodObject<{
721
- code: z.ZodString;
722
- }, "strip", z.ZodTypeAny, {
723
- code: string;
724
- }, {
725
- code: string;
726
- }>;
727
- type TwoFactorFormData = z.infer<typeof twoFactorSchema>;
728
-
729
- 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, SocialAuthButtons, type SocialAuthButtonsProps, 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 };