@zag-js/pin-input 0.2.5 → 0.2.7
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/chunk-6HKN4SOY.mjs +344 -0
- package/dist/chunk-BJXKBZJG.mjs +9 -0
- package/dist/chunk-NT4W6JYX.mjs +7 -0
- package/dist/chunk-OI3DK2PT.mjs +100 -0
- package/dist/chunk-QX3A66VS.mjs +212 -0
- package/dist/index.d.ts +7 -1002
- package/dist/index.js +52 -36
- package/dist/index.mjs +11 -623
- package/dist/pin-input.anatomy.d.ts +6 -0
- package/dist/pin-input.anatomy.js +34 -0
- package/dist/pin-input.anatomy.mjs +8 -0
- package/dist/pin-input.connect.d.ts +22 -0
- package/dist/pin-input.connect.js +328 -0
- package/dist/pin-input.connect.mjs +9 -0
- package/dist/pin-input.dom.d.ts +38 -0
- package/dist/pin-input.dom.js +121 -0
- package/dist/pin-input.dom.mjs +6 -0
- package/dist/pin-input.machine.d.ts +7 -0
- package/dist/pin-input.machine.js +460 -0
- package/dist/pin-input.machine.mjs +8 -0
- package/dist/pin-input.types.d.ts +133 -0
- package/dist/pin-input.types.js +18 -0
- package/dist/pin-input.types.mjs +0 -0
- package/package.json +22 -12
package/dist/index.mjs
CHANGED
|
@@ -1,626 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
function isDocument(el) {
|
|
14
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
15
|
-
}
|
|
16
|
-
function isWindow(value) {
|
|
17
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
18
|
-
}
|
|
19
|
-
function getDocument(el) {
|
|
20
|
-
var _a;
|
|
21
|
-
if (isWindow(el))
|
|
22
|
-
return el.document;
|
|
23
|
-
if (isDocument(el))
|
|
24
|
-
return el;
|
|
25
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
26
|
-
}
|
|
27
|
-
function defineDomHelpers(helpers) {
|
|
28
|
-
const dom2 = {
|
|
29
|
-
getRootNode: (ctx) => {
|
|
30
|
-
var _a, _b;
|
|
31
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
32
|
-
},
|
|
33
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
34
|
-
getWin: (ctx) => {
|
|
35
|
-
var _a;
|
|
36
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
37
|
-
},
|
|
38
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
39
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
40
|
-
createEmitter: (ctx, target) => {
|
|
41
|
-
const win = dom2.getWin(ctx);
|
|
42
|
-
return function emit(evt, detail, options) {
|
|
43
|
-
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
44
|
-
const eventName = `zag:${evt}`;
|
|
45
|
-
const init = { bubbles, cancelable, composed, detail };
|
|
46
|
-
const event = new win.CustomEvent(eventName, init);
|
|
47
|
-
target.dispatchEvent(event);
|
|
48
|
-
};
|
|
49
|
-
},
|
|
50
|
-
createListener: (target) => {
|
|
51
|
-
return function listen(evt, handler) {
|
|
52
|
-
const eventName = `zag:${evt}`;
|
|
53
|
-
const listener = (e) => handler(e);
|
|
54
|
-
target.addEventListener(eventName, listener);
|
|
55
|
-
return () => target.removeEventListener(eventName, listener);
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
return {
|
|
60
|
-
...dom2,
|
|
61
|
-
...helpers
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
function getNativeEvent(e) {
|
|
65
|
-
var _a;
|
|
66
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
67
|
-
}
|
|
68
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
69
|
-
var rtlKeyMap = {
|
|
70
|
-
ArrowLeft: "ArrowRight",
|
|
71
|
-
ArrowRight: "ArrowLeft"
|
|
72
|
-
};
|
|
73
|
-
var sameKeyMap = {
|
|
74
|
-
Up: "ArrowUp",
|
|
75
|
-
Down: "ArrowDown",
|
|
76
|
-
Esc: "Escape",
|
|
77
|
-
" ": "Space",
|
|
78
|
-
",": "Comma",
|
|
79
|
-
Left: "ArrowLeft",
|
|
80
|
-
Right: "ArrowRight"
|
|
81
|
-
};
|
|
82
|
-
function getEventKey(event, options = {}) {
|
|
83
|
-
var _a;
|
|
84
|
-
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
85
|
-
let { key } = event;
|
|
86
|
-
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
87
|
-
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
88
|
-
if (isRtl && key in rtlKeyMap) {
|
|
89
|
-
key = rtlKeyMap[key];
|
|
90
|
-
}
|
|
91
|
-
return key;
|
|
92
|
-
}
|
|
93
|
-
function raf(fn) {
|
|
94
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
95
|
-
return function cleanup() {
|
|
96
|
-
globalThis.cancelAnimationFrame(id);
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
function queryAll(root, selector) {
|
|
100
|
-
var _a;
|
|
101
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
102
|
-
}
|
|
103
|
-
var visuallyHiddenStyle = {
|
|
104
|
-
border: "0",
|
|
105
|
-
clip: "rect(0 0 0 0)",
|
|
106
|
-
height: "1px",
|
|
107
|
-
margin: "-1px",
|
|
108
|
-
overflow: "hidden",
|
|
109
|
-
padding: "0",
|
|
110
|
-
position: "absolute",
|
|
111
|
-
width: "1px",
|
|
112
|
-
whiteSpace: "nowrap",
|
|
113
|
-
wordWrap: "normal"
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
// ../../utilities/core/dist/index.mjs
|
|
117
|
-
var isArray = (v) => Array.isArray(v);
|
|
118
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
119
|
-
function compact(obj) {
|
|
120
|
-
if (obj === void 0)
|
|
121
|
-
return obj;
|
|
122
|
-
return Object.fromEntries(
|
|
123
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
function invariant(...a) {
|
|
127
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
128
|
-
const c = a.length === 2 ? a[0] : true;
|
|
129
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
130
|
-
throw new Error(m);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// src/pin-input.dom.ts
|
|
135
|
-
var dom = defineDomHelpers({
|
|
136
|
-
getRootId: (ctx) => {
|
|
137
|
-
var _a, _b;
|
|
138
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
|
|
139
|
-
},
|
|
140
|
-
getInputId: (ctx, id) => {
|
|
141
|
-
var _a, _b, _c;
|
|
142
|
-
return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
|
|
143
|
-
},
|
|
144
|
-
getHiddenInputId: (ctx) => {
|
|
145
|
-
var _a, _b;
|
|
146
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
|
|
147
|
-
},
|
|
148
|
-
getLabelId: (ctx) => {
|
|
149
|
-
var _a, _b;
|
|
150
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
|
|
151
|
-
},
|
|
152
|
-
getControlId: (ctx) => {
|
|
153
|
-
var _a, _b;
|
|
154
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
|
|
155
|
-
},
|
|
156
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
157
|
-
getElements: (ctx) => {
|
|
158
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
159
|
-
const selector = `input[data-ownedby=${ownerId}]`;
|
|
160
|
-
return queryAll(dom.getRootEl(ctx), selector);
|
|
161
|
-
},
|
|
162
|
-
getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
|
|
163
|
-
getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
|
|
164
|
-
getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
// src/pin-input.connect.ts
|
|
168
|
-
function connect(state, send, normalize) {
|
|
169
|
-
const isValueComplete = state.context.isValueComplete;
|
|
170
|
-
const isInvalid = state.context.invalid;
|
|
171
|
-
const focusedIndex = state.context.focusedIndex;
|
|
172
|
-
const translations = state.context.translations;
|
|
173
|
-
function focus() {
|
|
174
|
-
var _a;
|
|
175
|
-
(_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
176
|
-
}
|
|
177
|
-
return {
|
|
178
|
-
value: state.context.value,
|
|
179
|
-
valueAsString: state.context.valueAsString,
|
|
180
|
-
isValueComplete,
|
|
181
|
-
setValue(value) {
|
|
182
|
-
if (!Array.isArray(value)) {
|
|
183
|
-
invariant("[pin-input/setValue] value must be an array");
|
|
184
|
-
}
|
|
185
|
-
send({ type: "SET_VALUE", value });
|
|
186
|
-
},
|
|
187
|
-
clearValue() {
|
|
188
|
-
send({ type: "CLEAR_VALUE" });
|
|
189
|
-
},
|
|
190
|
-
setValueAtIndex(index, value) {
|
|
191
|
-
send({ type: "SET_VALUE", value, index });
|
|
192
|
-
},
|
|
193
|
-
focus,
|
|
194
|
-
rootProps: normalize.element({
|
|
195
|
-
dir: state.context.dir,
|
|
196
|
-
...parts.root.attrs,
|
|
197
|
-
id: dom.getRootId(state.context),
|
|
198
|
-
"data-invalid": dataAttr(isInvalid),
|
|
199
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
200
|
-
"data-complete": dataAttr(isValueComplete)
|
|
201
|
-
}),
|
|
202
|
-
labelProps: normalize.label({
|
|
203
|
-
...parts.label.attrs,
|
|
204
|
-
htmlFor: dom.getHiddenInputId(state.context),
|
|
205
|
-
id: dom.getLabelId(state.context),
|
|
206
|
-
"data-invalid": dataAttr(isInvalid),
|
|
207
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
208
|
-
"data-complete": dataAttr(isValueComplete),
|
|
209
|
-
onClick: (event) => {
|
|
210
|
-
event.preventDefault();
|
|
211
|
-
focus();
|
|
212
|
-
}
|
|
213
|
-
}),
|
|
214
|
-
hiddenInputProps: normalize.input({
|
|
215
|
-
...parts.hiddenInput.attrs,
|
|
216
|
-
"aria-hidden": true,
|
|
217
|
-
type: "text",
|
|
218
|
-
tabIndex: -1,
|
|
219
|
-
id: dom.getHiddenInputId(state.context),
|
|
220
|
-
name: state.context.name,
|
|
221
|
-
form: state.context.form,
|
|
222
|
-
style: visuallyHiddenStyle,
|
|
223
|
-
maxLength: state.context.valueLength,
|
|
224
|
-
defaultValue: state.context.valueAsString
|
|
225
|
-
}),
|
|
226
|
-
controlProps: normalize.element({
|
|
227
|
-
...parts.control.attrs,
|
|
228
|
-
id: dom.getControlId(state.context)
|
|
229
|
-
}),
|
|
230
|
-
getInputProps({ index }) {
|
|
231
|
-
const inputType = state.context.type === "numeric" ? "tel" : "text";
|
|
232
|
-
return normalize.input({
|
|
233
|
-
...parts.input.attrs,
|
|
234
|
-
disabled: state.context.disabled,
|
|
235
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
236
|
-
"data-complete": dataAttr(isValueComplete),
|
|
237
|
-
id: dom.getInputId(state.context, index.toString()),
|
|
238
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
239
|
-
"aria-label": translations.inputLabel(index, state.context.valueLength),
|
|
240
|
-
inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
|
|
241
|
-
"aria-invalid": ariaAttr(isInvalid),
|
|
242
|
-
"data-invalid": dataAttr(isInvalid),
|
|
243
|
-
type: state.context.mask ? "password" : inputType,
|
|
244
|
-
defaultValue: state.context.value[index] || "",
|
|
245
|
-
autoCapitalize: "none",
|
|
246
|
-
autoComplete: state.context.otp ? "one-time-code" : "off",
|
|
247
|
-
placeholder: focusedIndex === index ? "" : state.context.placeholder,
|
|
248
|
-
onChange(event) {
|
|
249
|
-
const evt = getNativeEvent(event);
|
|
250
|
-
const { value } = event.currentTarget;
|
|
251
|
-
if (evt.inputType === "insertFromPaste" || value.length > 2) {
|
|
252
|
-
send({ type: "PASTE", value });
|
|
253
|
-
event.preventDefault();
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
if (evt.inputType === "deleteContentBackward") {
|
|
257
|
-
send("BACKSPACE");
|
|
258
|
-
return;
|
|
259
|
-
}
|
|
260
|
-
send({ type: "INPUT", value });
|
|
261
|
-
},
|
|
262
|
-
onKeyDown(event) {
|
|
263
|
-
const evt = getNativeEvent(event);
|
|
264
|
-
if (evt.isComposing || isModifiedEvent(evt))
|
|
265
|
-
return;
|
|
266
|
-
const keyMap = {
|
|
267
|
-
Backspace() {
|
|
268
|
-
send("BACKSPACE");
|
|
269
|
-
},
|
|
270
|
-
Delete() {
|
|
271
|
-
send("DELETE");
|
|
272
|
-
},
|
|
273
|
-
ArrowLeft() {
|
|
274
|
-
send("ARROW_LEFT");
|
|
275
|
-
},
|
|
276
|
-
ArrowRight() {
|
|
277
|
-
send("ARROW_RIGHT");
|
|
278
|
-
},
|
|
279
|
-
Enter() {
|
|
280
|
-
send("ENTER");
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
const key = getEventKey(event, { dir: state.context.dir });
|
|
284
|
-
const exec = keyMap[key];
|
|
285
|
-
if (exec) {
|
|
286
|
-
exec(event);
|
|
287
|
-
event.preventDefault();
|
|
288
|
-
} else {
|
|
289
|
-
if (key === "Tab")
|
|
290
|
-
return;
|
|
291
|
-
send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() });
|
|
292
|
-
}
|
|
293
|
-
},
|
|
294
|
-
onFocus() {
|
|
295
|
-
send({ type: "FOCUS", index });
|
|
296
|
-
},
|
|
297
|
-
onBlur() {
|
|
298
|
-
send({ type: "BLUR", index });
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
};
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
// src/pin-input.machine.ts
|
|
306
|
-
import { createMachine, guards } from "@zag-js/core";
|
|
307
|
-
|
|
308
|
-
// ../../utilities/form-utils/dist/index.mjs
|
|
309
|
-
function getWindow(el) {
|
|
310
|
-
var _a;
|
|
311
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
312
|
-
}
|
|
313
|
-
function getDescriptor(el, options) {
|
|
314
|
-
var _a;
|
|
315
|
-
const { type, property = "value" } = options;
|
|
316
|
-
const proto = getWindow(el)[type].prototype;
|
|
317
|
-
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
318
|
-
}
|
|
319
|
-
function dispatchInputValueEvent(el, value) {
|
|
320
|
-
var _a;
|
|
321
|
-
if (!el)
|
|
322
|
-
return;
|
|
323
|
-
const win = getWindow(el);
|
|
324
|
-
if (!(el instanceof win.HTMLInputElement))
|
|
325
|
-
return;
|
|
326
|
-
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
327
|
-
(_a = desc.set) == null ? void 0 : _a.call(el, value);
|
|
328
|
-
const event = new win.Event("input", { bubbles: true });
|
|
329
|
-
el.dispatchEvent(event);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
// src/pin-input.machine.ts
|
|
333
|
-
var { and, not } = guards;
|
|
334
|
-
function machine(userContext) {
|
|
335
|
-
const ctx = compact(userContext);
|
|
336
|
-
return createMachine(
|
|
337
|
-
{
|
|
338
|
-
id: "pin-input",
|
|
339
|
-
initial: "unknown",
|
|
340
|
-
context: {
|
|
341
|
-
value: [],
|
|
342
|
-
focusedIndex: -1,
|
|
343
|
-
placeholder: "\u25CB",
|
|
344
|
-
otp: false,
|
|
345
|
-
type: "numeric",
|
|
346
|
-
...ctx,
|
|
347
|
-
translations: {
|
|
348
|
-
inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
|
|
349
|
-
...ctx.translations
|
|
350
|
-
}
|
|
351
|
-
},
|
|
352
|
-
computed: {
|
|
353
|
-
valueLength: (ctx2) => ctx2.value.length,
|
|
354
|
-
filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").length,
|
|
355
|
-
isValueComplete: (ctx2) => ctx2.valueLength === ctx2.filledValueLength,
|
|
356
|
-
valueAsString: (ctx2) => ctx2.value.join(""),
|
|
357
|
-
focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex]
|
|
358
|
-
},
|
|
359
|
-
watch: {
|
|
360
|
-
focusedIndex: ["focusInput", "setInputSelection"],
|
|
361
|
-
value: ["invokeOnChange", "dispatchInputEvent"],
|
|
362
|
-
isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
|
|
363
|
-
},
|
|
364
|
-
on: {
|
|
365
|
-
SET_VALUE: [
|
|
366
|
-
{
|
|
367
|
-
guard: "hasIndex",
|
|
368
|
-
actions: "setValueAtIndex"
|
|
369
|
-
},
|
|
370
|
-
{ actions: "setValue" }
|
|
371
|
-
],
|
|
372
|
-
CLEAR_VALUE: [
|
|
373
|
-
{
|
|
374
|
-
guard: "isDisabled",
|
|
375
|
-
actions: "clearValue"
|
|
376
|
-
},
|
|
377
|
-
{
|
|
378
|
-
actions: ["clearValue", "setFocusIndexToFirst"]
|
|
379
|
-
}
|
|
380
|
-
]
|
|
381
|
-
},
|
|
382
|
-
states: {
|
|
383
|
-
unknown: {
|
|
384
|
-
on: {
|
|
385
|
-
SETUP: [
|
|
386
|
-
{
|
|
387
|
-
guard: "autoFocus",
|
|
388
|
-
target: "focused",
|
|
389
|
-
actions: ["setupValue", "setFocusIndexToFirst"]
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
target: "idle",
|
|
393
|
-
actions: "setupValue"
|
|
394
|
-
}
|
|
395
|
-
]
|
|
396
|
-
}
|
|
397
|
-
},
|
|
398
|
-
idle: {
|
|
399
|
-
on: {
|
|
400
|
-
FOCUS: {
|
|
401
|
-
target: "focused",
|
|
402
|
-
actions: "setFocusedIndex"
|
|
403
|
-
}
|
|
404
|
-
}
|
|
405
|
-
},
|
|
406
|
-
focused: {
|
|
407
|
-
on: {
|
|
408
|
-
INPUT: [
|
|
409
|
-
{
|
|
410
|
-
guard: and("isFinalValue", "isValidValue"),
|
|
411
|
-
actions: ["setFocusedValue", "dispatchInputEventIfNeeded"]
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
guard: "isValidValue",
|
|
415
|
-
actions: ["setFocusedValue", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
|
|
416
|
-
}
|
|
417
|
-
],
|
|
418
|
-
PASTE: [
|
|
419
|
-
{
|
|
420
|
-
guard: "isValidValue",
|
|
421
|
-
actions: ["setPastedValue", "setLastValueFocusIndex"]
|
|
422
|
-
},
|
|
423
|
-
{ actions: "resetFocusedValue" }
|
|
424
|
-
],
|
|
425
|
-
BLUR: {
|
|
426
|
-
target: "idle",
|
|
427
|
-
actions: "clearFocusedIndex"
|
|
428
|
-
},
|
|
429
|
-
DELETE: {
|
|
430
|
-
guard: "hasValue",
|
|
431
|
-
actions: "clearFocusedValue"
|
|
432
|
-
},
|
|
433
|
-
ARROW_LEFT: {
|
|
434
|
-
actions: "setPrevFocusedIndex"
|
|
435
|
-
},
|
|
436
|
-
ARROW_RIGHT: {
|
|
437
|
-
actions: "setNextFocusedIndex"
|
|
438
|
-
},
|
|
439
|
-
BACKSPACE: [
|
|
440
|
-
{
|
|
441
|
-
guard: "hasValue",
|
|
442
|
-
actions: "clearFocusedValue"
|
|
443
|
-
},
|
|
444
|
-
{
|
|
445
|
-
actions: ["setPrevFocusedIndex", "clearFocusedValue"]
|
|
446
|
-
}
|
|
447
|
-
],
|
|
448
|
-
ENTER: {
|
|
449
|
-
guard: "isValueComplete",
|
|
450
|
-
actions: "requestFormSubmit"
|
|
451
|
-
},
|
|
452
|
-
KEY_DOWN: {
|
|
453
|
-
guard: not("isValidValue"),
|
|
454
|
-
actions: ["preventDefault", "invokeOnInvalid"]
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
},
|
|
460
|
-
{
|
|
461
|
-
guards: {
|
|
462
|
-
autoFocus: (ctx2) => !!ctx2.autoFocus,
|
|
463
|
-
isValueEmpty: (_ctx, evt) => evt.value === "",
|
|
464
|
-
hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
|
|
465
|
-
isValueComplete: (ctx2) => ctx2.isValueComplete,
|
|
466
|
-
isValidValue: (ctx2, evt) => {
|
|
467
|
-
if (!ctx2.pattern)
|
|
468
|
-
return isValidType(evt.value, ctx2.type);
|
|
469
|
-
const regex = new RegExp(ctx2.pattern, "g");
|
|
470
|
-
return regex.test(evt.value);
|
|
471
|
-
},
|
|
472
|
-
isFinalValue: (ctx2) => {
|
|
473
|
-
return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
|
|
474
|
-
},
|
|
475
|
-
isLastInputFocused: (ctx2) => ctx2.focusedIndex === ctx2.valueLength - 1,
|
|
476
|
-
hasIndex: (_ctx, evt) => evt.index !== void 0,
|
|
477
|
-
isDisabled: (ctx2) => !!ctx2.disabled
|
|
478
|
-
},
|
|
479
|
-
actions: {
|
|
480
|
-
setupValue: (ctx2) => {
|
|
481
|
-
const inputs = dom.getElements(ctx2);
|
|
482
|
-
const empty = Array.from({ length: inputs.length }).map(() => "");
|
|
483
|
-
ctx2.value = Object.assign(empty, ctx2.value);
|
|
484
|
-
},
|
|
485
|
-
focusInput: (ctx2) => {
|
|
486
|
-
raf(() => {
|
|
487
|
-
var _a;
|
|
488
|
-
if (ctx2.focusedIndex === -1)
|
|
489
|
-
return;
|
|
490
|
-
(_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
|
|
491
|
-
});
|
|
492
|
-
},
|
|
493
|
-
setInputSelection: (ctx2) => {
|
|
494
|
-
raf(() => {
|
|
495
|
-
if (ctx2.focusedIndex === -1)
|
|
496
|
-
return;
|
|
497
|
-
const input = dom.getFocusedEl(ctx2);
|
|
498
|
-
const length = input.value.length;
|
|
499
|
-
input.selectionStart = ctx2.selectOnFocus ? 0 : length;
|
|
500
|
-
input.selectionEnd = length;
|
|
501
|
-
});
|
|
502
|
-
},
|
|
503
|
-
invokeOnComplete: (ctx2) => {
|
|
504
|
-
var _a;
|
|
505
|
-
if (!ctx2.isValueComplete)
|
|
506
|
-
return;
|
|
507
|
-
(_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
|
|
508
|
-
},
|
|
509
|
-
invokeOnChange: (ctx2, evt) => {
|
|
510
|
-
var _a;
|
|
511
|
-
if (evt.type === "SETUP")
|
|
512
|
-
return;
|
|
513
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
|
|
514
|
-
},
|
|
515
|
-
dispatchInputEvent: (ctx2, evt) => {
|
|
516
|
-
if (evt.type === "SETUP")
|
|
517
|
-
return;
|
|
518
|
-
dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
|
|
519
|
-
const inputs = dom.getElements(ctx2);
|
|
520
|
-
ctx2.value.forEach((val, index) => {
|
|
521
|
-
const input = inputs[index];
|
|
522
|
-
input.value = val || "";
|
|
523
|
-
});
|
|
524
|
-
},
|
|
525
|
-
invokeOnInvalid: (ctx2, evt) => {
|
|
526
|
-
var _a;
|
|
527
|
-
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { value: evt.value, index: ctx2.focusedIndex });
|
|
528
|
-
},
|
|
529
|
-
clearFocusedIndex: (ctx2) => {
|
|
530
|
-
ctx2.focusedIndex = -1;
|
|
531
|
-
},
|
|
532
|
-
setValue: (ctx2, evt) => {
|
|
533
|
-
assign(ctx2, evt.value);
|
|
534
|
-
},
|
|
535
|
-
setFocusedIndex: (ctx2, evt) => {
|
|
536
|
-
ctx2.focusedIndex = evt.index;
|
|
537
|
-
},
|
|
538
|
-
setFocusedValue: (ctx2, evt) => {
|
|
539
|
-
ctx2.value[ctx2.focusedIndex] = lastChar(evt.value);
|
|
540
|
-
},
|
|
541
|
-
dispatchInputEventIfNeeded: (ctx2, evt) => {
|
|
542
|
-
const valueIsChanged = lastChar(evt.value) !== ctx2.focusedValue;
|
|
543
|
-
if (evt.value.length <= 1 || valueIsChanged)
|
|
544
|
-
return;
|
|
545
|
-
const inputs = dom.getElements(ctx2);
|
|
546
|
-
const input = inputs[ctx2.focusedIndex];
|
|
547
|
-
input.value = lastChar(evt.value);
|
|
548
|
-
},
|
|
549
|
-
setPastedValue(ctx2, evt) {
|
|
550
|
-
raf(() => {
|
|
551
|
-
const startIndex = ctx2.focusedValue ? 1 : 0;
|
|
552
|
-
const value = evt.value.substring(startIndex, ctx2.valueLength);
|
|
553
|
-
assign(ctx2, value);
|
|
554
|
-
});
|
|
555
|
-
},
|
|
556
|
-
setValueAtIndex: (ctx2, evt) => {
|
|
557
|
-
ctx2.value[evt.index] = lastChar(evt.value);
|
|
558
|
-
},
|
|
559
|
-
clearValue: (ctx2) => {
|
|
560
|
-
ctx2.value = ctx2.value.map(() => "");
|
|
561
|
-
},
|
|
562
|
-
clearFocusedValue: (ctx2) => {
|
|
563
|
-
ctx2.value[ctx2.focusedIndex] = "";
|
|
564
|
-
},
|
|
565
|
-
resetFocusedValue: (ctx2) => {
|
|
566
|
-
const input = dom.getFocusedEl(ctx2);
|
|
567
|
-
input.value = ctx2.focusedValue;
|
|
568
|
-
},
|
|
569
|
-
setFocusIndexToFirst: (ctx2) => {
|
|
570
|
-
ctx2.focusedIndex = 0;
|
|
571
|
-
},
|
|
572
|
-
setNextFocusedIndex: (ctx2) => {
|
|
573
|
-
ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
|
|
574
|
-
},
|
|
575
|
-
setPrevFocusedIndex: (ctx2) => {
|
|
576
|
-
ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
|
|
577
|
-
},
|
|
578
|
-
setLastValueFocusIndex: (ctx2) => {
|
|
579
|
-
raf(() => {
|
|
580
|
-
ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
|
|
581
|
-
});
|
|
582
|
-
},
|
|
583
|
-
preventDefault(_, evt) {
|
|
584
|
-
evt.preventDefault();
|
|
585
|
-
},
|
|
586
|
-
blurFocusedInputIfNeeded(ctx2) {
|
|
587
|
-
if (!ctx2.blurOnComplete)
|
|
588
|
-
return;
|
|
589
|
-
raf(() => {
|
|
590
|
-
var _a;
|
|
591
|
-
(_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
|
|
592
|
-
});
|
|
593
|
-
},
|
|
594
|
-
requestFormSubmit(ctx2) {
|
|
595
|
-
var _a;
|
|
596
|
-
if (!ctx2.name)
|
|
597
|
-
return;
|
|
598
|
-
const input = dom.getHiddenInputEl(ctx2);
|
|
599
|
-
(_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
);
|
|
604
|
-
}
|
|
605
|
-
var REGEX = {
|
|
606
|
-
numeric: /^[0-9]+$/,
|
|
607
|
-
alphabetic: /^[A-Za-z]+$/,
|
|
608
|
-
alphanumeric: /^[a-zA-Z0-9]+$/i
|
|
609
|
-
};
|
|
610
|
-
function isValidType(value, type) {
|
|
611
|
-
var _a;
|
|
612
|
-
if (!type)
|
|
613
|
-
return true;
|
|
614
|
-
return !!((_a = REGEX[type]) == null ? void 0 : _a.test(value));
|
|
615
|
-
}
|
|
616
|
-
function assign(ctx, value) {
|
|
617
|
-
const valueArr = Array.isArray(value) ? value : value.split("").filter(Boolean);
|
|
618
|
-
const valueObj = Object.assign({}, ctx.value, valueArr);
|
|
619
|
-
ctx.value = Object.values(valueObj);
|
|
620
|
-
}
|
|
621
|
-
function lastChar(value) {
|
|
622
|
-
return value.charAt(value.length - 1);
|
|
623
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
connect
|
|
3
|
+
} from "./chunk-QX3A66VS.mjs";
|
|
4
|
+
import {
|
|
5
|
+
anatomy
|
|
6
|
+
} from "./chunk-BJXKBZJG.mjs";
|
|
7
|
+
import {
|
|
8
|
+
machine
|
|
9
|
+
} from "./chunk-6HKN4SOY.mjs";
|
|
10
|
+
import "./chunk-NT4W6JYX.mjs";
|
|
11
|
+
import "./chunk-OI3DK2PT.mjs";
|
|
624
12
|
export {
|
|
625
13
|
anatomy,
|
|
626
14
|
connect,
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
+
|
|
3
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "hiddenInput" | "input" | "control">;
|
|
4
|
+
declare const parts: Record<"root" | "label" | "hiddenInput" | "input" | "control", _zag_js_anatomy.AnatomyPart>;
|
|
5
|
+
|
|
6
|
+
export { anatomy, parts };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/pin-input.anatomy.ts
|
|
21
|
+
var pin_input_anatomy_exports = {};
|
|
22
|
+
__export(pin_input_anatomy_exports, {
|
|
23
|
+
anatomy: () => anatomy,
|
|
24
|
+
parts: () => parts
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(pin_input_anatomy_exports);
|
|
27
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
28
|
+
var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label", "hiddenInput", "input", "control");
|
|
29
|
+
var parts = anatomy.build();
|
|
30
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
31
|
+
0 && (module.exports = {
|
|
32
|
+
anatomy,
|
|
33
|
+
parts
|
|
34
|
+
});
|