@olwiba/ui 0.0.28 → 0.0.29

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.
Files changed (5) hide show
  1. package/dist/index.d.ts +11 -2
  2. package/dist/index.js +39 -10
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/app/AuthSection.tsx +73 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olwiba/ui",
3
- "version": "0.0.28",
3
+ "version": "0.0.29",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/src/app/AuthSection.tsx CHANGED
@@ -52,53 +52,108 @@ function SplitAuth({ children, panel }: { children: React.ReactNode; panel?: Rea
52
52
  // ─── Shared form slot ─────────────────────────────────────────────────────────
53
53
 
54
54
  export interface AuthFormProps {
55
+ /** Controls form title, fields, and footer text. @default 'signin' */
56
+ mode?: 'signin' | 'signup';
55
57
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
56
58
  onSso?: () => void;
59
+ /** (signin) Link to the sign-up page */
57
60
  signUpHref?: string;
61
+ /** (signup) Link back to the sign-in page */
62
+ signInHref?: string;
58
63
  forgotPasswordHref?: string;
59
64
  brand?: React.ReactNode;
65
+ /** Error message displayed below the form fields */
66
+ error?: string;
67
+ /** Disables the submit button and shows a loading label */
68
+ loading?: boolean;
60
69
  }
61
70
 
62
- function DefaultForm({ onSubmit, onSso, signUpHref = '#', forgotPasswordHref = '#', brand }: AuthFormProps) {
71
+ function DefaultForm({
72
+ mode = 'signin',
73
+ onSubmit,
74
+ onSso,
75
+ signUpHref = '#',
76
+ signInHref = '#',
77
+ forgotPasswordHref = '#',
78
+ brand,
79
+ error,
80
+ loading,
81
+ }: AuthFormProps) {
82
+ const isSignUp = mode === 'signup';
83
+
63
84
  return (
64
85
  <Card className="w-full max-w-md">
65
86
  <CardHeader>
66
87
  {brand && <div className="mb-2">{brand}</div>}
67
- <CardTitle>Sign in</CardTitle>
68
- <CardDescription>Enter your email and password to continue.</CardDescription>
88
+ <CardTitle>{isSignUp ? 'Create an account' : 'Sign in'}</CardTitle>
89
+ <CardDescription>
90
+ {isSignUp
91
+ ? 'Enter your details to create your account.'
92
+ : 'Enter your email and password to continue.'}
93
+ </CardDescription>
69
94
  </CardHeader>
70
95
  <CardContent className="space-y-4">
71
96
  <form onSubmit={onSubmit} className="space-y-4">
97
+ {isSignUp && (
98
+ <div className="space-y-2">
99
+ <Label htmlFor="auth-name">Name</Label>
100
+ <Input id="auth-name" name="name" type="text" placeholder="Your name" autoComplete="name" />
101
+ </div>
102
+ )}
72
103
  <div className="space-y-2">
73
104
  <Label htmlFor="auth-email">Email</Label>
74
- <Input id="auth-email" type="email" placeholder="name@company.com" />
105
+ <Input id="auth-email" name="email" type="email" placeholder="name@company.com" autoComplete="email" />
75
106
  </div>
76
107
  <div className="space-y-2">
77
108
  <div className="flex items-center justify-between">
78
109
  <Label htmlFor="auth-password">Password</Label>
79
- {forgotPasswordHref && (
110
+ {!isSignUp && forgotPasswordHref && (
80
111
  <a className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground" href={forgotPasswordHref}>
81
112
  Forgot password?
82
113
  </a>
83
114
  )}
84
115
  </div>
85
- <Input id="auth-password" type="password" placeholder="••••••••" />
116
+ <Input
117
+ id="auth-password"
118
+ name="password"
119
+ type="password"
120
+ placeholder="••••••••"
121
+ autoComplete={isSignUp ? 'new-password' : 'current-password'}
122
+ />
86
123
  </div>
124
+ {error && (
125
+ <p className="text-sm font-medium text-destructive">{error}</p>
126
+ )}
87
127
  <div className="flex flex-col gap-2">
88
- <Button type="submit" className="w-full">Continue</Button>
128
+ <Button type="submit" className="w-full" disabled={loading}>
129
+ {loading ? 'Please wait…' : isSignUp ? 'Create account' : 'Sign in'}
130
+ </Button>
89
131
  {onSso && (
90
- <Button type="button" variant="outline" className="w-full" onClick={onSso}>Use SSO</Button>
132
+ <Button type="button" variant="outline" className="w-full" onClick={onSso} disabled={loading}>
133
+ Use SSO
134
+ </Button>
91
135
  )}
92
136
  </div>
93
137
  </form>
94
- {signUpHref && (
95
- <p className="text-center text-xs text-muted-foreground">
96
- New here?{' '}
97
- <a className="text-foreground underline underline-offset-4" href={signUpHref}>
98
- Create an account
99
- </a>
100
- </p>
101
- )}
138
+ <p className="text-center text-xs text-muted-foreground">
139
+ {isSignUp ? (
140
+ <>
141
+ Already have an account?{' '}
142
+ <a className="text-foreground underline underline-offset-4" href={signInHref}>
143
+ Sign in
144
+ </a>
145
+ </>
146
+ ) : (
147
+ signUpHref && (
148
+ <>
149
+ New here?{' '}
150
+ <a className="text-foreground underline underline-offset-4" href={signUpHref}>
151
+ Create an account
152
+ </a>
153
+ </>
154
+ )
155
+ )}
156
+ </p>
102
157
  </CardContent>
103
158
  </Card>
104
159
  );
@@ -107,9 +162,9 @@ function DefaultForm({ onSubmit, onSso, signUpHref = '#', forgotPasswordHref = '
107
162
  // ─── Public API ───────────────────────────────────────────────────────────────
108
163
 
109
164
  export interface AuthSectionProps extends AuthFormProps {
110
- /** Visual layout of the auth screen */
165
+ /** Visual layout of the auth screen. @default 'centered' */
111
166
  layout?: 'centered' | 'split';
112
- /** Custom form/card content. Defaults to the built-in sign-in form. */
167
+ /** Custom form/card content. Defaults to the built-in form. */
113
168
  children?: React.ReactNode;
114
169
  /** (split layout only) Custom content for the left decorative panel */
115
170
  panel?: React.ReactNode;