@ikonai/sdk-react-ui 1.7.0 → 1.8.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 (7) hide show
  1. package/auth/auth-service.d.ts +9 -0
  2. package/index.js +771 -750
  3. package/package.json +1 -1
  4. package/theme/ikon-app.css +259 -250
  5. package/theme/ikon-auth.css +290 -271
  6. package/theme/ikon-surface.css +107 -94
  7. package/theme/ikon-tokens.css +97 -95
package/theme/ikon-auth.css CHANGED
@@ -1,311 +1,330 @@
1
1
  /* Ikon sign-in screen styles.
2
2
 
3
- Override any of this from your own src/auth/auth.css — unlayered rules always win over
4
- these, whatever their specificity or import order. */
5
- @layer ikon {
6
- .ikon-auth-screen {
7
- display: flex;
8
- padding: 32px max(20px, env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom));
9
- box-sizing: border-box;
10
- }
3
+ Override any of them from your own src/auth/auth.css, which loads after this sheet: at equal
4
+ specificity yours wins, with no `!important`. A few rules here are more specific than one class
5
+ — `.ikon-auth-divider span`, the `::placeholder` and `::before` rules, the `:hover` and `:focus`
6
+ states — so match that shape to override those. */
7
+ .ikon-auth-screen {
8
+ display: flex;
9
+ padding: 32px max(20px, env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom));
10
+ box-sizing: border-box;
11
+ }
11
12
 
12
- .ikon-auth-container {
13
- position: relative;
14
- z-index: 1;
15
- margin: auto;
16
- box-sizing: border-box;
17
- display: flex;
18
- flex-direction: column;
19
- align-items: stretch;
20
- width: 100%;
21
- max-width: 400px;
22
- padding: 36px 32px;
23
- background: var(--ikon-bg-card);
24
- border: 1px solid var(--ikon-border-secondary);
25
- border-radius: var(--ikon-radius-xl);
26
- }
13
+ .ikon-auth-container {
14
+ position: relative;
15
+ z-index: 1;
16
+ margin: auto;
17
+ box-sizing: border-box;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: stretch;
21
+ width: 100%;
22
+ max-width: 400px;
23
+ padding: 36px 32px;
24
+ background: var(--ikon-bg-card);
25
+ border: 1px solid var(--ikon-border-secondary);
26
+ border-radius: var(--ikon-radius-xl);
27
+ }
27
28
 
28
- .ikon-auth-logo {
29
- align-self: center;
30
- width: 64px;
31
- height: 64px;
32
- margin-bottom: 20px;
33
- object-fit: contain;
34
- }
29
+ .ikon-auth-logo {
30
+ align-self: center;
31
+ width: 64px;
32
+ height: 64px;
33
+ margin-bottom: 20px;
34
+ object-fit: contain;
35
+ }
35
36
 
36
- .ikon-auth-title {
37
- margin: 0 0 6px;
38
- font-family: var(--ikon-font-display);
39
- font-size: 24px;
40
- font-weight: 600;
41
- line-height: 1.25;
42
- letter-spacing: -0.015em;
43
- color: var(--ikon-text-primary);
44
- text-align: center;
45
- }
37
+ .ikon-auth-title {
38
+ margin: 0 0 6px;
39
+ font-family: var(--ikon-font-display);
40
+ font-size: 24px;
41
+ font-weight: 600;
42
+ line-height: 1.25;
43
+ letter-spacing: -0.015em;
44
+ color: var(--ikon-text-primary);
45
+ text-align: center;
46
+ }
46
47
 
47
- .ikon-auth-subtitle {
48
- margin: 0 0 28px;
49
- font-size: 14px;
50
- line-height: 1.5;
51
- color: var(--ikon-text-tertiary);
52
- text-align: center;
53
- }
48
+ .ikon-auth-subtitle {
49
+ margin: 0 0 28px;
50
+ font-size: 14px;
51
+ line-height: 1.5;
52
+ color: var(--ikon-text-tertiary);
53
+ text-align: center;
54
+ }
54
55
 
55
- .ikon-auth-error {
56
- box-sizing: border-box;
57
- width: 100%;
58
- margin-bottom: 12px;
59
- padding: 10px 12px;
60
- background: var(--ikon-error-surface);
61
- border: 1px solid var(--ikon-error-border);
62
- border-radius: var(--ikon-radius-md);
63
- color: var(--ikon-error-text);
64
- font-size: 13px;
65
- line-height: 1.45;
66
- text-align: left;
67
- }
56
+ .ikon-auth-error {
57
+ box-sizing: border-box;
58
+ width: 100%;
59
+ margin-bottom: 12px;
60
+ padding: 10px 12px;
61
+ background: var(--ikon-error-surface);
62
+ border: 1px solid var(--ikon-error-border);
63
+ border-radius: var(--ikon-radius-md);
64
+ color: var(--ikon-error-text);
65
+ font-size: 13px;
66
+ line-height: 1.45;
67
+ text-align: left;
68
+ }
68
69
 
69
- .ikon-auth-buttons {
70
- display: flex;
71
- flex-direction: column;
72
- gap: 8px;
73
- width: 100%;
74
- }
70
+ .ikon-auth-buttons {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: 8px;
74
+ width: 100%;
75
+ }
75
76
 
76
- .ikon-auth-login-button {
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- gap: 10px;
81
- width: 100%;
82
- min-height: 44px;
83
- padding: 0 16px;
84
- background: var(--ikon-bg-card);
85
- border: 1px solid var(--ikon-border-primary);
86
- border-radius: var(--ikon-radius-md);
87
- color: var(--ikon-text-primary);
88
- font-family: inherit;
89
- font-size: 15px;
90
- font-weight: 500;
91
- line-height: 1;
92
- cursor: pointer;
93
- transition: background-color 0.15s ease, border-color 0.15s ease;
94
- }
77
+ .ikon-auth-login-button {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ gap: 10px;
82
+ width: 100%;
83
+ min-height: 44px;
84
+ padding: 0 16px;
85
+ background: var(--ikon-bg-card);
86
+ border: 1px solid var(--ikon-border-primary);
87
+ border-radius: var(--ikon-radius-md);
88
+ color: var(--ikon-text-primary);
89
+ font-family: inherit;
90
+ font-size: 15px;
91
+ font-weight: 500;
92
+ line-height: 1;
93
+ cursor: pointer;
94
+ transition: background-color 0.15s ease, border-color 0.15s ease;
95
+ }
95
96
 
96
- .ikon-auth-login-button svg {
97
- flex: none;
98
- }
97
+ .ikon-auth-login-button svg {
98
+ flex: none;
99
+ }
99
100
 
100
- .ikon-auth-login-button:hover:not(:disabled) {
101
- background: var(--ikon-bg-hover);
102
- }
101
+ .ikon-auth-login-button:hover:not(:disabled) {
102
+ background: var(--ikon-bg-hover);
103
+ }
103
104
 
104
- .ikon-auth-login-button:focus-visible {
105
- outline: 2px solid var(--ikon-focus-ring);
106
- outline-offset: 2px;
107
- }
105
+ .ikon-auth-login-button:focus {
106
+ outline: 2px solid var(--ikon-focus-ring);
107
+ outline-offset: 2px;
108
+ }
108
109
 
109
- .ikon-auth-login-button:disabled {
110
- cursor: not-allowed;
111
- opacity: 0.55;
112
- }
110
+ .ikon-auth-login-button:focus:not(:focus-visible) {
111
+ outline: none;
112
+ }
113
113
 
114
- .ikon-auth-login-button-guest,
115
- .ikon-auth-login-button-global {
116
- background: transparent;
117
- border-color: transparent;
118
- color: var(--ikon-text-tertiary);
119
- }
114
+ .ikon-auth-login-button:disabled {
115
+ cursor: not-allowed;
116
+ opacity: 0.55;
117
+ }
120
118
 
121
- .ikon-auth-login-button-guest:hover:not(:disabled),
122
- .ikon-auth-login-button-global:hover:not(:disabled) {
123
- background: var(--ikon-bg-hover);
124
- color: var(--ikon-text-primary);
125
- }
119
+ .ikon-auth-login-button-guest,
120
+ .ikon-auth-login-button-global {
121
+ background: transparent;
122
+ border-color: transparent;
123
+ color: var(--ikon-text-tertiary);
124
+ }
126
125
 
127
- .ikon-auth-divider {
128
- display: flex;
129
- align-items: center;
130
- gap: 12px;
131
- width: 100%;
132
- margin: 20px 0;
133
- }
126
+ .ikon-auth-login-button-guest:hover:not(:disabled),
127
+ .ikon-auth-login-button-global:hover:not(:disabled) {
128
+ background: var(--ikon-bg-hover);
129
+ color: var(--ikon-text-primary);
130
+ }
134
131
 
135
- .ikon-auth-divider::before,
136
- .ikon-auth-divider::after {
137
- content: '';
138
- flex: 1;
139
- height: 1px;
140
- background: var(--ikon-border-secondary);
141
- }
132
+ .ikon-auth-divider {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: 12px;
136
+ width: 100%;
137
+ margin: 20px 0;
138
+ }
142
139
 
143
- .ikon-auth-divider span {
144
- font-size: 11px;
145
- font-weight: 600;
146
- letter-spacing: 0.09em;
147
- text-transform: uppercase;
148
- color: var(--ikon-text-quaternary);
149
- }
140
+ .ikon-auth-divider::before,
141
+ .ikon-auth-divider::after {
142
+ content: '';
143
+ flex: 1;
144
+ height: 1px;
145
+ background: var(--ikon-border-secondary);
146
+ }
150
147
 
151
- .ikon-auth-email-form {
152
- display: flex;
153
- flex-direction: column;
154
- gap: 8px;
155
- width: 100%;
156
- }
148
+ .ikon-auth-divider span {
149
+ font-size: 11px;
150
+ font-weight: 600;
151
+ letter-spacing: 0.09em;
152
+ text-transform: uppercase;
153
+ color: var(--ikon-text-quaternary);
154
+ }
157
155
 
158
- .ikon-auth-email-input,
159
- .ikon-auth-code-input {
160
- box-sizing: border-box;
161
- width: 100%;
162
- min-height: 44px;
163
- padding: 0 14px;
164
- background: var(--ikon-bg-card);
165
- border: 1px solid var(--ikon-border-primary);
166
- border-radius: var(--ikon-radius-md);
167
- color: var(--ikon-text-primary);
168
- font-family: inherit;
169
- font-size: 16px;
170
- transition: border-color 0.15s ease;
171
- }
156
+ .ikon-auth-email-form {
157
+ display: flex;
158
+ flex-direction: column;
159
+ gap: 8px;
160
+ width: 100%;
161
+ }
172
162
 
173
- .ikon-auth-email-input::placeholder,
174
- .ikon-auth-code-input::placeholder {
175
- color: var(--ikon-text-quaternary);
176
- }
163
+ .ikon-auth-email-input,
164
+ .ikon-auth-code-input {
165
+ box-sizing: border-box;
166
+ width: 100%;
167
+ min-height: 44px;
168
+ padding: 0 14px;
169
+ background: var(--ikon-bg-card);
170
+ border: 1px solid var(--ikon-border-primary);
171
+ border-radius: var(--ikon-radius-md);
172
+ color: var(--ikon-text-primary);
173
+ font-family: inherit;
174
+ font-size: 16px;
175
+ transition: border-color 0.15s ease;
176
+ }
177
177
 
178
- .ikon-auth-email-input:focus-visible,
179
- .ikon-auth-code-input:focus-visible {
180
- outline: 2px solid var(--ikon-focus-ring);
181
- outline-offset: -1px;
182
- border-color: transparent;
183
- }
178
+ .ikon-auth-email-input::placeholder,
179
+ .ikon-auth-code-input::placeholder {
180
+ color: var(--ikon-text-quaternary);
181
+ }
184
182
 
185
- .ikon-auth-code-input {
186
- min-height: 52px;
187
- font-family: var(--ikon-font-mono);
188
- font-size: 20px;
189
- font-weight: 500;
190
- letter-spacing: 0.3em;
191
- text-indent: 0.3em;
192
- text-align: center;
193
- text-transform: uppercase;
194
- }
183
+ .ikon-auth-email-input:focus,
184
+ .ikon-auth-code-input:focus {
185
+ outline: 2px solid var(--ikon-focus-ring);
186
+ outline-offset: -1px;
187
+ border-color: transparent;
188
+ }
195
189
 
196
- .ikon-auth-email-code-hint {
197
- margin: 0 0 4px;
198
- font-size: 13px;
199
- line-height: 1.5;
200
- color: var(--ikon-text-tertiary);
201
- text-align: center;
202
- word-break: break-word;
203
- }
190
+ .ikon-auth-code-input {
191
+ min-height: 52px;
192
+ font-family: var(--ikon-font-mono);
193
+ font-size: 20px;
194
+ font-weight: 500;
195
+ letter-spacing: 0.3em;
196
+ text-indent: 0.3em;
197
+ text-align: center;
198
+ text-transform: uppercase;
199
+ }
204
200
 
205
- .ikon-auth-email-code-hint strong {
206
- color: var(--ikon-text-primary);
207
- font-weight: 500;
208
- }
201
+ .ikon-auth-email-code-hint {
202
+ margin: 0 0 4px;
203
+ font-size: 13px;
204
+ line-height: 1.5;
205
+ color: var(--ikon-text-tertiary);
206
+ text-align: center;
207
+ word-break: break-word;
208
+ }
209
209
 
210
- .ikon-auth-email-button {
211
- display: flex;
212
- align-items: center;
213
- justify-content: center;
214
- gap: 8px;
215
- width: 100%;
216
- min-height: 44px;
217
- padding: 0 16px;
218
- background: var(--ikon-bg-solid);
219
- border: 1px solid transparent;
220
- border-radius: var(--ikon-radius-md);
221
- color: var(--ikon-text-on-solid);
222
- font-family: inherit;
223
- font-size: 15px;
224
- font-weight: 500;
225
- line-height: 1;
226
- cursor: pointer;
227
- transition: background-color 0.15s ease;
228
- }
210
+ .ikon-auth-email-code-hint strong {
211
+ color: var(--ikon-text-primary);
212
+ font-weight: 500;
213
+ }
229
214
 
230
- .ikon-auth-email-button:hover:not(:disabled) {
231
- background: var(--ikon-bg-solid-hover);
232
- }
215
+ .ikon-auth-email-button {
216
+ display: flex;
217
+ align-items: center;
218
+ justify-content: center;
219
+ gap: 8px;
220
+ width: 100%;
221
+ min-height: 44px;
222
+ padding: 0 16px;
223
+ background: var(--ikon-bg-solid);
224
+ border: 1px solid transparent;
225
+ border-radius: var(--ikon-radius-md);
226
+ color: var(--ikon-text-on-solid);
227
+ font-family: inherit;
228
+ font-size: 15px;
229
+ font-weight: 500;
230
+ line-height: 1;
231
+ cursor: pointer;
232
+ transition: background-color 0.15s ease;
233
+ }
233
234
 
234
- .ikon-auth-email-button:focus-visible {
235
- outline: 2px solid var(--ikon-focus-ring);
236
- outline-offset: 2px;
237
- }
235
+ .ikon-auth-email-button:hover:not(:disabled) {
236
+ background: var(--ikon-bg-solid-hover);
237
+ }
238
238
 
239
- .ikon-auth-email-button:disabled {
240
- cursor: not-allowed;
241
- opacity: 0.55;
242
- }
239
+ .ikon-auth-email-button:focus {
240
+ outline: 2px solid var(--ikon-focus-ring);
241
+ outline-offset: 2px;
242
+ }
243
243
 
244
- .ikon-auth-email-spinner {
245
- width: 14px;
246
- height: 14px;
247
- border: 2px solid currentColor;
248
- border-top-color: transparent;
249
- border-radius: var(--ikon-radius-full);
250
- opacity: 0.7;
251
- animation: ikon-spin 0.9s linear infinite;
252
- }
244
+ .ikon-auth-email-button:focus:not(:focus-visible) {
245
+ outline: none;
246
+ }
253
247
 
254
- .ikon-auth-email-resend {
255
- margin-top: 2px;
256
- padding: 8px;
257
- background: none;
258
- border: none;
259
- border-radius: var(--ikon-radius-md);
260
- color: var(--ikon-text-tertiary);
261
- font-family: inherit;
262
- font-size: 13px;
263
- cursor: pointer;
264
- }
248
+ .ikon-auth-email-button:disabled {
249
+ cursor: not-allowed;
250
+ opacity: 0.55;
251
+ }
265
252
 
266
- .ikon-auth-email-resend:hover:not(:disabled) {
267
- color: var(--ikon-text-primary);
268
- }
253
+ .ikon-auth-email-spinner {
254
+ width: 14px;
255
+ height: 14px;
256
+ border: 2px solid currentColor;
257
+ border-top-color: transparent;
258
+ border-radius: var(--ikon-radius-full);
259
+ opacity: 0.7;
260
+ animation: ikon-spin 0.9s linear infinite;
261
+ }
269
262
 
270
- .ikon-auth-email-resend:focus-visible {
271
- outline: 2px solid var(--ikon-focus-ring);
272
- outline-offset: 2px;
273
- }
263
+ .ikon-auth-email-resend {
264
+ margin-top: 2px;
265
+ padding: 8px;
266
+ background: none;
267
+ border: none;
268
+ border-radius: var(--ikon-radius-md);
269
+ color: var(--ikon-text-tertiary);
270
+ font-family: inherit;
271
+ font-size: 13px;
272
+ cursor: pointer;
273
+ }
274
274
 
275
- .ikon-auth-dismiss {
276
- margin-top: 16px;
277
- padding: 8px;
278
- background: none;
279
- border: none;
280
- border-radius: var(--ikon-radius-md);
281
- color: var(--ikon-text-tertiary);
282
- font-family: inherit;
283
- font-size: 13px;
284
- cursor: pointer;
285
- }
275
+ .ikon-auth-email-resend:hover:not(:disabled) {
276
+ color: var(--ikon-text-primary);
277
+ }
286
278
 
287
- .ikon-auth-dismiss:hover {
288
- color: var(--ikon-text-primary);
289
- }
279
+ .ikon-auth-email-resend:focus {
280
+ outline: 2px solid var(--ikon-focus-ring);
281
+ outline-offset: 2px;
282
+ }
283
+
284
+ .ikon-auth-email-resend:focus:not(:focus-visible) {
285
+ outline: none;
286
+ }
287
+
288
+ .ikon-auth-dismiss {
289
+ margin-top: 16px;
290
+ padding: 8px;
291
+ background: none;
292
+ border: none;
293
+ border-radius: var(--ikon-radius-md);
294
+ color: var(--ikon-text-tertiary);
295
+ font-family: inherit;
296
+ font-size: 13px;
297
+ cursor: pointer;
298
+ }
290
299
 
291
- .ikon-auth-dismiss:focus-visible {
292
- outline: 2px solid var(--ikon-focus-ring);
293
- outline-offset: 2px;
300
+ .ikon-auth-dismiss:hover {
301
+ color: var(--ikon-text-primary);
302
+ }
303
+
304
+ .ikon-auth-dismiss:focus {
305
+ outline: 2px solid var(--ikon-focus-ring);
306
+ outline-offset: 2px;
307
+ }
308
+
309
+ .ikon-auth-dismiss:focus:not(:focus-visible) {
310
+ outline: none;
311
+ }
312
+
313
+ @media (max-width: 480px) {
314
+ .ikon-auth-screen {
315
+ padding: 0;
294
316
  }
295
317
 
296
- @media (max-width: 480px) {
297
- .ikon-auth-screen {
298
- padding: 0;
299
- }
300
-
301
- .ikon-auth-container {
302
- max-width: none;
303
- min-height: 100dvh;
304
- justify-content: center;
305
- padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
306
- background: transparent;
307
- border: 0;
308
- border-radius: 0;
309
- }
318
+ .ikon-auth-container {
319
+ max-width: none;
320
+ /* 100vh first: dvh is Chromium 108, and without this the surface has no height at all
321
+ on an older television, which clips the whole app away. */
322
+ min-height: 100vh;
323
+ min-height: 100dvh;
324
+ justify-content: center;
325
+ padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
326
+ background: transparent;
327
+ border: 0;
328
+ border-radius: 0;
310
329
  }
311
330
  }