@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.mjs CHANGED
@@ -1,6 +1,8 @@
1
1
  import {
2
- useAuth
3
- } from "../chunk-E34M2RJD.mjs";
2
+ DEFAULT_THEME,
3
+ useAuth,
4
+ useAuthContext
5
+ } from "../chunk-ELVIBXBG.mjs";
4
6
 
5
7
  // src/components/PixygonAuth.tsx
6
8
  import { useState as useState5, useCallback as useCallback5, useEffect as useEffect2 } from "react";
@@ -14,8 +16,10 @@ function LoginForm({
14
16
  onNavigateRegister,
15
17
  onNavigateForgotPassword,
16
18
  showBranding = true,
17
- className = ""
19
+ className = "",
20
+ theme
18
21
  }) {
22
+ const t = { ...DEFAULT_THEME, ...theme };
19
23
  const { login, isLoading, error } = useAuth();
20
24
  const [userName, setUserName] = useState("");
21
25
  const [password, setPassword] = useState("");
@@ -46,11 +50,11 @@ function LoginForm({
46
50
  return /* @__PURE__ */ jsxs("div", { className: `pixygon-auth-container ${className}`, children: [
47
51
  /* @__PURE__ */ jsx("style", { children: `
48
52
  .pixygon-auth-container {
49
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
50
- background: #0f0f0f;
51
- color: #ffffff;
53
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
54
+ background: ${t.backgroundColor};
55
+ color: ${t.textColor};
52
56
  padding: 2rem;
53
- border-radius: 1rem;
57
+ border-radius: ${t.borderRadius};
54
58
  max-width: 400px;
55
59
  width: 100%;
56
60
  margin: 0 auto;
@@ -76,7 +80,7 @@ function LoginForm({
76
80
 
77
81
  .pixygon-auth-subtitle {
78
82
  font-size: 0.875rem;
79
- color: #a3a3a3;
83
+ color: ${t.textSecondary};
80
84
  margin: 0;
81
85
  }
82
86
 
@@ -95,31 +99,31 @@ function LoginForm({
95
99
  .pixygon-auth-label {
96
100
  font-size: 0.875rem;
97
101
  font-weight: 500;
98
- color: #a3a3a3;
102
+ color: ${t.textSecondary};
99
103
  }
100
104
 
101
105
  .pixygon-auth-input {
102
- background: #262626;
106
+ background: ${t.surfaceColor};
103
107
  border: 1px solid #404040;
104
108
  border-radius: 0.5rem;
105
109
  padding: 0.75rem 1rem;
106
110
  font-size: 1rem;
107
- color: #ffffff;
111
+ color: ${t.textColor};
108
112
  outline: none;
109
113
  transition: border-color 0.2s, box-shadow 0.2s;
110
114
  }
111
115
 
112
116
  .pixygon-auth-input:focus {
113
- border-color: #6366f1;
117
+ border-color: ${t.primaryColor};
114
118
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
115
119
  }
116
120
 
117
121
  .pixygon-auth-input.error {
118
- border-color: #ef4444;
122
+ border-color: ${t.errorColor};
119
123
  }
120
124
 
121
125
  .pixygon-auth-button {
122
- background: #6366f1;
126
+ background: ${t.primaryColor};
123
127
  color: white;
124
128
  border: none;
125
129
  border-radius: 0.5rem;
@@ -146,7 +150,7 @@ function LoginForm({
146
150
 
147
151
  .pixygon-auth-error {
148
152
  background: rgba(239, 68, 68, 0.1);
149
- border: 1px solid #ef4444;
153
+ border: 1px solid ${t.errorColor};
150
154
  border-radius: 0.5rem;
151
155
  padding: 0.75rem 1rem;
152
156
  color: #fca5a5;
@@ -154,7 +158,7 @@ function LoginForm({
154
158
  }
155
159
 
156
160
  .pixygon-auth-link {
157
- color: #6366f1;
161
+ color: ${t.primaryColor};
158
162
  text-decoration: none;
159
163
  font-size: 0.875rem;
160
164
  cursor: pointer;
@@ -173,7 +177,7 @@ function LoginForm({
173
177
  text-align: center;
174
178
  margin-top: 1.5rem;
175
179
  font-size: 0.875rem;
176
- color: #a3a3a3;
180
+ color: ${t.textSecondary};
177
181
  }
178
182
 
179
183
  .pixygon-auth-branding {
@@ -213,7 +217,7 @@ function LoginForm({
213
217
  fill: "none",
214
218
  xmlns: "http://www.w3.org/2000/svg",
215
219
  children: [
216
- /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
220
+ /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
217
221
  /* @__PURE__ */ jsx(
218
222
  "path",
219
223
  {
@@ -317,8 +321,10 @@ function RegisterForm({
317
321
  onError,
318
322
  onNavigateLogin,
319
323
  showBranding = true,
320
- className = ""
324
+ className = "",
325
+ theme
321
326
  }) {
327
+ const t = { ...DEFAULT_THEME, ...theme };
322
328
  const { register, isLoading, error } = useAuth();
323
329
  const [userName, setUserName] = useState2("");
324
330
  const [email, setEmail] = useState2("");
@@ -398,11 +404,11 @@ function RegisterForm({
398
404
  return /* @__PURE__ */ jsxs2("div", { className: `pixygon-auth-container ${className}`, children: [
399
405
  /* @__PURE__ */ jsx2("style", { children: `
400
406
  .pixygon-auth-container {
401
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
402
- background: #0f0f0f;
403
- color: #ffffff;
407
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
408
+ background: ${t.backgroundColor};
409
+ color: ${t.textColor};
404
410
  padding: 2rem;
405
- border-radius: 1rem;
411
+ border-radius: ${t.borderRadius};
406
412
  max-width: 400px;
407
413
  width: 100%;
408
414
  margin: 0 auto;
@@ -428,7 +434,7 @@ function RegisterForm({
428
434
 
429
435
  .pixygon-auth-subtitle {
430
436
  font-size: 0.875rem;
431
- color: #a3a3a3;
437
+ color: ${t.textSecondary};
432
438
  margin: 0;
433
439
  }
434
440
 
@@ -447,31 +453,31 @@ function RegisterForm({
447
453
  .pixygon-auth-label {
448
454
  font-size: 0.875rem;
449
455
  font-weight: 500;
450
- color: #a3a3a3;
456
+ color: ${t.textSecondary};
451
457
  }
452
458
 
453
459
  .pixygon-auth-input {
454
- background: #262626;
460
+ background: ${t.surfaceColor};
455
461
  border: 1px solid #404040;
456
462
  border-radius: 0.5rem;
457
463
  padding: 0.75rem 1rem;
458
464
  font-size: 1rem;
459
- color: #ffffff;
465
+ color: ${t.textColor};
460
466
  outline: none;
461
467
  transition: border-color 0.2s, box-shadow 0.2s;
462
468
  }
463
469
 
464
470
  .pixygon-auth-input:focus {
465
- border-color: #6366f1;
471
+ border-color: ${t.primaryColor};
466
472
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
467
473
  }
468
474
 
469
475
  .pixygon-auth-input.error {
470
- border-color: #ef4444;
476
+ border-color: ${t.errorColor};
471
477
  }
472
478
 
473
479
  .pixygon-auth-button {
474
- background: #6366f1;
480
+ background: ${t.primaryColor};
475
481
  color: white;
476
482
  border: none;
477
483
  border-radius: 0.5rem;
@@ -498,7 +504,7 @@ function RegisterForm({
498
504
 
499
505
  .pixygon-auth-error {
500
506
  background: rgba(239, 68, 68, 0.1);
501
- border: 1px solid #ef4444;
507
+ border: 1px solid ${t.errorColor};
502
508
  border-radius: 0.5rem;
503
509
  padding: 0.75rem 1rem;
504
510
  color: #fca5a5;
@@ -506,7 +512,7 @@ function RegisterForm({
506
512
  }
507
513
 
508
514
  .pixygon-auth-link {
509
- color: #6366f1;
515
+ color: ${t.primaryColor};
510
516
  text-decoration: none;
511
517
  font-size: 0.875rem;
512
518
  cursor: pointer;
@@ -525,7 +531,7 @@ function RegisterForm({
525
531
  text-align: center;
526
532
  margin-top: 1.5rem;
527
533
  font-size: 0.875rem;
528
- color: #a3a3a3;
534
+ color: ${t.textSecondary};
529
535
  }
530
536
 
531
537
  .pixygon-auth-branding {
@@ -566,11 +572,11 @@ function RegisterForm({
566
572
  }
567
573
 
568
574
  .pixygon-auth-password-strength-bar.active {
569
- background: #6366f1;
575
+ background: ${t.primaryColor};
570
576
  }
571
577
 
572
578
  .pixygon-auth-password-strength-bar.weak {
573
- background: #ef4444;
579
+ background: ${t.errorColor};
574
580
  }
575
581
 
576
582
  .pixygon-auth-password-strength-bar.fair {
@@ -578,7 +584,7 @@ function RegisterForm({
578
584
  }
579
585
 
580
586
  .pixygon-auth-password-strength-bar.good {
581
- background: #22c55e;
587
+ background: ${t.successColor};
582
588
  }
583
589
 
584
590
  .pixygon-auth-password-strength-bar.strong {
@@ -600,7 +606,7 @@ function RegisterForm({
600
606
  fill: "none",
601
607
  xmlns: "http://www.w3.org/2000/svg",
602
608
  children: [
603
- /* @__PURE__ */ jsx2("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
609
+ /* @__PURE__ */ jsx2("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
604
610
  /* @__PURE__ */ jsx2(
605
611
  "path",
606
612
  {
@@ -741,8 +747,10 @@ function VerifyForm({
741
747
  onError,
742
748
  onNavigateLogin,
743
749
  showBranding = true,
744
- className = ""
750
+ className = "",
751
+ theme
745
752
  }) {
753
+ const t = { ...DEFAULT_THEME, ...theme };
746
754
  const { verify, resendVerification, isLoading, error } = useAuth();
747
755
  const [code, setCode] = useState3(["", "", "", "", "", ""]);
748
756
  const [localError, setLocalError] = useState3(null);
@@ -839,11 +847,11 @@ function VerifyForm({
839
847
  return /* @__PURE__ */ jsxs3("div", { className: `pixygon-auth-container ${className}`, children: [
840
848
  /* @__PURE__ */ jsx3("style", { children: `
841
849
  .pixygon-auth-container {
842
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
843
- background: #0f0f0f;
844
- color: #ffffff;
850
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
851
+ background: ${t.backgroundColor};
852
+ color: ${t.textColor};
845
853
  padding: 2rem;
846
- border-radius: 1rem;
854
+ border-radius: ${t.borderRadius};
847
855
  max-width: 400px;
848
856
  width: 100%;
849
857
  margin: 0 auto;
@@ -869,7 +877,7 @@ function VerifyForm({
869
877
 
870
878
  .pixygon-auth-subtitle {
871
879
  font-size: 0.875rem;
872
- color: #a3a3a3;
880
+ color: ${t.textSecondary};
873
881
  margin: 0;
874
882
  }
875
883
 
@@ -891,25 +899,25 @@ function VerifyForm({
891
899
  text-align: center;
892
900
  font-size: 1.5rem;
893
901
  font-weight: 600;
894
- background: #262626;
902
+ background: ${t.surfaceColor};
895
903
  border: 1px solid #404040;
896
904
  border-radius: 0.5rem;
897
- color: #ffffff;
905
+ color: ${t.textColor};
898
906
  outline: none;
899
907
  transition: border-color 0.2s, box-shadow 0.2s;
900
908
  }
901
909
 
902
910
  .pixygon-auth-code-input:focus {
903
- border-color: #6366f1;
911
+ border-color: ${t.primaryColor};
904
912
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
905
913
  }
906
914
 
907
915
  .pixygon-auth-code-input.error {
908
- border-color: #ef4444;
916
+ border-color: ${t.errorColor};
909
917
  }
910
918
 
911
919
  .pixygon-auth-button {
912
- background: #6366f1;
920
+ background: ${t.primaryColor};
913
921
  color: white;
914
922
  border: none;
915
923
  border-radius: 0.5rem;
@@ -935,7 +943,7 @@ function VerifyForm({
935
943
 
936
944
  .pixygon-auth-error {
937
945
  background: rgba(239, 68, 68, 0.1);
938
- border: 1px solid #ef4444;
946
+ border: 1px solid ${t.errorColor};
939
947
  border-radius: 0.5rem;
940
948
  padding: 0.75rem 1rem;
941
949
  color: #fca5a5;
@@ -944,7 +952,7 @@ function VerifyForm({
944
952
 
945
953
  .pixygon-auth-success {
946
954
  background: rgba(34, 197, 94, 0.1);
947
- border: 1px solid #22c55e;
955
+ border: 1px solid ${t.successColor};
948
956
  border-radius: 0.5rem;
949
957
  padding: 0.75rem 1rem;
950
958
  color: #86efac;
@@ -952,7 +960,7 @@ function VerifyForm({
952
960
  }
953
961
 
954
962
  .pixygon-auth-link {
955
- color: #6366f1;
963
+ color: ${t.primaryColor};
956
964
  text-decoration: none;
957
965
  font-size: 0.875rem;
958
966
  cursor: pointer;
@@ -976,7 +984,7 @@ function VerifyForm({
976
984
  text-align: center;
977
985
  margin-top: 1.5rem;
978
986
  font-size: 0.875rem;
979
- color: #a3a3a3;
987
+ color: ${t.textSecondary};
980
988
  }
981
989
 
982
990
  .pixygon-auth-branding {
@@ -1005,7 +1013,7 @@ function VerifyForm({
1005
1013
  .pixygon-auth-resend {
1006
1014
  text-align: center;
1007
1015
  font-size: 0.875rem;
1008
- color: #a3a3a3;
1016
+ color: ${t.textSecondary};
1009
1017
  }
1010
1018
  ` }),
1011
1019
  /* @__PURE__ */ jsxs3("div", { className: "pixygon-auth-header", children: [
@@ -1017,7 +1025,7 @@ function VerifyForm({
1017
1025
  fill: "none",
1018
1026
  xmlns: "http://www.w3.org/2000/svg",
1019
1027
  children: [
1020
- /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
1028
+ /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
1021
1029
  /* @__PURE__ */ jsx3(
1022
1030
  "path",
1023
1031
  {
@@ -1112,8 +1120,10 @@ function ForgotPasswordForm({
1112
1120
  onError,
1113
1121
  onNavigateLogin,
1114
1122
  showBranding = true,
1115
- className = ""
1123
+ className = "",
1124
+ theme
1116
1125
  }) {
1126
+ const t = { ...DEFAULT_THEME, ...theme };
1117
1127
  const { forgotPassword, isLoading, error } = useAuth();
1118
1128
  const [email, setEmail] = useState4("");
1119
1129
  const [localError, setLocalError] = useState4(null);
@@ -1146,11 +1156,11 @@ function ForgotPasswordForm({
1146
1156
  return /* @__PURE__ */ jsxs4("div", { className: `pixygon-auth-container ${className}`, children: [
1147
1157
  /* @__PURE__ */ jsx4("style", { children: `
1148
1158
  .pixygon-auth-container {
1149
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1150
- background: #0f0f0f;
1151
- color: #ffffff;
1159
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
1160
+ background: ${t.backgroundColor};
1161
+ color: ${t.textColor};
1152
1162
  padding: 2rem;
1153
- border-radius: 1rem;
1163
+ border-radius: ${t.borderRadius};
1154
1164
  max-width: 400px;
1155
1165
  width: 100%;
1156
1166
  margin: 0 auto;
@@ -1176,13 +1186,13 @@ function ForgotPasswordForm({
1176
1186
 
1177
1187
  .pixygon-auth-subtitle {
1178
1188
  font-size: 0.875rem;
1179
- color: #a3a3a3;
1189
+ color: ${t.textSecondary};
1180
1190
  margin: 0;
1181
1191
  line-height: 1.5;
1182
1192
  }
1183
1193
 
1184
1194
  .pixygon-auth-link {
1185
- color: #6366f1;
1195
+ color: ${t.primaryColor};
1186
1196
  text-decoration: none;
1187
1197
  font-size: 0.875rem;
1188
1198
  cursor: pointer;
@@ -1201,7 +1211,7 @@ function ForgotPasswordForm({
1201
1211
  text-align: center;
1202
1212
  margin-top: 1.5rem;
1203
1213
  font-size: 0.875rem;
1204
- color: #a3a3a3;
1214
+ color: ${t.textSecondary};
1205
1215
  }
1206
1216
 
1207
1217
  .pixygon-auth-branding {
@@ -1223,7 +1233,7 @@ function ForgotPasswordForm({
1223
1233
  fill: "none",
1224
1234
  xmlns: "http://www.w3.org/2000/svg",
1225
1235
  children: [
1226
- /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: "#22c55e" }),
1236
+ /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: t.successColor }),
1227
1237
  /* @__PURE__ */ jsx4(
1228
1238
  "path",
1229
1239
  {
@@ -1260,11 +1270,11 @@ function ForgotPasswordForm({
1260
1270
  return /* @__PURE__ */ jsxs4("div", { className: `pixygon-auth-container ${className}`, children: [
1261
1271
  /* @__PURE__ */ jsx4("style", { children: `
1262
1272
  .pixygon-auth-container {
1263
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1264
- background: #0f0f0f;
1265
- color: #ffffff;
1273
+ font-family: ${t.fontFamily === "inherit" ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
1274
+ background: ${t.backgroundColor};
1275
+ color: ${t.textColor};
1266
1276
  padding: 2rem;
1267
- border-radius: 1rem;
1277
+ border-radius: ${t.borderRadius};
1268
1278
  max-width: 400px;
1269
1279
  width: 100%;
1270
1280
  margin: 0 auto;
@@ -1290,7 +1300,7 @@ function ForgotPasswordForm({
1290
1300
 
1291
1301
  .pixygon-auth-subtitle {
1292
1302
  font-size: 0.875rem;
1293
- color: #a3a3a3;
1303
+ color: ${t.textSecondary};
1294
1304
  margin: 0;
1295
1305
  }
1296
1306
 
@@ -1309,31 +1319,31 @@ function ForgotPasswordForm({
1309
1319
  .pixygon-auth-label {
1310
1320
  font-size: 0.875rem;
1311
1321
  font-weight: 500;
1312
- color: #a3a3a3;
1322
+ color: ${t.textSecondary};
1313
1323
  }
1314
1324
 
1315
1325
  .pixygon-auth-input {
1316
- background: #262626;
1326
+ background: ${t.surfaceColor};
1317
1327
  border: 1px solid #404040;
1318
1328
  border-radius: 0.5rem;
1319
1329
  padding: 0.75rem 1rem;
1320
1330
  font-size: 1rem;
1321
- color: #ffffff;
1331
+ color: ${t.textColor};
1322
1332
  outline: none;
1323
1333
  transition: border-color 0.2s, box-shadow 0.2s;
1324
1334
  }
1325
1335
 
1326
1336
  .pixygon-auth-input:focus {
1327
- border-color: #6366f1;
1337
+ border-color: ${t.primaryColor};
1328
1338
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
1329
1339
  }
1330
1340
 
1331
1341
  .pixygon-auth-input.error {
1332
- border-color: #ef4444;
1342
+ border-color: ${t.errorColor};
1333
1343
  }
1334
1344
 
1335
1345
  .pixygon-auth-button {
1336
- background: #6366f1;
1346
+ background: ${t.primaryColor};
1337
1347
  color: white;
1338
1348
  border: none;
1339
1349
  border-radius: 0.5rem;
@@ -1360,7 +1370,7 @@ function ForgotPasswordForm({
1360
1370
 
1361
1371
  .pixygon-auth-error {
1362
1372
  background: rgba(239, 68, 68, 0.1);
1363
- border: 1px solid #ef4444;
1373
+ border: 1px solid ${t.errorColor};
1364
1374
  border-radius: 0.5rem;
1365
1375
  padding: 0.75rem 1rem;
1366
1376
  color: #fca5a5;
@@ -1368,7 +1378,7 @@ function ForgotPasswordForm({
1368
1378
  }
1369
1379
 
1370
1380
  .pixygon-auth-link {
1371
- color: #6366f1;
1381
+ color: ${t.primaryColor};
1372
1382
  text-decoration: none;
1373
1383
  font-size: 0.875rem;
1374
1384
  cursor: pointer;
@@ -1387,7 +1397,7 @@ function ForgotPasswordForm({
1387
1397
  text-align: center;
1388
1398
  margin-top: 1.5rem;
1389
1399
  font-size: 0.875rem;
1390
- color: #a3a3a3;
1400
+ color: ${t.textSecondary};
1391
1401
  }
1392
1402
 
1393
1403
  .pixygon-auth-branding {
@@ -1422,7 +1432,7 @@ function ForgotPasswordForm({
1422
1432
  fill: "none",
1423
1433
  xmlns: "http://www.w3.org/2000/svg",
1424
1434
  children: [
1425
- /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
1435
+ /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: t.primaryColor }),
1426
1436
  /* @__PURE__ */ jsx4(
1427
1437
  "path",
1428
1438
  {
@@ -1505,6 +1515,8 @@ function PixygonAuth({
1505
1515
  theme = "dark",
1506
1516
  className = ""
1507
1517
  }) {
1518
+ const { config } = useAuthContext();
1519
+ const mergedTheme = { ...DEFAULT_THEME, ...config.theme };
1508
1520
  const [mode, setMode] = useState5(initialMode);
1509
1521
  const [userName, setUserName] = useState5(initialUserName || "");
1510
1522
  useEffect2(() => {
@@ -1594,7 +1606,8 @@ function PixygonAuth({
1594
1606
  onError: handleError,
1595
1607
  onNavigateRegister: () => handleModeChange("register"),
1596
1608
  onNavigateForgotPassword: () => handleModeChange("forgot-password"),
1597
- showBranding
1609
+ showBranding,
1610
+ theme: mergedTheme
1598
1611
  }
1599
1612
  ),
1600
1613
  mode === "register" && /* @__PURE__ */ jsx5(
@@ -1603,7 +1616,8 @@ function PixygonAuth({
1603
1616
  onSuccess: handleRegisterSuccess,
1604
1617
  onError: handleError,
1605
1618
  onNavigateLogin: () => handleModeChange("login"),
1606
- showBranding
1619
+ showBranding,
1620
+ theme: mergedTheme
1607
1621
  }
1608
1622
  ),
1609
1623
  mode === "verify" && /* @__PURE__ */ jsx5(
@@ -1613,7 +1627,8 @@ function PixygonAuth({
1613
1627
  onSuccess: handleVerifySuccess,
1614
1628
  onError: handleError,
1615
1629
  onNavigateLogin: () => handleModeChange("login"),
1616
- showBranding
1630
+ showBranding,
1631
+ theme: mergedTheme
1617
1632
  }
1618
1633
  ),
1619
1634
  mode === "forgot-password" && /* @__PURE__ */ jsx5(
@@ -1622,7 +1637,8 @@ function PixygonAuth({
1622
1637
  onSuccess: handleForgotPasswordSuccess,
1623
1638
  onError: handleError,
1624
1639
  onNavigateLogin: () => handleModeChange("login"),
1625
- showBranding
1640
+ showBranding,
1641
+ theme: mergedTheme
1626
1642
  }
1627
1643
  ),
1628
1644
  mode === "recover-password" && // Recovery form would go here - handled via email link typically
@@ -1632,7 +1648,8 @@ function PixygonAuth({
1632
1648
  onSuccess: handleForgotPasswordSuccess,
1633
1649
  onError: handleError,
1634
1650
  onNavigateLogin: () => handleModeChange("login"),
1635
- showBranding
1651
+ showBranding,
1652
+ theme: mergedTheme
1636
1653
  }
1637
1654
  )
1638
1655
  ] });
package/dist/{index-CIK2MKl9.d.mts → index-CuhQGwDH.d.mts} RENAMED
@@ -3,7 +3,7 @@
3
3
  * Type definitions for the Pixygon authentication system
4
4
  */
5
5
  type UserRole = 'user' | 'creator' | 'admin' | 'superadmin';
6
- type SubscriptionTier = 'free' | 'basic' | 'pro' | 'family' | 'enterprise';
6
+ type SubscriptionTier = 'free' | 'plus' | 'family' | 'basic' | 'pro' | 'enterprise';
7
7
  interface User {
8
8
  _id: string;
9
9
  userName: string;
@@ -107,14 +107,36 @@ interface ResendVerificationRequest {
107
107
  interface ResendVerificationResponse {
108
108
  message: string;
109
109
  }
110
+ interface ChangePasswordRequest {
111
+ currentPassword: string;
112
+ newPassword: string;
113
+ }
114
+ interface ChangePasswordResponse {
115
+ status: string;
116
+ }
117
+ interface LogoutResponse {
118
+ status: string;
119
+ }
110
120
  type AuthErrorCode = 'INVALID_CREDENTIALS' | 'USER_NOT_FOUND' | 'USER_EXISTS' | 'EMAIL_NOT_VERIFIED' | 'INVALID_VERIFICATION_CODE' | 'EXPIRED_VERIFICATION_CODE' | 'INVALID_RECOVERY_CODE' | 'EXPIRED_RECOVERY_CODE' | 'TOKEN_EXPIRED' | 'TOKEN_INVALID' | 'REFRESH_TOKEN_EXPIRED' | 'NETWORK_ERROR' | 'SERVER_ERROR' | 'UNKNOWN_ERROR';
111
121
  interface AuthError {
112
122
  code: AuthErrorCode;
113
123
  message: string;
114
124
  details?: Record<string, unknown>;
115
125
  }
126
+ interface AuthTheme {
127
+ primaryColor?: string;
128
+ backgroundColor?: string;
129
+ surfaceColor?: string;
130
+ textColor?: string;
131
+ textSecondary?: string;
132
+ errorColor?: string;
133
+ successColor?: string;
134
+ borderRadius?: string;
135
+ fontFamily?: string;
136
+ }
137
+ declare const DEFAULT_THEME: Required<AuthTheme>;
116
138
  interface AuthConfig {
117
- /** Base URL for the auth API (e.g., https://pixygon-server.onrender.com/v1) */
139
+ /** Base URL for the auth API (e.g., https://api.pixygon.com/v1) */
118
140
  baseUrl: string;
119
141
  /** App identifier for token storage keys */
120
142
  appId: string;
@@ -136,6 +158,8 @@ interface AuthConfig {
136
158
  storage?: AuthStorage;
137
159
  /** Enable debug logging (default: false) */
138
160
  debug?: boolean;
161
+ /** Theme customization for branded components */
162
+ theme?: AuthTheme;
139
163
  }
140
164
  interface AuthStorage {
141
165
  getItem: (key: string) => string | null | Promise<string | null>;
@@ -150,6 +174,7 @@ interface AuthContextValue extends AuthState {
150
174
  resendVerification: (data: ResendVerificationRequest) => Promise<ResendVerificationResponse>;
151
175
  forgotPassword: (data: ForgotPasswordRequest) => Promise<ForgotPasswordResponse>;
152
176
  recoverPassword: (data: RecoverPasswordRequest) => Promise<RecoverPasswordResponse>;
177
+ changePassword: (data: ChangePasswordRequest) => Promise<ChangePasswordResponse>;
153
178
  refreshTokens: () => Promise<void>;
154
179
  getAccessToken: () => string | null;
155
180
  isAuthenticated: boolean;
@@ -164,6 +189,7 @@ interface LoginFormProps {
164
189
  onNavigateForgotPassword?: () => void;
165
190
  showBranding?: boolean;
166
191
  className?: string;
192
+ theme?: AuthTheme;
167
193
  }
168
194
  interface RegisterFormProps {
169
195
  onSuccess?: (user: User) => void;
@@ -171,6 +197,7 @@ interface RegisterFormProps {
171
197
  onNavigateLogin?: () => void;
172
198
  showBranding?: boolean;
173
199
  className?: string;
200
+ theme?: AuthTheme;
174
201
  }
175
202
  interface VerifyFormProps {
176
203
  userName: string;
@@ -179,6 +206,7 @@ interface VerifyFormProps {
179
206
  onNavigateLogin?: () => void;
180
207
  showBranding?: boolean;
181
208
  className?: string;
209
+ theme?: AuthTheme;
182
210
  }
183
211
  interface ForgotPasswordFormProps {
184
212
  onSuccess?: () => void;
@@ -186,6 +214,7 @@ interface ForgotPasswordFormProps {
186
214
  onNavigateLogin?: () => void;
187
215
  showBranding?: boolean;
188
216
  className?: string;
217
+ theme?: AuthTheme;
189
218
  }
190
219
  interface PixygonAuthProps {
191
220
  mode: 'login' | 'register' | 'verify' | 'forgot-password' | 'recover-password';
@@ -198,4 +227,4 @@ interface PixygonAuthProps {
198
227
  className?: string;
199
228
  }
200
229
 
201
- export type { AuthContextValue as A, ForgotPasswordRequest as F, LoginRequest as L, PixygonAuthProps as P, RegisterRequest as R, SubscriptionTier as S, TokenPair as T, User as U, VerifyRequest as V, AuthConfig as a, AuthError as b, AuthStatus as c, UserRole as d, AuthStorage as e, LoginResponse as f, RegisterResponse as g, VerifyResponse as h, ResendVerificationRequest as i, ResendVerificationResponse as j, ForgotPasswordResponse as k, RecoverPasswordRequest as l, RecoverPasswordResponse as m, RefreshTokenRequest as n, RefreshTokenResponse as o, AuthErrorCode as p, AuthState as q, ForgotPasswordFormProps as r, LoginFormProps as s, RegisterFormProps as t, TokenPayload as u, VerifyFormProps as v };
230
+ export { type AuthContextValue as A, type ChangePasswordRequest as C, DEFAULT_THEME as D, type ForgotPasswordRequest as F, type LoginRequest as L, type PixygonAuthProps as P, type RegisterRequest as R, type SubscriptionTier as S, type TokenPair as T, type User as U, type VerifyRequest as V, type AuthConfig as a, type AuthError as b, type AuthStatus as c, type UserRole as d, type AuthStorage as e, type LoginResponse as f, type RegisterResponse as g, type VerifyResponse as h, type ResendVerificationRequest as i, type ResendVerificationResponse as j, type ForgotPasswordResponse as k, type RecoverPasswordRequest as l, type RecoverPasswordResponse as m, type RefreshTokenRequest as n, type RefreshTokenResponse as o, type ChangePasswordResponse as p, type LogoutResponse as q, type AuthErrorCode as r, type AuthState as s, type AuthTheme as t, type ForgotPasswordFormProps as u, type LoginFormProps as v, type RegisterFormProps as w, type TokenPayload as x, type VerifyFormProps as y };