@contentgrowth/content-auth 0.5.4 → 0.5.6

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.
@@ -9,7 +9,7 @@ import {
9
9
  normalizeEmail,
10
10
  schema_exports,
11
11
  verifyTurnstile
12
- } from "../chunk-VZSDOPSD.js";
12
+ } from "../chunk-ZS76KFLV.js";
13
13
  import "../chunk-R5U7XKVJ.js";
14
14
  export {
15
15
  Hono,
@@ -24,7 +24,8 @@ var AuthForm = ({
24
24
  redirectUrl,
25
25
  showName = true,
26
26
  signinUrl,
27
- signupUrl
27
+ signupUrl,
28
+ size = "default"
28
29
  }) => {
29
30
  const [isLogin, setIsLogin] = useState(view !== "signup");
30
31
  const [email, setEmail] = useState(defaultEmail);
@@ -143,7 +144,8 @@ var AuthForm = ({
143
144
  if (width === "compact") widthClass = "ca-width-compact";
144
145
  else if (width === "wide") widthClass = "ca-width-wide";
145
146
  else widthClass = "ca-width-default";
146
- const containerClass = `ca-container ${layout === "split" ? "ca-layout-split" : ""} ${widthClass} ${className || ""}`;
147
+ let sizeClass = size === "small" ? "ca-size-small" : "";
148
+ const containerClass = `ca-container ${layout === "split" ? "ca-layout-split" : ""} ${widthClass} ${sizeClass} ${className || ""}`;
147
149
  const renderTurnstile = () => {
148
150
  if (!turnstileEnabled || isLogin) return null;
149
151
  return /* @__PURE__ */ jsxs("div", { className: "ca-turnstile", children: [
@@ -515,10 +515,7 @@ var createAuth = (config) => {
515
515
  }
516
516
  if (isNewUser) {
517
517
  try {
518
- const result = onSignup(user2);
519
- if (result instanceof Promise) {
520
- result.catch((e) => console.error(`[ContentAuth] onSignup hook failed: ${e.message}`));
521
- }
518
+ await onSignup(user2);
522
519
  } catch (e) {
523
520
  console.error(`[ContentAuth] onSignup hook failed: ${e.message}`);
524
521
  }
@@ -527,10 +524,7 @@ var createAuth = (config) => {
527
524
  if (onSignin) {
528
525
  if (path.includes("/sign-in") || path.includes("/sign-up") || path.includes("/callback")) {
529
526
  try {
530
- const result = onSignin(user2);
531
- if (result instanceof Promise) {
532
- result.catch((e) => console.error(`[ContentAuth] onSignin hook failed: ${e.message}`));
533
- }
527
+ await onSignin(user2);
534
528
  } catch (e) {
535
529
  console.error(`[ContentAuth] onSignin hook failed: ${e.message}`);
536
530
  }
@@ -34,6 +34,8 @@ interface AuthFormProps {
34
34
  signinUrl?: string;
35
35
  /** URL to navigate to for signup (if set, navigates instead of switching mode inline) */
36
36
  signupUrl?: string;
37
+ /** Size variant of the form (default: 'default') */
38
+ size?: 'default' | 'small';
37
39
  }
38
40
  declare const AuthForm: React.FC<AuthFormProps>;
39
41
 
@@ -7,7 +7,7 @@ import {
7
7
  PasswordChanger,
8
8
  ProfileEditor,
9
9
  ResetPasswordForm
10
- } from "../chunk-7QOUBGQS.js";
10
+ } from "../chunk-AHFGJJZD.js";
11
11
  import {
12
12
  authClient,
13
13
  createClient
package/dist/index.js CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  normalizeEmail,
10
10
  schema_exports,
11
11
  verifyTurnstile
12
- } from "./chunk-VZSDOPSD.js";
12
+ } from "./chunk-ZS76KFLV.js";
13
13
  import {
14
14
  AuthForm,
15
15
  CreateOrganizationForm,
@@ -19,7 +19,7 @@ import {
19
19
  PasswordChanger,
20
20
  ProfileEditor,
21
21
  ResetPasswordForm
22
- } from "./chunk-7QOUBGQS.js";
22
+ } from "./chunk-AHFGJJZD.js";
23
23
  import {
24
24
  authClient,
25
25
  createClient
package/dist/styles.css CHANGED
@@ -1,21 +1,96 @@
1
1
  .ca-container {
2
+ /* Default Theme Tokens (Light Mode) */
3
+ --ca-bg: #ffffff;
4
+ --ca-border: #f3f4f6;
5
+ --ca-text-primary: #111827;
6
+ --ca-text-secondary: #374151;
7
+ --ca-text-muted: #6b7280;
8
+ --ca-input-bg: #f9fafb;
9
+ --ca-input-border: #e5e7eb;
10
+ --ca-input-focus-bg: #ffffff;
11
+ --ca-input-focus-border: #3b82f6;
12
+ --ca-input-focus-shadow: rgba(59, 130, 246, 0.1);
13
+ --ca-btn-primary-bg: #111827;
14
+ --ca-btn-primary-text: #ffffff;
15
+ --ca-btn-primary-hover: #1f2937;
16
+ --ca-btn-social-bg: #ffffff;
17
+ --ca-btn-social-text: #374151;
18
+ --ca-btn-social-border: #e5e7eb;
19
+ --ca-btn-social-hover: #f9fafb;
20
+ --ca-divider-color: #e5e7eb;
21
+ --ca-error-bg: #fef2f2;
22
+ --ca-error-text: #ef4444;
23
+ --ca-error-border: #fee2e2;
24
+ --ca-link-color: #2563eb;
25
+ --ca-link-hover: #1d4ed8;
26
+ --ca-success-text: #111827;
27
+
28
+ /* Font Sizes */
29
+ --ca-font-size-title: 1.75rem;
30
+ --ca-font-size-label: 0.875rem;
31
+ --ca-font-size-input: 0.95rem;
32
+ --ca-font-size-button: 0.95rem;
33
+ --ca-font-size-footer: 0.875rem;
34
+
35
+ /* Spacing */
36
+ --ca-spacing-container: 2.5rem;
37
+
2
38
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
3
39
  width: 100%;
4
40
  max-width: 420px;
5
41
  margin: 0 auto;
6
- padding: 2.5rem;
42
+ padding: var(--ca-spacing-container);
7
43
  border-radius: 16px;
8
44
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
9
- background-color: white;
10
- border: 1px solid #f3f4f6;
45
+ background-color: var(--ca-bg);
46
+ border: 1px solid var(--ca-border);
47
+ color: var(--ca-text-primary);
48
+ }
49
+
50
+ .ca-size-small {
51
+ --ca-font-size-title: 1.4rem;
52
+ --ca-font-size-label: 0.8125rem;
53
+ --ca-font-size-input: 0.875rem;
54
+ --ca-font-size-button: 0.875rem;
55
+ --ca-font-size-footer: 0.8125rem;
56
+ --ca-spacing-container: 1.75rem;
57
+ }
58
+
59
+ /* Dark Theme Overrides */
60
+ .dark .ca-container,
61
+ [data-theme='dark'] .ca-container {
62
+ --ca-bg: #111827;
63
+ --ca-border: #1f2937;
64
+ --ca-text-primary: #f9fafb;
65
+ --ca-text-secondary: #e5e7eb;
66
+ --ca-text-muted: #9ca3af;
67
+ --ca-input-bg: #1f2937;
68
+ --ca-input-border: #374151;
69
+ --ca-input-focus-bg: #111827;
70
+ --ca-input-focus-border: #60a5fa;
71
+ --ca-input-focus-shadow: rgba(96, 165, 250, 0.1);
72
+ --ca-btn-primary-bg: #f9fafb;
73
+ --ca-btn-primary-text: #111827;
74
+ --ca-btn-primary-hover: #ffffff;
75
+ --ca-btn-social-bg: #1f2937;
76
+ --ca-btn-social-text: #f9fafb;
77
+ --ca-btn-social-border: #374151;
78
+ --ca-btn-social-hover: #2d3748;
79
+ --ca-divider-color: #374151;
80
+ --ca-error-bg: rgba(239, 68, 68, 0.1);
81
+ --ca-error-text: #f87171;
82
+ --ca-error-border: rgba(239, 68, 68, 0.2);
83
+ --ca-link-color: #60a5fa;
84
+ --ca-link-hover: #93c5fd;
85
+ --ca-success-text: #f9fafb;
11
86
  }
12
87
 
13
88
  .ca-title {
14
- font-size: 1.75rem;
89
+ font-size: var(--ca-font-size-title);
15
90
  font-weight: 700;
16
91
  text-align: center;
17
92
  margin-bottom: 2rem;
18
- color: #111827;
93
+ color: var(--ca-text-primary);
19
94
  letter-spacing: -0.025em;
20
95
  }
21
96
 
@@ -32,11 +107,12 @@
32
107
  }
33
108
 
34
109
  .ca-label {
35
- font-size: 0.875rem;
110
+ font-size: var(--ca-font-size-label);
36
111
  font-weight: 500;
37
- color: #374151;
112
+ color: var(--ca-text-secondary);
38
113
  }
39
114
 
115
+ /* ... keep the rest ... */
40
116
  .ca-label-row {
41
117
  display: flex;
42
118
  justify-content: space-between;
@@ -45,30 +121,31 @@
45
121
 
46
122
  .ca-forgot-link {
47
123
  font-size: 0.8125rem;
48
- color: #2563eb;
124
+ color: var(--ca-link-color);
49
125
  text-decoration: none;
50
126
  font-weight: 500;
51
127
  }
52
128
 
53
129
  .ca-forgot-link:hover {
54
130
  text-decoration: underline;
55
- color: #1d4ed8;
131
+ color: var(--ca-link-hover);
56
132
  }
57
133
 
58
134
  .ca-input {
59
135
  padding: 0.75rem 1rem;
60
136
  border-radius: 8px;
61
- border: 1px solid #e5e7eb;
62
- font-size: 0.95rem;
137
+ border: 1px solid var(--ca-input-border);
138
+ font-size: var(--ca-font-size-input);
63
139
  transition: all 0.2s ease;
64
- background-color: #f9fafb;
140
+ background-color: var(--ca-input-bg);
141
+ color: var(--ca-text-primary);
65
142
  }
66
143
 
67
144
  .ca-input:focus {
68
145
  outline: none;
69
- border-color: #3b82f6;
70
- background-color: white;
71
- box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
146
+ border-color: var(--ca-input-focus-border);
147
+ background-color: var(--ca-input-focus-bg);
148
+ box-shadow: 0 0 0 4px var(--ca-input-focus-shadow);
72
149
  }
73
150
 
74
151
  .ca-button {
@@ -79,7 +156,7 @@
79
156
  border-radius: 8px;
80
157
  border: 1px solid transparent;
81
158
  font-weight: 500;
82
- font-size: 0.95rem;
159
+ font-size: var(--ca-font-size-button);
83
160
  cursor: pointer;
84
161
  transition: all 0.2s ease;
85
162
  gap: 0.5rem;
@@ -87,14 +164,14 @@
87
164
 
88
165
  .ca-button-primary,
89
166
  button[type="submit"] {
90
- background-color: #111827;
91
- color: white;
92
- border: 1px solid #111827;
167
+ background-color: var(--ca-btn-primary-bg);
168
+ color: var(--ca-btn-primary-text);
169
+ border: 1px solid var(--ca-btn-primary-bg);
93
170
  }
94
171
 
95
172
  button[type="submit"]:hover {
96
- background-color: #1f2937;
97
- border-color: #1f2937;
173
+ background-color: var(--ca-btn-primary-hover);
174
+ border-color: var(--ca-btn-primary-hover);
98
175
  transform: translateY(-1px);
99
176
  }
100
177
 
@@ -115,16 +192,15 @@ button[type="submit"]:disabled {
115
192
  }
116
193
 
117
194
  .ca-button-social {
118
- background-color: white;
119
- color: #374151;
120
- border: 1px solid #e5e7eb;
195
+ background-color: var(--ca-btn-social-bg);
196
+ color: var(--ca-btn-social-text);
197
+ border: 1px solid var(--ca-btn-social-border);
121
198
  padding: 0.625rem 1rem;
122
199
  font-weight: 500;
123
200
  }
124
201
 
125
202
  .ca-button-social:hover {
126
- background-color: #f9fafb;
127
- border-color: #d1d5db;
203
+ background-color: var(--ca-btn-social-hover);
128
204
  }
129
205
 
130
206
  .ca-icon {
@@ -145,22 +221,22 @@ button[type="submit"]:disabled {
145
221
  left: 0;
146
222
  right: 0;
147
223
  height: 1px;
148
- background-color: #e5e7eb;
224
+ background-color: var(--ca-divider-color);
149
225
  }
150
226
 
151
227
  .ca-divider-text {
152
228
  position: relative;
153
- background-color: white;
229
+ background-color: var(--ca-bg);
154
230
  padding: 0 0.75rem;
155
- color: #6b7280;
156
- font-size: 0.875rem;
231
+ color: var(--ca-text-muted);
232
+ font-size: var(--ca-font-size-footer);
157
233
  font-weight: 400;
158
234
  }
159
235
 
160
236
  .ca-social-header {
161
- font-size: 0.875rem;
237
+ font-size: var(--ca-font-size-label);
162
238
  font-weight: 500;
163
- color: #374151;
239
+ color: var(--ca-text-secondary);
164
240
  text-align: center;
165
241
  margin-bottom: 1rem;
166
242
  }
@@ -168,12 +244,12 @@ button[type="submit"]:disabled {
168
244
  .ca-footer {
169
245
  margin-top: 2rem;
170
246
  text-align: center;
171
- font-size: 0.875rem;
172
- color: #6b7280;
247
+ font-size: var(--ca-font-size-footer);
248
+ color: var(--ca-text-muted);
173
249
  }
174
250
 
175
251
  .ca-link {
176
- color: #2563eb;
252
+ color: var(--ca-link-color);
177
253
  text-decoration: none;
178
254
  cursor: pointer;
179
255
  background: none;
@@ -185,14 +261,14 @@ button[type="submit"]:disabled {
185
261
 
186
262
  .ca-link:hover {
187
263
  text-decoration: underline;
188
- color: #1d4ed8;
264
+ color: var(--ca-link-hover);
189
265
  }
190
266
 
191
267
  /* Subtitle */
192
268
  .ca-subtitle {
193
269
  text-align: center;
194
- color: #6b7280;
195
- font-size: 0.9375rem;
270
+ color: var(--ca-text-muted);
271
+ font-size: var(--ca-font-size-input);
196
272
  margin-bottom: 1.5rem;
197
273
  line-height: 1.5;
198
274
  }
@@ -211,13 +287,13 @@ button[type="submit"]:disabled {
211
287
  .ca-success-title {
212
288
  font-size: 1.25rem;
213
289
  font-weight: 600;
214
- color: #111827;
290
+ color: var(--ca-success-text);
215
291
  margin-bottom: 0.75rem;
216
292
  }
217
293
 
218
294
  .ca-success-text {
219
- color: #6b7280;
220
- font-size: 0.9375rem;
295
+ color: var(--ca-text-muted);
296
+ font-size: var(--ca-font-size-input);
221
297
  line-height: 1.6;
222
298
  }
223
299
 
@@ -235,24 +311,24 @@ button[type="submit"]:disabled {
235
311
  .ca-error-title {
236
312
  font-size: 1.25rem;
237
313
  font-weight: 600;
238
- color: #111827;
314
+ color: var(--ca-text-primary);
239
315
  margin-bottom: 0.75rem;
240
316
  }
241
317
 
242
318
  .ca-error-text {
243
- color: #6b7280;
244
- font-size: 0.9375rem;
319
+ color: var(--ca-text-muted);
320
+ font-size: var(--ca-font-size-input);
245
321
  line-height: 1.6;
246
322
  }
247
323
 
248
324
  /* Inline Error */
249
325
  .ca-error {
250
- background-color: #fef2f2;
251
- color: #ef4444;
252
- font-size: 0.875rem;
326
+ background-color: var(--ca-error-bg);
327
+ color: var(--ca-error-text);
328
+ font-size: var(--ca-font-size-footer);
253
329
  padding: 0.75rem;
254
330
  border-radius: 6px;
255
- border: 1px solid #fee2e2;
331
+ border: 1px solid var(--ca-error-border);
256
332
  text-align: center;
257
333
  }
258
334
 
@@ -290,10 +366,6 @@ button[type="submit"]:disabled {
290
366
  align-items: stretch;
291
367
  }
292
368
 
293
- .ca-layout-split.ca-container {
294
- /* base styles, width controlled by utility classes */
295
- }
296
-
297
369
  /* Width Variants */
298
370
  .ca-layout-split.ca-width-compact {
299
371
  max-width: 640px !important;
@@ -328,14 +400,14 @@ button[type="submit"]:disabled {
328
400
  bottom: 10%;
329
401
  left: 50%;
330
402
  width: 1px;
331
- background-color: #e5e7eb;
403
+ background-color: var(--ca-divider-color);
332
404
  }
333
405
 
334
406
  .ca-split-divider-text {
335
- background-color: white;
407
+ background-color: var(--ca-bg);
336
408
  padding: 0.5rem 0;
337
- color: #6b7280;
338
- font-size: 0.875rem;
409
+ color: var(--ca-text-muted);
410
+ font-size: var(--ca-font-size-footer);
339
411
  z-index: 1;
340
412
  }
341
413
 
@@ -363,14 +435,14 @@ button[type="submit"]:disabled {
363
435
 
364
436
  .ca-turnstile-hint {
365
437
  font-size: 0.8125rem;
366
- color: #6b7280;
438
+ color: var(--ca-text-muted);
367
439
  text-align: center;
368
440
  margin: 0;
369
441
  }
370
442
 
371
443
  /* Locked Input */
372
444
  .ca-input-locked {
373
- background-color: #f3f4f6;
374
- color: #6b7280;
445
+ background-color: var(--ca-input-bg);
446
+ color: var(--ca-text-muted);
375
447
  cursor: not-allowed;
376
448
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentgrowth/content-auth",
3
- "version": "0.5.4",
3
+ "version": "0.5.6",
4
4
  "description": "Better Auth wrapper with UI components for Cloudflare Workers & Pages. Includes custom schema mapping, Turnstile bot protection, and email normalization.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",