@bacon-pos/ui 0.4.0 → 0.5.0

package/lib/module/components/CodeField/CodeField.js

@@ -11,6 +11,16 @@ const WEB_NO_OUTLINE = {
   outlineStyle: 'none',
   outlineWidth: 0
 };
+
+/** Convert a `#RRGGBB` (or `#RGB`) token to an `rgba()` string at the given alpha. */
+function hexToRgba(hex, alpha) {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.replace(/./g, c => c + c) : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
 /** Chars to strip per mode (applied after upper-casing). */
 const DISALLOWED = {
   numeric: /[^0-9]/g,
@@ -29,6 +39,8 @@ export function CodeField({
   length = 6,
   mode = 'numeric',
   onComplete,
+  helperText,
+  error,
   disabled = false,
   autoFocus = false,
   cellWidth = 126,
@@ -48,78 +60,96 @@ export function CodeField({
     if (next.length === length) onComplete?.(next);
   };
   const activeIndex = Math.min(value.length, length - 1);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onPress: () => inputRef.current?.focus(),
-    disabled: disabled,
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
+  return /*#__PURE__*/_jsxs(View, {
     style: [{
-      position: 'relative',
       alignSelf: 'flex-start'
     }, style],
-    children: [/*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => inputRef.current?.focus(),
+      disabled: disabled,
       style: {
-        flexDirection: 'row',
-        gap
+        position: 'relative'
       },
-      children: Array.from({
-        length
-      }).map((_, i) => {
-        const isActive = focused && i === activeIndex && !disabled;
-        return /*#__PURE__*/_jsx(View, {
-          testID: "code-field-cell",
-          style: {
-            width: cellWidth,
-            height: cellHeight,
-            borderRadius: theme.radii.pill,
-            borderWidth: 1,
-            borderColor: isActive ? theme.colors.border.focus : theme.colors.border.default,
-            backgroundColor: disabled ? theme.colors.disabled.background : theme.colors.background.default,
-            alignItems: 'center',
-            justifyContent: 'center',
-            opacity: disabled ? 0.6 : 1,
-            ...(isActive ? {
-              boxShadow: [{
-                offsetX: 0,
-                offsetY: 0,
-                blurRadius: 0,
-                spreadDistance: 6,
-                color: 'rgba(201,255,0,0.15)'
-              }]
-            } : null)
-          },
-          children: /*#__PURE__*/_jsx(Text, {
-            color: disabled ? 'tertiary' : 'primary',
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          gap
+        },
+        children: Array.from({
+          length
+        }).map((_, i) => {
+          const isActive = focused && i === activeIndex && !disabled;
+          // Error overrides the default/focus border on every cell; the active
+          // cell still gets the ring (red on error, lime otherwise).
+          const borderColor = hasError ? theme.colors.feedback.error : isActive ? theme.colors.border.focus : theme.colors.border.default;
+          const ringColor = hasError ? hexToRgba(theme.colors.feedback.error, 0.15) : 'rgba(201,255,0,0.15)';
+          return /*#__PURE__*/_jsx(View, {
+            testID: "code-field-cell",
             style: {
-              fontFamily: fontFamily ?? theme.fontFamily.regular,
-              fontSize,
-              lineHeight: Math.round(fontSize * 1.45)
+              width: cellWidth,
+              height: cellHeight,
+              borderRadius: theme.radii.pill,
+              borderWidth: 1,
+              borderColor,
+              backgroundColor: disabled ? theme.colors.disabled.background : theme.colors.background.default,
+              alignItems: 'center',
+              justifyContent: 'center',
+              opacity: disabled ? 0.6 : 1,
+              ...(isActive ? {
+                boxShadow: [{
+                  offsetX: 0,
+                  offsetY: 0,
+                  blurRadius: 0,
+                  spreadDistance: 6,
+                  color: ringColor
+                }]
+              } : null)
             },
-            children: value[i] ?? ''
-          })
-        }, i);
-      })
-    }), /*#__PURE__*/_jsx(TextInput, {
-      ref: inputRef,
-      value: value,
-      onChangeText: handleChange,
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      keyboardType: mode === 'numeric' ? 'number-pad' : 'default',
-      autoCapitalize: "characters",
-      autoCorrect: false,
-      maxLength: length,
-      editable: !disabled,
-      caretHidden: true,
-      autoFocus: autoFocus,
-      accessibilityLabel: accessibilityLabel,
-      style: [{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        opacity: 0
-      }, WEB_NO_OUTLINE]
-    })]
+            children: /*#__PURE__*/_jsx(Text, {
+              color: disabled ? 'tertiary' : 'primary',
+              style: {
+                fontFamily: fontFamily ?? theme.fontFamily.regular,
+                fontSize,
+                lineHeight: Math.round(fontSize * 1.45)
+              },
+              children: value[i] ?? ''
+            })
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
+        value: value,
+        onChangeText: handleChange,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        keyboardType: mode === 'numeric' ? 'number-pad' : 'default',
+        autoCapitalize: "characters",
+        autoCorrect: false,
+        maxLength: length,
+        editable: !disabled,
+        caretHidden: true,
+        autoFocus: autoFocus,
+        accessibilityLabel: accessibilityLabel,
+        style: [{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          opacity: 0
+        }, WEB_NO_OUTLINE]
+      })]
+    }), message ? /*#__PURE__*/_jsx(Text, {
+      variant: "bodySmall",
+      color: hasError ? theme.colors.feedback.error : 'tertiary',
+      style: {
+        marginTop: 8,
+        marginLeft: 8
+      },
+      children: message
+    }) : null]
   });
 }
 //# sourceMappingURL=CodeField.js.map

package/lib/module/components/CodeField/CodeField.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useState","Pressable","TextInput","View","useTheme","Text","jsx","_jsx","jsxs","_jsxs","WEB_NO_OUTLINE","outlineStyle","outlineWidth","DISALLOWED","numeric","alpha","alphanumeric","CodeField","value","onChangeText","length","mode","onComplete","disabled","autoFocus","cellWidth","cellHeight","gap","fontFamily","fontSize","accessibilityLabel","style","theme","inputRef","focused","setFocused","handleChange","text","next","toUpperCase","replace","slice","activeIndex","Math","min","onPress","current","focus","position","alignSelf","children","flexDirection","Array","from","map","_","i","isActive","testID","width","height","borderRadius","radii","pill","borderWidth","borderColor","colors","border","default","backgroundColor","background","alignItems","justifyContent","opacity","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","color","regular","lineHeight","round","ref","onFocus","onBlur","keyboardType","autoCapitalize","autoCorrect","maxLength","editable","caretHidden","top","left","right","bottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useRef","useState","Pressable","TextInput","View","useTheme","Text","jsx","_jsx","jsxs","_jsxs","WEB_NO_OUTLINE","outlineStyle","outlineWidth","hexToRgba","hex","alpha","h","replace","full","length","c","r","parseInt","slice","g","b","DISALLOWED","numeric","alphanumeric","CodeField","value","onChangeText","mode","onComplete","helperText","error","disabled","autoFocus","cellWidth","cellHeight","gap","fontFamily","fontSize","accessibilityLabel","style","theme","inputRef","focused","setFocused","handleChange","text","next","toUpperCase","activeIndex","Math","min","hasError","Boolean","message","alignSelf","children","onPress","current","focus","position","flexDirection","Array","from","map","_","i","isActive","borderColor","colors","feedback","border","default","ringColor","testID","width","height","borderRadius","radii","pill","borderWidth","backgroundColor","background","alignItems","justifyContent","opacity","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","color","regular","lineHeight","round","ref","onFocus","onBlur","keyboardType","autoCapitalize","autoCorrect","maxLength","editable","caretHidden","top","left","right","bottom","variant","marginTop","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.tsx"],"mappings":";;AAAA,SAASA,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACxC,SACEC,SAAS,EACTC,SAAS,EACTC,IAAI,QAIC,cAAc;AACrB,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,IAAI,QAAQ,iBAAc;;AAEnC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,cAAc,GAAG;EAAEC,YAAY,EAAE,MAAM;EAAEC,YAAY,EAAE;AAAE,CAAyB;;AAExF;AACA,SAASC,SAASA,CAACC,GAAW,EAAEC,KAAa,EAAU;EACrD,MAAMC,CAAC,GAAGF,GAAG,CAACG,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;EAC9B,MAAMC,IAAI,GAAGF,CAAC,CAACG,MAAM,KAAK,CAAC,GAAGH,CAAC,CAACC,OAAO,CAAC,IAAI,EAAGG,CAAC,IAAKA,CAAC,GAAGA,CAAC,CAAC,GAAGJ,CAAC;EAC/D,MAAMK,CAAC,GAAGC,QAAQ,CAACJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACxC,MAAMC,CAAC,GAAGF,QAAQ,CAACJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACxC,MAAME,CAAC,GAAGH,QAAQ,CAACJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACxC,OAAO,QAAQF,CAAC,KAAKG,CAAC,KAAKC,CAAC,KAAKV,KAAK,GAAG;AAC3C;AAIA;AACA,MAAMW,UAAyC,GAAG;EAChDC,OAAO,EAAE,SAAS;EAClBZ,KAAK,EAAE,SAAS;EAChBa,YAAY,EAAE;AAChB,CAAC;AAqCD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAC;EACxBC,KAAK;EACLC,YAAY;EACZZ,MAAM,GAAG,CAAC;EACVa,IAAI,GAAG,SAAS;EAChBC,UAAU;EACVC,UAAU;EACVC,KAAK;EACLC,QAAQ,GAAG,KAAK;EAChBC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,GAAG;EACfC,UAAU,GAAG,EAAE;EACfC,GAAG,GAAG,EAAE;EACRC,UAAU;EACVC,QAAQ,GAAG,EAAE;EACbC,kBAAkB,GAAG,MAAM;EAC3BC;AACc,CAAC,EAAE;EACjB,MAAMC,KAAK,GAAGzC,QAAQ,CAAC,CAAC;EACxB,MAAM0C,QAAQ,GAAG/C,MAAM,CAAY,IAAI,CAAC;EACxC,MAAM,CAACgD,OAAO,EAAEC,UAAU,CAAC,GAAGhD,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiD,YAAY,GAAIC,IAAY,IAAK;IACrC,MAAMC,IAAI,GAAGD,IAAI,CAACE,WAAW,CAAC,CAAC,CAACnC,OAAO,CAACS,UAAU,CAACM,IAAI,CAAC,EAAE,EAAE,CAAC,CAACT,KAAK,CAAC,CAAC,EAAEJ,MAAM,CAAC;IAC9EY,YAAY,CAACoB,IAAI,CAAC;IAClB,IAAIA,IAAI,CAAChC,MAAM,KAAKA,MAAM,EAAEc,UAAU,GAAGkB,IAAI,CAAC;EAChD,CAAC;EAED,MAAME,WAAW,GAAGC,IAAI,CAACC,GAAG,CAACzB,KAAK,CAACX,MAAM,EAAEA,MAAM,GAAG,CAAC,CAAC;EACtD,MAAMqC,QAAQ,GAAGC,OAAO,CAACtB,KAAK,CAAC;EAC/B,MAAMuB,OAAO,GAAG,OAAOvB,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGD,UAAU;EAE9D,oBACEzB,KAAA,CAACN,IAAI;IAACyC,KAAK,EAAE,CAAC;MAAEe,SAAS,EAAE;IAAa,CAAC,EAAEf,KAAK,CAAE;IAAAgB,QAAA,gBAChDnD,KAAA,CAACR,SAAS;MACR4D,OAAO,EAAEA,CAAA,KAAMf,QAAQ,CAACgB,OAAO,EAAEC,KAAK,CAAC,CAAE;MACzC3B,QAAQ,EAAEA,QAAS;MACnBQ,KAAK,EAAE;QAAEoB,QAAQ,EAAE;MAAW,CAAE;MAAAJ,QAAA,gBAEhCrD,IAAA,CAACJ,IAAI;QAACyC,KAAK,EAAE;UAAEqB,aAAa,EAAE,KAAK;UAAEzB;QAAI,CAAE;QAAAoB,QAAA,EACxCM,KAAK,CAACC,IAAI,CAAC;UAAEhD;QAAO,CAAC,CAAC,CAACiD,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;UACpC,MAAMC,QAAQ,GAAGxB,OAAO,IAAIuB,CAAC,KAAKjB,WAAW,IAAI,CAACjB,QAAQ;UAC1D;UACA;UACA,MAAMoC,WAAW,GAAGhB,QAAQ,GACxBX,KAAK,CAAC4B,MAAM,CAACC,QAAQ,CAACvC,KAAK,GAC3BoC,QAAQ,GACN1B,KAAK,CAAC4B,MAAM,CAACE,MAAM,CAACZ,KAAK,GACzBlB,KAAK,CAAC4B,MAAM,CAACE,MAAM,CAACC,OAAO;UACjC,MAAMC,SAAS,GAAGrB,QAAQ,GACtB3C,SAAS,CAACgC,KAAK,CAAC4B,MAAM,CAACC,QAAQ,CAACvC,KAAK,EAAE,IAAI,CAAC,GAC5C,sBAAsB;UAC1B,oBACE5B,IAAA,CAACJ,IAAI;YAEH2E,MAAM,EAAC,iBAAiB;YACxBlC,KAAK,EAAE;cACLmC,KAAK,EAAEzC,SAAS;cAChB0C,MAAM,EAAEzC,UAAU;cAClB0C,YAAY,EAAEpC,KAAK,CAACqC,KAAK,CAACC,IAAI;cAC9BC,WAAW,EAAE,CAAC;cACdZ,WAAW;cACXa,eAAe,EAAEjD,QAAQ,GACrBS,KAAK,CAAC4B,MAAM,CAACrC,QAAQ,CAACkD,UAAU,GAChCzC,KAAK,CAAC4B,MAAM,CAACa,UAAU,CAACV,OAAO;cACnCW,UAAU,EAAE,QAAQ;cACpBC,cAAc,EAAE,QAAQ;cACxBC,OAAO,EAAErD,QAAQ,GAAG,GAAG,GAAG,CAAC;cAC3B,IAAImC,QAAQ,GACR;gBACEmB,SAAS,EAAE,CACT;kBAAEC,OAAO,EAAE,CAAC;kBAAEC,OAAO,EAAE,CAAC;kBAAEC,UAAU,EAAE,CAAC;kBAAEC,cAAc,EAAE,CAAC;kBAAEC,KAAK,EAAElB;gBAAU,CAAC;cAElF,CAAC,GACD,IAAI;YACV,CAAE;YAAAjB,QAAA,eAEFrD,IAAA,CAACF,IAAI;cACH0F,KAAK,EAAE3D,QAAQ,GAAG,UAAU,GAAG,SAAU;cACzCQ,KAAK,EAAE;gBACLH,UAAU,EAAEA,UAAU,IAAII,KAAK,CAACJ,UAAU,CAACuD,OAAO;gBAClDtD,QAAQ;gBACRuD,UAAU,EAAE3C,IAAI,CAAC4C,KAAK,CAACxD,QAAQ,GAAG,IAAI;cACxC,CAAE;cAAAkB,QAAA,EAED9B,KAAK,CAACwC,CAAC,CAAC,IAAI;YAAE,CACX;UAAC,GAhCFA,CAiCD,CAAC;QAEX,CAAC;MAAC,CACE,CAAC,eAEP/D,IAAA,CAACL,SAAS;QACRiG,GAAG,EAAErD,QAAS;QACdhB,KAAK,EAAEA,KAAM;QACbC,YAAY,EAAEkB,YAAa;QAC3BmD,OAAO,EAAEA,CAAA,KAAMpD,UAAU,CAAC,IAAI,CAAE;QAChCqD,MAAM,EAAEA,CAAA,KAAMrD,UAAU,CAAC,KAAK,CAAE;QAChCsD,YAAY,EAAEtE,IAAI,KAAK,SAAS,GAAG,YAAY,GAAG,SAAU;QAC5DuE,cAAc,EAAC,YAAY;QAC3BC,WAAW,EAAE,KAAM;QACnBC,SAAS,EAAEtF,MAAO;QAClBuF,QAAQ,EAAE,CAACtE,QAAS;QACpBuE,WAAW;QACXtE,SAAS,EAAEA,SAAU;QACrBM,kBAAkB,EAAEA,kBAAmB;QACvCC,KAAK,EAAE,CACL;UAAEoB,QAAQ,EAAE,UAAU;UAAE4C,GAAG,EAAE,CAAC;UAAEC,IAAI,EAAE,CAAC;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE,CAAC;UAAEtB,OAAO,EAAE;QAAE,CAAC,EAC1E/E,cAAc;MACd,CACH,CAAC;IAAA,CACO,CAAC,EAEXgD,OAAO,gBACNnD,IAAA,CAACF,IAAI;MACH2G,OAAO,EAAC,WAAW;MACnBjB,KAAK,EAAEvC,QAAQ,GAAGX,KAAK,CAAC4B,MAAM,CAACC,QAAQ,CAACvC,KAAK,GAAG,UAAW;MAC3DS,KAAK,EAAE;QAAEqE,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAE;MAAAtD,QAAA,EAEtCF;IAAO,CACJ,CAAC,GACL,IAAI;EAAA,CACJ,CAAC;AAEX","ignoreList":[]}

package/lib/module/components/CodeField/CodeField.stories.js

@@ -69,4 +69,27 @@ export const Disabled = {
     disabled: true
   })
 };
+// Error state — red cells + focus ring, message below (like Input).
+export const Error = {
+  render: () => /*#__PURE__*/_jsx(Demo, {
+    length: 4,
+    error: "That code is incorrect. Try again."
+  })
+};
+export const ErrorHelperText = {
+  render: () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 24,
+      alignItems: 'flex-start'
+    },
+    children: [/*#__PURE__*/_jsx(Demo, {
+      length: 4,
+      helperText: "Enter the 4-digit code we sent you."
+    }), /*#__PURE__*/_jsx(Demo, {
+      length: 4,
+      error: true,
+      helperText: "Enter the 4-digit code we sent you."
+    })]
+  })
+};
 //# sourceMappingURL=CodeField.stories.js.map

package/lib/module/components/CodeField/CodeField.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","View","CodeField","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","Demo","props","value","setValue","done","setDone","style","gap","alignItems","children","onChangeText","onComplete","variant","color","Default","render","length","Compact","cellWidth","Alphanumeric","mode","Alpha","Disabled","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.stories.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAEhC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,SAAS,QAA4B,gBAAa;AAC3D,SAASC,IAAI,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAER;AACb,CAAkC;AAElC,eAAeM,IAAI;AAGnB,SAASG,IAAIA,CAACC,KAQb,EAAE;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAM,CAACe,IAAI,EAAEC,OAAO,CAAC,GAAGhB,QAAQ,CAAC,EAAE,CAAC;EACpC,oBACEO,KAAA,CAACN,IAAI;IAACgB,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAa,CAAE;IAAAC,QAAA,gBAChDf,IAAA,CAACH,SAAS;MAACW,KAAK,EAAEA,KAAM;MAACQ,YAAY,EAAEP,QAAS;MAACQ,UAAU,EAAEN,OAAQ;MAAA,GAAKJ;IAAK,CAAG,CAAC,eACnFL,KAAA,CAACJ,IAAI;MAACoB,OAAO,EAAC,SAAS;MAACC,KAAK,EAAC,WAAW;MAAAJ,QAAA,GAAC,WAChC,EAACP,KAAK,EAAC,IAAC,EAACE,IAAI,GAAG,gBAAgBA,IAAI,EAAE,GAAG,EAAE;IAAA,CAC/C,CAAC;EAAA,CACH,CAAC;AAEX;;AAEA;AACA,OAAO,MAAMU,OAAc,GAAG;EAAEC,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE;EAAE,CAAE;AAAE,CAAC;AACnE;AACA,OAAO,MAAMC,OAAc,GAAG;EAAEF,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AAC1F,OAAO,MAAMY,YAAmB,GAAG;EACjCJ,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,cAAc;IAACF,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAC7E,CAAC;AACD,OAAO,MAAMc,KAAY,GAAG;EAAEN,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,OAAO;IAACF,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AACrG,OAAO,MAAMe,QAAe,GAAG;EAAEP,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE,CAAE;IAACgB,QAAQ;EAAA,CAAE;AAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["useState","View","CodeField","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","Demo","props","value","setValue","done","setDone","style","gap","alignItems","children","onChangeText","onComplete","variant","color","Default","render","length","Compact","cellWidth","Alphanumeric","mode","Alpha","Disabled","disabled","Error","error","ErrorHelperText","helperText"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CodeField/CodeField.test.js

@@ -74,5 +74,33 @@ describe('CodeField', () => {
     expect(screen.getByText('1')).toBeTruthy();
     expect(screen.getByText('2')).toBeTruthy();
   });
+  it('shows the error message when error is a string', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
+      value: "",
+      onChangeText: () => {},
+      error: "Wrong code"
+    }));
+    expect(screen.getByText('Wrong code')).toBeTruthy();
+  });
+  it('shows helperText, and the error message replaces it when error is a string', () => {
+    const {
+      rerender
+    } = renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
+      value: "",
+      onChangeText: () => {},
+      helperText: "Enter your code"
+    }));
+    expect(screen.getByText('Enter your code')).toBeTruthy();
+    rerender(/*#__PURE__*/_jsx(ThemeProvider, {
+      children: /*#__PURE__*/_jsx(CodeField, {
+        value: "",
+        onChangeText: () => {},
+        helperText: "Enter your code",
+        error: "Wrong code"
+      })
+    }));
+    expect(screen.getByText('Wrong code')).toBeTruthy();
+    expect(screen.queryByText('Enter your code')).toBeNull();
+  });
 });
 //# sourceMappingURL=CodeField.test.js.map

package/lib/module/components/CodeField/CodeField.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","render","screen","fireEvent","CodeField","ThemeProvider","jsx","_jsx","renderWithTheme","ui","children","describe","it","value","onChangeText","length","expect","getAllByTestId","toHaveLength","jest","fn","mode","changeText","getByLabelText","toHaveBeenCalledWith","onComplete","getByText","toBeTruthy"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.test.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","render","screen","fireEvent","CodeField","ThemeProvider","jsx","_jsx","renderWithTheme","ui","children","describe","it","value","onChangeText","length","expect","getAllByTestId","toHaveLength","jest","fn","mode","changeText","getByLabelText","toHaveBeenCalledWith","onComplete","getByText","toBeTruthy","error","rerender","helperText","queryByText","toBeNull"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Keypad/Keypad.js

@@ -0,0 +1,158 @@
+"use strict";
+
+import { Pressable, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { Icon } from "../Icon/Icon.js";
+import { Text } from "../Text/Text.js";
+
+/** The optional key to the left of 0. Hidden unless provided. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ROWS = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']];
+
+/**
+ * Numeric keypad — a 3-column pad decoupled from what it drives (bind it to a
+ * PIN display, an amount, etc. via `value`/`onChangeText`, and put that display
+ * in `header`). Backspace is fixed to the right of 0; the key left of 0 is hidden
+ * unless you pass `extraKey` (custom symbol/icon, action and colors). Width,
+ * key height, gap and digit size are all configurable.
+ */
+export function Keypad({
+  value = '',
+  onChangeText,
+  onKeyPress,
+  maxLength,
+  header,
+  extraKey,
+  keyHeight = 83,
+  gap = 8,
+  width,
+  digitSize = 24,
+  headerGap = 24,
+  disabled = false,
+  style
+}) {
+  const theme = useTheme();
+  const keyStyle = bg => ({
+    flex: 1,
+    height: keyHeight,
+    borderRadius: theme.radii.xl,
+    borderWidth: 1,
+    borderColor: theme.colors.border.strong,
+    backgroundColor: bg ?? theme.colors.action.secondary,
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
+  const pressDigit = digit => {
+    onKeyPress?.(digit);
+    if (maxLength != null && value.length >= maxLength) return;
+    onChangeText?.(value + digit);
+  };
+  const pressBackspace = () => {
+    onKeyPress?.('backspace');
+    onChangeText?.(value.slice(0, -1));
+  };
+  const pressExtra = () => {
+    onKeyPress?.('extra');
+    if (extraKey?.onPress) {
+      extraKey.onPress();
+      return;
+    }
+    if (extraKey?.value != null) {
+      if (maxLength != null && value.length >= maxLength) return;
+      onChangeText?.(value + extraKey.value);
+    }
+  };
+  const DigitKey = ({
+    digit
+  }) => /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => pressDigit(digit),
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityLabel: digit,
+    style: ({
+      pressed
+    }) => [keyStyle(), {
+      opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: "h2",
+      color: theme.colors.action.secondaryForeground,
+      style: {
+        fontSize: digitSize,
+        lineHeight: Math.round(digitSize * 1.35)
+      },
+      children: digit
+    })
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: width ?? '100%',
+      gap
+    }, style],
+    children: [header != null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginBottom: headerGap - gap
+      },
+      children: header
+    }) : null, ROWS.map(row => /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        gap
+      },
+      children: row.map(digit => /*#__PURE__*/_jsx(DigitKey, {
+        digit: digit
+      }, digit))
+    }, row[0])), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap
+      },
+      children: [extraKey ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: pressExtra,
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: extraKey.label ?? 'action',
+        style: ({
+          pressed
+        }) => [keyStyle(extraKey.backgroundColor), {
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+        }],
+        children: extraKey.icon ? /*#__PURE__*/_jsx(Icon, {
+          name: extraKey.icon,
+          size: 24,
+          color: extraKey.color ?? theme.colors.action.secondaryForeground
+        }) : /*#__PURE__*/_jsx(Text, {
+          variant: "h2",
+          color: extraKey.color ?? theme.colors.action.secondaryForeground,
+          style: {
+            fontSize: digitSize,
+            lineHeight: Math.round(digitSize * 1.35)
+          },
+          children: extraKey.label ?? ''
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(DigitKey, {
+        digit: "0"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: pressBackspace,
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: "Backspace",
+        style: ({
+          pressed
+        }) => [keyStyle(), {
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+        }],
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "arrow-left",
+          size: 24,
+          color: theme.colors.action.secondaryForeground
+        })
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=Keypad.js.map

package/lib/module/components/Keypad/Keypad.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","View","useTheme","Icon","Text","jsx","_jsx","jsxs","_jsxs","ROWS","Keypad","value","onChangeText","onKeyPress","maxLength","header","extraKey","keyHeight","gap","width","digitSize","headerGap","disabled","style","theme","keyStyle","bg","flex","height","borderRadius","radii","xl","borderWidth","borderColor","colors","border","strong","backgroundColor","action","secondary","alignItems","justifyContent","pressDigit","digit","length","pressBackspace","slice","pressExtra","onPress","DigitKey","accessibilityRole","accessibilityLabel","pressed","opacity","children","variant","color","secondaryForeground","fontSize","lineHeight","Math","round","marginBottom","map","row","flexDirection","label","icon","name","size"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Keypad/Keypad.tsx"],"mappings":"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","ignoreList":[]}