@cdx-ui/primitives 0.0.1-alpha.36 → 0.0.1-alpha.38

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 (64) hide show
  1. package/lib/commonjs/index.js +12 -0
  2. package/lib/commonjs/index.js.map +1 -1
  3. package/lib/commonjs/otp-input/context.js +14 -0
  4. package/lib/commonjs/otp-input/context.js.map +1 -0
  5. package/lib/commonjs/otp-input/createOtpInputCell.js +29 -0
  6. package/lib/commonjs/otp-input/createOtpInputCell.js.map +1 -0
  7. package/lib/commonjs/otp-input/createOtpInputField.js +104 -0
  8. package/lib/commonjs/otp-input/createOtpInputField.js.map +1 -0
  9. package/lib/commonjs/otp-input/createOtpInputRoot.js +136 -0
  10. package/lib/commonjs/otp-input/createOtpInputRoot.js.map +1 -0
  11. package/lib/commonjs/otp-input/index.js +48 -0
  12. package/lib/commonjs/otp-input/index.js.map +1 -0
  13. package/lib/commonjs/otp-input/types.js +6 -0
  14. package/lib/commonjs/otp-input/types.js.map +1 -0
  15. package/lib/commonjs/otp-input/utils/applyValueChange.js +73 -0
  16. package/lib/commonjs/otp-input/utils/applyValueChange.js.map +1 -0
  17. package/lib/commonjs/otp-input/utils/filterValue.js +46 -0
  18. package/lib/commonjs/otp-input/utils/filterValue.js.map +1 -0
  19. package/lib/module/index.js +1 -0
  20. package/lib/module/index.js.map +1 -1
  21. package/lib/module/otp-input/context.js +6 -0
  22. package/lib/module/otp-input/context.js.map +1 -0
  23. package/lib/module/otp-input/createOtpInputCell.js +24 -0
  24. package/lib/module/otp-input/createOtpInputCell.js.map +1 -0
  25. package/lib/module/otp-input/createOtpInputField.js +99 -0
  26. package/lib/module/otp-input/createOtpInputField.js.map +1 -0
  27. package/lib/module/otp-input/createOtpInputRoot.js +131 -0
  28. package/lib/module/otp-input/createOtpInputRoot.js.map +1 -0
  29. package/lib/module/otp-input/index.js +20 -0
  30. package/lib/module/otp-input/index.js.map +1 -0
  31. package/lib/module/otp-input/types.js +4 -0
  32. package/lib/module/otp-input/types.js.map +1 -0
  33. package/lib/module/otp-input/utils/applyValueChange.js +69 -0
  34. package/lib/module/otp-input/utils/applyValueChange.js.map +1 -0
  35. package/lib/module/otp-input/utils/filterValue.js +40 -0
  36. package/lib/module/otp-input/utils/filterValue.js.map +1 -0
  37. package/lib/typescript/index.d.ts +1 -0
  38. package/lib/typescript/index.d.ts.map +1 -1
  39. package/lib/typescript/otp-input/context.d.ts +10 -0
  40. package/lib/typescript/otp-input/context.d.ts.map +1 -0
  41. package/lib/typescript/otp-input/createOtpInputCell.d.ts +4 -0
  42. package/lib/typescript/otp-input/createOtpInputCell.d.ts.map +1 -0
  43. package/lib/typescript/otp-input/createOtpInputField.d.ts +4 -0
  44. package/lib/typescript/otp-input/createOtpInputField.d.ts.map +1 -0
  45. package/lib/typescript/otp-input/createOtpInputRoot.d.ts +4 -0
  46. package/lib/typescript/otp-input/createOtpInputRoot.d.ts.map +1 -0
  47. package/lib/typescript/otp-input/index.d.ts +11 -0
  48. package/lib/typescript/otp-input/index.d.ts.map +1 -0
  49. package/lib/typescript/otp-input/types.d.ts +75 -0
  50. package/lib/typescript/otp-input/types.d.ts.map +1 -0
  51. package/lib/typescript/otp-input/utils/applyValueChange.d.ts +10 -0
  52. package/lib/typescript/otp-input/utils/applyValueChange.d.ts.map +1 -0
  53. package/lib/typescript/otp-input/utils/filterValue.d.ts +7 -0
  54. package/lib/typescript/otp-input/utils/filterValue.d.ts.map +1 -0
  55. package/package.json +2 -2
  56. package/src/index.ts +1 -0
  57. package/src/otp-input/context.tsx +8 -0
  58. package/src/otp-input/createOtpInputCell.tsx +22 -0
  59. package/src/otp-input/createOtpInputField.tsx +98 -0
  60. package/src/otp-input/createOtpInputRoot.tsx +179 -0
  61. package/src/otp-input/index.tsx +34 -0
  62. package/src/otp-input/types.ts +92 -0
  63. package/src/otp-input/utils/applyValueChange.ts +56 -0
  64. package/src/otp-input/utils/filterValue.ts +37 -0
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+
3
+ import { forwardRef, useMemo } from 'react';
4
+ import { Platform } from 'react-native';
5
+ import { mergeRefs } from '@cdx-ui/utils';
6
+ import { useOtpCellIndexContext, useOtpInputContext } from './context';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ export const createOtpInputField = BaseField => /*#__PURE__*/forwardRef((props, ref) => {
9
+ const {
10
+ cellIndex
11
+ } = useOtpCellIndexContext();
12
+ const {
13
+ value,
14
+ cellCount,
15
+ isDisabled,
16
+ isReadOnly,
17
+ smsOtpAutofill,
18
+ getCellProps,
19
+ cellTestIdPrefix,
20
+ rootAccessibilityLabel,
21
+ setFieldRef,
22
+ handleFieldChange,
23
+ handleFieldKeyPress
24
+ } = useOtpInputContext();
25
+ const char = cellIndex < value.length ? value[cellIndex] ?? '' : '';
26
+ const extra = getCellProps?.(cellIndex) ?? {};
27
+ const accessibilityLabel = useMemo(() => {
28
+ const fromExtra = extra.accessibilityLabel;
29
+ if (typeof fromExtra === 'string' && fromExtra !== '') {
30
+ return fromExtra;
31
+ }
32
+ if (rootAccessibilityLabel) {
33
+ return `${rootAccessibilityLabel}, ${String(cellIndex + 1)} of ${String(cellCount)}`;
34
+ }
35
+ return `OTP digit ${String(cellIndex + 1)} of ${String(cellCount)}`;
36
+ }, [cellCount, cellIndex, extra.accessibilityLabel, rootAccessibilityLabel]);
37
+ const autofillProps = useMemo(() => {
38
+ if (!smsOtpAutofill || cellIndex !== 0) {
39
+ return {};
40
+ }
41
+ return Platform.select({
42
+ web: {
43
+ autoComplete: 'one-time-code'
44
+ },
45
+ ios: {
46
+ textContentType: 'oneTimeCode'
47
+ },
48
+ android: {
49
+ autoComplete: 'sms-otp'
50
+ },
51
+ default: {}
52
+ });
53
+ }, [cellIndex, smsOtpAutofill]);
54
+ const editable = !(isDisabled || isReadOnly);
55
+ const {
56
+ style: extraStyle,
57
+ accessibilityLabel: _omitExtraA11y,
58
+ ...extraRest
59
+ } = extra;
60
+ void _omitExtraA11y;
61
+ const {
62
+ style: incomingStyle,
63
+ value: _omitValue,
64
+ defaultValue: _omitDefault,
65
+ onChangeText: _omitOnChange,
66
+ ...incomingRest
67
+ } = props;
68
+ void _omitValue;
69
+ void _omitDefault;
70
+ void _omitOnChange;
71
+
72
+ // Default digit OTP (`number-pad`). Root `getCellProps` is spread after and may override `keyboardType`.
73
+ return /*#__PURE__*/_jsx(BaseField, {
74
+ ref: mergeRefs(ref, el => {
75
+ setFieldRef(cellIndex, el);
76
+ }),
77
+ accessibilityLabel: accessibilityLabel,
78
+ "aria-label": accessibilityLabel,
79
+ accessible: true,
80
+ autoFocus: cellIndex === 0 && editable && value.length === 0,
81
+ editable: editable,
82
+ keyboardType: "number-pad",
83
+ returnKeyType: "done",
84
+ selectTextOnFocus: true,
85
+ testID: cellTestIdPrefix ? `${cellTestIdPrefix}:${String(cellIndex)}:textField:changeText` : undefined,
86
+ value: char,
87
+ onChangeText: text => {
88
+ handleFieldChange(cellIndex, text);
89
+ },
90
+ onKeyPress: e => {
91
+ handleFieldKeyPress(cellIndex, e.nativeEvent.key);
92
+ },
93
+ ...autofillProps,
94
+ ...extraRest,
95
+ ...incomingRest,
96
+ style: [extraStyle, incomingStyle]
97
+ });
98
+ });
99
+ //# sourceMappingURL=createOtpInputField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["forwardRef","useMemo","Platform","mergeRefs","useOtpCellIndexContext","useOtpInputContext","jsx","_jsx","createOtpInputField","BaseField","props","ref","cellIndex","value","cellCount","isDisabled","isReadOnly","smsOtpAutofill","getCellProps","cellTestIdPrefix","rootAccessibilityLabel","setFieldRef","handleFieldChange","handleFieldKeyPress","char","length","extra","accessibilityLabel","fromExtra","String","autofillProps","select","web","autoComplete","ios","textContentType","android","default","editable","style","extraStyle","_omitExtraA11y","extraRest","incomingStyle","_omitValue","defaultValue","_omitDefault","onChangeText","_omitOnChange","incomingRest","el","accessible","autoFocus","keyboardType","returnKeyType","selectTextOnFocus","testID","undefined","text","onKeyPress","e","nativeEvent","key"],"sourceRoot":"../../../src","sources":["otp-input/createOtpInputField.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,131 @@
1
+ "use strict";
2
+
3
+ import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
4
+ import { useFormControlContext } from '@cdx-ui/utils';
5
+ import { applyOtpInputChange } from './utils/applyValueChange';
6
+ import { OtpCellIndexProvider, OtpInputProvider } from './context';
7
+ import { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ export const createOtpInputRoot = (BaseRoot, OtpCell, OtpField) => /*#__PURE__*/forwardRef(({
10
+ cellCount,
11
+ value,
12
+ onChangeText,
13
+ onComplete,
14
+ isDisabled: isDisabledProp,
15
+ isInvalid: isInvalidProp,
16
+ isReadOnly: isReadOnlyProp,
17
+ smsOtpAutofill = true,
18
+ filterInput,
19
+ allowedCharacters,
20
+ characterPattern,
21
+ getCellProps,
22
+ cellTestIdPrefix,
23
+ accessibilityLabel: rootAccessibilityLabel,
24
+ ...rest
25
+ }, ref) => {
26
+ const form = useFormControlContext();
27
+ const isDisabled = isDisabledProp ?? form.isDisabled ?? false;
28
+ const isInvalid = isInvalidProp ?? form.isInvalid ?? false;
29
+ const isReadOnly = isReadOnlyProp ?? form.isReadOnly ?? false;
30
+ const fieldRefs = useRef([]);
31
+ const focusAfterApply = useRef(null);
32
+ const prevLenRef = useRef(value.length);
33
+ const prevValueRef = useRef(value);
34
+ const filter = useMemo(() => {
35
+ if (filterInput) {
36
+ return filterInput;
37
+ }
38
+ if (allowedCharacters !== undefined) {
39
+ return filterAllowedCharacters(allowedCharacters);
40
+ }
41
+ if (characterPattern !== undefined) {
42
+ return filterByRegExp(characterPattern);
43
+ }
44
+ return filterDigits;
45
+ }, [filterInput, allowedCharacters, characterPattern]);
46
+ const setFieldRef = useCallback((index, el) => {
47
+ fieldRefs.current[index] = el;
48
+ }, []);
49
+ const focusCell = useCallback(index => {
50
+ const safe = Math.max(0, Math.min(index, cellCount - 1));
51
+ fieldRefs.current[safe]?.focus();
52
+ }, [cellCount]);
53
+ const handleFieldChange = useCallback((index, text) => {
54
+ const {
55
+ nextValue,
56
+ focusIndex
57
+ } = applyOtpInputChange(value, index, text, cellCount, filter);
58
+ if (nextValue !== value) {
59
+ onChangeText(nextValue);
60
+ }
61
+ focusAfterApply.current = focusIndex;
62
+ }, [cellCount, filter, onChangeText, value]);
63
+ const handleFieldKeyPress = useCallback((index, key) => {
64
+ if (key !== 'Backspace') {
65
+ return;
66
+ }
67
+ const char = index < value.length ? value[index] : '';
68
+ if (!char && index > 0) {
69
+ focusCell(index - 1);
70
+ }
71
+ }, [focusCell, value]);
72
+ useLayoutEffect(() => {
73
+ if (focusAfterApply.current !== null) {
74
+ const i = focusAfterApply.current;
75
+ focusAfterApply.current = null;
76
+ fieldRefs.current[i]?.focus();
77
+ }
78
+ });
79
+ useEffect(() => {
80
+ const prevLen = prevLenRef.current;
81
+ const prevVal = prevValueRef.current;
82
+ const isFull = value.length === cellCount;
83
+ const becameFullByLength = isFull && prevLen < cellCount;
84
+ const correctedWhileFull = isFull && prevLen === cellCount && prevVal !== value;
85
+ if (becameFullByLength || correctedWhileFull) {
86
+ onComplete?.();
87
+ }
88
+ prevLenRef.current = value.length;
89
+ prevValueRef.current = value;
90
+ }, [cellCount, onComplete, value]);
91
+ const contextValue = useMemo(() => ({
92
+ cellCount,
93
+ value,
94
+ isDisabled,
95
+ isInvalid,
96
+ isReadOnly,
97
+ smsOtpAutofill,
98
+ filter,
99
+ getCellProps,
100
+ cellTestIdPrefix,
101
+ rootAccessibilityLabel,
102
+ setFieldRef,
103
+ handleFieldChange,
104
+ handleFieldKeyPress
105
+ }), [cellCount, value, isDisabled, isInvalid, isReadOnly, smsOtpAutofill, filter, getCellProps, cellTestIdPrefix, rootAccessibilityLabel, setFieldRef, handleFieldChange, handleFieldKeyPress]);
106
+
107
+ // Hermes drops outer-scope closure vars from its environment record when
108
+ // they are only referenced inside a nested callback (Array.from). Using a
109
+ // for-loop keeps OtpCell/OtpField references in the render function's own
110
+ // scope, avoiding the Hermes closure-capture bug.
111
+ const cells = [];
112
+ for (let i = 0; i < cellCount; i++) {
113
+ cells.push(/*#__PURE__*/_jsx(OtpCellIndexProvider, {
114
+ value: {
115
+ cellIndex: i
116
+ },
117
+ children: /*#__PURE__*/_jsx(OtpCell, {
118
+ children: /*#__PURE__*/_jsx(OtpField, {})
119
+ })
120
+ }, i));
121
+ }
122
+ return /*#__PURE__*/_jsx(BaseRoot, {
123
+ ref: ref,
124
+ ...rest,
125
+ children: /*#__PURE__*/_jsx(OtpInputProvider, {
126
+ value: contextValue,
127
+ children: cells
128
+ })
129
+ });
130
+ });
131
+ //# sourceMappingURL=createOtpInputRoot.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["forwardRef","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useFormControlContext","applyOtpInputChange","OtpCellIndexProvider","OtpInputProvider","filterAllowedCharacters","filterByRegExp","filterDigits","jsx","_jsx","createOtpInputRoot","BaseRoot","OtpCell","OtpField","cellCount","value","onChangeText","onComplete","isDisabled","isDisabledProp","isInvalid","isInvalidProp","isReadOnly","isReadOnlyProp","smsOtpAutofill","filterInput","allowedCharacters","characterPattern","getCellProps","cellTestIdPrefix","accessibilityLabel","rootAccessibilityLabel","rest","ref","form","fieldRefs","focusAfterApply","prevLenRef","length","prevValueRef","filter","undefined","setFieldRef","index","el","current","focusCell","safe","Math","max","min","focus","handleFieldChange","text","nextValue","focusIndex","handleFieldKeyPress","key","char","i","prevLen","prevVal","isFull","becameFullByLength","correctedWhileFull","contextValue","cells","push","cellIndex","children"],"sourceRoot":"../../../src","sources":["otp-input/createOtpInputRoot.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ import { createOtpInputCell } from './createOtpInputCell';
4
+ import { createOtpInputField } from './createOtpInputField';
5
+ import { createOtpInputRoot } from './createOtpInputRoot';
6
+ export { applyOtpInputChange } from './utils/applyValueChange';
7
+ export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
8
+ export function createOtpInput(BaseComponents) {
9
+ const Cell = createOtpInputCell(BaseComponents.Cell);
10
+ const Field = createOtpInputField(BaseComponents.Field);
11
+ const Root = createOtpInputRoot(BaseComponents.Root, Cell, Field);
12
+ Root.displayName = 'OtpInputPrimitive';
13
+ Cell.displayName = 'OtpInputPrimitive.Cell';
14
+ Field.displayName = 'OtpInputPrimitive.Field';
15
+ return Object.assign(Root, {
16
+ Cell,
17
+ Field
18
+ });
19
+ }
20
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["createOtpInputCell","createOtpInputField","createOtpInputRoot","applyOtpInputChange","filterAllowedCharacters","filterByRegExp","filterDigits","createOtpInput","BaseComponents","Cell","Field","Root","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["otp-input/index.tsx"],"mappings":";;AACA,SAASA,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,kBAAkB,QAAQ,sBAAsB;AAGzD,SAASC,mBAAmB,QAAQ,0BAA0B;AAC9D,SAASC,uBAAuB,EAAEC,cAAc,EAAEC,YAAY,QAAQ,qBAAqB;AAG3F,OAAO,SAASC,cAAcA,CAM5BC,cAID,EAAE;EACD,MAAMC,IAAI,GAAGT,kBAAkB,CAACQ,cAAc,CAACC,IAAI,CAAC;EACpD,MAAMC,KAAK,GAAGT,mBAAmB,CAACO,cAAc,CAACE,KAAK,CAAC;EACvD,MAAMC,IAAI,GAAGT,kBAAkB,CAACM,cAAc,CAACG,IAAI,EAAEF,IAAI,EAAEC,KAAK,CAAC;EAEjEC,IAAI,CAACC,WAAW,GAAG,mBAAmB;EACtCH,IAAI,CAACG,WAAW,GAAG,wBAAwB;EAC3CF,KAAK,CAACE,WAAW,GAAG,yBAAyB;EAE7C,OAAOC,MAAM,CAACC,MAAM,CAACH,IAAI,EAAE;IACzBF,IAAI;IACJC;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+
3
+ export {};
4
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sourceRoot":"../../../src","sources":["otp-input/types.ts"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+
3
+ /**
4
+ * Pure OTP value transition for a controlled prefix string (no explicit empty slots).
5
+ * - Single-character edits use index-based replace/append (no reorder).
6
+ * - Multi-character input (paste/autofill) writes at `index` forward, then packs left.
7
+ */
8
+ export function applyOtpInputChange(value, index, rawText, cellCount, filter) {
9
+ const text = filter(rawText);
10
+ if (text.length === 0) {
11
+ if (index < value.length) {
12
+ const next = (value.slice(0, index) + value.slice(index + 1)).slice(0, cellCount);
13
+ return {
14
+ nextValue: next,
15
+ focusIndex: Math.max(0, index - 1)
16
+ };
17
+ }
18
+ return {
19
+ nextValue: value,
20
+ focusIndex: index
21
+ };
22
+ }
23
+ if (text.length === 1) {
24
+ if (index < value.length) {
25
+ const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
26
+ return {
27
+ nextValue: next,
28
+ focusIndex: Math.min(index + 1, cellCount - 1)
29
+ };
30
+ }
31
+ if (value.length < cellCount) {
32
+ if (index === value.length) {
33
+ const next = (value + text).slice(0, cellCount);
34
+ return {
35
+ nextValue: next,
36
+ focusIndex: Math.min(next.length, cellCount - 1)
37
+ };
38
+ }
39
+ const arr = Array.from({
40
+ length: cellCount
41
+ }, (_, i) => i < value.length ? value[i] : '');
42
+ arr[index] = text;
43
+ const next = arr.filter(c => c).join('').slice(0, cellCount);
44
+ return {
45
+ nextValue: next,
46
+ focusIndex: Math.min(index + 1, cellCount - 1)
47
+ };
48
+ }
49
+ const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
50
+ return {
51
+ nextValue: next,
52
+ focusIndex: Math.min(index + 1, cellCount - 1)
53
+ };
54
+ }
55
+ const arr = Array.from({
56
+ length: cellCount
57
+ }, (_, i) => i < value.length ? value[i] : '');
58
+ for (let k = 0; k < text.length && index + k < cellCount; k++) {
59
+ arr[index + k] = text.charAt(k);
60
+ }
61
+ const next = arr.filter(c => c).join('').slice(0, cellCount);
62
+ const lastWritten = Math.min(index + text.length - 1, cellCount - 1);
63
+ const focusIndex = Math.min(Math.max(lastWritten, next.length - 1), cellCount - 1);
64
+ return {
65
+ nextValue: next,
66
+ focusIndex: Math.max(0, focusIndex)
67
+ };
68
+ }
69
+ //# sourceMappingURL=applyValueChange.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["applyOtpInputChange","value","index","rawText","cellCount","filter","text","length","next","slice","nextValue","focusIndex","Math","max","min","arr","Array","from","_","i","c","join","k","charAt","lastWritten"],"sourceRoot":"../../../../src","sources":["otp-input/utils/applyValueChange.ts"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ /** Strip to digits (default OTP behavior). */
4
+ export function filterDigits(input) {
5
+ return input.replace(/\D/g, '');
6
+ }
7
+
8
+ /** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
9
+ export function filterAllowedCharacters(allowed) {
10
+ const allowedSet = new Set();
11
+ for (let i = 0; i < allowed.length; i++) {
12
+ allowedSet.add(allowed.charAt(i));
13
+ }
14
+ return input => {
15
+ let out = '';
16
+ for (let i = 0; i < input.length; i++) {
17
+ const ch = input.charAt(i);
18
+ if (allowedSet.has(ch)) {
19
+ out += ch;
20
+ }
21
+ }
22
+ return out;
23
+ };
24
+ }
25
+
26
+ /** Keep only characters matching `re` (tested per UTF-16 code unit). */
27
+ export function filterByRegExp(re) {
28
+ return input => {
29
+ let out = '';
30
+ for (let i = 0; i < input.length; i++) {
31
+ const ch = input.charAt(i);
32
+ re.lastIndex = 0;
33
+ if (re.test(ch)) {
34
+ out += ch;
35
+ }
36
+ }
37
+ return out;
38
+ };
39
+ }
40
+ //# sourceMappingURL=filterValue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["filterDigits","input","replace","filterAllowedCharacters","allowed","allowedSet","Set","i","length","add","charAt","out","ch","has","filterByRegExp","re","lastIndex","test"],"sourceRoot":"../../../../src","sources":["otp-input/utils/filterValue.ts"],"mappings":";;AAAA;AACA,OAAO,SAASA,YAAYA,CAACC,KAAa,EAAU;EAClD,OAAOA,KAAK,CAACC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AACjC;;AAEA;AACA,OAAO,SAASC,uBAAuBA,CAACC,OAAe,EAAE;EACvD,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAS,CAAC;EACpC,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,OAAO,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;IACvCF,UAAU,CAACI,GAAG,CAACL,OAAO,CAACM,MAAM,CAACH,CAAC,CAAC,CAAC;EACnC;EACA,OAAQN,KAAa,IAAK;IACxB,IAAIU,GAAG,GAAG,EAAE;IACZ,KAAK,IAAIJ,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,KAAK,CAACO,MAAM,EAAED,CAAC,EAAE,EAAE;MACrC,MAAMK,EAAE,GAAGX,KAAK,CAACS,MAAM,CAACH,CAAC,CAAC;MAC1B,IAAIF,UAAU,CAACQ,GAAG,CAACD,EAAE,CAAC,EAAE;QACtBD,GAAG,IAAIC,EAAE;MACX;IACF;IACA,OAAOD,GAAG;EACZ,CAAC;AACH;;AAEA;AACA,OAAO,SAASG,cAAcA,CAACC,EAAU,EAAE;EACzC,OAAQd,KAAa,IAAK;IACxB,IAAIU,GAAG,GAAG,EAAE;IACZ,KAAK,IAAIJ,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,KAAK,CAACO,MAAM,EAAED,CAAC,EAAE,EAAE;MACrC,MAAMK,EAAE,GAAGX,KAAK,CAACS,MAAM,CAACH,CAAC,CAAC;MAC1BQ,EAAE,CAACC,SAAS,GAAG,CAAC;MAChB,IAAID,EAAE,CAACE,IAAI,CAACL,EAAE,CAAC,EAAE;QACfD,GAAG,IAAIC,EAAE;MACX;IACF;IACA,OAAOD,GAAG;EACZ,CAAC;AACH","ignoreList":[]}
@@ -5,6 +5,7 @@ export * from './dialog';
5
5
  export * from './field';
6
6
  export * from './form';
7
7
  export * from './input';
8
+ export * from './otp-input';
8
9
  export * from './link';
9
10
  export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
10
11
  export * from './select';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type { OtpInputCellIndexContextValue, OtpInputContextValue } from './types';
2
+ export declare const OtpInputProvider: import("react").FunctionComponent<{
3
+ children: import("react").ReactNode;
4
+ value: OtpInputContextValue;
5
+ }>, useOtpInputContext: () => OtpInputContextValue;
6
+ export declare const OtpCellIndexProvider: import("react").FunctionComponent<{
7
+ children: import("react").ReactNode;
8
+ value: OtpInputCellIndexContextValue;
9
+ }>, useOtpCellIndexContext: () => OtpInputCellIndexContextValue;
10
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/otp-input/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEnF,eAAO,MAAO,gBAAgB;;;IAAE,kBAAkB,4BACM,CAAC;AAEzD,eAAO,MAAO,oBAAoB;;;IAAE,sBAAsB,qCACW,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type React from 'react';
2
+ import type { IOtpInputCellProps } from './types';
3
+ export declare const createOtpInputCell: <T>(BaseCell: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<IOtpInputCellProps & T>> & React.RefAttributes<unknown>>;
4
+ //# sourceMappingURL=createOtpInputCell.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createOtpInputCell.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAG,UAAU,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,2IAenE,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type React from 'react';
2
+ import { type TextInput } from 'react-native';
3
+ export declare const createOtpInputField: <T>(BaseField: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("react-native").TextInputProps & Omit<T, keyof import("react-native").TextInputProps>> & React.RefAttributes<TextInput>>;
4
+ //# sourceMappingURL=createOtpInputField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createOtpInputField.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,KAAK,SAAS,EAA+B,MAAM,cAAc,CAAC;AAKrF,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,WAAW,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,0LA0FrE,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type React from 'react';
2
+ import type { IOtpInputRootProps } from './types';
3
+ export declare const createOtpInputRoot: <RootProps>(BaseRoot: React.ComponentType<RootProps>, OtpCell: React.ComponentType<any>, OtpField: React.ComponentType<any>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<IOtpInputRootProps & RootProps> & React.RefAttributes<unknown>>;
4
+ //# sourceMappingURL=createOtpInputRoot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createOtpInputRoot.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,kBAAkB,GAAI,SAAS,EAC1C,UAAU,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,EAExC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAEjC,UAAU,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,0HAoKjC,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type React from 'react';
2
+ import type { IOtpInputComponentType } from './types';
3
+ export { applyOtpInputChange } from './utils/applyValueChange';
4
+ export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
5
+ export type * from './types';
6
+ export declare function createOtpInput<RootProps, CellProps, FieldProps, RootRef = unknown, FieldRef = unknown>(BaseComponents: {
7
+ Root: React.ComponentType<RootProps>;
8
+ Cell: React.ComponentType<CellProps>;
9
+ Field: React.ComponentType<FieldProps>;
10
+ }): IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/otp-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC5F,mBAAmB,SAAS,CAAC;AAE7B,wBAAgB,cAAc,CAC5B,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,GAAG,OAAO,EACjB,QAAQ,GAAG,OAAO,EAClB,cAAc,EAAE;IAChB,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACxC,GAYO,sBAAsB,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAClF"}
@@ -0,0 +1,75 @@
1
+ import type React from 'react';
2
+ import type { ReactNode } from 'react';
3
+ import type { TextInputProps, ViewProps } from 'react-native';
4
+ export interface IOtpInputRootProps extends ViewProps {
5
+ /** Number of OTP cells (fixed). */
6
+ cellCount: number;
7
+ /** Controlled value: characters in order, length 0..`cellCount` (prefix fill). */
8
+ value: string;
9
+ onChangeText: (value: string) => void;
10
+ /**
11
+ * Called when the code is ready to verify again:
12
+ * - `value` becomes full (`length === cellCount`) after being shorter, or
13
+ * - `value` stays full but the string changes (user corrected a digit without dropping below full length).
14
+ * Does not fire on mount when `value` is already full and unchanged, nor on re-renders with the same full `value`.
15
+ */
16
+ onComplete?: () => void;
17
+ isDisabled?: boolean;
18
+ isInvalid?: boolean;
19
+ isReadOnly?: boolean;
20
+ /** When false, no SMS / Web OTP autofill hints on the first cell. @default true */
21
+ smsOtpAutofill?: boolean;
22
+ /**
23
+ * Override default digit-only filtering.
24
+ * Takes priority over `allowedCharacters` and `characterPattern` when truthy.
25
+ * Does not change the default `keyboardType` (`number-pad`); use `getCellProps` if the allowed
26
+ * character set needs a different keyboard.
27
+ */
28
+ filterInput?: (input: string) => string;
29
+ /**
30
+ * Keep only characters present in this string (treated as a set of code units).
31
+ * Used when `filterInput` is not provided. Takes priority over `characterPattern`.
32
+ * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` when allowing letters/symbols.
33
+ */
34
+ allowedCharacters?: string;
35
+ /**
36
+ * Keep only characters matching this pattern (tested per code unit).
37
+ * Used when neither `filterInput` nor `allowedCharacters` is provided.
38
+ * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` for non-digit input.
39
+ */
40
+ characterPattern?: RegExp;
41
+ /**
42
+ * Spread onto each cell after built-in field props (including `keyboardType="number-pad"`),
43
+ * so consumers can override `keyboardType`, `autoCapitalize`, etc. for non-digit OTPs.
44
+ */
45
+ getCellProps?: (index: number) => Partial<TextInputProps>;
46
+ /** Optional prefix for `testID` on each field: `${cellTestIdPrefix}:${index}:...` */
47
+ cellTestIdPrefix?: string;
48
+ }
49
+ export interface IOtpInputCellProps extends ViewProps {
50
+ children?: ReactNode;
51
+ }
52
+ export type IOtpInputFieldProps = TextInputProps;
53
+ export interface OtpInputCellIndexContextValue {
54
+ cellIndex: number;
55
+ }
56
+ export interface OtpInputContextValue {
57
+ cellCount: number;
58
+ value: string;
59
+ isDisabled: boolean;
60
+ isInvalid: boolean;
61
+ isReadOnly: boolean;
62
+ smsOtpAutofill: boolean;
63
+ filter: (input: string) => string;
64
+ getCellProps?: (index: number) => Partial<TextInputProps>;
65
+ cellTestIdPrefix?: string;
66
+ rootAccessibilityLabel?: string;
67
+ setFieldRef: (index: number, el: import('react-native').TextInput | null) => void;
68
+ handleFieldChange: (index: number, text: string) => void;
69
+ handleFieldKeyPress: (index: number, key: string) => void;
70
+ }
71
+ export type IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef = unknown, FieldRef = unknown> = React.ForwardRefExoticComponent<React.PropsWithoutRef<RootProps & IOtpInputRootProps> & React.RefAttributes<RootRef>> & {
72
+ Cell: React.ForwardRefExoticComponent<React.PropsWithoutRef<CellProps & IOtpInputCellProps> & React.RefAttributes<unknown>>;
73
+ Field: React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldProps & IOtpInputFieldProps> & React.RefAttributes<FieldRef>>;
74
+ };
75
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/otp-input/types.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Pure OTP value transition for a controlled prefix string (no explicit empty slots).
3
+ * - Single-character edits use index-based replace/append (no reorder).
4
+ * - Multi-character input (paste/autofill) writes at `index` forward, then packs left.
5
+ */
6
+ export declare function applyOtpInputChange(value: string, index: number, rawText: string, cellCount: number, filter: (input: string) => string): {
7
+ nextValue: string;
8
+ focusIndex: number;
9
+ };
10
+ //# sourceMappingURL=applyValueChange.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"applyValueChange.d.ts","sourceRoot":"","sources":["../../../../src/otp-input/utils/applyValueChange.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAChC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CA4C3C"}
@@ -0,0 +1,7 @@
1
+ /** Strip to digits (default OTP behavior). */
2
+ export declare function filterDigits(input: string): string;
3
+ /** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
4
+ export declare function filterAllowedCharacters(allowed: string): (input: string) => string;
5
+ /** Keep only characters matching `re` (tested per UTF-16 code unit). */
6
+ export declare function filterByRegExp(re: RegExp): (input: string) => string;
7
+ //# sourceMappingURL=filterValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"filterValue.d.ts","sourceRoot":"","sources":["../../../../src/otp-input/utils/filterValue.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,uFAAuF;AACvF,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,IAK7C,OAAO,MAAM,YAUtB;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAC/B,OAAO,MAAM,YAWtB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/primitives",
3
- "version": "0.0.1-alpha.36",
3
+ "version": "0.0.1-alpha.38",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -57,7 +57,7 @@
57
57
  "@react-native-aria/interactions": "^0.2.16",
58
58
  "@react-stately/checkbox": "3.7.4",
59
59
  "@react-stately/toggle": "3.9.4",
60
- "@cdx-ui/utils": "0.0.1-alpha.36"
60
+ "@cdx-ui/utils": "0.0.1-alpha.38"
61
61
  },
62
62
  "devDependencies": {
63
63
  "@types/react": "*",
package/src/index.ts CHANGED
@@ -5,6 +5,7 @@ export * from './dialog';
5
5
  export * from './field';
6
6
  export * from './form';
7
7
  export * from './input';
8
+ export * from './otp-input';
8
9
  export * from './link';
9
10
  export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
10
11
  export * from './select';
@@ -0,0 +1,8 @@
1
+ import { createContext } from '@cdx-ui/utils';
2
+ import type { OtpInputCellIndexContextValue, OtpInputContextValue } from './types';
3
+
4
+ export const [OtpInputProvider, useOtpInputContext] =
5
+ createContext<OtpInputContextValue>('OtpInputContext');
6
+
7
+ export const [OtpCellIndexProvider, useOtpCellIndexContext] =
8
+ createContext<OtpInputCellIndexContextValue>('OtpCellIndexContext');