@alfadocs/ui-kit 0.18.1 → 0.19.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.
- package/dist/_chunks/email-input-DKN5JERd.js +396 -0
- package/dist/_chunks/{public-header.agent-BIBQzkeV.js → public-header.agent-BQ3r6Hgq.js} +6 -4
- package/dist/_chunks/{use-password-requirements-BOgFsoIe.js → use-password-requirements-C9vKBSVn.js} +92 -81
- package/dist/agent-catalog.json +31 -1
- package/dist/components/email-input/email-input.agent.d.ts +13 -0
- package/dist/components/email-input/email-input.d.ts +28 -0
- package/dist/components/email-input/index.d.ts +5 -0
- package/dist/components/email-input/index.js +6 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/password-input/index.js +1 -1
- package/dist/components/password-input/use-password-requirements.d.ts +9 -1
- package/dist/components/public-header/index.js +1 -1
- package/dist/i18n/config.js +12 -0
- package/dist/i18n/resources.d.ts +12 -0
- package/dist/index.js +448 -445
- package/dist/locales/de.json +4 -0
- package/dist/locales/en.json +4 -0
- package/dist/locales/it.json +4 -0
- package/dist/tokens.css +1 -1
- package/package.json +8 -2
package/dist/_chunks/{use-password-requirements-BOgFsoIe.js → use-password-requirements-C9vKBSVn.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as g, jsx as
|
|
2
|
-
import { forwardRef as ts, useRef as as, useState as C, useEffect as is, useCallback as p, useMemo as
|
|
3
|
-
import { c as
|
|
1
|
+
import { jsxs as g, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as ts, useRef as as, useState as C, useEffect as is, useCallback as p, useMemo as L } from "react";
|
|
3
|
+
import { c as I } from "./index-D2ZczOXr.js";
|
|
4
4
|
import { useTranslation as W } from "react-i18next";
|
|
5
5
|
import { T as rs } from "./text-input-CakysYnD.js";
|
|
6
6
|
import { u as ns } from "./form-field-context-B3APVHKx.js";
|
|
@@ -100,7 +100,7 @@ const fs = [
|
|
|
100
100
|
sm: "ds:size-4",
|
|
101
101
|
md: "ds:size-[18px]",
|
|
102
102
|
lg: "ds:size-5"
|
|
103
|
-
}, bs =
|
|
103
|
+
}, bs = I(
|
|
104
104
|
[
|
|
105
105
|
"ds:absolute ds:inset-y-0 ds:end-0 ds:ps-2 ds:pe-3",
|
|
106
106
|
"ds:inline-flex ds:items-center ds:justify-center",
|
|
@@ -114,9 +114,9 @@ const fs = [
|
|
|
114
114
|
"ds:forced-colors:focus-visible:outline-[CanvasText]",
|
|
115
115
|
"ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
|
|
116
116
|
].join(" ")
|
|
117
|
-
), vs =
|
|
117
|
+
), vs = I(
|
|
118
118
|
"ds:h-1 ds:w-full ds:overflow-hidden ds:rounded-[var(--radius-full)] ds:bg-muted"
|
|
119
|
-
), ys =
|
|
119
|
+
), ys = I(
|
|
120
120
|
[
|
|
121
121
|
"ds:h-full ds:rounded-[var(--radius-full)]",
|
|
122
122
|
"ds:transition-all ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
|
|
@@ -137,7 +137,7 @@ const fs = [
|
|
|
137
137
|
1: "fair",
|
|
138
138
|
2: "good",
|
|
139
139
|
3: "strong"
|
|
140
|
-
}, ks =
|
|
140
|
+
}, ks = I(
|
|
141
141
|
"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-meta",
|
|
142
142
|
{
|
|
143
143
|
variants: {
|
|
@@ -157,128 +157,128 @@ const fs = [
|
|
|
157
157
|
deriveStrength: u = !1,
|
|
158
158
|
autoComplete: w,
|
|
159
159
|
size: h = "md",
|
|
160
|
-
disabled:
|
|
161
|
-
name:
|
|
162
|
-
id:
|
|
163
|
-
onKeyDown:
|
|
164
|
-
onKeyUp:
|
|
165
|
-
onBlur:
|
|
166
|
-
onInput:
|
|
160
|
+
disabled: b,
|
|
161
|
+
name: o,
|
|
162
|
+
id: t,
|
|
163
|
+
onKeyDown: v,
|
|
164
|
+
onKeyUp: y,
|
|
165
|
+
onBlur: x,
|
|
166
|
+
onInput: k,
|
|
167
167
|
defaultValue: T,
|
|
168
168
|
value: m,
|
|
169
169
|
className: $,
|
|
170
170
|
...B
|
|
171
171
|
}, G) => {
|
|
172
|
-
const { t: f } = W(), M = ns().disabled ||
|
|
172
|
+
const { t: f } = W(), M = ns().disabled || b, N = as(null), J = os(G, N), [c, j] = C(!1), [Q, A] = C(!1), [_, H] = C(() => typeof m == "string" ? m : typeof T == "string" ? T : "");
|
|
173
173
|
is(() => {
|
|
174
174
|
typeof m == "string" && H(m);
|
|
175
175
|
}, [m]);
|
|
176
176
|
const X = p(
|
|
177
177
|
(s) => {
|
|
178
|
-
H(s.currentTarget.value),
|
|
178
|
+
H(s.currentTarget.value), k == null || k(s);
|
|
179
179
|
},
|
|
180
|
-
[
|
|
180
|
+
[k]
|
|
181
181
|
), z = p((s) => {
|
|
182
182
|
var R;
|
|
183
|
-
const
|
|
184
|
-
if (!
|
|
185
|
-
const
|
|
186
|
-
|
|
183
|
+
const a = N.current;
|
|
184
|
+
if (!a) return;
|
|
185
|
+
const O = Object.getPrototypeOf(a), P = (R = Object.getOwnPropertyDescriptor(O, "value")) == null ? void 0 : R.set;
|
|
186
|
+
P == null || P.call(a, s), a.dispatchEvent(new Event("input", { bubbles: !0 })), a.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
187
187
|
}, []), Y = p(() => {
|
|
188
188
|
j((s) => {
|
|
189
|
-
const
|
|
190
|
-
return e == null || e(
|
|
189
|
+
const a = !s;
|
|
190
|
+
return e == null || e(a), a;
|
|
191
191
|
});
|
|
192
|
-
}, [e]),
|
|
192
|
+
}, [e]), V = p((s) => {
|
|
193
193
|
typeof s.getModifierState == "function" && A(s.getModifierState("CapsLock"));
|
|
194
194
|
}, []), Z = p(
|
|
195
195
|
(s) => {
|
|
196
|
-
|
|
196
|
+
V(s), v == null || v(s);
|
|
197
197
|
},
|
|
198
|
-
[
|
|
199
|
-
),
|
|
198
|
+
[V, v]
|
|
199
|
+
), q = p(
|
|
200
200
|
(s) => {
|
|
201
|
-
|
|
201
|
+
V(s), y == null || y(s);
|
|
202
202
|
},
|
|
203
|
-
[
|
|
204
|
-
),
|
|
203
|
+
[V, y]
|
|
204
|
+
), D = p(
|
|
205
205
|
(s) => {
|
|
206
|
-
A(!1),
|
|
206
|
+
A(!1), x == null || x(s);
|
|
207
207
|
},
|
|
208
|
-
[
|
|
209
|
-
), U =
|
|
208
|
+
[x]
|
|
209
|
+
), U = L(
|
|
210
210
|
() => ({
|
|
211
211
|
getValue: () => {
|
|
212
212
|
var s;
|
|
213
|
-
return ((s =
|
|
213
|
+
return ((s = N.current) == null ? void 0 : s.value) ?? "";
|
|
214
214
|
},
|
|
215
215
|
setValue: (s) => z(s),
|
|
216
216
|
clear: () => z(""),
|
|
217
217
|
focus: () => {
|
|
218
218
|
var s;
|
|
219
|
-
return (s =
|
|
219
|
+
return (s = N.current) == null ? void 0 : s.focus();
|
|
220
220
|
},
|
|
221
221
|
isRevealed: () => c,
|
|
222
222
|
toggleVisibility: () => {
|
|
223
223
|
j((s) => {
|
|
224
|
-
const
|
|
225
|
-
return e == null || e(
|
|
224
|
+
const a = !s;
|
|
225
|
+
return e == null || e(a), a;
|
|
226
226
|
});
|
|
227
227
|
}
|
|
228
228
|
}),
|
|
229
229
|
[e, c, z]
|
|
230
230
|
);
|
|
231
|
-
ds(hs, U,
|
|
231
|
+
ds(hs, U, t);
|
|
232
232
|
const F = ws[h], ss = f(
|
|
233
233
|
c ? "inputs.password.toggleHide" : "inputs.password.toggleShow",
|
|
234
234
|
c ? "Hide password" : "Show password"
|
|
235
|
-
),
|
|
235
|
+
), d = L(
|
|
236
236
|
() => (l == null ? void 0 : l.map((s) => ({
|
|
237
237
|
...s,
|
|
238
238
|
met: s.test(_)
|
|
239
239
|
}))) ?? null,
|
|
240
240
|
[l, _]
|
|
241
|
-
), es =
|
|
242
|
-
if (!u || !(
|
|
243
|
-
const s =
|
|
244
|
-
return Math.min(3, Math.floor(s /
|
|
245
|
-
}, [u,
|
|
246
|
-
`inputs.password.strength.${
|
|
247
|
-
|
|
241
|
+
), es = L(() => {
|
|
242
|
+
if (!u || !(d != null && d.length)) return 0;
|
|
243
|
+
const s = d.filter((O) => O.met).length, a = d.length;
|
|
244
|
+
return Math.min(3, Math.floor(s / a * 4));
|
|
245
|
+
}, [u, d]), E = n !== void 0 ? n : u ? es : 0, S = xs[E], K = f(
|
|
246
|
+
`inputs.password.strength.${S}`,
|
|
247
|
+
S.charAt(0).toUpperCase() + S.slice(1)
|
|
248
248
|
);
|
|
249
249
|
return /* @__PURE__ */ g(
|
|
250
250
|
"div",
|
|
251
251
|
{
|
|
252
252
|
"data-component": "password-input",
|
|
253
|
-
"data-component-id":
|
|
253
|
+
"data-component-id": t,
|
|
254
254
|
className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
|
|
255
255
|
children: [
|
|
256
256
|
/* @__PURE__ */ g("div", { className: "ds:relative", children: [
|
|
257
|
-
/* @__PURE__ */
|
|
257
|
+
/* @__PURE__ */ i(
|
|
258
258
|
rs,
|
|
259
259
|
{
|
|
260
260
|
ref: J,
|
|
261
|
-
id:
|
|
261
|
+
id: t,
|
|
262
262
|
type: c ? "text" : "password",
|
|
263
263
|
autoComplete: w ?? "current-password",
|
|
264
|
-
name:
|
|
264
|
+
name: o ?? "password",
|
|
265
265
|
spellCheck: !1,
|
|
266
266
|
autoCapitalize: "none",
|
|
267
267
|
autoCorrect: "off",
|
|
268
268
|
size: h,
|
|
269
269
|
disabled: M,
|
|
270
270
|
onKeyDown: Z,
|
|
271
|
-
onKeyUp:
|
|
272
|
-
onBlur:
|
|
271
|
+
onKeyUp: q,
|
|
272
|
+
onBlur: D,
|
|
273
273
|
onInput: X,
|
|
274
274
|
value: m,
|
|
275
275
|
defaultValue: T,
|
|
276
|
-
endAdornment: /* @__PURE__ */
|
|
276
|
+
endAdornment: /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "ds:block ds:size-4" }),
|
|
277
277
|
className: $,
|
|
278
278
|
...B
|
|
279
279
|
}
|
|
280
280
|
),
|
|
281
|
-
/* @__PURE__ */
|
|
281
|
+
/* @__PURE__ */ i(
|
|
282
282
|
"button",
|
|
283
283
|
{
|
|
284
284
|
type: "button",
|
|
@@ -287,11 +287,11 @@ const fs = [
|
|
|
287
287
|
disabled: M,
|
|
288
288
|
onClick: Y,
|
|
289
289
|
className: bs(),
|
|
290
|
-
children: c ? /* @__PURE__ */
|
|
290
|
+
children: c ? /* @__PURE__ */ i(ls, { "aria-hidden": "true", className: F }) : /* @__PURE__ */ i(gs, { "aria-hidden": "true", className: F })
|
|
291
291
|
}
|
|
292
292
|
)
|
|
293
293
|
] }),
|
|
294
|
-
|
|
294
|
+
d && d.length > 0 ? (
|
|
295
295
|
// `role="list"` / `role="listitem"` are set explicitly even
|
|
296
296
|
// though they're the implicit roles on <ul>/<li> — Safari
|
|
297
297
|
// VoiceOver strips the implicit list role when CSS sets
|
|
@@ -305,14 +305,14 @@ const fs = [
|
|
|
305
305
|
// alone wouldn't trigger an announcement — the sr-only span
|
|
306
306
|
// is the load-bearing piece for AT users.
|
|
307
307
|
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
308
|
-
/* @__PURE__ */
|
|
308
|
+
/* @__PURE__ */ i(
|
|
309
309
|
"ul",
|
|
310
310
|
{
|
|
311
311
|
role: "list",
|
|
312
312
|
"aria-live": "polite",
|
|
313
313
|
"data-component": "password-requirements",
|
|
314
314
|
className: "ds:list-none ds:m-0 ds:p-0 ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
|
|
315
|
-
children:
|
|
315
|
+
children: d.map((s) => (
|
|
316
316
|
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
317
317
|
/* @__PURE__ */ g(
|
|
318
318
|
"li",
|
|
@@ -321,20 +321,20 @@ const fs = [
|
|
|
321
321
|
"data-state": s.met ? "met" : "unmet",
|
|
322
322
|
className: ks({ met: s.met }),
|
|
323
323
|
children: [
|
|
324
|
-
s.met ? /* @__PURE__ */
|
|
324
|
+
s.met ? /* @__PURE__ */ i(
|
|
325
325
|
ps,
|
|
326
326
|
{
|
|
327
327
|
"aria-hidden": "true",
|
|
328
328
|
className: "ds:size-3.5 ds:text-success ds:shrink-0"
|
|
329
329
|
}
|
|
330
|
-
) : /* @__PURE__ */
|
|
330
|
+
) : /* @__PURE__ */ i(
|
|
331
331
|
us,
|
|
332
332
|
{
|
|
333
333
|
"aria-hidden": "true",
|
|
334
334
|
className: "ds:size-3.5 ds:shrink-0"
|
|
335
335
|
}
|
|
336
336
|
),
|
|
337
|
-
/* @__PURE__ */
|
|
337
|
+
/* @__PURE__ */ i("span", { children: s.label }),
|
|
338
338
|
/* @__PURE__ */ g("span", { className: "ds:sr-only", children: [
|
|
339
339
|
" — ",
|
|
340
340
|
s.met ? f("inputs.password.requirements.met", "met") : f("inputs.password.requirements.unmet", "not yet met")
|
|
@@ -354,13 +354,13 @@ const fs = [
|
|
|
354
354
|
"aria-live": "polite",
|
|
355
355
|
className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-meta ds:text-warning",
|
|
356
356
|
children: [
|
|
357
|
-
/* @__PURE__ */
|
|
357
|
+
/* @__PURE__ */ i(ms, { "aria-hidden": "true", className: "ds:size-3.5" }),
|
|
358
358
|
f("inputs.password.capsLock", "Caps Lock is on")
|
|
359
359
|
]
|
|
360
360
|
}
|
|
361
361
|
) : null,
|
|
362
362
|
r ? /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
|
|
363
|
-
/* @__PURE__ */
|
|
363
|
+
/* @__PURE__ */ i(
|
|
364
364
|
"div",
|
|
365
365
|
{
|
|
366
366
|
role: "progressbar",
|
|
@@ -373,7 +373,7 @@ const fs = [
|
|
|
373
373
|
),
|
|
374
374
|
"aria-valuetext": K,
|
|
375
375
|
className: vs(),
|
|
376
|
-
children: /* @__PURE__ */
|
|
376
|
+
children: /* @__PURE__ */ i(
|
|
377
377
|
"div",
|
|
378
378
|
{
|
|
379
379
|
className: ys({ level: E })
|
|
@@ -381,7 +381,7 @@ const fs = [
|
|
|
381
381
|
)
|
|
382
382
|
}
|
|
383
383
|
),
|
|
384
|
-
/* @__PURE__ */
|
|
384
|
+
/* @__PURE__ */ i(
|
|
385
385
|
"span",
|
|
386
386
|
{
|
|
387
387
|
"aria-hidden": "true",
|
|
@@ -397,47 +397,58 @@ const fs = [
|
|
|
397
397
|
);
|
|
398
398
|
Ns.displayName = "PasswordInput";
|
|
399
399
|
function Hs(e = {}) {
|
|
400
|
-
const { t: r } = W(), { minLength: n, uppercase: l, lowercase: u, digit: w, symbol: h } = e;
|
|
401
|
-
return
|
|
402
|
-
const
|
|
403
|
-
return typeof n == "number" && n > 0 &&
|
|
400
|
+
const { t: r } = W(), { minLength: n, uppercase: l, lowercase: u, digit: w, symbol: h, noSpaces: b } = e;
|
|
401
|
+
return L(() => {
|
|
402
|
+
const o = [];
|
|
403
|
+
return typeof n == "number" && n > 0 && o.push({
|
|
404
404
|
id: "length",
|
|
405
405
|
label: r("inputs.password.requirements.length", {
|
|
406
406
|
count: n,
|
|
407
407
|
defaultValue: `At least ${n} characters`
|
|
408
408
|
}),
|
|
409
|
-
test: (
|
|
410
|
-
}), l &&
|
|
409
|
+
test: (t) => t.length >= n
|
|
410
|
+
}), l && o.push({
|
|
411
411
|
id: "uppercase",
|
|
412
412
|
label: r(
|
|
413
413
|
"inputs.password.requirements.uppercase",
|
|
414
414
|
"One uppercase letter"
|
|
415
415
|
),
|
|
416
|
-
test: (
|
|
417
|
-
}), u &&
|
|
416
|
+
test: (t) => new RegExp("\\p{Lu}", "u").test(t)
|
|
417
|
+
}), u && o.push({
|
|
418
418
|
id: "lowercase",
|
|
419
419
|
label: r(
|
|
420
420
|
"inputs.password.requirements.lowercase",
|
|
421
421
|
"One lowercase letter"
|
|
422
422
|
),
|
|
423
|
-
test: (
|
|
424
|
-
}), w &&
|
|
423
|
+
test: (t) => new RegExp("\\p{Ll}", "u").test(t)
|
|
424
|
+
}), w && o.push({
|
|
425
425
|
id: "digit",
|
|
426
426
|
label: r("inputs.password.requirements.digit", "One number"),
|
|
427
|
-
test: (
|
|
428
|
-
}), h &&
|
|
427
|
+
test: (t) => new RegExp("\\p{Nd}", "u").test(t)
|
|
428
|
+
}), h && o.push({
|
|
429
429
|
id: "symbol",
|
|
430
430
|
label: r("inputs.password.requirements.symbol", "One symbol"),
|
|
431
431
|
// Anything that isn't a letter, number, or whitespace counts.
|
|
432
432
|
// `\p{L}` + `\p{N}` keep this Unicode-aware so non-Latin
|
|
433
433
|
// alphabets (Arabic, Chinese, …) aren't mis-classified as
|
|
434
434
|
// symbols.
|
|
435
|
-
test: (
|
|
436
|
-
}),
|
|
437
|
-
|
|
435
|
+
test: (t) => /[^\p{L}\p{N}\s]/u.test(t)
|
|
436
|
+
}), b && o.push({
|
|
437
|
+
id: "no-spaces",
|
|
438
|
+
label: r("inputs.password.requirements.noSpaces", "No spaces"),
|
|
439
|
+
// `\s` covers ASCII space + tab + newline. The explicit
|
|
440
|
+
// U+00A0 (non-breaking space) and U+202F (narrow no-break
|
|
441
|
+
// space) catch the two paste-time characters credential
|
|
442
|
+
// managers and rich-text editors most often inject without
|
|
443
|
+
// the user noticing — those are NOT always in `\s`.
|
|
444
|
+
// Authored via hex escapes (not literal characters) so the
|
|
445
|
+
// source file passes `no-irregular-whitespace`.
|
|
446
|
+
test: (t) => !/[\s\u00A0\u202F]/.test(t)
|
|
447
|
+
}), o;
|
|
448
|
+
}, [r, n, l, u, w, h, b]);
|
|
438
449
|
}
|
|
439
450
|
export {
|
|
440
451
|
Ns as P,
|
|
441
452
|
Hs as u
|
|
442
453
|
};
|
|
443
|
-
//# sourceMappingURL=use-password-requirements-
|
|
454
|
+
//# sourceMappingURL=use-password-requirements-C9vKBSVn.js.map
|
package/dist/agent-catalog.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
|
-
"packageVersion": "0.
|
|
3
|
+
"packageVersion": "0.19.0",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "component",
|
|
@@ -1430,6 +1430,36 @@
|
|
|
1430
1430
|
}
|
|
1431
1431
|
}
|
|
1432
1432
|
},
|
|
1433
|
+
{
|
|
1434
|
+
"kind": "component",
|
|
1435
|
+
"id": "email-input",
|
|
1436
|
+
"capabilities": [],
|
|
1437
|
+
"state": [
|
|
1438
|
+
{
|
|
1439
|
+
"name": "value",
|
|
1440
|
+
"type": "string",
|
|
1441
|
+
"description": "The current email address typed into the field."
|
|
1442
|
+
},
|
|
1443
|
+
{
|
|
1444
|
+
"name": "isValid",
|
|
1445
|
+
"type": "boolean",
|
|
1446
|
+
"description": "True when the value is non-empty AND parses as a valid email per RFC 5322."
|
|
1447
|
+
}
|
|
1448
|
+
],
|
|
1449
|
+
"actions": [],
|
|
1450
|
+
"domHooks": {
|
|
1451
|
+
"root": {
|
|
1452
|
+
"attr": "data-component",
|
|
1453
|
+
"value": "email-input",
|
|
1454
|
+
"description": "Marks the EmailInput wrapper. The inline error element carries `role=\"alert\"` when validation fails."
|
|
1455
|
+
},
|
|
1456
|
+
"instanceId": {
|
|
1457
|
+
"attr": "data-component-id",
|
|
1458
|
+
"sourceProp": "id",
|
|
1459
|
+
"description": "Sourced from the id prop, when provided."
|
|
1460
|
+
}
|
|
1461
|
+
}
|
|
1462
|
+
},
|
|
1433
1463
|
{
|
|
1434
1464
|
"kind": "component",
|
|
1435
1465
|
"id": "empty-state",
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { AgentAdapter } from '../../agent/types';
|
|
2
|
+
/**
|
|
3
|
+
* Curated agent handle for EmailInput. State stays scoped to the visible
|
|
4
|
+
* value + the kit-derived validity flag; never PHI (per PRS §Security).
|
|
5
|
+
*/
|
|
6
|
+
export interface EmailInputHandle {
|
|
7
|
+
/** Returns the current input value. */
|
|
8
|
+
getValue: () => string;
|
|
9
|
+
/** Returns whether the current value parses as a valid email (non-empty + RFC). */
|
|
10
|
+
isValid: () => boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const emailInputAgent: AgentAdapter<EmailInputHandle>;
|
|
13
|
+
//# sourceMappingURL=email-input.agent.d.ts.map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type TextInputProps } from '../text-input';
|
|
3
|
+
export interface EmailInputProps extends Omit<TextInputProps, 'type' | 'autoComplete' | 'inputMode' | 'tone'> {
|
|
4
|
+
/**
|
|
5
|
+
* Override the "Invalid email" error message. Pass `null` to suppress
|
|
6
|
+
* the built-in message entirely (e.g. when wrapping the input in a
|
|
7
|
+
* `FormField` and surfacing the error through its `error` prop). When
|
|
8
|
+
* omitted, the translated default `t('inputs.email.invalid')` is used.
|
|
9
|
+
*/
|
|
10
|
+
errorMessage?: ReactNode | null;
|
|
11
|
+
/**
|
|
12
|
+
* Called whenever the validation state flips. `valid` is `true` when
|
|
13
|
+
* the value is non-empty AND parses as a valid email, `false`
|
|
14
|
+
* otherwise. The callback fires on every blur AND on every change
|
|
15
|
+
* after the first blur — never before the user has had a chance to
|
|
16
|
+
* type something.
|
|
17
|
+
*/
|
|
18
|
+
onValidityChange?: (valid: boolean) => void;
|
|
19
|
+
/**
|
|
20
|
+
* Skip the built-in validation entirely. The input behaves like a
|
|
21
|
+
* plain `<TextInput type="email">` — useful when the consumer is
|
|
22
|
+
* wiring `FormField`'s `invalid` prop themselves, or running their
|
|
23
|
+
* own schema validation (zod, react-hook-form). Default: `false`.
|
|
24
|
+
*/
|
|
25
|
+
disableBuiltInValidation?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export declare const EmailInput: import("react").ForwardRefExoticComponent<EmailInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
28
|
+
//# sourceMappingURL=email-input.d.ts.map
|
|
@@ -18,6 +18,7 @@ export * from './copy-field';
|
|
|
18
18
|
export * from './date-picker';
|
|
19
19
|
export * from './date-range-picker';
|
|
20
20
|
export * from './date-time-picker';
|
|
21
|
+
export * from './email-input';
|
|
21
22
|
export * from './file-upload';
|
|
22
23
|
export * from './form-field';
|
|
23
24
|
export * from './multi-select';
|
|
@@ -15,6 +15,13 @@ export interface UsePasswordRequirementsOptions {
|
|
|
15
15
|
digit?: boolean;
|
|
16
16
|
/** Adds a "symbol" requirement when true. Matches anything outside `[A-Za-z0-9\s]`. */
|
|
17
17
|
symbol?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Adds a "no spaces" requirement when true. Fails if the value
|
|
20
|
+
* contains any whitespace character (space, tab, non-breaking space,
|
|
21
|
+
* narrow no-break space, etc.). Useful to catch paste-time stray
|
|
22
|
+
* whitespace from credential managers.
|
|
23
|
+
*/
|
|
24
|
+
noSpaces?: boolean;
|
|
18
25
|
}
|
|
19
26
|
/**
|
|
20
27
|
* Builds the common set of password requirements with i18n-resolved
|
|
@@ -23,7 +30,7 @@ export interface UsePasswordRequirementsOptions {
|
|
|
23
30
|
* generic enough for any consumer.
|
|
24
31
|
*
|
|
25
32
|
* Each opt-in flag adds one row to the returned array, in a stable
|
|
26
|
-
* visual order (length → uppercase → lowercase → digit → symbol).
|
|
33
|
+
* visual order (length → uppercase → lowercase → digit → symbol → noSpaces).
|
|
27
34
|
* Predicates are pure and run on every keystroke.
|
|
28
35
|
*
|
|
29
36
|
* @example
|
|
@@ -32,6 +39,7 @@ export interface UsePasswordRequirementsOptions {
|
|
|
32
39
|
* uppercase: true,
|
|
33
40
|
* lowercase: true,
|
|
34
41
|
* digit: true,
|
|
42
|
+
* noSpaces: true,
|
|
35
43
|
* });
|
|
36
44
|
* <PasswordInput requirements={requirements} deriveStrength />
|
|
37
45
|
*/
|
package/dist/i18n/config.js
CHANGED
|
@@ -98,6 +98,7 @@ const a = {
|
|
|
98
98
|
lowercase: "One lowercase letter",
|
|
99
99
|
digit: "One number",
|
|
100
100
|
symbol: "One symbol",
|
|
101
|
+
noSpaces: "No spaces",
|
|
101
102
|
met: "met",
|
|
102
103
|
unmet: "not yet met"
|
|
103
104
|
}
|
|
@@ -167,6 +168,9 @@ const a = {
|
|
|
167
168
|
popularCountries: "Popular",
|
|
168
169
|
allCountries: "All countries"
|
|
169
170
|
},
|
|
171
|
+
email: {
|
|
172
|
+
invalid: "Invalid email"
|
|
173
|
+
},
|
|
170
174
|
colorPicker: {
|
|
171
175
|
hex: "Hex",
|
|
172
176
|
hue: "Hue",
|
|
@@ -1116,6 +1120,7 @@ const a = {
|
|
|
1116
1120
|
lowercase: "Una lettera minuscola",
|
|
1117
1121
|
digit: "Un numero",
|
|
1118
1122
|
symbol: "Un simbolo",
|
|
1123
|
+
noSpaces: "Nessuno spazio",
|
|
1119
1124
|
met: "soddisfatto",
|
|
1120
1125
|
unmet: "non ancora soddisfatto"
|
|
1121
1126
|
}
|
|
@@ -1185,6 +1190,9 @@ const a = {
|
|
|
1185
1190
|
popularCountries: "Più usati",
|
|
1186
1191
|
allCountries: "Tutti i paesi"
|
|
1187
1192
|
},
|
|
1193
|
+
email: {
|
|
1194
|
+
invalid: "Indirizzo email non valido"
|
|
1195
|
+
},
|
|
1188
1196
|
colorPicker: {
|
|
1189
1197
|
hex: "Hex",
|
|
1190
1198
|
hue: "Tonalità",
|
|
@@ -2098,6 +2106,7 @@ const a = {
|
|
|
2098
2106
|
lowercase: "Ein Kleinbuchstabe",
|
|
2099
2107
|
digit: "Eine Zahl",
|
|
2100
2108
|
symbol: "Ein Sonderzeichen",
|
|
2109
|
+
noSpaces: "Keine Leerzeichen",
|
|
2101
2110
|
met: "erfüllt",
|
|
2102
2111
|
unmet: "noch nicht erfüllt"
|
|
2103
2112
|
},
|
|
@@ -2173,6 +2182,9 @@ const a = {
|
|
|
2173
2182
|
popularCountries: "Häufig verwendet",
|
|
2174
2183
|
allCountries: "Alle Länder"
|
|
2175
2184
|
},
|
|
2185
|
+
email: {
|
|
2186
|
+
invalid: "Ungültige E-Mail-Adresse"
|
|
2187
|
+
},
|
|
2176
2188
|
colorPicker: {
|
|
2177
2189
|
hex: "Hex",
|
|
2178
2190
|
hue: "Farbton",
|
package/dist/i18n/resources.d.ts
CHANGED
|
@@ -96,6 +96,7 @@ export declare const enUi: {
|
|
|
96
96
|
readonly lowercase: "One lowercase letter";
|
|
97
97
|
readonly digit: "One number";
|
|
98
98
|
readonly symbol: "One symbol";
|
|
99
|
+
readonly noSpaces: "No spaces";
|
|
99
100
|
readonly met: "met";
|
|
100
101
|
readonly unmet: "not yet met";
|
|
101
102
|
};
|
|
@@ -165,6 +166,9 @@ export declare const enUi: {
|
|
|
165
166
|
readonly popularCountries: "Popular";
|
|
166
167
|
readonly allCountries: "All countries";
|
|
167
168
|
};
|
|
169
|
+
readonly email: {
|
|
170
|
+
readonly invalid: "Invalid email";
|
|
171
|
+
};
|
|
168
172
|
readonly colorPicker: {
|
|
169
173
|
readonly hex: "Hex";
|
|
170
174
|
readonly hue: "Hue";
|
|
@@ -1130,6 +1134,7 @@ export declare const itUi: {
|
|
|
1130
1134
|
readonly lowercase: "Una lettera minuscola";
|
|
1131
1135
|
readonly digit: "Un numero";
|
|
1132
1136
|
readonly symbol: "Un simbolo";
|
|
1137
|
+
readonly noSpaces: "Nessuno spazio";
|
|
1133
1138
|
readonly met: "soddisfatto";
|
|
1134
1139
|
readonly unmet: "non ancora soddisfatto";
|
|
1135
1140
|
};
|
|
@@ -1199,6 +1204,9 @@ export declare const itUi: {
|
|
|
1199
1204
|
readonly popularCountries: "Più usati";
|
|
1200
1205
|
readonly allCountries: "Tutti i paesi";
|
|
1201
1206
|
};
|
|
1207
|
+
readonly email: {
|
|
1208
|
+
readonly invalid: "Indirizzo email non valido";
|
|
1209
|
+
};
|
|
1202
1210
|
readonly colorPicker: {
|
|
1203
1211
|
readonly hex: "Hex";
|
|
1204
1212
|
readonly hue: "Tonalità";
|
|
@@ -2137,6 +2145,7 @@ export declare const deUi: {
|
|
|
2137
2145
|
readonly lowercase: "Ein Kleinbuchstabe";
|
|
2138
2146
|
readonly digit: "Eine Zahl";
|
|
2139
2147
|
readonly symbol: "Ein Sonderzeichen";
|
|
2148
|
+
readonly noSpaces: "Keine Leerzeichen";
|
|
2140
2149
|
readonly met: "erfüllt";
|
|
2141
2150
|
readonly unmet: "noch nicht erfüllt";
|
|
2142
2151
|
};
|
|
@@ -2212,6 +2221,9 @@ export declare const deUi: {
|
|
|
2212
2221
|
readonly popularCountries: "Häufig verwendet";
|
|
2213
2222
|
readonly allCountries: "Alle Länder";
|
|
2214
2223
|
};
|
|
2224
|
+
readonly email: {
|
|
2225
|
+
readonly invalid: "Ungültige E-Mail-Adresse";
|
|
2226
|
+
};
|
|
2215
2227
|
readonly colorPicker: {
|
|
2216
2228
|
readonly hex: "Hex";
|
|
2217
2229
|
readonly hue: "Farbton";
|