@pixygon/auth 1.0.0 → 1.1.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.
Files changed (24) hide show
  1. package/README.md +1 -1
  2. package/dist/{chunk-E34M2RJD.mjs → chunk-ELVIBXBG.mjs} +61 -4
  3. package/dist/components/index.d.mts +5 -5
  4. package/dist/components/index.d.ts +5 -5
  5. package/dist/components/index.js +115 -86
  6. package/dist/components/index.mjs +100 -83
  7. package/dist/{index-CIK2MKl9.d.mts → index-CuhQGwDH.d.mts} +32 -3
  8. package/dist/{index-CIK2MKl9.d.ts → index-CuhQGwDH.d.ts} +32 -3
  9. package/dist/index.d.mts +6 -3
  10. package/dist/index.d.ts +6 -3
  11. package/dist/index.js +62 -4
  12. package/dist/index.mjs +3 -1
  13. package/package.json +1 -1
  14. package/src/api/client.ts +34 -1
  15. package/src/components/ForgotPasswordForm.tsx +26 -23
  16. package/src/components/LoginForm.tsx +18 -15
  17. package/src/components/PixygonAuth.tsx +11 -0
  18. package/src/components/RegisterForm.tsx +21 -18
  19. package/src/components/VerifyForm.tsx +19 -16
  20. package/src/hooks/index.ts +2 -0
  21. package/src/index.ts +9 -0
  22. package/src/providers/AuthProvider.tsx +12 -0
  23. package/src/types/index.ts +51 -2
  24. package/src/utils/storage.ts +15 -3
package/dist/components/index.js CHANGED
@@ -31,11 +31,18 @@ module.exports = __toCommonJS(components_exports);
31
31
  // src/components/PixygonAuth.tsx
32
32
  var import_react8 = require("react");
33
33
 
34
- // src/components/LoginForm.tsx
35
- var import_react4 = require("react");
36
-
37
- // src/hooks/index.ts
38
- var import_react3 = require("react");
34
+ // src/types/index.ts
35
+ var DEFAULT_THEME = {
36
+ primaryColor: "#6366f1",
37
+ backgroundColor: "#0f0f0f",
38
+ surfaceColor: "#262626",
39
+ textColor: "#ffffff",
40
+ textSecondary: "#a3a3a3",
41
+ errorColor: "#ef4444",
42
+ successColor: "#22c55e",
43
+ borderRadius: "1rem",
44
+ fontFamily: "inherit"
45
+ };
39
46
 
40
47
  // src/providers/AuthProvider.tsx
41
48
  var import_react = require("react");
@@ -49,6 +56,12 @@ function useAuthContext() {
49
56
  return context;
50
57
  }
51
58
 
59
+ // src/components/LoginForm.tsx
60
+ var import_react4 = require("react");
61
+
62
+ // src/hooks/index.ts
63
+ var import_react3 = require("react");
64
+
52
65
  // src/hooks/useProfileSync.ts
53
66
  var import_react2 = require("react");
54
67
 
@@ -72,6 +85,7 @@ function useAuth() {
72
85
  resendVerification: context.resendVerification,
73
86
  forgotPassword: context.forgotPassword,
74
87
  recoverPassword: context.recoverPassword,
88
+ changePassword: context.changePassword,
75
89
  // Utilities
76
90
  hasRole: context.hasRole
77
91
  }),
@@ -87,8 +101,10 @@ function LoginForm({
87
101
  onNavigateRegister,
88
102
  onNavigateForgotPassword,
89
103
  showBranding = true,
90
- className = ""
104
+ className = "",
105
+ theme
91
106
  }) {
107
+ const t = { ...DEFAULT_THEME, ...theme };
92
108
  const { login, isLoading, error } = useAuth();
93
109
  const [userName, setUserName] = (0, import_react4.useState)("");
94
110
  const [password, setPassword] = (0, import_react4.useState)("");
@@ -119,11 +135,11 @@ function LoginForm({
119
135
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `pixygon-auth-container ${className}`, children: [
120
136
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
121
137
  .pixygon-auth-container {
122
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
123
- background: #0f0f0f;
124
- color: #ffffff;
138
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
139
+ background: ${t.backgroundColor};
140
+ color: ${t.textColor};
125
141
  padding: 2rem;
126
- border-radius: 1rem;
142
+ border-radius: ${t.borderRadius};
127
143
  max-width: 400px;
128
144
  width: 100%;
129
145
  margin: 0 auto;
@@ -149,7 +165,7 @@ function LoginForm({
149
165
 
150
166
  .pixygon-auth-subtitle {
151
167
  font-size: 0.875rem;
152
- color: #a3a3a3;
168
+ color: ${t.textSecondary};
153
169
  margin: 0;
154
170
  }
155
171
 
@@ -168,31 +184,31 @@ function LoginForm({
168
184
  .pixygon-auth-label {
169
185
  font-size: 0.875rem;
170
186
  font-weight: 500;
171
- color: #a3a3a3;
187
+ color: ${t.textSecondary};
172
188
  }
173
189
 
174
190
  .pixygon-auth-input {
175
- background: #262626;
191
+ background: ${t.surfaceColor};
176
192
  border: 1px solid #404040;
177
193
  border-radius: 0.5rem;
178
194
  padding: 0.75rem 1rem;
179
195
  font-size: 1rem;
180
- color: #ffffff;
196
+ color: ${t.textColor};
181
197
  outline: none;
182
198
  transition: border-color 0.2s, box-shadow 0.2s;
183
199
  }
184
200
 
185
201
  .pixygon-auth-input:focus {
186
- border-color: #6366f1;
202
+ border-color: ${t.primaryColor};
187
203
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
188
204
  }
189
205
 
190
206
  .pixygon-auth-input.error {
191
- border-color: #ef4444;
207
+ border-color: ${t.errorColor};
192
208
  }
193
209
 
194
210
  .pixygon-auth-button {
195
- background: #6366f1;
211
+ background: ${t.primaryColor};
196
212
  color: white;
197
213
  border: none;
198
214
  border-radius: 0.5rem;
@@ -219,7 +235,7 @@ function LoginForm({
219
235
 
220
236
  .pixygon-auth-error {
221
237
  background: rgba(239, 68, 68, 0.1);
222
- border: 1px solid #ef4444;
238
+ border: 1px solid ${t.errorColor};
223
239
  border-radius: 0.5rem;
224
240
  padding: 0.75rem 1rem;
225
241
  color: #fca5a5;
@@ -227,7 +243,7 @@ function LoginForm({
227
243
  }
228
244
 
229
245
  .pixygon-auth-link {
230
- color: #6366f1;
246
+ color: ${t.primaryColor};
231
247
  text-decoration: none;
232
248
  font-size: 0.875rem;
233
249
  cursor: pointer;
@@ -246,7 +262,7 @@ function LoginForm({
246
262
  text-align: center;
247
263
  margin-top: 1.5rem;
248
264
  font-size: 0.875rem;
249
- color: #a3a3a3;
265
+ color: ${t.textSecondary};
250
266
  }
251
267
 
252
268
  .pixygon-auth-branding {
@@ -286,7 +302,7 @@ function LoginForm({
286
302
  fill: "none",
287
303
  xmlns: "http://www.w3.org/2000/svg",
288
304
  children: [
289
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
305
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
290
306
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
291
307
  "path",
292
308
  {
@@ -390,8 +406,10 @@ function RegisterForm({
390
406
  onError,
391
407
  onNavigateLogin,
392
408
  showBranding = true,
393
- className = ""
409
+ className = "",
410
+ theme
394
411
  }) {
412
+ const t = { ...DEFAULT_THEME, ...theme };
395
413
  const { register, isLoading, error } = useAuth();
396
414
  const [userName, setUserName] = (0, import_react5.useState)("");
397
415
  const [email, setEmail] = (0, import_react5.useState)("");
@@ -471,11 +489,11 @@ function RegisterForm({
471
489
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `pixygon-auth-container ${className}`, children: [
472
490
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
473
491
  .pixygon-auth-container {
474
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
475
- background: #0f0f0f;
476
- color: #ffffff;
492
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
493
+ background: ${t.backgroundColor};
494
+ color: ${t.textColor};
477
495
  padding: 2rem;
478
- border-radius: 1rem;
496
+ border-radius: ${t.borderRadius};
479
497
  max-width: 400px;
480
498
  width: 100%;
481
499
  margin: 0 auto;
@@ -501,7 +519,7 @@ function RegisterForm({
501
519
 
502
520
  .pixygon-auth-subtitle {
503
521
  font-size: 0.875rem;
504
- color: #a3a3a3;
522
+ color: ${t.textSecondary};
505
523
  margin: 0;
506
524
  }
507
525
 
@@ -520,31 +538,31 @@ function RegisterForm({
520
538
  .pixygon-auth-label {
521
539
  font-size: 0.875rem;
522
540
  font-weight: 500;
523
- color: #a3a3a3;
541
+ color: ${t.textSecondary};
524
542
  }
525
543
 
526
544
  .pixygon-auth-input {
527
- background: #262626;
545
+ background: ${t.surfaceColor};
528
546
  border: 1px solid #404040;
529
547
  border-radius: 0.5rem;
530
548
  padding: 0.75rem 1rem;
531
549
  font-size: 1rem;
532
- color: #ffffff;
550
+ color: ${t.textColor};
533
551
  outline: none;
534
552
  transition: border-color 0.2s, box-shadow 0.2s;
535
553
  }
536
554
 
537
555
  .pixygon-auth-input:focus {
538
- border-color: #6366f1;
556
+ border-color: ${t.primaryColor};
539
557
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
540
558
  }
541
559
 
542
560
  .pixygon-auth-input.error {
543
- border-color: #ef4444;
561
+ border-color: ${t.errorColor};
544
562
  }
545
563
 
546
564
  .pixygon-auth-button {
547
- background: #6366f1;
565
+ background: ${t.primaryColor};
548
566
  color: white;
549
567
  border: none;
550
568
  border-radius: 0.5rem;
@@ -571,7 +589,7 @@ function RegisterForm({
571
589
 
572
590
  .pixygon-auth-error {
573
591
  background: rgba(239, 68, 68, 0.1);
574
- border: 1px solid #ef4444;
592
+ border: 1px solid ${t.errorColor};
575
593
  border-radius: 0.5rem;
576
594
  padding: 0.75rem 1rem;
577
595
  color: #fca5a5;
@@ -579,7 +597,7 @@ function RegisterForm({
579
597
  }
580
598
 
581
599
  .pixygon-auth-link {
582
- color: #6366f1;
600
+ color: ${t.primaryColor};
583
601
  text-decoration: none;
584
602
  font-size: 0.875rem;
585
603
  cursor: pointer;
@@ -598,7 +616,7 @@ function RegisterForm({
598
616
  text-align: center;
599
617
  margin-top: 1.5rem;
600
618
  font-size: 0.875rem;
601
- color: #a3a3a3;
619
+ color: ${t.textSecondary};
602
620
  }
603
621
 
604
622
  .pixygon-auth-branding {
@@ -639,11 +657,11 @@ function RegisterForm({
639
657
  }
640
658
 
641
659
  .pixygon-auth-password-strength-bar.active {
642
- background: #6366f1;
660
+ background: ${t.primaryColor};
643
661
  }
644
662
 
645
663
  .pixygon-auth-password-strength-bar.weak {
646
- background: #ef4444;
664
+ background: ${t.errorColor};
647
665
  }
648
666
 
649
667
  .pixygon-auth-password-strength-bar.fair {
@@ -651,7 +669,7 @@ function RegisterForm({
651
669
  }
652
670
 
653
671
  .pixygon-auth-password-strength-bar.good {
654
- background: #22c55e;
672
+ background: ${t.successColor};
655
673
  }
656
674
 
657
675
  .pixygon-auth-password-strength-bar.strong {
@@ -673,7 +691,7 @@ function RegisterForm({
673
691
  fill: "none",
674
692
  xmlns: "http://www.w3.org/2000/svg",
675
693
  children: [
676
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
694
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
677
695
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
678
696
  "path",
679
697
  {
@@ -814,8 +832,10 @@ function VerifyForm({
814
832
  onError,
815
833
  onNavigateLogin,
816
834
  showBranding = true,
817
- className = ""
835
+ className = "",
836
+ theme
818
837
  }) {
838
+ const t = { ...DEFAULT_THEME, ...theme };
819
839
  const { verify, resendVerification, isLoading, error } = useAuth();
820
840
  const [code, setCode] = (0, import_react6.useState)(["", "", "", "", "", ""]);
821
841
  const [localError, setLocalError] = (0, import_react6.useState)(null);
@@ -912,11 +932,11 @@ function VerifyForm({
912
932
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `pixygon-auth-container ${className}`, children: [
913
933
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
914
934
  .pixygon-auth-container {
915
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
916
- background: #0f0f0f;
917
- color: #ffffff;
935
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
936
+ background: ${t.backgroundColor};
937
+ color: ${t.textColor};
918
938
  padding: 2rem;
919
- border-radius: 1rem;
939
+ border-radius: ${t.borderRadius};
920
940
  max-width: 400px;
921
941
  width: 100%;
922
942
  margin: 0 auto;
@@ -942,7 +962,7 @@ function VerifyForm({
942
962
 
943
963
  .pixygon-auth-subtitle {
944
964
  font-size: 0.875rem;
945
- color: #a3a3a3;
965
+ color: ${t.textSecondary};
946
966
  margin: 0;
947
967
  }
948
968
 
@@ -964,25 +984,25 @@ function VerifyForm({
964
984
  text-align: center;
965
985
  font-size: 1.5rem;
966
986
  font-weight: 600;
967
- background: #262626;
987
+ background: ${t.surfaceColor};
968
988
  border: 1px solid #404040;
969
989
  border-radius: 0.5rem;
970
- color: #ffffff;
990
+ color: ${t.textColor};
971
991
  outline: none;
972
992
  transition: border-color 0.2s, box-shadow 0.2s;
973
993
  }
974
994
 
975
995
  .pixygon-auth-code-input:focus {
976
- border-color: #6366f1;
996
+ border-color: ${t.primaryColor};
977
997
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
978
998
  }
979
999
 
980
1000
  .pixygon-auth-code-input.error {
981
- border-color: #ef4444;
1001
+ border-color: ${t.errorColor};
982
1002
  }
983
1003
 
984
1004
  .pixygon-auth-button {
985
- background: #6366f1;
1005
+ background: ${t.primaryColor};
986
1006
  color: white;
987
1007
  border: none;
988
1008
  border-radius: 0.5rem;
@@ -1008,7 +1028,7 @@ function VerifyForm({
1008
1028
 
1009
1029
  .pixygon-auth-error {
1010
1030
  background: rgba(239, 68, 68, 0.1);
1011
- border: 1px solid #ef4444;
1031
+ border: 1px solid ${t.errorColor};
1012
1032
  border-radius: 0.5rem;
1013
1033
  padding: 0.75rem 1rem;
1014
1034
  color: #fca5a5;
@@ -1017,7 +1037,7 @@ function VerifyForm({
1017
1037
 
1018
1038
  .pixygon-auth-success {
1019
1039
  background: rgba(34, 197, 94, 0.1);
1020
- border: 1px solid #22c55e;
1040
+ border: 1px solid ${t.successColor};
1021
1041
  border-radius: 0.5rem;
1022
1042
  padding: 0.75rem 1rem;
1023
1043
  color: #86efac;
@@ -1025,7 +1045,7 @@ function VerifyForm({
1025
1045
  }
1026
1046
 
1027
1047
  .pixygon-auth-link {
1028
- color: #6366f1;
1048
+ color: ${t.primaryColor};
1029
1049
  text-decoration: none;
1030
1050
  font-size: 0.875rem;
1031
1051
  cursor: pointer;
@@ -1049,7 +1069,7 @@ function VerifyForm({
1049
1069
  text-align: center;
1050
1070
  margin-top: 1.5rem;
1051
1071
  font-size: 0.875rem;
1052
- color: #a3a3a3;
1072
+ color: ${t.textSecondary};
1053
1073
  }
1054
1074
 
1055
1075
  .pixygon-auth-branding {
@@ -1078,7 +1098,7 @@ function VerifyForm({
1078
1098
  .pixygon-auth-resend {
1079
1099
  text-align: center;
1080
1100
  font-size: 0.875rem;
1081
- color: #a3a3a3;
1101
+ color: ${t.textSecondary};
1082
1102
  }
1083
1103
  ` }),
1084
1104
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pixygon-auth-header", children: [
@@ -1090,7 +1110,7 @@ function VerifyForm({
1090
1110
  fill: "none",
1091
1111
  xmlns: "http://www.w3.org/2000/svg",
1092
1112
  children: [
1093
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
1113
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
1094
1114
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1095
1115
  "path",
1096
1116
  {
@@ -1185,8 +1205,10 @@ function ForgotPasswordForm({
1185
1205
  onError,
1186
1206
  onNavigateLogin,
1187
1207
  showBranding = true,
1188
- className = ""
1208
+ className = "",
1209
+ theme
1189
1210
  }) {
1211
+ const t = { ...DEFAULT_THEME, ...theme };
1190
1212
  const { forgotPassword, isLoading, error } = useAuth();
1191
1213
  const [email, setEmail] = (0, import_react7.useState)("");
1192
1214
  const [localError, setLocalError] = (0, import_react7.useState)(null);
@@ -1219,11 +1241,11 @@ function ForgotPasswordForm({
1219
1241
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `pixygon-auth-container ${className}`, children: [
1220
1242
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
1221
1243
  .pixygon-auth-container {
1222
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1223
- background: #0f0f0f;
1224
- color: #ffffff;
1244
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
1245
+ background: ${t.backgroundColor};
1246
+ color: ${t.textColor};
1225
1247
  padding: 2rem;
1226
- border-radius: 1rem;
1248
+ border-radius: ${t.borderRadius};
1227
1249
  max-width: 400px;
1228
1250
  width: 100%;
1229
1251
  margin: 0 auto;
@@ -1249,13 +1271,13 @@ function ForgotPasswordForm({
1249
1271
 
1250
1272
  .pixygon-auth-subtitle {
1251
1273
  font-size: 0.875rem;
1252
- color: #a3a3a3;
1274
+ color: ${t.textSecondary};
1253
1275
  margin: 0;
1254
1276
  line-height: 1.5;
1255
1277
  }
1256
1278
 
1257
1279
  .pixygon-auth-link {
1258
- color: #6366f1;
1280
+ color: ${t.primaryColor};
1259
1281
  text-decoration: none;
1260
1282
  font-size: 0.875rem;
1261
1283
  cursor: pointer;
@@ -1274,7 +1296,7 @@ function ForgotPasswordForm({
1274
1296
  text-align: center;
1275
1297
  margin-top: 1.5rem;
1276
1298
  font-size: 0.875rem;
1277
- color: #a3a3a3;
1299
+ color: ${t.textSecondary};
1278
1300
  }
1279
1301
 
1280
1302
  .pixygon-auth-branding {
@@ -1296,7 +1318,7 @@ function ForgotPasswordForm({
1296
1318
  fill: "none",
1297
1319
  xmlns: "http://www.w3.org/2000/svg",
1298
1320
  children: [
1299
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: "#22c55e" }),
1321
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: t.successColor }),
1300
1322
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1301
1323
  "path",
1302
1324
  {
@@ -1333,11 +1355,11 @@ function ForgotPasswordForm({
1333
1355
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `pixygon-auth-container ${className}`, children: [
1334
1356
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
1335
1357
  .pixygon-auth-container {
1336
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1337
- background: #0f0f0f;
1338
- color: #ffffff;
1358
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
1359
+ background: ${t.backgroundColor};
1360
+ color: ${t.textColor};
1339
1361
  padding: 2rem;
1340
- border-radius: 1rem;
1362
+ border-radius: ${t.borderRadius};
1341
1363
  max-width: 400px;
1342
1364
  width: 100%;
1343
1365
  margin: 0 auto;
@@ -1363,7 +1385,7 @@ function ForgotPasswordForm({
1363
1385
 
1364
1386
  .pixygon-auth-subtitle {
1365
1387
  font-size: 0.875rem;
1366
- color: #a3a3a3;
1388
+ color: ${t.textSecondary};
1367
1389
  margin: 0;
1368
1390
  }
1369
1391
 
@@ -1382,31 +1404,31 @@ function ForgotPasswordForm({
1382
1404
  .pixygon-auth-label {
1383
1405
  font-size: 0.875rem;
1384
1406
  font-weight: 500;
1385
- color: #a3a3a3;
1407
+ color: ${t.textSecondary};
1386
1408
  }
1387
1409
 
1388
1410
  .pixygon-auth-input {
1389
- background: #262626;
1411
+ background: ${t.surfaceColor};
1390
1412
  border: 1px solid #404040;
1391
1413
  border-radius: 0.5rem;
1392
1414
  padding: 0.75rem 1rem;
1393
1415
  font-size: 1rem;
1394
- color: #ffffff;
1416
+ color: ${t.textColor};
1395
1417
  outline: none;
1396
1418
  transition: border-color 0.2s, box-shadow 0.2s;
1397
1419
  }
1398
1420
 
1399
1421
  .pixygon-auth-input:focus {
1400
- border-color: #6366f1;
1422
+ border-color: ${t.primaryColor};
1401
1423
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
1402
1424
  }
1403
1425
 
1404
1426
  .pixygon-auth-input.error {
1405
- border-color: #ef4444;
1427
+ border-color: ${t.errorColor};
1406
1428
  }
1407
1429
 
1408
1430
  .pixygon-auth-button {
1409
- background: #6366f1;
1431
+ background: ${t.primaryColor};
1410
1432
  color: white;
1411
1433
  border: none;
1412
1434
  border-radius: 0.5rem;
@@ -1433,7 +1455,7 @@ function ForgotPasswordForm({
1433
1455
 
1434
1456
  .pixygon-auth-error {
1435
1457
  background: rgba(239, 68, 68, 0.1);
1436
- border: 1px solid #ef4444;
1458
+ border: 1px solid ${t.errorColor};
1437
1459
  border-radius: 0.5rem;
1438
1460
  padding: 0.75rem 1rem;
1439
1461
  color: #fca5a5;
@@ -1441,7 +1463,7 @@ function ForgotPasswordForm({
1441
1463
  }
1442
1464
 
1443
1465
  .pixygon-auth-link {
1444
- color: #6366f1;
1466
+ color: ${t.primaryColor};
1445
1467
  text-decoration: none;
1446
1468
  font-size: 0.875rem;
1447
1469
  cursor: pointer;
@@ -1460,7 +1482,7 @@ function ForgotPasswordForm({
1460
1482
  text-align: center;
1461
1483
  margin-top: 1.5rem;
1462
1484
  font-size: 0.875rem;
1463
- color: #a3a3a3;
1485
+ color: ${t.textSecondary};
1464
1486
  }
1465
1487
 
1466
1488
  .pixygon-auth-branding {
@@ -1495,7 +1517,7 @@ function ForgotPasswordForm({
1495
1517
  fill: "none",
1496
1518
  xmlns: "http://www.w3.org/2000/svg",
1497
1519
  children: [
1498
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
1520
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
1499
1521
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1500
1522
  "path",
1501
1523
  {
@@ -1578,6 +1600,8 @@ function PixygonAuth({
1578
1600
  theme = "dark",
1579
1601
  className = ""
1580
1602
  }) {
1603
+ const { config } = useAuthContext();
1604
+ const mergedTheme = { ...DEFAULT_THEME, ...config.theme };
1581
1605
  const [mode, setMode] = (0, import_react8.useState)(initialMode);
1582
1606
  const [userName, setUserName] = (0, import_react8.useState)(initialUserName || "");
1583
1607
  (0, import_react8.useEffect)(() => {
@@ -1667,7 +1691,8 @@ function PixygonAuth({
1667
1691
  onError: handleError,
1668
1692
  onNavigateRegister: () => handleModeChange("register"),
1669
1693
  onNavigateForgotPassword: () => handleModeChange("forgot-password"),
1670
- showBranding
1694
+ showBranding,
1695
+ theme: mergedTheme
1671
1696
  }
1672
1697
  ),
1673
1698
  mode === "register" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1676,7 +1701,8 @@ function PixygonAuth({
1676
1701
  onSuccess: handleRegisterSuccess,
1677
1702
  onError: handleError,
1678
1703
  onNavigateLogin: () => handleModeChange("login"),
1679
- showBranding
1704
+ showBranding,
1705
+ theme: mergedTheme
1680
1706
  }
1681
1707
  ),
1682
1708
  mode === "verify" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1686,7 +1712,8 @@ function PixygonAuth({
1686
1712
  onSuccess: handleVerifySuccess,
1687
1713
  onError: handleError,
1688
1714
  onNavigateLogin: () => handleModeChange("login"),
1689
- showBranding
1715
+ showBranding,
1716
+ theme: mergedTheme
1690
1717
  }
1691
1718
  ),
1692
1719
  mode === "forgot-password" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1695,7 +1722,8 @@ function PixygonAuth({
1695
1722
  onSuccess: handleForgotPasswordSuccess,
1696
1723
  onError: handleError,
1697
1724
  onNavigateLogin: () => handleModeChange("login"),
1698
- showBranding
1725
+ showBranding,
1726
+ theme: mergedTheme
1699
1727
  }
1700
1728
  ),
1701
1729
  mode === "recover-password" && // Recovery form would go here - handled via email link typically
@@ -1705,7 +1733,8 @@ function PixygonAuth({
1705
1733
  onSuccess: handleForgotPasswordSuccess,
1706
1734
  onError: handleError,
1707
1735
  onNavigateLogin: () => handleModeChange("login"),
1708
- showBranding
1736
+ showBranding,
1737
+ theme: mergedTheme
1709
1738
  }
1710
1739
  )
1711
1740
  ] });