@xaui/native 0.9.1-alpha.28 → 0.9.1-alpha.29

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 (66) hide show
  1. package/dist/{chunk-3JATAB7S.js → chunk-4GTAZM2C.js} +4 -2
  2. package/dist/{chunk-N4UJYDOW.js → chunk-5RFRASSB.js} +20 -18
  3. package/dist/{chunk-V2FQN6ZK.js → chunk-7BOFQN2G.js} +1 -1
  4. package/dist/{chunk-5OXZIZRZ.cjs → chunk-APONC4DB.cjs} +7 -7
  5. package/dist/{chunk-6FBGCF5T.cjs → chunk-AQNWXJYV.cjs} +2 -2
  6. package/dist/chunk-BA2DBSAN.js +102 -0
  7. package/dist/{chunk-TR2TGPDQ.js → chunk-D4SOU26X.js} +1 -1
  8. package/dist/{chunk-CQRUNV6S.cjs → chunk-E25JH7W2.cjs} +17 -17
  9. package/dist/{chunk-V6DGGDHF.cjs → chunk-F3H4TXAY.cjs} +5 -5
  10. package/dist/chunk-F6CQ6CBI.cjs +112 -0
  11. package/dist/{chunk-ZTA47PO5.js → chunk-FDSQOPJH.js} +1 -1
  12. package/dist/{chunk-JCKVYYZO.cjs → chunk-FFEUGWVA.cjs} +3 -3
  13. package/dist/{chunk-YXVKQMCK.cjs → chunk-FNEUOBCV.cjs} +4 -2
  14. package/dist/{chunk-Y7U6ACMB.cjs → chunk-FXHRNUCS.cjs} +2 -2
  15. package/dist/{chunk-J4JFIC4W.cjs → chunk-GCU5A5MM.cjs} +3 -3
  16. package/dist/{chunk-G52TQJBI.js → chunk-HOIQRGSK.js} +1 -1
  17. package/dist/chunk-L3Q5TVYE.js +659 -0
  18. package/dist/{chunk-WEMZ4VMC.js → chunk-NG4GFBDR.js} +1 -1
  19. package/dist/chunk-O5KDIEDH.cjs +735 -0
  20. package/dist/chunk-RZC4VFB5.cjs +698 -0
  21. package/dist/{chunk-5A4M6X5B.cjs → chunk-SVRZJEDU.cjs} +5 -5
  22. package/dist/{chunk-3LKGVKQY.cjs → chunk-TFNB2PNI.cjs} +4 -4
  23. package/dist/{chunk-3YN7JQ55.js → chunk-V3KS5PPK.js} +2 -2
  24. package/dist/{chunk-AXSJPWSJ.js → chunk-V56334S3.js} +1 -1
  25. package/dist/{chunk-EHARM2EN.js → chunk-VUEDYW3M.js} +1 -1
  26. package/dist/{chunk-LKB3RIR2.js → chunk-XYFMSRNJ.js} +2 -2
  27. package/dist/{chunk-56KVKM27.js → chunk-YGOXQSNU.js} +15 -15
  28. package/dist/{chunk-H7DVR52Z.cjs → chunk-YWBTIWT5.cjs} +3 -3
  29. package/dist/components/alert/index.cjs +3 -3
  30. package/dist/components/alert/index.js +2 -2
  31. package/dist/components/button/index.cjs +3 -3
  32. package/dist/components/button/index.js +2 -2
  33. package/dist/components/card/index.cjs +3 -3
  34. package/dist/components/card/index.js +2 -2
  35. package/dist/components/checkbox/index.cjs +4 -4
  36. package/dist/components/checkbox/index.js +3 -3
  37. package/dist/components/chip/index.cjs +3 -3
  38. package/dist/components/chip/index.js +2 -2
  39. package/dist/components/input/index.cjs +3 -3
  40. package/dist/components/input/index.js +2 -2
  41. package/dist/components/input-group/index.cjs +4 -4
  42. package/dist/components/input-group/index.js +3 -3
  43. package/dist/components/input-otp/index.cjs +3 -3
  44. package/dist/components/input-otp/index.js +2 -2
  45. package/dist/components/radio/index.cjs +4 -4
  46. package/dist/components/radio/index.js +3 -3
  47. package/dist/components/switch/index.cjs +25 -0
  48. package/dist/components/switch/index.d.cts +1154 -0
  49. package/dist/components/switch/index.d.ts +1154 -0
  50. package/dist/components/switch/index.js +25 -0
  51. package/dist/components/text-area/index.cjs +4 -4
  52. package/dist/components/text-area/index.js +3 -3
  53. package/dist/components/typography/index.cjs +3 -3
  54. package/dist/components/typography/index.js +2 -2
  55. package/dist/index.cjs +30 -14
  56. package/dist/index.d.cts +1 -0
  57. package/dist/index.d.ts +1 -0
  58. package/dist/index.js +29 -13
  59. package/dist/system/index.cjs +3 -3
  60. package/dist/system/index.d.cts +13 -1
  61. package/dist/system/index.d.ts +13 -1
  62. package/dist/system/index.js +2 -2
  63. package/package.json +11 -1
  64. package/dist/chunk-63TWVWHG.cjs +0 -584
  65. package/dist/chunk-E6EFYPJR.cjs +0 -41
  66. package/dist/chunk-EYJEUXXC.js +0 -98
@@ -0,0 +1,735 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ function _interopRequireDefault(obj) {
7
+ return obj && obj.__esModule ? obj : {
8
+ default: obj
9
+ };
10
+ }
11
+ function _nullishCoalesce(lhs, rhsFn) {
12
+ if (lhs != null) {
13
+ return lhs;
14
+ } else {
15
+ return rhsFn();
16
+ }
17
+ }
18
+ function _optionalChain(ops) {
19
+ let lastAccessLHS = undefined;
20
+ let value = ops[0];
21
+ let i = 1;
22
+ while (i < ops.length) {
23
+ const op = ops[i];
24
+ const fn = ops[i + 1];
25
+ i += 2;
26
+ if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
27
+ return undefined;
28
+ }
29
+ if (op === 'access' || op === 'optionalAccess') {
30
+ lastAccessLHS = value;
31
+ value = fn(value);
32
+ } else if (op === 'call' || op === 'optionalCall') {
33
+ value = fn((...args) => value.call(lastAccessLHS, ...args));
34
+ lastAccessLHS = undefined;
35
+ }
36
+ }
37
+ return value;
38
+ }
39
+ var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
40
+ var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
41
+ var _chunkHUZ4AUM2cjs = require('./chunk-HUZ4AUM2.cjs');
42
+ var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
43
+
44
+ // src/components/input-otp/input-otp-box.tsx
45
+ var _react = require('react');
46
+ var _reactnative = require('react-native');
47
+
48
+ // src/components/input-otp/input-otp.context.ts
49
+ var [InputOTPProvider, useInputOTP] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "InputOTP");
50
+ var [InputOTPBoxProvider, useInputOTPBox] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "InputOTP.Box");
51
+
52
+ // src/components/input-otp/input-otp-caret.tsx
53
+
54
+ var _reactnativereanimated = require('react-native-reanimated');
55
+ var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
56
+ var _jsxruntime = require('react/jsx-runtime');
57
+ var BLINK_DURATION = 530;
58
+ function InputOTPCaret({
59
+ style,
60
+ animation = true,
61
+ ...props
62
+ }) {
63
+ const {
64
+ caretStyle
65
+ } = useInputOTP();
66
+ const {
67
+ slot
68
+ } = useInputOTPBox();
69
+ const [styleProps] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
70
+ const barStyle = [caretStyle, styleProps, style];
71
+ if (!_optionalChain([slot, 'optionalAccess', _2 => _2.isCaretVisible])) return null;
72
+ if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
73
+ style: barStyle
74
+ });
75
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, BlinkingCaret, {
76
+ style: barStyle
77
+ });
78
+ }
79
+ InputOTPCaret.displayName = "XAUI.InputOTP.Caret";
80
+ const _worklet_948084595658_init_data = {
81
+ code: "function chunkO5KDIEDHCjs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
82
+ location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-O5KDIEDH.cjs",
83
+ sourceMap: "{\"version\":3,\"names\":[\"chunkO5KDIEDHCjs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-O5KDIEDH.cjs\"],\"mappings\":\"AA4D6E,SAAAA,iBAAMA,CAAA,QAAAC,OAAA,OAAAC,SAAA,CAE/E,MAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC,CACnC\",\"ignoreList\":[]}"
84
+ };
85
+ function BlinkingCaret({
86
+ style
87
+ }) {
88
+ const opacity = _reactnativereanimated.useSharedValue.call(void 0, 1);
89
+ _react.useEffect.call(void 0, () => {
90
+ opacity.value = _reactnativereanimated.withRepeat.call(void 0, _reactnativereanimated.withTiming.call(void 0, 0, {
91
+ duration: BLINK_DURATION,
92
+ easing: _reactnativereanimated.Easing.ease
93
+ }), -1, true);
94
+ return () => _reactnativereanimated.cancelAnimation.call(void 0, opacity);
95
+ }, [opacity]);
96
+ const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkO5KDIEDHCjs1Factory({
97
+ _worklet_948084595658_init_data,
98
+ opacity
99
+ }) {
100
+ const _e = [new global.Error(), -2, -27];
101
+ const chunkO5KDIEDHCjs1 = function () {
102
+ return {
103
+ opacity: opacity.value
104
+ };
105
+ };
106
+ chunkO5KDIEDHCjs1.__closure = {
107
+ opacity
108
+ };
109
+ chunkO5KDIEDHCjs1.__workletHash = 948084595658;
110
+ chunkO5KDIEDHCjs1.__pluginVersion = "0.7.4";
111
+ chunkO5KDIEDHCjs1.__initData = _worklet_948084595658_init_data;
112
+ chunkO5KDIEDHCjs1.__stackDetails = _e;
113
+ return chunkO5KDIEDHCjs1;
114
+ }({
115
+ _worklet_948084595658_init_data,
116
+ opacity
117
+ }), [opacity]);
118
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
119
+ style: [style, animatedStyle]
120
+ });
121
+ }
122
+
123
+ // src/components/input-otp/input-otp-placeholder.tsx
124
+
125
+ var InputOTPPlaceholder = _react.forwardRef.call(void 0, function InputOTPPlaceholder2({
126
+ children,
127
+ style,
128
+ maxFontSizeMultiplier = 1.6,
129
+ ...props
130
+ }, ref) {
131
+ const {
132
+ placeholderStyle
133
+ } = useInputOTP();
134
+ const {
135
+ slot
136
+ } = useInputOTPBox();
137
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
138
+ const char = _nullishCoalesce(children, () => _optionalChain([slot, 'optionalAccess', _3 => _3.placeholderChar]));
139
+ if (!char) return null;
140
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
141
+ ref,
142
+ maxFontSizeMultiplier,
143
+ style: [placeholderStyle, styleProps, style],
144
+ ...rest,
145
+ children: char
146
+ });
147
+ });
148
+ InputOTPPlaceholder.displayName = "XAUI.InputOTP.Placeholder";
149
+
150
+ // src/components/input-otp/input-otp-value.tsx
151
+
152
+ var InputOTPValue = _react.forwardRef.call(void 0, function InputOTPValue2({
153
+ children,
154
+ style,
155
+ maxFontSizeMultiplier = 1.6,
156
+ ...props
157
+ }, ref) {
158
+ const {
159
+ valueStyle
160
+ } = useInputOTP();
161
+ const {
162
+ slot
163
+ } = useInputOTPBox();
164
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
165
+ const char = _nullishCoalesce(children, () => _optionalChain([slot, 'optionalAccess', _4 => _4.char]));
166
+ if (!char) return null;
167
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
168
+ ref,
169
+ maxFontSizeMultiplier,
170
+ style: [valueStyle, styleProps, style],
171
+ ...rest,
172
+ children: char
173
+ });
174
+ });
175
+ InputOTPValue.displayName = "XAUI.InputOTP.Value";
176
+
177
+ // src/components/input-otp/input-otp-box.tsx
178
+
179
+ var InputOTPBox = _react.forwardRef.call(void 0, function InputOTPBox2({
180
+ index,
181
+ children,
182
+ style,
183
+ ...props
184
+ }, ref) {
185
+ const {
186
+ boxStyle,
187
+ boxActiveStyle,
188
+ slots
189
+ } = useInputOTP();
190
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
191
+ const slot = slots[index];
192
+ const context = _react.useMemo.call(void 0, () => ({
193
+ slot
194
+ }), [slot]);
195
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPBoxProvider, {
196
+ value: context,
197
+ children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
198
+ ref,
199
+ style: [_optionalChain([slot, 'optionalAccess', _5 => _5.isActive]) ? boxActiveStyle : boxStyle, styleProps, style],
200
+ ...rest,
201
+ children: _nullishCoalesce(children, () => (/* @__PURE__ */_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
202
+ children: [/* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPPlaceholder, {}), /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPValue, {}), /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPCaret, {})]
203
+ })))
204
+ })
205
+ });
206
+ });
207
+ InputOTPBox.displayName = "XAUI.InputOTP.Box";
208
+
209
+ // src/components/input-otp/input-otp-group.tsx
210
+
211
+ var InputOTPGroup = _react.forwardRef.call(void 0, function InputOTPGroup2({
212
+ children,
213
+ style,
214
+ ...props
215
+ }, ref) {
216
+ const {
217
+ groupStyle,
218
+ slots,
219
+ value,
220
+ maxLength,
221
+ isFocused,
222
+ isDisabled,
223
+ isInvalid
224
+ } = useInputOTP();
225
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
226
+ const content = typeof children === "function" ? children({
227
+ slots,
228
+ value,
229
+ maxLength,
230
+ isFocused,
231
+ isDisabled,
232
+ isInvalid
233
+ }) : children;
234
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
235
+ ref,
236
+ style: [groupStyle, styleProps, style],
237
+ ...rest,
238
+ children: content
239
+ });
240
+ });
241
+ InputOTPGroup.displayName = "XAUI.InputOTP.Group";
242
+
243
+ // src/components/input-otp/input-otp-separator.tsx
244
+
245
+ var InputOTPSeparator = _react.forwardRef.call(void 0, function InputOTPSeparator2({
246
+ children,
247
+ style,
248
+ ...props
249
+ }, ref) {
250
+ const {
251
+ separatorStyle
252
+ } = useInputOTP();
253
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
254
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
255
+ ref,
256
+ accessibilityElementsHidden: true,
257
+ importantForAccessibility: "no-hide-descendants",
258
+ style: [separatorStyle, styleProps, style],
259
+ ...rest,
260
+ children
261
+ });
262
+ });
263
+ InputOTPSeparator.displayName = "XAUI.InputOTP.Separator";
264
+
265
+ // src/components/input-otp/input-otp.tsx
266
+
267
+ // src/components/input-otp/input-otp.hook.ts
268
+
269
+ // src/components/input-otp/input-otp.utils.ts
270
+ function buildSlots({
271
+ value,
272
+ maxLength,
273
+ isFocused,
274
+ placeholder
275
+ }) {
276
+ return Array.from({
277
+ length: maxLength
278
+ }, (_, index) => {
279
+ const char = _nullishCoalesce(value[index], () => null);
280
+ const isActive = isFocused && index === value.length;
281
+ return {
282
+ index,
283
+ char,
284
+ // A box shows its placeholder only when it has neither a character nor the caret.
285
+ placeholderChar: char === null && !isActive ? placeholderFor(placeholder, index) : null,
286
+ isActive,
287
+ isCaretVisible: isActive && char === null
288
+ };
289
+ });
290
+ }
291
+ function placeholderFor(placeholder, index) {
292
+ if (!placeholder) return null;
293
+ return placeholder.length === 1 ? placeholder : _nullishCoalesce(placeholder[index], () => null);
294
+ }
295
+ function extractPastedCode(pasted, maxLength) {
296
+ const match = pasted.match(new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`));
297
+ return _nullishCoalesce(_optionalChain([match, 'optionalAccess', _6 => _6[1]]), () => "");
298
+ }
299
+ function isPaste(text, previous) {
300
+ return text.length > previous.length + 1;
301
+ }
302
+ var OTP_DIGITS = "^\\d+$";
303
+ var OTP_LETTERS = "^[a-zA-Z]+$";
304
+ var OTP_ALPHANUMERIC = "^[a-zA-Z0-9]+$";
305
+
306
+ // src/components/input-otp/input-otp.hook.ts
307
+ function useInputOTPState({
308
+ maxLength,
309
+ value: valueProp,
310
+ defaultValue = "",
311
+ onChangeText: onChangeTextProp,
312
+ onComplete,
313
+ pattern,
314
+ placeholder
315
+ }) {
316
+ const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
317
+ value: valueProp,
318
+ defaultValue,
319
+ onChange: onChangeTextProp
320
+ });
321
+ const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
322
+ const inputRef = _react.useRef.call(void 0, null);
323
+ const regexp = _react.useMemo.call(void 0, () => {
324
+ if (!pattern) return null;
325
+ return typeof pattern === "string" ? new RegExp(pattern) : pattern;
326
+ }, [pattern]);
327
+ const slots = _react.useMemo.call(void 0, () => buildSlots({
328
+ value,
329
+ maxLength,
330
+ isFocused,
331
+ placeholder
332
+ }), [value, maxLength, isFocused, placeholder]);
333
+ const latest = _react.useRef.call(void 0, {
334
+ value,
335
+ maxLength,
336
+ regexp,
337
+ onComplete,
338
+ setValue
339
+ });
340
+ latest.current = {
341
+ value,
342
+ maxLength,
343
+ regexp,
344
+ onComplete,
345
+ setValue
346
+ };
347
+ const onChangeText = _react.useCallback.call(void 0, text => {
348
+ const current = latest.current;
349
+ const candidate = isPaste(text, current.value) ? extractPastedCode(text, current.maxLength) : text;
350
+ const next = candidate.slice(0, current.maxLength);
351
+ if (next.length > 0 && current.regexp && !current.regexp.test(next)) return;
352
+ current.setValue(next);
353
+ if (next.length === current.maxLength) _optionalChain([current, 'access', _7 => _7.onComplete, 'optionalCall', _8 => _8(next)]);
354
+ }, []);
355
+ const onFocus = _react.useCallback.call(void 0, () => setIsFocused(true), []);
356
+ const onBlur = _react.useCallback.call(void 0, () => setIsFocused(false), []);
357
+ const handle = _react.useMemo.call(void 0, () => ({
358
+ focus: () => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]),
359
+ blur: () => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.blur, 'call', _14 => _14()]),
360
+ // Both halves: the native buffer and our value. Clearing one and not the other is
361
+ // how a cleared field comes back on the next keystroke.
362
+ clear: () => {
363
+ _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.clear, 'call', _17 => _17()]);
364
+ latest.current.setValue("");
365
+ }
366
+ }), []);
367
+ return {
368
+ value,
369
+ slots,
370
+ isFocused,
371
+ inputRef,
372
+ handle,
373
+ onChangeText,
374
+ onFocus,
375
+ onBlur
376
+ };
377
+ }
378
+
379
+ // src/components/input-otp/input-otp.recipe.ts
380
+ var SLOTS = ["root", "group", "box", "value", "placeholder", "caret", "separator"];
381
+ var VARIANT_TOKENS = {
382
+ primary: {
383
+ bg: "fieldBackground",
384
+ border: "fieldBorder",
385
+ borderFocus: "accent",
386
+ fg: "fieldForeground"
387
+ },
388
+ secondary: {
389
+ bg: "default",
390
+ border: "fieldBorder",
391
+ borderFocus: "accent",
392
+ fg: "fieldForeground"
393
+ },
394
+ tertiary: {
395
+ border: "fieldBorder",
396
+ borderFocus: "accent",
397
+ fg: "fieldForeground"
398
+ }
399
+ };
400
+ var PLACEHOLDER_OPACITY = 0.5;
401
+ var ACTIVE_BORDER_WIDTH = 2;
402
+ function sizeAxis(step) {
403
+ const {
404
+ control,
405
+ gap,
406
+ glyph
407
+ } = step;
408
+ return theme => {
409
+ const height = theme.controlHeights[control];
410
+ const type = {
411
+ fontSize: theme.fontSizes[glyph],
412
+ lineHeight: theme.lineHeights[glyph]
413
+ };
414
+ return {
415
+ root: {
416
+ gap: theme.spacing(gap)
417
+ },
418
+ group: {
419
+ gap: theme.spacing(gap)
420
+ },
421
+ box: {
422
+ height,
423
+ width: height - theme.spacing(1)
424
+ },
425
+ value: type,
426
+ placeholder: type,
427
+ // As tall as the character it stands in for, so the box does not change shape
428
+ // between an empty state and a typed one.
429
+ caret: {
430
+ height: theme.lineHeights[glyph],
431
+ width: theme.spacing(CARET_WIDTH)
432
+ },
433
+ separator: {
434
+ height: theme.spacing(CARET_WIDTH),
435
+ width: theme.spacing(SEPARATOR_WIDTH)
436
+ }
437
+ };
438
+ };
439
+ }
440
+ var CARET_WIDTH = 0.5;
441
+ var SEPARATOR_WIDTH = 2;
442
+ var SIZES = {
443
+ sm: {
444
+ control: "sm",
445
+ gap: 2,
446
+ glyph: "md"
447
+ },
448
+ md: {
449
+ control: "md",
450
+ gap: 2,
451
+ glyph: "lg"
452
+ },
453
+ lg: {
454
+ control: "lg",
455
+ gap: 2.5,
456
+ glyph: "xl"
457
+ }
458
+ };
459
+ var inputOTPRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
460
+ slots: SLOTS,
461
+ base: theme => ({
462
+ root: {
463
+ flexDirection: "row",
464
+ alignItems: "center"
465
+ },
466
+ group: {
467
+ flexDirection: "row",
468
+ alignItems: "center"
469
+ },
470
+ box: {
471
+ alignItems: "center",
472
+ justifyContent: "center",
473
+ // `lg` and not `field`, though the two are the same twelve points at the default
474
+ // base. The keys are kept apart on purpose: `field` is the corner a theme moves when
475
+ // it wants rounder *fields*, and a field is wide — a code box is very nearly square,
476
+ // 44 by 48 at `md`, where the geometric maximum is 22 and anything near it is a pill
477
+ // in all but name. Following `field` here would hand this component a shape that was
478
+ // never decided for it.
479
+ borderRadius: theme.radius.lg,
480
+ borderCurve: "continuous",
481
+ // The one root in the library that clips: the box has no shadow to lose and a
482
+ // character wider than it would otherwise spill onto its neighbour.
483
+ overflow: "hidden"
484
+ },
485
+ // `semibold`, where a field's own text is `regular`. A code is read at a glance and
486
+ // then compared character by character, which is the one thing weight helps with.
487
+ value: {
488
+ fontFamily: theme.fontFamilies.body,
489
+ fontWeight: theme.fontWeights.semibold
490
+ },
491
+ placeholder: {
492
+ fontFamily: theme.fontFamilies.body,
493
+ fontWeight: theme.fontWeights.semibold,
494
+ color: theme.colors.fieldPlaceholder,
495
+ opacity: PLACEHOLDER_OPACITY
496
+ },
497
+ caret: {
498
+ position: "absolute",
499
+ borderRadius: theme.radius.full,
500
+ backgroundColor: theme.colors.fieldPlaceholder
501
+ },
502
+ // The theme's second separator level rather than the first at half opacity: it is
503
+ // already the lighter of the two, and it composites the same way in both modes.
504
+ separator: {
505
+ borderRadius: theme.radius.full,
506
+ backgroundColor: theme.colors.separatorSecondary
507
+ }
508
+ }),
509
+ variantTokens: VARIANT_TOKENS,
510
+ /**
511
+ * Where the variant's colours land. The border width follows the *presence* of the
512
+ * border role, so a variant that names none needs no rule of its own to say so.
513
+ *
514
+ * The active box takes the ring whichever variant it is: the `focused` state sets the
515
+ * width as well as the colour. The box has a fixed width and height and centres what it
516
+ * holds, so an edge appearing moves nothing.
517
+ */
518
+ paint: (theme, colors) => ({
519
+ box: {
520
+ backgroundColor: colors.bg,
521
+ borderColor: colors.border,
522
+ borderWidth: colors.border ? theme.borderWidth.field : 0
523
+ },
524
+ value: {
525
+ color: colors.fg
526
+ }
527
+ }),
528
+ variants: {
529
+ size: {
530
+ sm: sizeAxis(SIZES.sm),
531
+ md: sizeAxis(SIZES.md),
532
+ lg: sizeAxis(SIZES.lg)
533
+ },
534
+ radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "box"),
535
+ /**
536
+ * Declared after `size` and before the states, so a code that is wrong stays wrong
537
+ * under the finger: the ring below reads `borderFocus`, and the root hands it the
538
+ * danger colour by suppressing the active state and painting every box instead.
539
+ */
540
+ isInvalid: {
541
+ true: theme => ({
542
+ box: {
543
+ borderColor: theme.colors.danger,
544
+ borderWidth: ACTIVE_BORDER_WIDTH
545
+ }
546
+ })
547
+ }
548
+ },
549
+ compoundVariants: [{
550
+ when: {
551
+ variant: "primary"
552
+ },
553
+ style: theme => ({
554
+ box: theme.shadows.field
555
+ })
556
+ }],
557
+ /**
558
+ * `focused` here means **this box is the active one**, not that the component has the
559
+ * keyboard: the root resolves the recipe twice, once each way, and hands both to the
560
+ * boxes so none of them resolves anything itself (R5).
561
+ */
562
+ states: {
563
+ focused: (_theme, colors) => ({
564
+ box: {
565
+ borderColor: colors.borderFocus,
566
+ borderWidth: ACTIVE_BORDER_WIDTH
567
+ }
568
+ }),
569
+ disabled: theme => ({
570
+ root: {
571
+ opacity: theme.opacity.disabled
572
+ }
573
+ })
574
+ },
575
+ defaultVariants: {
576
+ variant: "secondary",
577
+ size: "md"
578
+ }
579
+ });
580
+
581
+ // src/components/input-otp/input-otp.style.ts
582
+
583
+ var inputOTPSheet = _reactnative.StyleSheet.create({
584
+ hiddenInput: {
585
+ ..._reactnative.StyleSheet.absoluteFillObject,
586
+ color: "transparent",
587
+ // A caret of our own is drawn in the active box; the platform's would sit wherever
588
+ // the invisible text happens to end.
589
+ ..._reactnative.Platform.select({
590
+ ios: {
591
+ opacity: 0.02
592
+ },
593
+ default: {
594
+ opacity: 0
595
+ }
596
+ })
597
+ }
598
+ });
599
+
600
+ // src/components/input-otp/input-otp.tsx
601
+
602
+ var InputOTPRoot = _react.forwardRef.call(void 0, function InputOTP({
603
+ children,
604
+ maxLength,
605
+ variant,
606
+ size,
607
+ radius,
608
+ color,
609
+ value: valueProp,
610
+ defaultValue,
611
+ onChangeText,
612
+ onComplete,
613
+ pattern,
614
+ placeholder,
615
+ isInvalid = false,
616
+ isDisabled = false,
617
+ inputMode = "numeric",
618
+ textInputProps,
619
+ style,
620
+ ...props
621
+ }, ref) {
622
+ const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0);
623
+ const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
624
+ const state = useInputOTPState({
625
+ maxLength,
626
+ value: valueProp,
627
+ defaultValue,
628
+ onChangeText,
629
+ onComplete,
630
+ pattern,
631
+ placeholder
632
+ });
633
+ _react.useImperativeHandle.call(void 0, ref, () => state.handle, [state.handle]);
634
+ const selection = {
635
+ variant,
636
+ size,
637
+ radius,
638
+ isInvalid: isInvalid ? "true" : void 0
639
+ };
640
+ const states = {
641
+ disabled: isDisabled
642
+ };
643
+ const styles = inputOTPRecipe.resolve({
644
+ theme,
645
+ selection,
646
+ states
647
+ });
648
+ const activeStyles = isInvalid ? styles : inputOTPRecipe.resolve({
649
+ theme,
650
+ selection,
651
+ states: {
652
+ ...states,
653
+ focused: true
654
+ }
655
+ });
656
+ const tint = color ? inputOTPRecipe.tint({
657
+ theme,
658
+ color,
659
+ selection,
660
+ states
661
+ }) : void 0;
662
+ const activeTint = color && !isInvalid ? inputOTPRecipe.tint({
663
+ theme,
664
+ color,
665
+ selection,
666
+ states: {
667
+ ...states,
668
+ focused: true
669
+ }
670
+ }) : tint;
671
+ const context = _react.useMemo.call(void 0, () => ({
672
+ groupStyle: styles.group,
673
+ boxStyle: tint ? [styles.box, tint.box] : styles.box,
674
+ boxActiveStyle: activeTint ? [activeStyles.box, activeTint.box] : activeStyles.box,
675
+ valueStyle: tint ? [styles.value, tint.value] : styles.value,
676
+ placeholderStyle: styles.placeholder,
677
+ caretStyle: styles.caret,
678
+ separatorStyle: styles.separator,
679
+ slots: state.slots,
680
+ value: state.value,
681
+ maxLength,
682
+ isFocused: state.isFocused,
683
+ isDisabled,
684
+ isInvalid,
685
+ inputRef: state.inputRef
686
+ }), [styles, activeStyles, tint, activeTint, state.slots, state.value, state.isFocused, state.inputRef, maxLength, isDisabled, isInvalid]);
687
+ return /* @__PURE__ */_jsxruntime.jsx.call(void 0, InputOTPProvider, {
688
+ value: context,
689
+ children: /* @__PURE__ */_jsxruntime.jsxs.call(void 0, _reactnative.View, {
690
+ style: [styles.root, _optionalChain([tint, 'optionalAccess', _18 => _18.root]), styleProps, style],
691
+ ...rest,
692
+ children: [children, /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.TextInput, {
693
+ ref: state.inputRef,
694
+ style: inputOTPSheet.hiddenInput,
695
+ value: state.value,
696
+ onChangeText: state.onChangeText,
697
+ onFocus: state.onFocus,
698
+ onBlur: state.onBlur,
699
+ editable: !isDisabled,
700
+ inputMode,
701
+ caretHidden: true,
702
+ autoComplete: "one-time-code",
703
+ textContentType: "oneTimeCode",
704
+ accessibilityLabel: `${maxLength}-character code`,
705
+ accessibilityState: {
706
+ disabled: isDisabled
707
+ },
708
+ accessibilityValue: {
709
+ text: `${state.value.length} of ${maxLength} entered`
710
+ },
711
+ ...textInputProps
712
+ })]
713
+ })
714
+ });
715
+ });
716
+ InputOTPRoot.displayName = "XAUI.InputOTP.Root";
717
+
718
+ // src/components/input-otp/index.ts
719
+ var InputOTP2 = Object.assign(InputOTPRoot, {
720
+ Group: InputOTPGroup,
721
+ Box: InputOTPBox,
722
+ Value: InputOTPValue,
723
+ Placeholder: InputOTPPlaceholder,
724
+ Caret: InputOTPCaret,
725
+ Separator: InputOTPSeparator
726
+ });
727
+ exports.useInputOTP = useInputOTP;
728
+ exports.useInputOTPBox = useInputOTPBox;
729
+ exports.buildSlots = buildSlots;
730
+ exports.extractPastedCode = extractPastedCode;
731
+ exports.OTP_DIGITS = OTP_DIGITS;
732
+ exports.OTP_LETTERS = OTP_LETTERS;
733
+ exports.OTP_ALPHANUMERIC = OTP_ALPHANUMERIC;
734
+ exports.inputOTPRecipe = inputOTPRecipe;
735
+ exports.InputOTP = InputOTP2;