@xaui/native 0.9.1-alpha.23 → 0.9.1-alpha.25

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