@telus-uds/components-base 1.65.0 → 1.66.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 26 Oct 2023 19:24:58 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Nov 2023 00:54:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.66.0
+
+Wed, 01 Nov 2023 00:54:31 GMT
+
+### Minor changes
+
+- card type for textInput component  (srikanthkhari@gmail.com)
+- Add responsive `width` variant to `ButtonGroup` (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-theme-tokens to v2.43.0
+
 ## 1.65.0
 
-Thu, 26 Oct 2023 19:24:58 GMT
+Thu, 26 Oct 2023 19:35:09 GMT
 
 ### Minor changes
 

package/lib/TextInput/TextInputBase.js

@@ -23,6 +23,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 var _utils = require("../utils");
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -37,7 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, themeOptions, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive, type) => {
   let {
     backgroundColor,
     color,
@@ -98,7 +100,7 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -152,16 +154,64 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
   };
 };
 
-const selectButtonsContainerStyle = _ref5 => {
+const selectLeftIconContainerStyles = _ref5 => {
   let {
-    buttonsPaddingRight
+    leftIconPaddingBottom
   } = _ref5;
+  return {
+    // not tokenizing paddingLeft as it remains same across brands for now
+    paddingLeft: 10,
+    paddingBottom: leftIconPaddingBottom
+  };
+};
+
+const selectButtonsContainerStyle = _ref6 => {
+  let {
+    buttonsPaddingRight
+  } = _ref6;
   return {
     paddingRight: buttonsPaddingRight
   };
 };
 
-const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const getIcon = function () {
+  let cardNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let {
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const cardType = {
+    1: {
+      icon: visaIcon,
+      testID: 'visa'
+    },
+    2: {
+      icon: amexIcon,
+      testID: 'amex'
+    },
+    4: {
+      icon: masterCardIcon,
+      testID: 'mastercard'
+    }
+  };
+  const firstDigit = cardNumber ? cardNumber[0] : '';
+  const defaultIcon = {
+    icon: defaultCreditIcon,
+    testID: 'default'
+  };
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    icon: selectedIcon.icon,
+    variant: {
+      size: 'large'
+    },
+    testID: selectedIcon.testID
+  });
+};
+
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -180,8 +230,9 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     value,
     variant = {},
+    type,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [showPassword, setShowPassword] = (0, _react.useState)(false);
 
@@ -222,6 +273,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onChange,
     readOnly
   });
+  const {
+    password,
+    numeric
+  } = variant;
+  const isNumeric = numeric || type === 'card' || type === 'number';
+  const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   (0, _react.useEffect)(() => {
     if (_Platform.default.OS === 'web' && pattern && element) {
@@ -234,11 +291,16 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
-    const {
-      numeric
-    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
+
+    if (type === 'card' && filteredText) {
+      const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
+      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g'); // Add a space every 4 digits starting from the 5th position
+
+      filteredText = formattedValue.replace(regex, '$1 ').trim();
+    }
+
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -267,7 +329,11 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     clearButtonIcon: ClearButtonIcon,
     icon: IconComponent,
     passwordShowButtonIcon,
-    passwordHideButtonIcon
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
   } = themeTokens;
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
   const getCopy = (0, _utils.useCopy)({
@@ -287,7 +353,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     }, "clear"));
   }
 
-  if (variant.password) {
+  if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
@@ -313,6 +379,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
+    maxLength: type === 'card' ? 19 : undefined,
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -320,20 +387,29 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, themeOptions, inactive);
+  }, themeOptions, inactive, type);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none",
+      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      children: getIcon(currentValue, {
+        defaultCreditIcon,
+        amexIcon,
+        visaIcon,
+        masterCardIcon
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
-      keyboardType: variant.numeric && 'numeric',
-      inputMode: variant.numeric && 'numeric',
+      keyboardType: isNumeric && 'numeric',
+      inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
-      secureTextEntry: variant.password && !showPassword,
+      secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({ ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
@@ -359,6 +435,7 @@ TextInputBase.propTypes = { ...selectedSystemPropTypes,
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     clearButtonAccessibilityLabel: _propTypes.default.string
   })]),
+  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['password', 'card', 'number'])]),
   height: _propTypes.default.number,
   inactive: _propTypes.default.bool,
   initialValue: _propTypes.default.string,
@@ -387,9 +464,15 @@ const staticStyles = _StyleSheet.default.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 });

package/lib/TextInput/propTypes.js

@@ -18,6 +18,11 @@ const textInputPropTypes = {
    */
   value: _propTypes.default.string,
 
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: _propTypes.default.string,
+
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/lib/utils/props/textInputProps.js

@@ -31,6 +31,7 @@ const textProps = {
 
 const inputValueProps = {
   value: _propTypes.default.string,
+  type: _propTypes.default.string,
   initialValue: _propTypes.default.string,
   readOnly: _propTypes.default.bool,
   inactive: _propTypes.default.bool

package/lib-module/TextInput/TextInputBase.js

@@ -7,13 +7,14 @@ import View from "react-native-web/dist/exports/View";
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import StackView from '../StackView';
 import IconButton from '../IconButton';
+import Icon from '../Icon';
 import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
-const selectInputStyles = (_ref, themeOptions, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive, type) => {
   let {
     backgroundColor,
     color,
@@ -72,7 +73,7 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -126,16 +127,64 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
   };
 };
 
-const selectButtonsContainerStyle = _ref5 => {
+const selectLeftIconContainerStyles = _ref5 => {
   let {
-    buttonsPaddingRight
+    leftIconPaddingBottom
   } = _ref5;
+  return {
+    // not tokenizing paddingLeft as it remains same across brands for now
+    paddingLeft: 10,
+    paddingBottom: leftIconPaddingBottom
+  };
+};
+
+const selectButtonsContainerStyle = _ref6 => {
+  let {
+    buttonsPaddingRight
+  } = _ref6;
   return {
     paddingRight: buttonsPaddingRight
   };
 };
 
-const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const getIcon = function () {
+  let cardNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let {
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const cardType = {
+    1: {
+      icon: visaIcon,
+      testID: 'visa'
+    },
+    2: {
+      icon: amexIcon,
+      testID: 'amex'
+    },
+    4: {
+      icon: masterCardIcon,
+      testID: 'mastercard'
+    }
+  };
+  const firstDigit = cardNumber ? cardNumber[0] : '';
+  const defaultIcon = {
+    icon: defaultCreditIcon,
+    testID: 'default'
+  };
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  return /*#__PURE__*/_jsx(Icon, {
+    icon: selectedIcon.icon,
+    variant: {
+      size: 'large'
+    },
+    testID: selectedIcon.testID
+  });
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -154,8 +203,9 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     value,
     variant = {},
+    type,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
@@ -196,6 +246,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onChange,
     readOnly
   });
+  const {
+    password,
+    numeric
+  } = variant;
+  const isNumeric = numeric || type === 'card' || type === 'number';
+  const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
@@ -208,11 +264,16 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
-    const {
-      numeric
-    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
+
+    if (type === 'card' && filteredText) {
+      const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
+      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g'); // Add a space every 4 digits starting from the 5th position
+
+      filteredText = formattedValue.replace(regex, '$1 ').trim();
+    }
+
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -241,7 +302,11 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     clearButtonIcon: ClearButtonIcon,
     icon: IconComponent,
     passwordShowButtonIcon,
-    passwordHideButtonIcon
+    passwordHideButtonIcon,
+    defaultCreditIcon,
+    amexIcon,
+    visaIcon,
+    masterCardIcon
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
@@ -261,7 +326,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     }, "clear"));
   }
 
-  if (variant.password) {
+  if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
@@ -287,6 +352,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
+    maxLength: type === 'card' ? 19 : undefined,
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -294,20 +360,29 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   } = useTheme();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, themeOptions, inactive);
+  }, themeOptions, inactive, type);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [/*#__PURE__*/_jsx(NativeTextInput, {
+    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      children: getIcon(currentValue, {
+        defaultCreditIcon,
+        amexIcon,
+        visaIcon,
+        masterCardIcon
+      })
+    }), /*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
-      keyboardType: variant.numeric && 'numeric',
-      inputMode: variant.numeric && 'numeric',
+      keyboardType: isNumeric && 'numeric',
+      inputMode: isNumeric && 'numeric',
       style: nativeInputStyle,
-      secureTextEntry: variant.password && !showPassword,
+      secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({ ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
@@ -333,6 +408,7 @@ TextInputBase.propTypes = { ...selectedSystemPropTypes,
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
     clearButtonAccessibilityLabel: PropTypes.string
   })]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
@@ -359,9 +435,15 @@ const staticStyles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 });

package/lib-module/TextInput/propTypes.js

@@ -8,6 +8,11 @@ const textInputPropTypes = {
    */
   value: PropTypes.string,
 
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: PropTypes.string,
+
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/lib-module/utils/props/textInputProps.js

@@ -19,6 +19,7 @@ const textProps = {
 
 const inputValueProps = {
   value: PropTypes.string,
+  type: PropTypes.string,
   initialValue: PropTypes.string,
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.42.0",
+    "@telus-uds/system-theme-tokens": "^2.43.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -73,5 +73,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.65.0"
+  "version": "1.66.0"
 }

package/src/TextInput/TextInputBase.jsx

@@ -4,6 +4,7 @@ import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import StackView from '../StackView'
 import IconButton from '../IconButton'
+import Icon from '../Icon'
 import {
   a11yProps,
   getTokensPropType,
@@ -48,7 +49,8 @@ const selectInputStyles = (
     height
   },
   themeOptions,
-  inactive
+  inactive,
+  type
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -88,7 +90,7 @@ const selectInputStyles = (
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -128,10 +130,29 @@ const selectIconContainerStyles = (
   paddingBottom
 })
 
+const selectLeftIconContainerStyles = ({ leftIconPaddingBottom }) => ({
+  // not tokenizing paddingLeft as it remains same across brands for now
+  paddingLeft: 10,
+  paddingBottom: leftIconPaddingBottom
+})
+
 const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
   paddingRight: buttonsPaddingRight
 })
 
+const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon }) => {
+  const cardType = {
+    1: { icon: visaIcon, testID: 'visa' },
+    2: { icon: amexIcon, testID: 'amex' },
+    4: { icon: masterCardIcon, testID: 'mastercard' }
+  }
+
+  const firstDigit = cardNumber ? cardNumber[0] : ''
+  const defaultIcon = { icon: defaultCreditIcon, testID: 'default' }
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon
+  return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
+}
+
 const TextInputBase = forwardRef(
   (
     {
@@ -152,6 +173,7 @@ const TextInputBase = forwardRef(
       tokens,
       value,
       variant = {},
+      type,
       ...rest
     },
     ref
@@ -187,6 +209,9 @@ const TextInputBase = forwardRef(
       onChange,
       readOnly
     })
+    const { password, numeric } = variant
+    const isNumeric = numeric || type === 'card' || type === 'number'
+    const isPassword = password || type === 'password'
 
     const element = inputRef?.current
     useEffect(() => {
@@ -198,9 +223,14 @@ const TextInputBase = forwardRef(
     }, [element, pattern])
 
     const handleChangeText = (event) => {
-      const { numeric } = variant
       const text = event.nativeEvent?.text || event.target?.value
-      const filteredText = numeric ? text.replace(/[^\d]/g, '') : text
+      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text
+      if (type === 'card' && filteredText) {
+        const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '')
+        const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g')
+        // Add a space every 4 digits starting from the 5th position
+        filteredText = formattedValue.replace(regex, '$1 ').trim()
+      }
       setValue(filteredText, event)
       if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
@@ -224,7 +254,11 @@ const TextInputBase = forwardRef(
       clearButtonIcon: ClearButtonIcon,
       icon: IconComponent,
       passwordShowButtonIcon,
-      passwordHideButtonIcon
+      passwordHideButtonIcon,
+      defaultCreditIcon,
+      amexIcon,
+      visaIcon,
+      masterCardIcon
     } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
@@ -242,7 +276,7 @@ const TextInputBase = forwardRef(
       )
     }
 
-    if (variant.password) {
+    if (isPassword) {
       textInputButtons?.unshift(
         <IconButton
           accessibilityLabel={
@@ -268,27 +302,41 @@ const TextInputBase = forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
+      maxLength: type === 'card' ? 19 : undefined,
       value: isControlled ? currentValue : undefined
     }
 
     const { themeOptions } = useTheme()
-    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
+    const nativeInputStyle = selectInputStyles(
+      { ...themeTokens, height },
+      themeOptions,
+      inactive,
+      type
+    )
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
+        {type === 'card' && (
+          <View
+            pointerEvents="none"
+            style={[staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)]}
+          >
+            {getIcon(currentValue, { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon })}
+          </View>
+        )}
         <NativeTextInput
           ref={inputRef}
-          keyboardType={variant.numeric && 'numeric'}
-          inputMode={variant.numeric && 'numeric'}
+          keyboardType={isNumeric && 'numeric'}
+          inputMode={isNumeric && 'numeric'}
           style={nativeInputStyle}
-          secureTextEntry={variant.password && !showPassword}
+          secureTextEntry={isPassword && !showPassword}
           {...inputProps}
         />
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
             style={[
-              staticStyles.iconContainer,
+              staticStyles.rightIconContainer,
               selectIconContainerStyles({ ...themeTokens, buttonsGapSize }, buttons?.length)
             ]}
           >
@@ -321,6 +369,7 @@ TextInputBase.propTypes = {
       clearButtonAccessibilityLabel: PropTypes.string
     })
   ]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
@@ -349,9 +398,15 @@ const staticStyles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 })

package/src/TextInput/propTypes.js

@@ -8,6 +8,10 @@ const textInputPropTypes = {
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: PropTypes.string,
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: PropTypes.string,
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/src/utils/props/textInputProps.js

@@ -20,6 +20,7 @@ const textProps = {
  */
 const inputValueProps = {
   value: PropTypes.string,
+  type: PropTypes.string,
   initialValue: PropTypes.string,
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool