@pollar/react 0.11.2 → 0.11.3-rc.1

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 (9) hide show
  1. package/dist/index.css +76 -18
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +152 -17
  4. package/dist/index.d.ts +152 -17
  5. package/dist/index.js +386 -377
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +382 -378
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -15,7 +15,7 @@
15
15
  .pollar-overlay {
16
16
  position: fixed;
17
17
  inset: 0;
18
- z-index: 50;
18
+ z-index: var(--pollar-overlay-z-index, 50);
19
19
  display: flex;
20
20
  align-items: center;
21
21
  justify-content: center;
@@ -27,7 +27,7 @@
27
27
  .pollar-modal-card {
28
28
  position: relative;
29
29
  width: 100%;
30
- border-radius: 1rem;
30
+ border-radius: var(--pollar-modal-border-radius, 1rem);
31
31
  border: 1px solid var(--pollar-border);
32
32
  padding: var(--pollar-modal-padding, 1.75rem);
33
33
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -130,7 +130,7 @@
130
130
  border: none;
131
131
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
132
132
  background-color: var(--pollar-accent);
133
- color: #fff;
133
+ color: var(--pollar-btn-primary-fg, #fff);
134
134
  font-size: 0.9375rem;
135
135
  font-weight: 700;
136
136
  cursor: pointer;
@@ -152,8 +152,8 @@
152
152
  padding: 0 1rem;
153
153
  border: 1px solid var(--pollar-border);
154
154
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
155
- background-color: transparent;
156
- color: var(--pollar-muted);
155
+ background-color: var(--pollar-btn-secondary-bg, transparent);
156
+ color: var(--pollar-btn-secondary-fg, var(--pollar-muted));
157
157
  font-size: 0.9375rem;
158
158
  font-weight: 600;
159
159
  cursor: pointer;
@@ -180,8 +180,8 @@
180
180
  border-width: 2px;
181
181
  }
182
182
  .pollar-btn-primary .pollar-spinner {
183
- border-color: rgba(255, 255, 255, 0.35);
184
- border-top-color: #fff;
183
+ border-color: color-mix(in srgb, var(--pollar-btn-primary-fg, #fff) 35%, transparent);
184
+ border-top-color: var(--pollar-btn-primary-fg, #fff);
185
185
  }
186
186
  .pollar-spinner-current {
187
187
  border-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -760,7 +760,7 @@
760
760
  padding: 0.875rem 1rem;
761
761
  border-radius: var(--pollar-card-border-radius, 10px);
762
762
  border: 1px solid var(--pollar-border);
763
- background-color: var(--pollar-input-bg);
763
+ background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
764
764
  cursor: pointer;
765
765
  transition: all 0.15s;
766
766
  box-sizing: border-box;
@@ -776,7 +776,7 @@
776
776
  .pollar-kyc-provider-name {
777
777
  font-size: 0.9375rem;
778
778
  font-weight: 600;
779
- color: var(--pollar-text);
779
+ color: var(--pollar-btn-secondary-fg, var(--pollar-text));
780
780
  }
781
781
  .pollar-kyc-provider-flow {
782
782
  font-size: 0.75rem;
@@ -1092,7 +1092,7 @@
1092
1092
  gap: 0.75rem;
1093
1093
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
1094
1094
  border: 1px solid var(--pollar-border);
1095
- background-color: var(--pollar-input-bg);
1095
+ background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
1096
1096
  padding: 0 1rem;
1097
1097
  cursor: pointer;
1098
1098
  transition: all 0.15s;
@@ -1112,7 +1112,7 @@
1112
1112
  .pollar-social-btn-text {
1113
1113
  font-size: 1rem;
1114
1114
  font-weight: 600;
1115
- color: var(--pollar-text);
1115
+ color: var(--pollar-btn-secondary-fg, var(--pollar-text));
1116
1116
  }
1117
1117
  .pollar-wallet-section {
1118
1118
  display: flex;
@@ -1135,8 +1135,8 @@
1135
1135
  padding: 0 1rem;
1136
1136
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
1137
1137
  border: 1px solid var(--pollar-border);
1138
- background-color: var(--pollar-input-bg);
1139
- color: var(--pollar-text);
1138
+ background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
1139
+ color: var(--pollar-btn-secondary-fg, var(--pollar-text));
1140
1140
  font-size: 1rem;
1141
1141
  font-weight: 500;
1142
1142
  cursor: pointer;
@@ -1185,8 +1185,8 @@
1185
1185
  gap: 0.75rem;
1186
1186
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
1187
1187
  border: 1px solid var(--pollar-border);
1188
- background-color: var(--pollar-input-bg);
1189
- color: var(--pollar-text);
1188
+ background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
1189
+ color: var(--pollar-btn-secondary-fg, var(--pollar-text));
1190
1190
  padding: 0 1rem;
1191
1191
  font-size: 1rem;
1192
1192
  font-weight: 500;
@@ -1214,8 +1214,8 @@
1214
1214
  gap: 0.75rem;
1215
1215
  border-radius: var(--pollar-buttons-border-radius, 0.5rem);
1216
1216
  border: 1px solid var(--pollar-border);
1217
- background-color: var(--pollar-input-bg);
1218
- color: var(--pollar-text);
1217
+ background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
1218
+ color: var(--pollar-btn-secondary-fg, var(--pollar-text));
1219
1219
  padding: 0 1rem;
1220
1220
  font-size: 1rem;
1221
1221
  font-weight: 500;
@@ -1297,6 +1297,33 @@
1297
1297
  font-size: var(--pollar-modal-subtitle-size, 0.9rem);
1298
1298
  color: var(--pollar-muted);
1299
1299
  }
1300
+ .pollar-ramp-steps {
1301
+ display: flex;
1302
+ flex-direction: column;
1303
+ gap: 0.5rem;
1304
+ margin-bottom: 1.25rem;
1305
+ }
1306
+ .pollar-ramp-steps-label {
1307
+ font-size: 0.6875rem;
1308
+ font-weight: 600;
1309
+ letter-spacing: 0.05em;
1310
+ text-transform: uppercase;
1311
+ color: var(--pollar-muted);
1312
+ }
1313
+ .pollar-ramp-steps-track {
1314
+ display: flex;
1315
+ gap: 0.375rem;
1316
+ }
1317
+ .pollar-ramp-steps-segment {
1318
+ flex: 1;
1319
+ height: 4px;
1320
+ border-radius: 999px;
1321
+ background: var(--pollar-border);
1322
+ transition: background-color 0.2s;
1323
+ }
1324
+ .pollar-ramp-steps-segment[data-done] {
1325
+ background: var(--pollar-accent);
1326
+ }
1300
1327
  .pollar-ramp-field {
1301
1328
  margin-bottom: 1rem;
1302
1329
  }
@@ -1331,6 +1358,17 @@
1331
1358
  font-size: 0.75rem;
1332
1359
  color: var(--pollar-error-text, #dc2626);
1333
1360
  }
1361
+ .pollar-ramp-field-hint {
1362
+ display: block;
1363
+ margin-top: 0.375rem;
1364
+ font-size: 0.75rem;
1365
+ color: var(--pollar-muted);
1366
+ }
1367
+ .pollar-ramp-field-optional {
1368
+ font-weight: 400;
1369
+ text-transform: none;
1370
+ color: var(--pollar-muted);
1371
+ }
1334
1372
  .pollar-ramp-input-row {
1335
1373
  display: flex;
1336
1374
  gap: 0.625rem;
@@ -1398,11 +1436,19 @@
1398
1436
  transition: all 0.15s;
1399
1437
  box-sizing: border-box;
1400
1438
  }
1439
+ .pollar-ramp-route-card[data-busy] {
1440
+ cursor: wait;
1441
+ border-color: var(--pollar-accent);
1442
+ }
1443
+ .pollar-ramp-route-card[data-disabled] {
1444
+ opacity: 0.5;
1445
+ cursor: not-allowed;
1446
+ }
1401
1447
  .pollar-ramp-route-card[data-recommended=true] {
1402
1448
  border-color: var(--pollar-accent);
1403
1449
  background-color: color-mix(in srgb, var(--pollar-accent) 5%, var(--pollar-input-bg));
1404
1450
  }
1405
- .pollar-ramp-route-card:hover {
1451
+ .pollar-ramp-route-card:not([data-disabled]):hover {
1406
1452
  border-color: var(--pollar-accent);
1407
1453
  }
1408
1454
  .pollar-ramp-route-left {
@@ -1475,6 +1521,18 @@
1475
1521
  letter-spacing: 0.03em;
1476
1522
  font-family: monospace;
1477
1523
  }
1524
+ .pollar-ramp-qr {
1525
+ display: flex;
1526
+ justify-content: center;
1527
+ width: 100%;
1528
+ color: var(--pollar-text);
1529
+ }
1530
+ .pollar-ramp-qr svg {
1531
+ width: 100%;
1532
+ max-width: 220px;
1533
+ height: auto;
1534
+ display: block;
1535
+ }
1478
1536
  .pollar-ramp-copy-btn {
1479
1537
  padding: 0.25rem 0.625rem;
1480
1538
  border-radius: var(--pollar-buttons-border-radius, 6px);